Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Load this skill when: reviewing component visual quality, auditing component states, writing new component variants, checking hover/focus/active states, checking accessibility of interactive elements, verifying glow correctness, validating transition rules, or checking gradient border technique.
Purpose
This skill gives you the criteria to evaluate WHETHER a component LOOKS correct — not just whether it uses the right tokens, but whether the visual composition is coherent with the Stack-and-Flow system. Every rule here is derived from actual design decisions; none are arbitrary.
Before You Review
Always read (in this order):
docs/COMPONENTS.md — state-by-state spec for every component
docs/DESIGN.md section 5 — component specs and section 4 — surface system
src/styles/theme.css — verify token values before flagging issues
Never flag a value as wrong without checking theme.css first. The token may be exactly correct; the issue may be that a raw value is being used instead of a token.
MCP Artifact Cleanup Gate
Visual review commonly uses Playwright MCP. Its runtime artifacts are useful while investigating but must never survive into a commit.
Before declaring the visual review complete, before handing off for PR review, and always before any commit, forcibly remove MCP-generated artifacts:
rm -rf .playwright-mcp page-*.png page-*.jpeg *.md.playwright-output
git status --short --untracked-files=all
If any MCP artifact still appears in git status after cleanup, stop and report it as a blocker. Do not commit, stage, or ask for review until the workspace is clean of MCP runtime output.
Review Protocol
For every interactive component, check ALL of the following sections.
1. State Completeness
Base state — defined with correct background, border, glow/shadow, and text color
Hover state — defined; transitions tonally upward (lighter, more elevated), never darker or more muted
Focus state — defined with the shared native focus-ring utility, not component-local shadow/glow focus
Active/pressed state — defined; gradient shifts darker + transform: scale(0.98)
Disabled state — opacity: 0.4 + cursor: not-allowed + pointer-events: none — no color/grey substitution
2. Glow Correctness
Button Primary (always-on, 4-layer):
Layer 1 — tight ring: 0 0 0 1.5px rgba(255, 60, 90, 0.5) — present at base
Layer 2 — near glow: 0 0 16px 4px rgba(255, 0, 54, 0.45) — present at base
Layer 3 — far dispersal: 0 0 40px 6px rgba(255, 0, 54, 0.18) — present at base
Layer 4 — inset top highlight: inset 0 1px 0 rgba(255, 255, 255, 0.15) — present at base
Hover amplifies all 4 layers: ring → 0.7 opacity, near → 22px/0.65, far → 55px/0.28, inset → 0.20
Focus-visible uses focus-visible:focus-ring while existing decorative glow layers remain unchanged
Button Secondary (always-on, 3-layer, no tight ring):
border-radius: inherit on ::before is CRITICAL — without it the gradient clips to a rectangle
Gradient borders only on: secondary/ghost buttons, inputs in focus state, active accent cards. NEVER on separators, tables, layout containers
6. Accessibility
Buttons:
Visual height follows the shared control scale (24px, 32px, 40px, 48px) for comparable action controls; compact/dense exceptions must be explicitly documented
touch-target-min (44px) is required only for touch-first surfaces or hit-area wrappers; do not flag every visual height under 44px as wrong by default
Focus ring: shared focus-ring utility with outline: 2px solid var(--color-primary) and outline-offset: 2px
Focus visibility does not depend on box-shadow, decorative glow, or emphasis mode
outline: none must ALWAYS be paired with focus-visible:focus-ring or an equivalent wrapper/peer/group selector — never naked
Disabled: opacity: 0.4 only — no grey substitution — colors stay identical to base
Primary button: white #ffffff text over red gradient — always passes AA in both modes
Secondary dark mode: color: #ffffff — passes because border defines affordance on dark bg
Secondary light mode: color: #cc0030 — NEVER #ff0036 in light mode (only ~3.9:1 on white, fails AA)
role="button" if implemented as non-<button> element
Inputs:
Form fields such as Input and Select use the semantic form-field height scale (sm=h-form-field-sm, md=h-form-field-md, lg=h-form-field-lg) because label/floating-label layout and field alignment are part of the pattern
Do not force h-control-* onto labeled form fields; reserve control-* for comparable action controls like Button/IconButton/CTA Link
Apply touch-target-min only when the context requires a larger touch surface than the visual control itself
Field wrapper uses the same focus-ring utility when it contains a :focus-visible input/control
Error state changes border + shadow only — NOT input text color
Info state changes border + shadow only, using semantic blue tokens instead of neutral helper styling
Info helper text/icon use semantic info color (text-info-light / dark:text-info) instead of muted secondary text
Error message: #ff0036 dark / #db143c light — check contrast on surface background
Labels always visible — never placeholder-only inputs
Placeholder #6a6b6c — WCAG exempts placeholder (informational, not functional)
Ambient background glows (glowPulse, spotBreath) set animation: none under reduced-motion
Maximum interactive transition duration: 300ms — scroll fade-ins may go up to 560ms
Color Contrast:
Dark background is #060C13 (azul-slate, H215 S50) — NEVER #000000 (lifeless, chromatic mismatch)
#ff0036 on #060C13 = 4.96:1 AA ✅ — #ff0036 on #ffffff = ~3.9:1 ❌ FAIL
In light mode: minimum red is #cc0030 (5.4:1 on white ✅) or #db143c (4.7:1 on white ✅)
Grid background only on page-level canvas — NEVER inside cards, modals, or dropdowns
Severity Levels
When reporting issues, classify every finding with:
CRITICAL — Accessibility failure: missing focus ring, insufficient contrast, no disabled state, missing required touch target in a touch-first context, or outline: none without focus-visible:focus-ring/equivalent
MAJOR — Compositional rule violation: blur+gradient on same element, wrong glow layer count, flat border where gradient required, border-image used, transition: all used, layout property animated
MINOR — Inconsistency with spec: wrong duration (e.g. 300ms instead of 250ms for button), missing transition property (e.g. border-color absent on secondary), hover tint value off, or undocumented deviation from the shared control sizing scale
SUGGESTION — Enhancement opportunity: adding will-change to entrance animations, using token variable instead of raw value
Reporting Format
For each issue found:
[SEVERITY] Component — State/Element
Problem: [What is wrong — specific property and value]
Expected: [What the spec says — exact value from COMPONENTS.md]
Found: [What is in the code — exact value]
Rule: [Which compositional rule or section this violates]
Example:
[CRITICAL] Button.Primary — :focus-visible
Problem: Uses component-local `focus-visible:shadow-*`, so focus visibility can drift from the shared contract
Expected: `focus-visible:focus-ring` applying `outline: 2px solid var(--color-primary)` and `outline-offset: 2px`
Found: `focus-visible:shadow-glow-focus-light dark:focus-visible:shadow-glow-focus-dark`
Rule: COMPONENTS.md Rule 7 — Focus rings use the native `focus-ring` utility
Compact Rules (for injection into sub-agents)
See compact-rules.md in this directory for the injectable condensed version.
The compact rules file is under 400 words and can be prepended to any sub-agent prompt to give it visual review context without loading the full skill.
