UI Skill Suite

Purpose: enable agentic, code-first UI development with consistent design and deterministic git workflows.

Skills

• ui-design-system: define and enforce visual tokens, spacing, typography, and component conventions.
• ui-page-scaffold: create/modify feature pages using shared layout and UI primitives.
• ui-data-binding: connect UI actions to API routes, n8n webhooks, and DB-backed endpoints.
• ui-quality-gates: lint/build/test checks and responsive sanity checks.

Uniformity Rules

• Use shared tokens from ui/src/styles/tokens.css.
• Prefer shadcn components from ui/src/components/ui/*.
• Keep page layout shell consistent (PageHeader, card sections, action bars).
• Keep copy tone consistent: concise labels, explicit action names.
• Avoid one-off colors and spacing values; use utility classes with token variables.

References:

• ui/STYLE_GUIDE.md
• skills/ui/docs/ui-design-checklist.md

Output Contract

{
  "skill": "ui-design-system|ui-page-scaffold|ui-data-binding|ui-quality-gates",
  "status": "success|failed|blocked",
  "changes": ["path"],
  "evidence": ["command-or-file"],
  "warnings": ["string"],
  "nextActions": ["string"]
}