frontend-design-system-implementationlisted

# Frontend Design System Implementation Skill ## Skill Overview This skill guides the implementation of forms and UI components using the centralized Apple-inspired design system in the Notaire frontend. ## When to Use This Skill Use this skill when: - Creating or updating form pages - Building new UI components - Styling input fields, buttons, cards, or modals - Updating existing forms to match the design system - Need to apply colors, spacing, typography, or shadows ## Quick Start ### 1. Access the Theme Tokens ```typescript // In your component file import { theme } from "@/theme/tokens"; // Use in JSX <div style={{ color: theme.colors.primary[600], padding: theme.spacing[4], borderRadius: theme.borderRadius.lg, }}> Content </div> ``` ### 2. Use Form Patterns Every form must use the form pattern components: ```tsx import { FormContainer, FormField, FormSection, FormActions, FormHeader, } from "@/theme/form-patterns"; export function MyForm() { return ( <FormContainer> <FormHeader title="Form Title" description="Form description" /> <FormSection title="Section Title" subtitle="Section description"> <FormField label="Field Label" required> <Input placeholder="..." /> </FormField> </FormSection> <FormActions align="right"> <Button variant="secondary">Cancel</Button> <Button variant="default">Submit</Button> </FormActions> </FormContainer> ); } ``` ### 3.