.agents/skills/semantic-color/SKILL.md
Generate a complete semantic color token set from a brand palette. Produces surface, text, border, accent, feedback, and interactive state tokens.
npx skillsauth add Dragoon0x/optik semantic-colorInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
From a brand palette (or a single color via /palette), generate:
Surface tokens: surface, surface-elevated, surface-sunken, surface-overlay Text tokens: text, text-secondary, text-muted, text-inverse Border tokens: border, border-strong, border-subtle Accent tokens: accent, accent-hover, accent-pressed, accent-subtle Feedback tokens: danger, danger-subtle, success, success-subtle, warning, warning-subtle, info, info-subtle Interactive tokens: focus-ring, disabled, disabled-text
All tokens must have dark mode variants. Output as CSS custom properties inside :root and @media (prefers-color-scheme: dark).
testing
Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.
testing
Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.
content-media
--- name: animate description: Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter. user-invokable: true --- # /animate — Purposeful Motion Add motion that serves a purpose: **Page load:** Staggered fade-up reveals for above-fold content. Use animation-delay in 80-120ms increments. Total reveal sequence should complete within 600ms. **Hover states:** Scale (1.02-1.05), sub
testing
Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.