Build self-contained React TypeScript components with Material-UI, Supabase integration, and excellent UX for non-technical users. Emphasizes skeleton loading, vector illustrations, and accessible forms.
This skill has been flagged as potentially dangerous. It contains patterns that could compromise your security or manipulate AI behavior.Safety score: 35/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Build a React TypeScript banking signup application with Material-UI integration and Supabase authentication, optimized for non-tech-savvy users.
Always create self-contained, reusable components with their own state management and styling.
**Component Structure:**
**Example:**
```typescript
interface ComponentProps {
title: string;
onSubmit: (data: FormData) => void;
loading?: boolean;
}
const ComponentName: React.FC<ComponentProps> = ({ title, onSubmit, loading = false }) => {
// Component logic
return (
// JSX
);
};
export default ComponentName;
```
Extract all data fetching and state management into custom hooks.
**Hook Patterns:**
**Example:**
```typescript
const useCustomHook = (param: string) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const fetchData = useCallback(async () => {
// Data fetching logic
}, [param]);
useEffect(() => {
fetchData();
}, [fetchData]);
return { data, loading, error, refetch: fetchData };
};
```
Always use Material-UI Skeleton components for loading states instead of spinners.
**Implementation:**
```typescript
import { Skeleton } from "@mui/material";
const LoadingComponent = () => (
<Box>
<Skeleton variant="text" width="60%" height={40} />
<Skeleton variant="rectangular" width="100%" height={200} sx={{ mt: 2 }} />
<Skeleton variant="circular" width={40} height={40} sx={{ mt: 2 }} />
</Box>
);
```
Add vector illustrations for better UX in empty states, success states, and onboarding.
**Example:**
```typescript
const IllustrationIcon: React.FC<{ size?: number; color?: string }> = ({
size = 64,
color = "primary.main",
}) => (
<Box sx={{ width: size, height: size, color }}>
<svg viewBox="0 0 24 24" fill="currentColor">
{/* SVG path data */}
</svg>
</Box>
);
```
**PRIORITY Guidelines:**
**Input Field Example:**
```typescript
<TextField
label="Numéro de téléphone"
placeholder="+243 XXX XXX XXX"
helperText="Nous utiliserons ce numéro pour vous envoyer des notifications importantes"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PhoneIcon color="primary" />
</InputAdornment>
),
}}
/>
```
**Section with Illustration Example:**
```typescript
<Box sx={{ textAlign: 'center', mb: 3 }}>
<PersonIcon sx={{ fontSize: 80, color: 'primary.main', mb: 2 }} />
<Typography variant="h5" gutterBottom>
Informations Personnelles
</Typography>
<Typography variant="body2" color="text.secondary">
Ces informations nous aident à créer votre compte en toute sécurité
</Typography>
</Box>
```
**Form UX Guidelines:**
```
src/
├── components/ # Self-contained UI components
│ ├── forms/ # Form-specific components
│ ├── layout/ # Layout components
│ └── ui/ # Reusable UI components
├── hooks/ # Custom hooks for data access
│ ├── useAuth.ts # Authentication hook
│ ├── useForm.ts # Form management hook
│ └── useSupabase.ts # Supabase operations hook
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
├── theme/ # Material-UI theme configuration
└── assets/ # Static assets including SVGs
```
```typescript
const FormComponent: React.FC<FormProps> = ({ onSubmit, initialData }) => {
const { data, loading, error, handleSubmit } = useForm(initialData);
if (loading) return <FormSkeleton />;
return <form onSubmit={handleSubmit}>{/* Form fields */}</form>;
};
```
```typescript
const DataComponent: React.FC<DataProps> = ({ dataId }) => {
const { data, loading, error } = useData(dataId);
if (loading) return <DataSkeleton />;
if (error) return <ErrorIllustration />;
if (!data) return <EmptyStateIllustration />;
return <DataDisplay data={data} />;
};
```
```typescript
const AuthComponent: React.FC = () => {
const { user, loading, signIn, signOut } = useAuth();
if (loading) return <AuthSkeleton />;
return user ? <UserDashboard /> : <SignInForm />;
};
```
1. Check if similar component exists
2. Determine if it should be self-contained
3. Plan props interface
4. Consider loading states needed
1. Identify data access pattern
2. Determine parameters and return values
3. Plan error handling strategy
4. Consider caching and optimization
1. Identify content to be loaded
2. Design matching skeleton components
3. Implement progressive loading if needed
4. Test loading states thoroughly
1. Determine illustration purpose
2. Choose appropriate SVG format
3. Implement proper theming
4. Test accessibility and responsiveness
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/rawbank-signup-app-react-typescript-with-material-ui/raw