component-library

# Component Library Standards Skill ## When to Use Use when you're: - Creating new UI components - Refactoring existing components for reusability - Reviewing component architecture - Setting up shared component patterns - Optimizing component performance ## Quick Reference ### Naming - Files: PascalCase (`Button.tsx`) - Props: `ComponentNameProps` interface - Hooks: `use-` prefix (`use-auth.ts`) ### Structure ```typescript 'use client'; // Only if needed // Imports: types → hooks → utils → components export interface MyComponentProps { ... } export default function MyComponent({ ... }: MyComponentProps) { ... } ``` ### Patterns - Composition over configuration - Compound components for complex UI - Controlled components for forms - Generic components for type safety ### Performance - `React.memo` for pure components - `useMemo` / `useCallback` for expensive operations - `lazy` + `Suspense` for code splitting - `react-window` for virtualization ### Accessibility - Semantic HTML (`button`, `nav`, not `div`) - ARIA labels for icons - Keyboard navigation support - Focus states visible ## References - [Full guide: Patterns, styling, TypeScript, testing, documentation](references/full-guide.md)