design-system

Analyze and implement design tokens, typography, and theme variables in a monorepo.

8|4|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/jscraik/Agent-Skills --skill design-system-jscraik
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/jscraik/Agent-Skills/tree/main/frontend/ui/design-system
Command: npx skills add https://github.com/jscraik/Agent-Skills --skill design-system-jscraik

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the management and implementation of UI design systems, ensuring consistency across tokens, typography, iconography, and styling within a monorepo.

Core Features & Use Cases

  • Design Token Management: Analyze, audit, and implement changes to design tokens (colors, spacing, typography, etc.).
  • UI Styling Consistency: Ensure UI components adhere to established design principles and brand guidelines.
  • Use Case: When a new brand color needs to be introduced, this Skill can trace its path from the brand source through aliases to mapped theme variables and validate its usage in UI components.

Quick Start

Use the design-system skill to audit the current typography and spacing tokens for the chat components.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I manage UI design tokens and ensure brand guideline consistency in a monorepo?

To manage UI design tokens and ensure brand guideline consistency in a monorepo, this Skill analyzes repository-grounded token layers and enforces Brand→Alias→Mapped rules. It validates changes against canonical files to maintain strict alignment across your styling system.

What is the best way to trace a new brand color through design system aliases to mapped theme variables?

Tracing a new brand color through design system aliases to mapped theme variables involves analyzing the repository's token layers. This Skill audits the path from the brand source through aliases to final UI styling outputs, providing evidence-backed file references and validation commands.

How do I audit typography and spacing tokens for specific UI components?

To audit typography and spacing tokens for UI components, this Skill analyzes repository-grounded design-system work and outputs evidence-backed analysis. It evaluates token layers, checks alignment with brand guidelines, and provides canonical file references for the targeted components.

Can I use this to implement iconography and theme variable changes across a monorepo?

Yes, you can implement iconography and theme variable changes across a monorepo. This Skill supports UI styling system modifications by analyzing token-layer changes, mapping the impact across layers, and ensuring updates pass design-system checks before finalizing.

Does this approach require existing token layers to enforce design system rules?

Yes, enforcing design system rules requires existing token layers within the repository. This Skill relies on repository-grounded analysis to trace Brand→Alias→Mapped rules, ensuring that any token updates or UI styling changes are validated against established brand guidelines.

Why should I use a repository-grounded approach for design token management instead of a generic styling tool?

A repository-grounded approach for design token management ensures that styling changes are validated against actual canonical files rather than abstract configurations. This method traces layer impact, enforces brand guidelines, and outputs evidence-backed analysis to prevent UI inconsistencies.