27 lines
1.1 KiB
Markdown
27 lines
1.1 KiB
Markdown
---
|
|
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.
|