developer-skill

name	developer-skill
description	Guidelines for implementing whitelisted Tailwind CSS styling and Next.js App Router layout/page components.

Developer Skill

This skill guides the implementation of Next.js frontend pages, whitelisted styles, and dry React components.

Styling System Whitelist

You must restrict colors and design tokens to:

• Backgrounds: bg-slate-50 (layouts), bg-white (cards/surfaces)
• Text: text-slate-900 (headings), text-slate-600 (body), text-slate-500 (secondary labels)
• Actions: bg-blue-600 (primary buttons), hover:bg-blue-700 (hovers), text-white (button text)
• Dividers: border-slate-200
• Radii: rounded-md or rounded-lg
• Shadows: shadow-sm (cards), shadow-md (modals)

Domain Layout Structure

Strictly align routes with business domains:

• /app/(dashboard)/jobs
• /app/(dashboard)/candidates
• /app/(dashboard)/interviews
• /app/(dashboard)/workflows

Type Safety

Ensure all page exports and component props are strictly typed. Avoid any types. Ensure linter rules are satisfied.