skills.rest
Mozurok
MozurokCOMMUNITY
Explore all skills by this author →
GitHub

extract-foundations-from-screens

Extract canonical design foundation tokens from SCREEN_SPEC markdown files.

6|Updated Jul 10, 2026
Search Tags:#typography#design system#color palette#design tokens#extract#foundations#screen spec
One-click install
npx skills add https://github.com/Mozurok/fhorja.dev --skill extract-foundations-from-screens-mozurok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract-foundations-from-screens
Source: https://github.com/Mozurok/fhorja.dev/tree/main/.claude/skills/extract-foundations-from-screens
Command: npx skills add https://github.com/Mozurok/fhorja.dev --skill extract-foundations-from-screens-mozurok

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Raw design values (hex colors, typography tuples, spacing pixels, radii) scattered across many SCREEN_SPEC files need to be converged into canonical foundations docs without losing provenance or silently resolving conflicts. ## Core Features & Use Cases - Token extraction: Parses SCREEN_SPEC files to union hex colors, typography tuples, spacing values, and radii, then buckets each into role tokens per per-foundation rules. - Idempotent writes: Re-runs only add new tokens, never overwrite locked role mappings, and route conflicts or off-grid values to a Review queue section. - Provenance tracking: Every token cites its source SCREEN_SPEC paths and usage counts, and TASK_STATE.md gets an extraction summary line. - Use Case: After documenting a dozen screens with raw values, run this to generate foundations/color.md, typography.md, spacing.md, and radii.md as the single source of truth for the design system. ## Quick Start Extract the color, typography, spacing, and radii foundations from all SCREEN_SPEC files under design/screens into the docs/research foundations folder.

Frequently Asked Questions about extract-foundations-from-screens

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

FAQPage Schema
How do I extract design tokens from screen specification files?▼

Provide a glob or explicit list of SCREEN_SPEC.md paths plus a design system root folder. The skill parses hex colors, typography tuples, spacing pixels, and radii, buckets them into role tokens, and writes foundations/color.md, typography.md, spacing.md, and radii.md.

What happens when two screens define conflicting color values?▼

Conflicts are never silently resolved. Both candidate values are routed to a Review queue section in the foundation doc with usage counts and a reason cell, leaving the decision to human review.

Is re-running the extraction on the same screens safe?▼

Yes, the operation is idempotent. Existing role-to-value mappings are locked and preserved verbatim, re-runs only add new tokens, and a run with no new values produces a byte-identical NO_OP result.

Does this generate Tailwind config or CSS variables?▼

No. Writing Tailwind config, CSS variables, or any code artifact is explicitly out of scope. That belongs to a later emit-foundations-tokens command; this skill only produces the canonical markdown foundations docs.

When should I not use this extraction approach?▼

Do not use it when foundations are already curated and screens already reference role tokens; run foundation-audit instead. It is designed for converging raw documented values, not for verifying an established token system.

Related Skills

Explore More Design & Creative Skills→
massCodeIOmassCodeIO
6.9k

ui-foundations

Enforce massCode UI foundations for typography, renderer styling, and TailwindCSS v4 tokens.

Official
Intermediate
Ahnd6474Ahnd6474

accelint-design-foundation

Style React components with Accelint Design Foundation tokens and CSS modules.

Community
Intermediate
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
Light0305Light0305
514

light-frontend-design

Design front-end interfaces with design tokens and cohesive styling.

Community
Advanced