pattern-migrator

Migrate Storybook design system patterns between directories while preserving cross-references and Meta titles.

1|Updated Mar 10, 2025
One-click install
npx skills add https://github.com/igorrazvodovsky/pattern-playground --skill pattern-migrator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pattern-migrator
Source: https://github.com/igorrazvodovsky/pattern-playground/tree/main/.claude/skills/pattern-migrator
Command: npx skills add https://github.com/igorrazvodovsky/pattern-playground --skill pattern-migrator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the complex and error-prone process of reorganizing Storybook-based design system patterns. It ensures that all cross-references, Meta titles, and documentation links remain intact, preventing broken links and maintaining documentation integrity during migrations. This saves developers significant time and reduces the risk of errors.

Core Features & Use Cases

  • Automated Reference Updates: Systematically updates Storybook Meta titles, URLs, and internal/external cross-references.
  • Structured Migration Workflow: Guides through analysis, file migration, URL updates, documentation updates, and validation phases.
  • File Type Handling: Provides specific instructions for migrating .mdx, .stories.tsx, TypeScript, JSON, HTML, and CSS files.
  • Use Case: When refactoring a large design system to improve its structure, use this skill to move component patterns between directories without breaking any documentation or Storybook links.

Quick Start

Migrate the "Button" pattern from 'components/old-category' to 'components/new-category' in our Storybook design system.

Frequently Asked Questions about pattern-migrator

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

FAQPage Schema
How do I reorganize Storybook patterns without breaking documentation links?

Reorganizing Storybook patterns typically breaks cross-references and URLs. This Skill automates the migration process by systematically updating Meta titles, internal/external cross-references, and Storybook URLs across MDX, stories.tsx, and TypeScript files, preserving all documentation integrity while moving files between directories.

Can I move component patterns between directories in a Storybook design system?

Yes. This Skill guides you through migrating patterns between directories by analyzing the current structure, moving files with history preserved, updating URLs, and refreshing all related MDX, stories.tsx, TypeScript imports, and assets in a structured workflow.

What happens to cross-references when I refactor a Storybook directory structure?

Without proper handling, cross-references become broken links. This Skill extracts Meta titles, maps all cross-references, transforms URLs, and updates documentation hierarchies to ensure links remain functional after moving patterns to new categories or consolidating collections.

How do I consolidate or split component collections in Storybook without losing links?

Consolidating or splitting Storybook collections requires updating references across multiple file types. This Skill automates the reorganization of collection hierarchies, remaps cross-references, and updates documentation structure while keeping all internal and external links intact.

What file types does Storybook pattern migration handle?

This Skill provides specific migration instructions for .mdx, .stories.tsx, TypeScript, JSON, HTML, and CSS files, ensuring each file type's references and imports are correctly updated when patterns move to new directories in your design system.

Do I need to manually update Storybook URLs when refactoring design system patterns?

No. This Skill automates URL transformation as part of its structured migration workflow, so you avoid manual link updates and the errors that come with them during large design system reorganizations.