Get General Styling — Design System Extraction Skill

What problem does it solve?

This Skill performs a complete extraction of a source website's global design system so migrated pages render against the original visual foundation rather than generic defaults, preventing visual regressions during migration.

Core Features & Use Cases

• Comprehensive CSS harvesting: discovers and downloads external stylesheets, captures inline styles, and assembles a raw CSS corpus for analysis.
• Computed-style sampling & variable resolution: collects computed styles, detects runtime CSS custom properties, resolves var() references, and detects CJK font needs.
• Token and artifact generation: extracts color palette, typography, spacing, breakpoints, borders, transitions, maps tokens to EDS, and generates validated styles/styles.css and styles/fonts.css for migration previews.
• Use Case: run at the start of any site migration to produce a verified design token set that front-end engineers and designers can use to recreate consistent components and page templates.

Quick Start

Run the Get General Styling skill on the source site URL to extract CSS, variables, colors, typography, spacing, breakpoints, and produce validated EDS-aligned stylesheets for migration.