surface-theme-scaffold-gen

Installation
SKILL.md

SurfaceThemeScaffoldGen

Scaffold a Clef Surface design system theme $ARGUMENTS with oklch palette, typography scale, spacing tokens, motion definitions, elevation shadows, and radius tokens in .theme format.

When to use: Use when creating a new Clef Surface design system theme. Generates a .theme spec file with @version annotation, palette (oklch color scales), typography (modular ratio, fonts, weights, line-heights, tracking), spacing (base multiplier), motion (durations, easing, reduced-motion), elevation (shadow layers), radius tokens, and extends support for theme variants. Follows WCAG accessibility guidelines for contrast.

Design Principles

  • Token-Based Design: Every visual value is a named design token — no hardcoded colors, sizes, or shadows anywhere in component code.
  • WCAG Compliance: Every color pair must meet WCAG 2.1 AA contrast (4.5:1 normal text, 3:1 large text). The generator validates at generation time.
  • Reduced Motion Respect: All motion durations collapse to 0ms when prefers-reduced-motion is active. This is built into the motion token system, not opt-in.
  • Theme Layering: Themes are layered: base + variants. Multiple variants can be active simultaneously, resolved by priority then activation order.
Related skills
Installs
1
First Seen
Mar 11, 2026