Agent skill

web-prototype

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

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/web-prototype

Metadata

Additional technical details for this skill

keywords
convert prototype migrate rewrite transform external mockup
triggers 
[
    "/convert",
    "convert to klara-theme",
    "make it consistent"
]
platforms 
[
    "web"
]
connections 
{
    "enhances": [
        "convert"
    ]
}
agent affinity 
[
    "epost-fullstack-developer"
]

SKILL.md

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results