Tailwind UI

Use this skill when building or restyling UI with Tailwind CSS in a Next.js App Router app.

Goal

Ship an interface that looks designed, not themed. Prefer a small set of surfaces, one accent, and explicit states.

Defaults (SkillPack studio)

• Background: near-black (#0c0c0e)
• Panel: #141417
• Line: #2a2a30
• Accent: brass #d4a054 — not purple, not generic indigo
• Type: serif display + sans body
• Radius: 12–16px on cards, 999px only on chips/pills

Do not introduce a second accent unless the product already has one.

Method

1. Write the information hierarchy first: title, proof, action. Then style.
2. Use spacing on a 4/8 scale. Prefer gap and padding over mystery margins.
3. Every interactive element needs default, hover, focus-visible, disabled, and loading.
4. Forms: label above input, error under the field, autocomplete set, submit disabled while pending.
5. Dark UI still needs contrast. Body text ≥ zinc-200 on ink. Muted text zinc-400, never zinc-600 on black.

Component checklist

• Cards share one padding and one border treatment
• Badges (free/pro) are short and high-contrast
• Primary CTA is brass fill + ink text; secondary is ghost + line
• Empty, loading, and error states exist before you polish hover
• Mobile: stack; desktop: grid. Check 390 and 1280 widths

Anti-patterns

• Rainbow gradients, glassmorphism, and Inter-on-everything
• shadow-2xl on every card
• Purple-to-blue "AI" gradients
• Icon-only buttons without aria-label
• Truncating critical copy on mobile without a way to read it

When changing an existing screen

Diff the visual system against nearby pages. If you change how plan state is written, visit every page that reads it (/, /skills, /account).