Back to skills

Theme Tokens

A full light + dark design-token set written into your CSS, from one brand color or a logo.

npx skills add drmrduck/skills@themetokens
View SKILL.md on GitHub ↗drmrduck/skills@themetokens

Theme Tokens

Expand a brand color into a full, accessible token set in both modes.

Steps

  1. Get the seed — a brand hex, or extract one from an uploaded logo/image.
  2. Build the ramp — a 50→950 scale at perceptually-even lightness, plus semantic tokens (background, foreground, primary, muted, border) for light and dark so they actually match.
  3. Check contrast — foreground/background pairs against WCAG AA; nudge lightness until they pass.
  4. Write it in — CSS custom properties in globals.css (:root + .dark) or the Tailwind theme config, matching the project`s existing convention.

Verify

Related skills

appicons

Generate + install a complete favicon / app-icon / PWA stack (ico, every PNG size, apple-touch, theme-aware light/dark, per-environment variants, manifest) from an emoji, named icon, logo, or URL — written straight into the project.

faviconpwaicons
ogimage

A dynamic opengraph-image route + per-page og:/twitter: tags so links unfurl correctly in Slack, iMessage, X, and LinkedIn.

ogsocialseo
metatags

Correct <title>/description/canonical/Open Graph + valid JSON-LD schema on every route — audited and patched in place.

seoschemajson-ldmeta
legalpages

Tailored /privacy and /terms pages and a cookie-consent component, matched to what the app actually does.

legalprivacytermscookies