Results for “weird-tokens”

Audit design token usage across a product for consistency and coverage, identifying hard-coded values and gaps.

Turn a chosen design direction into a canonical DESIGN.md plus production tokens that don't look vibecoded — state-level colors (8-step neutral ramp, rest/hover/active/ disabled, focus ring), APCA-checked contrast, typography, spacing/radius/motion/elevation, an icon strategy, and component contracts for the core atoms. Emits tokens in the project's stack format (shadcn HSL vars or Tailwind v4 @theme). Load when the user asks to build a design system, generate design tokens, create a DESIGN.md, set up a theme, design a color or type system, pick icons, or when frontend-design routes here. Replaces design-tokens-craft and icon-craft. Sub-skill of frontend-design. Reads DIRECTION.md first.

Manage design tokens by listing, adding, and updating them while keeping JSON sources, CSS variables, and dark-mode values in sync.

Define and organize design tokens for color, spacing, typography, elevation, and motion with naming conventions and usage guidance.

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

Identifies reusable UI patterns, components, and design tokens, then extracts and consolidates them into a design system for systematic reuse.

Design-token systems — semantic CSS custom properties for colours, spacing, typography, and shadows, with light/dark theme switching via `[data-theme]` overrides. Use when setting up a token catalogue, auditing components for hardcoded colours/magic numbers, or adding dark-mode support via token swaps.

Defines and applies design tokens for Vue 3 + shadcn-vue projects, including CSS variables, Tailwind configuration, and usage patterns.

Build and maintain cohesive design systems and component libraries with tokens, theming, and documented variants. Use when the user says "design system", "component library", "design tokens", "theming", "consistent styling", "reusable components", or "variant props".

Generate design tokens, color palettes, typography scales, component systems, and developer handoff documentation for UI design systems.

Generates brutalist web prototypes with Swiss industrial-print aesthetics, using grotesque typography, oversized numbers, ASCII decorations, and hazard-red accents.

Use this skill for tokens, components, variants, theming, consistency, reusable UI architecture. Trigger when the task involves web design work related to Frontend Design System, production implementation, audits, debugging, strategy, or validation.