tailwind-ui-patterns

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