메뉴
Use to create, repair, or enforce design tokens, semantic surfaces, light/dark themes, spacing, radius, typography, component variants, and reusable UI primitives.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Use for product design, UI/UX, branding, high-fidelity web/mobile/desktop interfaces, HTML prototypes, design systems, frontend implementation, and design quality work.
Use for empty states, no-data UI, AI output streaming, thinking steps, loading states, skeletons, progressive disclosure, and conversational product surfaces.
Use after design or implementation to package handoff notes, refactor UI code, split god components, document tokens, and prepare maintainable frontend deliverables.
Use for React Native, Expo SDK 56, NativeWind, iOS/Android UI, mobile UX flows, touch targets, safe areas, and mobile design-system implementation.
Use for interaction design, animations, progressive blur, animated borders, liquid metal accents, transitions, gesture feedback, and motion quality review.
Use before major product, UI/UX, branding, or prototype work to clarify goals, audience, constraints, design system, variations, and deliverables.
SOC 직업 분류 기준
| name | design-system-tokens |
| description | Use to create, repair, or enforce design tokens, semantic surfaces, light/dark themes, spacing, radius, typography, component variants, and reusable UI primitives. |
Use this skill when a task touches themes, tokens, CSS variables, component variants, or system consistency.
Define semantic tokens before styling individual screens:
Every token must have light and dark values. Do not implement a light-only UI unless the user explicitly requests it.
When no style exists, use the Fluid Functionalism-inspired fallback described in codex-design-core/references/implementation-stack.md, then adapt to the product’s audience.
