web-style-skill-maker

What problem does it solve?

It turns a reference website into an evidence-backed, reusable frontend style Skill by analyzing source code, hydrated DOM/computed styles, screenshots, and runtime motion—so you don’t end up copying templates or inventing unverified design traits.

Core Features & Use Cases

• Website frontend style extraction: Starts from a seed URL, builds a bounded route inventory, and extracts layout/typography/component/motion rules.
• Evidence-first design rules: Requires measured DOM/CSS/style evidence and explicit negative evidence rather than screenshot-only guessing.
• Production-ready Skill folder generation: Produces a complete front-<site-slug>/ Skill directory with subagents, references, evidence, demo, and QA artifacts.
• Runtime motion verification: Uses browser automation to capture hover/scroll/timed frames plus reduced-motion validation when relevant.
• QA gating for release: Enforces scoring/guardrails and blocking rules to prevent overclaiming or unsafe/uncorroborated features.

Quick Start

Use the web-style-skill-maker Skill to analyze https://example.com and generate a reusable front-example-slug frontend style Skill folder with demo and QA evidence.