skills.rest
razorpay
razorpayOFFICIAL
Explore all skills by this author →
Website𝕏@razorpayGitHub

migrate-to-svelte

Orchestrates parallel migration of Blade React components to Svelte 5 with isolated git worktrees.

649|197|Updated Jan 28, 2020
Search Tags:#parallel agents#storybook#svelte 5#Design system#react migration#Git worktree#Pull Request automation
One-click install
npx skills add https://github.com/razorpay/blade --skill migrate-to-svelte
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-to-svelte
Source: https://github.com/razorpay/blade/tree/main/.agents/skills/migrate-to-svelte
Command: npx skills add https://github.com/razorpay/blade --skill migrate-to-svelte

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrating React design system components to Svelte 5 one at a time is slow and error-prone, especially when multiple components must be converted with consistent planning, verification, and PR hygiene. This Skill coordinates the entire pipeline so each component gets an isolated worktree, a structured plan, automated verification, and its own pull request.

Core Features & Use Cases

  • Parallel Agent Orchestration: Spawns Plan, Execute, and Verify agents concurrently, one per component, each scoped to an isolated git worktree with its own branch and Storybook port.
  • Dependency Resolution: Reads discovery reports to detect unmigrated dependencies, applies documented workarounds (Box, Icons, blade-core), and defers or blocks components accordingly.
  • Human Gates and Failure Isolation: Enforces plan-approval and final-review gates per component while ensuring one component's failure never blocks the rest of the batch.
  • Use Case: Run the pipeline on Alert, Card, Checkbox to produce three verified Svelte 5 components, each with a changeset and an open PR titled feat(blade-svelte): {Name} component.

Quick Start

Ask the AI to migrate the Alert and Card components to Svelte using the migrate-to-svelte pipeline.

Frequently Asked Questions about migrate-to-svelte

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

FAQPage Schema
How do I migrate React components to Svelte 5 in parallel?▼

Provide a comma-separated list of component names, and the orchestrator creates one git worktree and branch per component, then runs Plan, Execute, and Verify agents concurrently. Each component ends with its own pull request against master.

How does the migration handle component dependencies?▼

The orchestrator reads each component's discovery report and checks its dependencies. Box, Icons, and blade-core have documented workarounds, while unmigrated dependencies cause the component to be deferred to the next batch or marked blocked.

Can I migrate a Blade component that is already in blade-svelte?▼

No. During setup the orchestrator checks packages/blade-svelte/src/components/index.ts, and any component already exported there is dropped from the batch with an already-migrated notice.

What happens if one component's migration fails?▼

A failure in any phase only affects that component. The orchestrator records the failure status in batch-status.md and continues processing the remaining components in the batch.

Why does the migration clone node_modules into each worktree?▼

Each worktree needs a private, mutable node_modules tree so parallel agents do not interfere with each other. On macOS APFS the directories are copy-on-write cloned, with a yarn install fallback on other filesystems.

Does the pipeline clean up worktrees after PRs are created?▼

No. Worktrees are intentionally left in place for potential hotfixes, and the shared React Storybook keeps running. You remove them manually with git worktree remove after the PRs merge.

Related Skills

Explore More Software Engineering Skills→
soeiroosoeiroo

design-token-audit

Audit UI components and themes for design token usage and hard-coded values.

Community
Advanced
mia-cxmia-cx

setup-changesets

Configure and run changesets to publish versioned packages and changelogs.

Official
Intermediate
exceptionlessexceptionless
2.5k

storybook

Create and update Storybook stories for Svelte components with CSF and autodocs.

Official
Intermediate
Yoriichi-DangYoriichi-Dang

web-component-design

Guide design of reusable UI components across React, Vue, and Svelte.

Community
Basic