design-system-foundations

Coordinate design tokens across Atomic Design levels for consistent styling.

2|Updated Dec 13, 2025

Search Tags:#automation #design-system #design-tokens #atomic-design #foundations #token-orchestration

Ready to run

npx skills add https://github.com/truchot/claude-skills-test --skill design-system-foundations

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system-foundations
Source: https://github.com/truchot/claude-skills-test/tree/main/.web-agency/skills/design-system-foundations
Command: npx skills add https://github.com/truchot/claude-skills-test --skill design-system-foundations

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Coordinates design tokens and atomic design levels to deliver consistent, scalable design systems across products.

Core Features & Use Cases

Token-based foundations (colors, typography, spacing, and shadows) that serve as the single source of truth.
Orchestration of four Atomic Design levels (Foundations, Atoms, Molecules, Templates) to compose reusable patterns.
Routing and governance for token usage and cross-level references to maintain coherence.

Quick Start

Kick off by initializing the Foundations orchestration to generate token definitions and seed the atomic design levels.

Frequently Asked Questions about design-system-foundations

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

FAQPage Schema

How do I orchestrate design tokens for consistent UI styling across colors and typography?▼

You orchestrate design tokens by defining color, typography, spacing, and shadow values as a single source of truth, then applying mandated frontmatter and validation to ensure consistent styling across reusable UI patterns.

What is the best way to structure design tokens using atomic design levels?▼

The best way to structure design tokens is by mapping them across four Atomic Design levels: Foundations, Atoms, Molecules, and Templates. This routing and governance maintains coherence for cross-level references when composing reusable patterns.

How do I automate design system foundations to ensure cross-level references?▼

You automate design system foundations by initializing an orchestration flow that generates token definitions and seeds the atomic design levels. This implements routing guidance and validation to maintain cross-level references.

Do I need mandated frontmatter to scale design system token orchestration?▼

Yes, mandated frontmatter is required to scale design system token orchestration. It provides the routing guidance and validation necessary to coordinate tokens reliably across Foundations, Atoms, Molecules, and Templates.

Can I use token orchestration to manage spacing and shadows alongside colors?▼

Yes, token orchestration manages spacing and shadows alongside colors and typography. It coordinates these foundational design tokens to deliver consistent, scalable styling across products and UI patterns.