| name | tailwind-ui-patterns |
| description | Use this skill when building dashboard UI with Tailwind v4 + shadcn/ui and you want consistent layouts, components, and patterns. |
Tailwind UI Skill
Use this skill when building or updating UI components. Stack: Tailwind v4 + shadcn/ui (optional) + your app’s existing layout/shell patterns.
Layout & shells
- Follow your project’s App Router structure (route groups, layouts, locale prefixes if used).
- Keep pages mostly server components; add client islands only where interactivity is needed.
Components
- Prefer existing
components/ui primitives (Button, Card, Input, Select, Dropdown, Badge, etc.).
- Use
cn helper from @/lib/utils for conditional classes.
- Keep forms simple with Server Actions; wire submit buttons with
useFormStatus in client components when needed.
Styling rules
- Use Tailwind utility-first. Co-locate small style tweaks instead of new global CSS.
- Spacing scale: prefer
gap-4, p-4/6/8, text-sm/md.
- Dark mode: follow existing theme tokens (inherit from root). Avoid hardcoded colors.
Accessibility
- Use semantic elements; label inputs with
Label component.
- Ensure keyboard focus, aria labels for icons/buttons, and proper heading structure.
i18n
- Do not hardcode strings; pull from
messages/*.json with useTranslations or getTranslations.
- Keep locale in links (
/{locale}/...).
Testing & linting
- Run
bun run lint after UI changes. Keep client components minimal.
Cost & performance notes
- Keep
'use client' components leaf-ish; don’t mark whole pages/layouts as client just for a small interaction.
- Avoid importing heavy libraries (charts/date libs) into client components unless required.
- Prefer streaming with Suspense for slow sections instead of blocking the whole page.
Reference: nextjs-cost-performance skill.
References
- UI primitives: commonly
components/ui/*
- Layout/shell components: wherever your project keeps them
- Messages: your message catalogs (if present)
