UI component patterns for React 19, shadcn/ui, and Tailwind. Use when working on files in src/components/.
Scanned 9/27/2026
Skills Directorynpx -y skills add David-Li0406/meta-skill-evloving --skill components-2 --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Components 2?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/david-li0406-components-2)More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.
---
name: components
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
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
