skills.rest
factorialco
factorialcoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

f0-experimental-component-migration

Migrate F0 design system components from experimental to stable paths.

27|5|Updated Mar 20, 2024
Search Tags:#design system#deprecation#code refactoring#component migration#experimental to stable#typescript exports
One-click install
npx skills add https://github.com/factorialco/f0 --skill f0-experimental-component-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: f0-experimental-component-migration
Source: https://github.com/factorialco/f0/tree/main/packages/react/.skills/f0-experimental-component-migration
Command: npx skills add https://github.com/factorialco/f0 --skill f0-experimental-component-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ts-exported-info, and includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of moving components from experimental directories to stable locations within the F0 design system, ensuring a smooth transition and maintaining backward compatibility.

Core Features & Use Cases

  • Component Promotion: Facilitates the promotion of experimental components to production-ready status.
  • Code Restructuring: Guides users through moving and restructuring component files according to F0 patterns.
  • Deprecation Management: Helps in deprecating old experimental exports while introducing new stable ones.
  • Use Case: When a component like ExperimentalButton is ready for prime time, use this skill to move it to src/components/F0Button, update its exports, and deprecate the old path.

Quick Start

Use the f0-experimental-component-migration skill to move the 'ExperimentalCard' component to the 'src/components/' directory.

Frequently Asked Questions about f0-experimental-component-migration

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

FAQPage Schema
How do I migrate experimental components to stable locations in a design system?▼

Migrating experimental components to stable locations involves moving component files to production paths like components/, sds/, or ui/, updating TypeScript exports, and deprecating old experimental paths to preserve backward compatibility.

What is the process for deprecating experimental exports while maintaining backward compatibility?▼

Deprecating experimental exports while maintaining backward compatibility involves introducing new stable exports from the migrated paths and marking old experimental exports as deprecated, ensuring existing imports continue functioning during the transition.

How do I verify TypeScript export integrity during component migration?▼

Verifying TypeScript export integrity during component migration requires using the ts-exported-info dependency to check that all exports from moved components are correctly mapped and no references break during promotion to stable paths.

When should I promote an experimental component to a stable production path?▼

You should promote an experimental component to a stable production path when it is ready for prime time, meaning it has been validated for production use and needs to be moved to directories like src/components/ with updated exports and deprecated old paths.

Does component migration work with the F0 design system directory structure?▼

Component migration works with the F0 design system directory structure, specifically guiding moves across components/, sds/, and ui/ directories while restructuring files according to F0 patterns and managing TypeScript export deprecations.

Related Skills

Explore More Software Engineering Skills→
quanngynxquanngynx

module-pattern

Encapsulate JavaScript or TypeScript code using ES module boundaries.

Community
Intermediate
murphytruemanmurphytrueman
155

codemod-generator

Generate jscodeshift or ts-morph scripts for design system migrations.

Community
Advanced
factorialcofactorialco
27

f0-code-review

Review F0 React components against TypeScript, testing, Storybook, accessibility, and styling standards.

Official
Intermediate
RaudbjornRaudbjorn

config-schema-migrator

Generate automated migration scripts for evolving Pydantic configuration schemas.

Community
Advanced