About this skill

Problem It Addresses

In One Design Next projects, models can skip design-system rules and assemble interfaces with div, native controls, default Tailwind colors, gradients, and icon libraries.
Page implementation, component audit, and design consultation are spread across multiple docs, so the model must decide which GUIDE.md to load, whether existing blocks apply, and whether the project is ODN-based.

Router entry point: maps intents such as “analyze a requirement”, “implement a page”, “audit”, “polish”, and “query a component” to the matching sub-skill instead of answering ad hoc.
Prechecks: before implementation, checks whether package.json includes one-design-next; if not, scaffolds a project first.
Block-first rule: before writing .tsx, scans keywords such as touchpoint, 5R, ranking, and date range, then checks p2-block-catalog and reuses existing blocks.
Hard constraints: bans gradients, glassmorphism, default Tailwind colors, hard-coded color values, and external icon libraries; tables, forms, modals, and date pickers must use ODN components.
Self-check loop: reviews output for anti-patterns such as gradient, lucide-react, bare <table>, and bare <form>, then provides concrete next actions.

Best for B-end page design, implementation, audit, and component queries based on one-design-next.
Not a general-purpose UI generator; marketing landing pages, animated particles, and gradient heroes require a different design intent.
In readonly mode, it emits code and suggestions without modifying component libraries or knowledge files.

When a page request arrives in an ODN project, scaffold a Vite + React + TypeScript project before design analysis.
Before building a dashboard, scan for touchpoint, 5R, ranking, and date-range keywords and reuse blocks from p2-block-catalog.
Before handoff, audit code for gradients, default Tailwind colors, lucide icons, bare table/form, and other ODN anti-patterns.
When asking how to use Button, tokens, icons, or GenUI components, read p2-one-design docs and answer directly.

Frontend engineers maintaining One Design Next projects who need ODN-compliant pages and components.
Developers building B-end dashboards who want to reuse existing blocks instead of hand-coding controls.
Frontend leads reviewing code for Tailwind tokens, component selection, and visual anti-patterns.
Engineers querying Button, token, icon, or GenUI usage who need direct, documentation-backed answers.