UI component patterns for React 19, shadcn/ui, and Tailwind. Use when working on files in src/components/.
--- name: components-0bee223818f6 description: UI component patterns for React 19, shadcn/ui, and Tailwind. Use when working on files in src/components/. --- # Components Guidelines ## Patterns - `"use client"` only if using hooks/interactivity - Export interface with `Props` suffix, document props with JSDoc - Always include optional `className` prop, use `cn()` for merging ## Styling - Tailwind only - no CSS modules or styled-components - Use shadcn/ui tokens: `text-muted-foreground`, `bg-background`, etc. - All components must support dark mode via `dark:` prefix ## State - **Local**: `useState` for UI-only state (dropdowns, modals) - **CRDT**: `useVaultAction`/`useActiveTransactions` for data mutations - **URL**: `useSearchParams` for filters that should persist ## Performance - `useMemo`/`useCallback` for expensive computations and callbacks to memoized children - Virtualize long lists (TransactionTable already does this) - Avoid inline object/array literals in JSX props ## Accessibility - Semantic HTML, aria-labels on icon-only buttons - Keyboard navigation, focus management in modals--- name: components-0bee223818f6 description: UI component patterns for React 19, shadcn/ui, and Tailwind. Use when working on files in src/components/. --- # Components Guidelines ## Patterns - `"use client"` only if using hooks/interactivity - Export interface with `Props` suffix, document props with JSDoc - Always include optional `className` prop, use `cn()` for merging ## Styling - Tailwind only - no CSS modules or styled-components - Use shadcn/ui tokens: `text-muted-foreground`, `bg-background`, etc. - All components must support dark mode via `dark:` prefix ## State - **Local**: `useState` for UI-only state (dropdowns, modals) - **CRDT**: `useVaultAction`/`useActiveTransactions` for data mutations - **URL**: `useSearchParams` for filters that should persist ## Performance - `useMemo`/`useCallback` for expensive computations and callbacks to memoized children - Virtualize long lists (TransactionTable already does this) - Avoid inline object/array literals in JSX props ## Accessibility - Semantic HTML, aria-labels on icon-only buttons - Keyboard navigation, focus management in modals
Imported from the listed AgentSkill.sh category. Complete supplied package files and notices are retained. Required external tools and credentials are not installed. No bundled code was executed during import. Individual agent task behavior has not been tested.