القائمة
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.