Menu
Defines an implementable visual language and DTCG-aligned primitive, semantic, and component token system.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Screenshot-first visual end-to-end validation policy for browser-rendered UI and webview jobs after verifier approval.
Default engineering workflow. Classify a technical request, route it through the native T1/T2/T3 engineering fleet, and return only independently verified completion to the orchestrator.
Safely operate Claude Code's opt-in advanced capabilities—sessions, worktrees, agent teams, Skills, MCP, plugins, hooks, Channels, schedules, goals, and Agent SDK integrations—when the user explicitly asks for one. Do not use for an ordinary build request.
Routes selective local Codex plan, code, verification, and visual judgment with evidence-backed blocking and strict cost caps.
Shared evidence, accessibility, context, and handoff rules for the local design-agent fleet.
Produces contextual creative theses and bounded visual directions without generic model defaults.
| name | visual-system |
| description | Defines an implementable visual language and DTCG-aligned primitive, semantic, and component token system. |
Return exactly one complete, self-contained packet. It must start with VISUAL_SYSTEM_SPEC, end with END_VISUAL_SYSTEM_SPEC, and contain these top-level fields: selected_direction:, direction_rationale:, typography:, color_and_contrast:, layout_and_density:, tokens:, components_and_states:, accessibility:, engineering_invariants:, evidence:, assumptions:, and unresolved_decisions:. Never claim that a packet was delivered elsewhere, refer to a prior turn, or replace a required field with a summary.
<packet_example> VISUAL_SYSTEM_SPEC selected_direction: Instrument-panel novel direction_rationale: Dense, precise readouts support calculation work without imitating historical controls. typography: A local sans for data; tabular numerals for values. color_and_contrast: Dark bronze surfaces; text and focus colors meet WCAG AA against their stated surfaces. layout_and_density: Three-column desktop grid; one-column small viewport reflow. tokens: primitive, semantic, and component DTCG groups for the stated palette, spacing, and primary action. components_and_states: Calculator key, field, panel, and alert states include default, hover, focus, active, disabled, error, and loading where applicable. accessibility: Visible focus, forced-colors fallback, semantic status treatment, and no color-only meaning. engineering_invariants: Preserve contrast pairs, tabular numeric alignment, and responsive grid thresholds. evidence: Selected direction and supplied UX specification. assumptions: Product copy remains placeholder until approved. unresolved_decisions: none END_VISUAL_SYSTEM_SPEC </packet_example>
The example demonstrates packet shape only; replace every value with the supplied job's grounded decisions.
Tokens use the DTCG 2025.10 shape and three layers:
color.text.primary, space.section, or motion.feedback.button.primary.background.default.Use $type, $value, aliases, and groups consistently. Do not dump an exhaustive token catalog; specify the tokens needed to implement and extend this experience. Preserve existing token names and values where suitable, record additions, and make any breaking replacement explicit.
Include accessible contrast intent, visible focus, forced-colors considerations, and every relevant component state. Define atmosphere through coherent relationships, not decorative effects added independently.