web-style-skill-maker

To extract a frontend design system from a website, this Skill audits the source code, hydrated DOM, computed styles, and runtime motion to generate an evidence-backed, reusable style folder without guessing from screenshots alone.

Yes, you can capture web UI motion using browser automation to record hover, scroll, and timed frames, while also validating reduced-motion behavior to ensure demo fidelity for your design reference.

Yes, you need Playwright installed because this Skill relies on it for browser automation to sample routes, audit runtime DOM, capture screenshots, and verify UI motion evidence.

Evidence-based UI style extraction requires measured DOM, CSS rules, and computed styles with explicit negative evidence to prevent inventing unverified design traits, unlike screenshot-only copying which relies on visual guessing.

You can create a reusable frontend style Skill by providing a seed URL, which builds a bounded route inventory and outputs a complete production-ready directory containing subagents, references, evidence, demo, and QA artifacts.

Automated web style extraction is bounded by its route inventory and enforces strict QA gating with blocking rules to prevent overclaiming, meaning it will not generate uncorroborated features or unsafe styles lacking measured runtime evidence.