React TypeScript application with Material-UI for banking signup forms. Focuses on self-contained components, custom hooks, skeleton loading, and UX for non-tech-savvy users with Supabase integration.
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.
A comprehensive development guide for building React TypeScript applications with Material-UI integration, optimized for banking signup forms with Supabase authentication.
**PRIORITY**: Always create self-contained, reusable components with their own state management and styling.
Steps:
1. Define TypeScript interfaces for all component props
2. Implement components as functional components with proper typing
3. Keep components composable and loosely coupled
4. Export as default exports with descriptive names
Example structure:
```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;
```
**PRIORITY**: Extract all data fetching and state management into custom hooks.
Steps:
1. Create hooks prefixed with 'use' for all Supabase operations
2. Return objects with descriptive property names (data, loading, error, actions)
3. Use React Query or SWR for server state management when applicable
4. Implement proper TypeScript typing for parameters and return values
Example hook:
```typescript
const useCustomHook = (param: string) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const fetchData = useCallback(async () => {
// Fetching logic
}, [param]);
useEffect(() => {
fetchData();
}, [fetchData]);
return { data, loading, error, refetch: fetchData };
};
```
**PRIORITY**: Always use Material-UI Skeleton components for loading states instead of spinners.
Steps:
1. Import Skeleton from @mui/material
2. Match skeleton variants to actual content (text, rectangular, circular)
3. Implement progressive loading for complex components
4. Use consistent loading patterns across the app
Example:
```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>
);
```
**PRIORITY**: Add vector illustrations for better UX at key interaction points.
Steps:
1. Use SVG icons from Material-UI or create custom SVG components
2. Implement responsive sizing and accessible attributes
3. Apply proper theming using theme colors
4. Use for empty states, success states, section headers, 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 */}
</svg>
</Box>
);
```
**CRITICAL**: Design for users with limited technical knowledge.
Steps:
1. Use clear, simple language—avoid all technical jargon
2. Add helpful icons to ALL input fields using InputAdornment
3. Include helper text below each field explaining its purpose
4. Add vector illustrations at the start of major sections
5. Provide clear visual feedback (success, error, loading states)
6. Use tooltips for additional context without cluttering UI
7. Implement inline validation with friendly error messages
8. Show progress indicators throughout multi-step processes
Example input field:
```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>
),
}}
/>
```
Example section with illustration:
```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>
```
Apply these principles to all form designs:
1. Use large, easy-to-read fonts from theme typography
2. Provide clear labels with appropriate icons
3. Show example formats in placeholders
4. Explain why information is needed in helper text
5. Group related fields with headings and illustrations
6. Provide immediate validation feedback
7. Use green checkmarks for successfully validated fields
8. Write friendly, non-technical error messages
9. Show password strength indicators
10. Provide "Show/Hide" toggles for password fields
11. Use date pickers instead of manual entry
12. Use dropdowns for limited options
13. Provide autocomplete suggestions
14. Show character counts for fields with limits
Organize code following this structure:
```
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
```
1. Use Supabase Auth hooks for user management
2. Implement proper session handling
3. Handle authentication errors gracefully
4. Use TypeScript types for all user data
1. Create custom hooks for all database operations
2. Implement comprehensive error handling
3. Use optimistic updates when appropriate
4. Always implement proper loading states
```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. Always use theme values from `theme.palette`, `theme.typography`, etc.
2. Use sx prop for component-specific styling
3. Prefer Material-UI components over custom implementations
4. Use appropriate component variants (contained, outlined, text)
5. Implement mobile-first responsive design using breakpoint system
6. Leverage built-in accessibility features
Before committing code, verify:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/rawbank-signup-app-development/raw