frontend-visual-systems
Trigger Boundary
Frontend visual direction, design tokens, typography, palette, icon, layout, density, and motion brief.
Use this aggregate Codex App skill when the task matches one of the source workflows below.
Source Workflows
frontend-visual-systems: Convert frontend references and product intent into design tokens, visual direction, palette, typography, icon, layout, density, and motion rules for implementation by a frontend builder. Reference: _src/system/source.mdvisual-direction: Choose and execute a deliberate frontend visual direction across typography, palette, structure, texture, imagery, and composition. Use when designing or restyling frontend UI and avoiding generic AI-looking output. Reference: _src/direction/source.mddesign-system-tokens: Create or refine frontend design systems: primitive, semantic, and component tokens; CSS variables; Tailwind theme config; typography scales; spacing; component states; brand consistency. Use when making reusable UI systems or aligning multiple screens. Reference: _src/tokens/source.md
Workflow
- Choose the source workflow whose trigger boundary best matches the user request.
- Read that source workflow's
source.md before acting.
- Load only the needed files under that workflow's copied references, scripts, assets, or evals.
- Follow the source workflow unless the current project gives stricter instructions.
1---2name: frontend-visual-systems-23description: Frontend visual direction, design tokens, typography, palette, icon, layout, density, and motion brief.4---56# frontend-visual-systems78## Trigger Boundary910Frontend visual direction, design tokens, typography, palette, icon, layout, density, and motion brief.1112Use this aggregate Codex App skill when the task matches one of the source workflows below.1314## Source Workflows1516- `frontend-visual-systems`: Convert frontend references and product intent into design tokens, visual direction, palette, typography, icon, layout, density, and motion rules for implementation by a frontend builder. Reference: `_src/system/source.md`17- `visual-direction`: Choose and execute a deliberate frontend visual direction across typography, palette, structure, texture, imagery, and composition. Use when designing or restyling frontend UI and avoiding generic AI-looking output. Reference: `_src/direction/source.md`18- `design-system-tokens`: Create or refine frontend design systems: primitive, semantic, and component tokens; CSS variables; Tailwind theme config; typography scales; spacing; component states; brand consistency. Use when making reusable UI systems or aligning multiple screens. Reference: `_src/tokens/source.md`1920## Workflow21221. Choose the source workflow whose trigger boundary best matches the user request.232. Read that source workflow's `source.md` before acting.243. Load only the needed files under that workflow's copied references, scripts, assets, or evals.254. Follow the source workflow unless the current project gives stricter instructions.
YuukiAS