Menu
Use this skill when building dashboard UI with Tailwind v4 + shadcn/ui and you want consistent layouts, components, and patterns.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use this skill when you need to diagnose and fix React 19 performance issues (render churn, slow updates, Suspense/Transitions, memoization, profiling, and React Compiler).
Write clean, behavior-focused unit/integration tests that remain trustworthy when code is written or modified by agents (prevents “test weakening”, enforces invariants, and adds CI guardrails).
Use this skill when you are creating or updating Agent Skills in your project (structure, YAML frontmatter, naming, and progressive disclosure).
Use this skill when designing or refactoring boundaries, responsibilities, and change drivers using practical software architecture “hard parts” thinking + SRP.
Use this skill when you need a Bun runbook (dev, build, lint, typecheck, tests, migrations, and verification steps).
Use this skill when you need a thorough code hygiene pass (dead code, lint escapes, consistency, formatting drift, and subtle smells) on touched files.
| 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. |
Use this skill when building or updating UI components. Stack: Tailwind v4, shadcn/ui primitives in components/ui, plus app-specific dashboard shells.
app/[locale]/(dashboard)/...; use existing layout.tsx with sidebar/header.components/ui primitives (Button, Card, Input, Select, Dropdown, Badge, etc.).cn helper from @/lib/utils for conditional classes.useFormStatus in client components when needed.gap-4, p-4/6/8, text-sm/md.Label component.messages/*.json with useTranslations or getTranslations./{locale}/...).bun run lint after UI changes. Keep client components minimal.'use client' components leaf-ish; don’t mark whole pages/layouts as client just for a small interaction.Reference: .github/skills/nextjs-cost-performance/SKILL.md
components/ui/*components/dashboard/*messages/en.json, messages/de.json