메뉴
High-craft standards gate for wireframe renders. Enforces pixel discipline, state completeness (default/hover/focus/active/disabled/loading/error), motion budget, and the 'no missing states = not done' rule from impeccable-main.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Workspace-level visual asset and canvas pipeline for generating documents, slides, and posters with rich layouts.
Enforces the full-width header / max-width body / full-width footer chrome pattern. Implements the filter+split rendering technique so background bleeds reach the viewport edge while inner content stays constrained.
Apply high-quality frontend design patterns with token-first implementation rules and NEZAM gate compliance.
Run before any design work on an unfamiliar codebase — extracts full UI context (components, layouts, routes, tokens, pages, extractable components) into 6 structured files in .cursor/context/design-init/.
Enforces the two-step design discipline: Step A pixel-perfect ground-truth reproduction → Step B exactly 2 branch variations. Applies to all design work in NEZAM.
Orchestrates high-performance infinite canvas systems, viewport transforms, and spatial indexing.
| skill_id | impeccable-wireframe-craft |
| name | nezam-Impeccable Wireframe Craft |
| tier | 3 |
| description | High-craft standards gate for wireframe renders. Enforces pixel discipline, state completeness (default/hover/focus/active/disabled/loading/error), motion budget, and the 'no missing states = not done' rule from impeccable-main. |
| version | 1.0.0 |
| updated | "2026-05-28T00:00:00.000Z" |
| changelog | ["1.0.0 — Initial release. Distills impeccable-main into a runnable gate."] |
| references | [".cursor/design/references/impeccable-main/","DESIGN.md"] |
| breaking_changes | false |
A wireframe render is not "done" until it passes this gate. Borrowed standards from impeccable-main: precision, restraint, complete state coverage, motion budget.
Every interactive element must demonstrate all seven states:
| State | Required? |
|---|---|
| default | ✅ |
| hover | ✅ |
| focus (with visible ring) | ✅ |
| active (pressed) | ✅ |
| disabled | ✅ |
| loading (skeleton or inline spinner) | ✅ |
| error | ✅ |
Missing one = not done.
bg-[#...] valuesrgba(...) literals — must be tokensHierarchy comes from surface tones (--ds-surface-bg, --ds-surface-panel, --ds-surface-elevated, --ds-surface-inset). Shadows used only for elevation under modals and toasts — never for buttons or cards.
cubic-bezier(0.32, 0.72, 0, 1) standard, no bounce/elasticopacity, transform only — never width/height/top/leftprefers-reduced-motion: reduce MUST kill transitions and animationsbackground-clip: text)Empty UI shows:
IllusEmpty)Blank pages are a defect.
# Token compliance
pnpm run check:tokens
# State coverage (component tests must include all 7 states)
pnpm --filter design-hub test -- --testPathPattern=states
# Motion audit (no width/height/top/left transitions)
pnpm --filter design-hub lint -- --rule=motion-budget
default and hover states demoedbackdrop-blur on translucent panel)<div />A craft report — markdown summary listing each block, the states demoed, the tokens used, and any gate failures. Lives at .nezam/design-hub/_reports/craft-<date>.md after each render run.