story-auto-compile-migrate

Migrate design system components to auto-compile structure with componentMeta exports and spec frontmatter.

5|9|Updated Mar 25, 2026
One-click install
npx skills add https://github.com/ajenchen/design-system --skill story-auto-compile-migrate-ajenchen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: story-auto-compile-migrate
Source: https://github.com/ajenchen/design-system/tree/main/.agents/skills/story-auto-compile-migrate
Command: npx skills add https://github.com/ajenchen/design-system --skill story-auto-compile-migrate-ajenchen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design system components written as hand-authored stories cannot be auto-compiled or drift-checked, forcing manual metadata maintenance across every component. This Skill batch-migrates components to a Phase 1+2 auto-compile structure by adding tsx componentMeta exports and spec.md YAML frontmatter. ## Core Features & Use Cases - Mechanical migration: Parses cva variants, sizes, and defaultVariants from tsx files to generate componentMeta exports, and inserts YAML frontmatter into spec.md with extracted 禁止事項 rules. - Evidence-bound judgment fill: Populates when, world-class, and related fields from owning specs, benchmark snapshots, and cross-component SSOT references instead of leaving TODOs. - Drift verification: Runs compile-stories.mjs --check per component and in batch to guarantee zero drift, with tsc validation and staged commits of 5-10 components. - Use Case: After /design-system-audit --deep Dim 23 flags 12 un-migrated components, this Skill auto-chains to add componentMeta and frontmatter to all of them, fills judgment fields from canonical evidence, and verifies 0 drift. ## Quick Start Ask the assistant to migrate all un-migrated design system components to the auto-compile structure and verify zero drift with compile-stories.

Frequently Asked Questions about story-auto-compile-migrate

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

FAQPage Schema
How do I migrate design system components to auto-compile stories?

Run the migration workflow which scans for components missing componentMeta exports or spec frontmatter, then mechanically adds both by parsing cva variants and sizes. Judgment fields like when and world-class are filled from owning specs and benchmark evidence, followed by a compile-stories drift check.

How to add componentMeta export to a cva-based React component?

Read the cva variants keys, size variants, and defaultVariants from the tsx file, then insert a componentMeta export before the existing export statement. Variant purposes and size fields start empty and are filled later from spec evidence.

Does the migration change component implementation or cva variants?

No, the migration only adds metadata. It does not modify cva variants, defaults, tsx logic, or stories files; it exclusively inserts the componentMeta export and spec.md YAML frontmatter.

What happens when cva logic cannot be mechanically mapped?

Components with special cva logic like danger or ghost variant mappings are flagged for manual mapping in Phase 2. The agent resolves them using the public contract, owning spec, and consumer evidence, stopping only for genuine product or UX tradeoffs.

How is migration success verified?

Each migrated component runs compile-stories with the --check flag to confirm key alignment, and a final batch run with --all --check must report zero drift. A tsc build confirms the tsx exports do not break compilation.