메뉴
Use when setting up a project's visual primitives — colors, spacing, radii, type scale — as variables, so the agent never hard-codes hex values or invents inconsistent spacing across pages.
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-tokens |
| description | Use when setting up a project's visual primitives — colors, spacing, radii, type scale — as variables, so the agent never hard-codes hex values or invents inconsistent spacing across pages. |
The visual primitives, defined once as variables. Pull them from the design and the agent uses these exact values everywhere — no hard-coded hex, no off-scale spacing, no per-page inconsistency.
Lives at context/ui-tokens.md, mirrored into your real CSS variables (e.g. globals.css) before any component is built.
--bg, --fg, --accent, not --blue-500).Define them here, then put the same values in your stylesheet as CSS variables first thing. Every later page references the variables.
Add a token when a new primitive appears; never let a raw hex value live in a component.