name: style-extractor description: Extract evidence-based web UI style + motion guides (Markdown, optional HTML prototype).

Style Extractor (Web Style + Motion)

This skill extracts a reusable design system from web UIs: colors, typography, spacing, components, and—when the UI is dynamic—motion (runtime timings, keyframes, delay chains).

Output location (REQUIRED)

• Save all generated deliverables under: %USERPROFILE%\\style-extractor\\
• Never write generated outputs under the skill folder (.codex/skills/...)

Recommended structure:

• ...\\<project>-<style>-style.md
• ...\\<project>-<style>-evidence\\ (screenshots / css / js / motion / traces)

References (quality bar)

• references/endfield-design-system-style.md — best-practice style + motion reference
• references/motherduck-design-system-style.md — strong static style reference

Workflow

Phase 0 — Inputs

1. Project name + style/variant name
2. Sources: URL / web repo / both
3. Motion importance: if meaningful motion exists, Strategy A2/A3 is required

Phase 1 — Evidence gathering (do this first)

Strategy A — Live website (Chrome MCP)

Use:

• new_page / select_page / navigate_page
• take_screenshot (fullPage when helpful)
• evaluate_script
• list_network_requests / get_network_request (pull CSS/JS bodies when possible)
• performance_start_trace / performance_stop_trace (optional for complex motion)

Strategy A1.5 — Screenshot-assisted evidence (HIGHLY RECOMMENDED)

Screenshots don’t replace computed styles, but they improve:

• semantic intent (primary vs secondary vs disabled)
• gated/hard-to-freeze states (login, region locks, scroll-only reveals)
• visual-only details (textures, subtle gradients, composition)

Minimum screenshot set:

1. baseline (full page/section)
2. navigation visible + active state
3. primary CTA: default + hover + pressed (if possible)
4. form controls: default + focus-visible (+ invalid if present)
5. modal/dialog open (if any)
6. motion sequence (2–4 shots): ~0ms / ~120ms / ~300–600ms after trigger

Strategy A2 — Runtime motion evidence (REQUIRED for dynamic sites)

Computed styles alone won’t reconstruct timing quality. Capture runtime motion via:

• document.getAnimations({ subtree: true })
• per animation: duration/delay/fill/iterations/easing + moved properties (opacity/transform/color/...)
• when possible: full keyframes via animation.effect.getKeyframes()

Minimum capture loop:

1. baseline snapshot
2. trigger interaction (click/scroll/hover/focus)
3. snapshots at t0, t80–120ms, t300–600ms

Reusable snippets (paste into evaluate_script):

• scripts/motion-tools.js
• scripts/library-detect.js
• scripts/extract-keyframes.py (offline keyframes extraction from downloaded .css)

Strategy A3 — JS-driven motion / third-party libs (IMPORTANT)

If motion is JS-driven (e.g., Swiper/carousels), document.getAnimations() may miss the main movement.

Detect via:

• DOM/CSS fingerprints (.swiper-wrapper/.swiper-slide, --swiper-theme-color)
• asset hints (script/style URLs containing swiper/gsap/lottie/three)
• globals (window.Swiper, window.gsap, ...)

Fallback evidence:

• per-frame sampling (rAF loop ~700–900ms): transform/opacity/...
• or a Performance trace

Phase 2 — Semantic tokenization (REQUIRED)

Do not stop at raw values. Convert repeated values into semantic tokens:

1. cluster repeated values (colors/radii/durations/easings/shadows)
2. map usage (CTA/text/border/overlay/active/etc.)
3. name by intent (e.g., --color-accent, --motion-300, nav.switch.iconColor)
4. keep evidence alongside tokens (raw values + element/selector/screenshot)

Phase 3 — Write the style guide (recommended sections)

Minimum recommended sections:

1. Overview
2. Design philosophy (evidence-based)
3. Semantic tokens (colors + motion)
4. Color palette + usage mapping
5. Typography scale
6. Spacing scale
7. Components (with state matrix)
8. Motion (runtime evidence + full @keyframes + delay chains + JS-driven notes)
9. Layering (z-index/overlays)
10. Responsive behavior (breakpoints + degradation)
11. Copy-paste examples (5+)

Component state matrix must include at least:

• default / hover / active(pressed) / focus-visible / disabled (loading if present)

Quality checklist

Static:

• tokens include usage intent (not just lists)
• examples are copy-pasteable (HTML+CSS)

Motion (when dynamic):

• 3+ key interactions with document.getAnimations() evidence
• full @keyframes blocks for important animations
• at least one documented “delay chain” if present
• JS-driven motion: detection proof + sampling/trace evidence