メニュー
Use when defining how a product's UI looks and behaves — layout, cards, buttons, badges, typography — so every page feels like one product instead of the agent inventing a new style each session.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when setting up a project's structure, or when the agent needs the stack, folder layout, data flow, schemas, and the hard boundary rules it must never cross. Use when code keeps crossing layers (UI logic in API routes, DB calls in components).
Use when planning what to build and in what order — splitting a project into sequenced, scoped feature phases so the agent never has to decide "what's next" on its own. Use when work feels like random feature-hopping.
Use when establishing or enforcing how code is written in a project — naming, conventions, file structure, error handling — so the agent stays consistent across sessions instead of drifting into its own style by week two.
Use when a project depends on third-party libraries and the agent needs project-specific usage rules — and must check for an MCP server or current docs — before coding against a library it only half-remembers.
Use when tracking build progress across sessions — a living checklist updated as features complete, so a new session knows exactly where work left off without re-explaining.
Use when starting a new project, or when the agent lacks a clear picture of what's being built, who it's for, and what is explicitly out of scope. Use when a build keeps producing things nobody asked for.
| name | ui-rules |
| description | Use when defining how a product's UI looks and behaves — layout, cards, buttons, badges, typography — so every page feels like one product instead of the agent inventing a new style each session. |
ui-tokens are the primitives; ui-rules is how they combine. This is your design system in prose — the behavior and look of components — so every page belongs to the same product even with no Figma file.
Lives at context/ui-rules.md.
ui-tokens, when defining the look/feel.Write the visual rules once. If you have a Figma design, feed it through a Figma MCP (or to the agent) and have it generate this file.
Update when a pattern changes; new concrete components get captured in ui-registry (via imprint), not here. ui-rules = the principles; ui-registry = the instances.
ui-registry.