| 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 (Freelancerino)
Use this skill when building or updating UI components. Stack: Tailwind v4, shadcn/ui primitives in components/ui, plus app-specific dashboard shells.
Layout & shells
- Dashboard pages live under
app/[locale]/(dashboard)/...; use existing layout.tsx with sidebar/header.
- 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: .github/skills/nextjs-cost-performance/SKILL.md
References
- UI primitives:
components/ui/*
- Dashboard shell:
components/dashboard/*
- Messages:
messages/en.json, messages/de.json
