---
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.