Does this skill support multi-themed applications?

Yes, it manages parity across light, dark, and high-contrast modes by governing the Brand-to-Mapped token layers.

What is the primary purpose of the Design System skill?

It ensures UI changes align with a repository's design system tokens, typography, and styling rules through evidence-backed analysis and implementation.

Can it help with icon migrations?

Yes, it includes specific triggers for icon consolidation and migrating components to canonical icon imports according to system rules.

How does it validate design changes?

It utilizes built-in validation commands such as pnpm validate:tokens and jq schema checks to ensure token integrity and contract compliance.

Design System Governance

Name: Design System Governance
Author: jscraik

byjscraik

•

Design Tools

Governs and implements repository-grounded design systems by enforcing token discipline, typography scales, and UI consistency across monorepos.

This skill empowers Claude to manage complex design systems within a monorepo environment, ensuring all UI changes adhere to a strict hierarchy of tokens—from brand foundations to semantic aliases. It provides evidence-backed analysis and implementation for typography, spacing, iconography, and theme variables, utilizing automated validation scripts and canonical documentation to maintain high-fidelity visual standards and accessibility compliance while avoiding hard-coded literals.

Key Features

012 GitHub stars

02Automated validation of design system contracts and schemas

03Multi-tier token management (Brand → Alias → Mapped)

04Deep integration with monorepo structures using jq and ripgrep

05Iconography consolidation and theme variable governance

06Repository-grounded audit and implementation of UI styles

Use Cases

01Auditing typography and spacing usage to identify and replace non-standard literals

02Implementing dark mode or high-contrast theme variations across a unified design system

03Migrating legacy UI components to a new semantic token layer for better maintainability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jscraik/agent-skills design-system

For use in Claude.ai and ChatGPT