skills.rest
dain-agency
dain-agencyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

migrate-frontend

Convert external UI designs into structured frontend code with React Query integration and mandatory tests.

Updated Jan 10, 2026
Search Tags:#react#component library#test coverage#react query#ui standardization#frontend migration#domain-driven frontend
One-click install
npx skills add https://github.com/dain-agency/mood-tracker --skill migrate-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-frontend
Source: https://github.com/dain-agency/mood-tracker/tree/main/.claude/skills/migrate-frontend
Command: npx skills add https://github.com/dain-agency/mood-tracker --skill migrate-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the inconsistent, time-consuming process of manually migrating external UI designs into a project's frontend codebase by enforcing standardized architecture, component usage, and test coverage, reducing technical debt and accelerating feature development.

Core Features & Use Cases

  • Standardized Component Usage: Automatically replaces custom UI elements with project-specific component library primitives for consistent design system adherence.
  • Server State Integration: Replaces client-side stores with React Query hooks and the project's official API client for reliable, maintainable data fetching.
  • Enforced Quality Standards: Requires full test coverage and component stories for all reusable elements, ensuring long-term code maintainability.
  • Use Case: For example, when migrating a third-party customer dashboard UI into your company's web app, this skill structures all code into the correct domain folder, uses your existing design system components, and generates all required test and story files automatically.

Quick Start

Use the migrate-frontend skill to convert the external user profile UI into the frontend domains/user-profile/ directory following all project conventions and verification requirements.

Frequently Asked Questions about migrate-frontend

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

FAQPage Schema
How do I migrate an external UI design into a standardized React component library?▼

To migrate external UIs into a standardized React component library, convert custom elements into project-specific UI primitives while enforcing consistent design system adherence. This process structures all generated code into aligned frontend domains.

How do I integrate React Query when migrating frontend code?▼

Integrate React Query during frontend migration by replacing client-side stores with React Query hooks and the project's official API client. This ensures reliable, maintainable server state management and standardized data fetching.

What is domain-driven frontend migration and when do I need it?▼

Domain-driven frontend migration is the process of converting external interface designs into structured, project-aligned domain code. You need it when adopting a component library, enforcing UI standardization, and reducing technical debt during feature integration.

Does frontend migration require generating test and story files for UI components?▼

Yes, frontend migration requires generating test and story files for all reusable UI components. Enforcing full test coverage and component stories ensures long-term code maintainability and satisfies project quality verification requirements.

What's the best way to standardize API client usage across migrated frontend domains?▼

The best way to standardize API client usage is replacing custom client-side stores with React Query hooks integrated with the project's official API client. This enforces reliable data fetching across all migrated frontend domains.

Can I use this to convert a third-party dashboard UI into my existing web app structure?▼

Yes, you can convert a third-party dashboard UI into your web app by structuring the code into the correct domain folder. It automatically applies your existing design system components and generates required test files.

Related Skills

Explore More Software Engineering Skills→
gileckgileck

react-hook-organization

Standardize React Query and Zustand hook organization in Next.js projects.

Community
Intermediate
kirtikirti
1

testcafe-automation

Generate TestCafe E2E tests, detect coverage gaps, and configure CI/CD.

Community
Advanced
allenlin90allenlin90
1

frontend-ui-components

Render and compose UI primitives from the @eridu/ui library.

Community
Intermediate
PMDevSolutionsPMDevSolutions
7

screenshot-intake

Convert website screenshots or live URLs into structured build specifications.

Official
Advanced