# Convert

> (ePost) Use when user says "convert this prototype", "migrate this code", "make this match our design system", or "port from external source" — transforms external or prototype code into production-ready, system-consistent code

- Skill: `majiayu000/convert-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/convert-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/convert-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/convert-2

---


# Convert Command

Convert external prototypes, mockups, or inconsistent code into production-ready code with your design system components and proper module structure.

## Usage

```
/convert /path/to/prototype
/convert https://github.com/user/prototype-repo
/convert ./my-mockup --module smart-send
```

## Your Process

1. **Scout** the prototype — read all components, styles, data sources
2. **Inventory** — list all components, their styles, and data patterns
3. **Map** each component to klara-theme equivalent using `prototype-conversion` skill
4. **Map** hardcoded styles to semantic token classes
5. **Map** mock data to real API patterns from `module-integration` skill
6. **Create** phased conversion plan
7. **Review** plan with user before implementing
8. **Implement** with proper klara-theme tokens, module structure, API binding

## Skills Activated

- `web-prototype-conversion` — Component and token mapping
- `web/module-integration` — API binding and module patterns
- `domain-b2b` — Target module knowledge
- `web-ui-lib` — klara-theme component reference
- `web-rag` — Search for existing implementations

## Quality Checks

- All hardcoded colors replaced with semantic tokens
- All components use your design system imports
- Module file structure follows `_components/`, `_hooks/`, `_services/` pattern
- Data flow follows Component -> Hook -> Action -> Service -> API
- TypeScript strict mode compliance
- Build successful