# Web Prototype

> (ePost) Use when converting an external prototype, mockup, or codebase into production code with your design system

- Skill: `majiayu000/web-prototype` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/web-prototype`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/web-prototype/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- 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/web-prototype

---


# Prototype Conversion Skill

## Purpose

Convert external prototypes, mockups, or codebases into production-ready code using your design system components, semantic design tokens, and proper module architecture.

## Reference Files

| File | Purpose |
|------|---------|
| `references/analysis-checklist.md` | Prototype inventory and framework detection |
| `references/component-mapping.md` | Map common patterns to klara-theme equivalents |
| `references/token-mapping.md` | Map hardcoded values to klara-theme tokens |
| `references/style-migration.md` | Migrate style systems to klara-theme |
| `references/data-migration.md` | Replace mock data with real API integration |

## Conversion Workflow

1. **Analyze** — Read `analysis-checklist.md`, inventory prototype
2. **Map Components** — Read `component-mapping.md`, map to klara-theme
3. **Map Tokens** — Read `token-mapping.md`, replace hardcoded values
4. **Migrate Styles** — Read `style-migration.md`, convert style system
5. **Integrate Data** — Read `data-migration.md`, replace mock data
6. **Module Structure** — Place in correct module with `_components/` etc.

## Quick Reference

- Import: `@luz-next/klara-theme`
- Props: `styling` (not `variant`), `size`, `mode`, `radius`
- Tokens: `bg-base-background`, `p-200`, `gap-100`
- Data flow: Component -> Hook -> Action -> Service -> API

## Related Skills

- `web-modules` — Module integration patterns
- `web-ui-lib` — klara-theme component reference
- `domain-b2b` — Module knowledge