skills.rest
CMiller838
CMiller838COMMUNITY
Explore all skills by this author →
GitHub

restyle-from-prototype

Applies a static UI prototype's visual design to live app templates and stylesheets.

Updated Sep 3, 2026
Search Tags:#theming#templates#frontend#mockup#stylesheet#ui prototype#restyle
One-click install
npx skills add https://github.com/CMiller838/meal-planner --skill restyle-from-prototype-cmiller838
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: restyle-from-prototype
Source: https://github.com/CMiller838/meal-planner/tree/main/.claude/skills/restyle-from-prototype
Command: npx skills add https://github.com/CMiller838/meal-planner --skill restyle-from-prototype-cmiller838

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Moving a chosen design mockup into a real application often breaks data bindings, stale script selectors, or semantic status colors. This Skill carries a prototype's design language into live templates and stylesheets while preserving every data binding and behavior. ## Core Features & Use Cases - Design System Extraction: Reads the target prototype to derive its color palette, font stack, spacing scale, and structural patterns before editing anything. - Markup and Style Rewrite: Restructures real templates to match the prototype's layout while keeping every data binding, script selector, and semantic status meaning intact. - Runtime Verification: Restarts the dev server and exercises changed routes via curl or a browser MCP to confirm real data renders without errors. - Use Case: After picking a dark-themed dashboard mockup from design-prototypes/ui-concepts, apply its visual language to the live app's dashboard template without losing any dynamic fields or breaking inline scripts. ## Quick Start Ask the agent to restyle the live app to match a specific prototype file, for example: apply the design from design-prototypes/ui-concepts/dark-ledger.html to the real dashboard.

Frequently Asked Questions about restyle-from-prototype

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

FAQPage Schema
How do I apply a UI mockup design to my real app?▼

Point the agent at the prototype HTML file and it reads the mockup's palette, fonts, spacing, and layout, then rewrites the real templates and stylesheet to match. Every data binding and script selector is carried into the new markup in the same edit.

How to restyle an app without breaking data bindings?▼

Read every real template fully before editing and move each data binding with its element into the new markup. If a class or id that a script or backend response depends on is renamed, update that selector in the same edit so nothing fails silently.

Does restyling from a prototype change backend or route logic?▼

No, backend routes and response shapes are out of scope for a visual restyle. If a markup rename appears to require a backend change, that signals the work has drifted past restyling and should be confirmed with the user first.

What happens to third-party widget styling during a restyle?▼

Vendored or third-party widget styling is left untouched unless the user explicitly asks to theme it. Prototypes rarely model complex embedded widgets, so only the surrounding chrome is restyled.

Why does a restyled page look right but stop working?▼

This usually happens when a class or id referenced by an inline script or API response was renamed without updating the selector. The fix is to verify changed routes at runtime with curl or a browser MCP and confirm real data renders.

Related Skills

Explore More Software Engineering Skills→
big4council-progbig4council-prog

sketch

Generate 2-3 interactive HTML mockup variants for UI/UX comparison.

Community
Intermediate
aaaa47080aaaa47080
4

deploy

Run tests, push changes, and validate health in production deployments.

Community
Intermediate
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
TaquitTaquit

expo-design-system

Builds and audits token-based design systems for Expo React Native apps.

Community
Intermediate