skills.rest
ChoreShore
ChoreShoreOFFICIAL
Explore all skills by this author →
GitHub

token-keeper

Validate design token usage and accessibility patterns in React, Vue, and Svelte components.

Updated Feb 10, 2026
Search Tags:#consistency#accessibility#frontend#tokens#design-system#ui-components#component-patterns
One-click install
npx skills add https://github.com/ChoreShore/Version1 --skill token-keeper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: token-keeper
Source: https://github.com/ChoreShore/Version1/tree/main/.windsurf/skills/token-keeper
Command: npx skills add https://github.com/ChoreShore/Version1 --skill token-keeper

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces design-system consistency by guiding developers to apply tokens, patterns, and accessible components across UI projects.

Core Features & Use Cases

  • Token-driven styling: enforces usage of design tokens for colors, spacing, typography, and shadows.
  • Pattern compliance: promotes approved component patterns and naming conventions to reduce drift.
  • Accessibility focus: ensures components follow contrast, focus styles, and ARIA best practices.
  • Use cases: aligns new components with the design system and audits existing UI for consistency.

Quick Start

Review your codebase's components and refactor them to use design tokens, component patterns, and semantic class names following the design system.

Frequently Asked Questions about token-keeper

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce design token usage for colors and spacing across UI components?▼

Enforcing design token usage for colors and spacing involves validating your React, Vue, or Svelte project's styling against approved tokens. This process flags deviations in typography, shadows, and color guides to maintain consistency.

What is design-system consistency and when do I need to audit UI components for it?▼

Design-system consistency is the practice of applying unified tokens, patterns, and accessible components across a UI. You need to audit UI components for it when reducing visual drift in new or existing frontend projects.

Can I use token-driven styling to audit existing React components for accessibility?▼

Yes, you can use token-driven styling to audit existing React components for accessibility. The process validates contrast, focus styles, and ARIA best practices while flagging design system deviations.

Does this design-system consistency validation work with Vue and Svelte projects?▼

Yes, design-system consistency validation works with Vue and Svelte projects. It applies token-driven styling and component pattern compliance checks across React, Vue, and Svelte to ensure accessible UI.

What's the best way to align existing UI components with approved component patterns?▼

The best way to align existing UI components with approved component patterns is to audit and refactor them. This promotes approved naming conventions and token-driven styling to effectively reduce design drift.

Related Skills

Explore More Design & Creative Skills→
RonnasaydRonnasayd
1

figma-design-system-to-tailwind

Convert Figma design systems into Tailwind CSS v4 configurations and component mappings.

Community
Advanced
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
LimaTechnologiesLimaTechnologies

ui-ux-audit

Automate UI/UX audits for accessibility, responsiveness, and design-system consistency.

Community
Basic