# Frontend Visual Systems

> Frontend visual direction, design tokens, typography, palette, icon, layout, density, and motion brief.

- Skill: `yuukias/frontend-visual-systems-2` (Agent Skill, multi-file: 31 files)
- Install (CLI): `npx skillmds@latest add yuukias/frontend-visual-systems-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yuukias/frontend-visual-systems-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: YuukiAS (https://skillmd.com/u/yuukias)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/yuukias/frontend-visual-systems-2

---


# 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.md`
- `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`
- `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`

## Workflow

1. Choose the source workflow whose trigger boundary best matches the user request.
2. Read that source workflow's `source.md` before acting.
3. Load only the needed files under that workflow's copied references, scripts, assets, or evals.
4. Follow the source workflow unless the current project gives stricter instructions.