skills.rest
j-cogburn
j-cogburnCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Audit UI component libraries against a three-layer token hierarchy.

Updated Jun 1, 2026
Search Tags:#design-system#ui-consistency#semantic-tokens#component-states#component-audit#token-hierarchy#design-spec-alignment
One-click install
npx skills add https://github.com/j-cogburn/d3 --skill design-system-j-cogburn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/j-cogburn/d3/tree/main/tests/project-t01/.d3/skills/design-system
Command: npx skills add https://github.com/j-cogburn/d3 --skill design-system-j-cogburn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the common pain points of inconsistent product user interfaces, unmaintainable hardcoded styles, and misalignment between design specifications and actual code implementation, which cause wasted developer time and degraded user experience.

Core Features & Use Cases

  • Structured Token Hierarchy: Guides creation of three-layer token systems (primitive, semantic, component) to enforce consistent styling across all UI elements.
  • Implementation Auditing: Provides a step-by-step process to audit existing component libraries for hardcoded values, missing states, and spec mismatches, with clear severity flags for discrepancies.
  • Component & System Evolution: Includes workflows for adding new components, updating existing ones, and deprecating outdated elements with migration paths to avoid breaking changes.
  • Use Case Example: A product team can use this Skill to audit their button component library, align all variants to semantic color and spacing tokens, and document required interaction states before shipping a new feature.

Quick Start

Instruct your AI agent to audit the current product's UI component library for alignment with the design system's token hierarchy and required interaction states.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I audit my existing UI components for design spec alignment and hardcoded styles?▼

To audit UI components for design spec alignment, follow a structured step-by-step process that flags hardcoded values, identifies missing interaction states, and detects spec mismatches with clear severity levels for discrepancies.

What is a three-layer token hierarchy in a design system?▼

A three-layer token hierarchy in a design system consists of primitive, semantic, and component tokens. This structure enforces consistent styling across all UI elements by cascading foundational values up through contextual semantic aliases to specific component definitions.

How do I evolve and add new UI components without introducing breaking changes?▼

To evolve and add new UI components without breaking changes, use defined workflows that include documenting component anatomy with variants and states, providing clear migration paths, and establishing guardrails for deprecating outdated elements.

What's the best way to eliminate hardcoded styles and inconsistent product user interfaces?▼

The best way to eliminate inconsistent product user interfaces and unmaintainable hardcoded styles is by enforcing a structured design system workflow that requires documented component anatomy and proper usage of semantic tokens during UI development.

Can I use this design system workflow for both building new visual foundations and auditing existing libraries?▼

Yes, this design system workflow applies to product teams building new visual foundations from scratch as well as teams auditing existing component implementations to align them with current design specifications and required interaction states.

Related Skills

Explore More Design & Creative Skills→
unthinkmediaunthinkmedia
1

component-audit

Audit .tsx and .css files for custom UI elements and hardcoded style values.

Community
Advanced
vecearvecear

design-to-component-translator

Translate Figma design specs into React components with Tailwind/shadcn styling.

Community
Advanced
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced
docaohieu2808docaohieu2808

design-system

Generate CSS variables from JSON token definitions for brand compliance.

Community
Advanced