skills.rest
daangn
daangnOFFICIAL
Explore all skills by this author →
Website𝕏@daangnteamGitHub

seed-token-analysis

Analyzes SEED Design color tokens, alias chains, component usages, and WCAG contrast ratios.

1.1k|89|Updated Mar 11, 2021
Search Tags:#rootage# accessibility#Design system#WCAG contrast#YAML parsing#Design tokens#color analysis
One-click install
npx skills add https://github.com/daangn/seed-design --skill seed-token-analysis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: seed-token-analysis
Source: https://github.com/daangn/seed-design/tree/main/skills/seed-token-analysis
Command: npx skills add https://github.com/daangn/seed-design --skill seed-token-analysis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires yaml, and includes scripts (resource) components.

What problem does it solve?

Design system maintainers need to understand how a single color token flows from its Rootage definition through mode-specific aliases into components and generated platform packages, and whether foreground/background combinations meet WCAG 2.x contrast requirements, without manually tracing YAML files and generated artifacts.

Core Features & Use Cases

  • Token Mapping: Resolves one color token's canonical ID, per-mode raw values, alias chains to final hex colors, direct dependent tokens, structured component usages (variant, state, slot, property), and presence across generated surfaces (CSS, Qvism, Tailwind 3/4, Lynx).
  • Contrast Checking: Computes WCAG 2.x contrast ratios for one foreground token against multiple background tokens across light and dark themes, compositing translucent colors over explicit backdrops and reporting AA/AAA pass states.
  • Use Case: Before changing $color.fg.neutral, run the token map to see every component and generated package that references it, then run the contrast check against its backgrounds in both themes to confirm the new value still passes AA for normal text.

Quick Start

Ask the assistant to analyze the SEED color token $color.fg.neutral and check its WCAG contrast against $color.bg.layer-default in light and dark themes.

Frequently Asked Questions about seed-token-analysis

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

FAQPage Schema
How do I check where a design token is used in a design system?▼

Run the token-map script with a single color token such as $color.fg.neutral. It returns the Rootage definition, per-mode resolved values, direct dependent tokens, structured component usages with variant and slot context, and which generated packages contain the token.

How do I check WCAG contrast between two design tokens?▼

Run the token-contrast script with --foreground and one or more --background tokens, optionally repeating --theme for light or dark. It resolves aliases, composites translucent colors, and reports the contrast ratio plus AA and AAA pass states per combination.

Does the contrast check handle transparent or alpha colors?▼

Yes. Translucent foregrounds are composited over the background before measuring contrast. Translucent backgrounds require an opaque --backdrop token; otherwise the check returns needs-backdrop instead of guessing a color.

Can this tool analyze spacing or typography tokens?▼

No. The analysis is limited to color tokens defined in packages/rootage/color.yaml. Dimension, typography, and shadow tokens are outside its scope, and it never substitutes values from other modes when a value is missing.

Does running the token analysis modify any repository files?▼

No. Both scripts are read-only; every result includes readOnly: true. To change a token, edit the Rootage source and follow the repository's generation procedure rather than editing generated surfaces directly.

Related Skills

Explore More Software Engineering Skills→
daangndaangn
1.0k

component-guidelines-docs

Generate Korean-language SEED component guideline docs from Rootage YAML.

Official
Advanced
kjfsmkjfsm
1

changeset-flow

Identify affected packages and create pnpm changeset records for npm releases.

Community
Intermediate
modrinthmodrinth
2.3k

figma-mcp

Translate Figma designs into Vue layouts using Figma MCP tools.

Official
Intermediate
atro2829-hubatro2829-hub

visual-design-foundations

Define typography, color, spacing, and iconography systems with semantic tokens.

Community
Advanced