semillero-2-AI-ATS/.agents/rules/frontend-design.md
2026-06-08 09:58:18 -04:00

1.2 KiB

Frontend Design Rules

Routing Rule

ROUTING RULE: You must structure the Next.js App Router strictly by business domains. The allowed directories are exactly: /app/(dashboard)/jobs, /app/(dashboard)/candidates, /app/(dashboard)/interviews, and /app/(dashboard)/workflows.

Styling Whitelist

STYLING WHITELIST: You are restricted to a neutral, professional Human Resources design system. You must ONLY use the following Tailwind CSS tokens:

  • Backgrounds: bg-slate-50 for main layouts, bg-white for cards/surfaces.
  • Text: text-slate-900 for headings, text-slate-600 for body text, text-slate-500 for secondary labels.
  • Primary Actions (Buttons/Links): bg-blue-600 for backgrounds, hover:bg-blue-700 for hover states, text-white for text.
  • Borders & Dividers: border-slate-200.
  • Border Radius: strictly rounded-md or rounded-lg. Do not use full rounding unless it is an avatar.
  • Shadows: strictly shadow-sm for cards, shadow-md for modals/dropdowns.

UI Component Rule

UI COMPONENT RULE: Build and reuse standard components (e.g., <PrimaryButton>, <StatusBadge>, <DataCard>). Do not invent new visual styles outside of the allowed tokens.