Usage

npx style-capture <url> <selector>

npx style-capture https://stripe.com ".hero-section"
npx style-capture https://linear.app "main > section:first-child" --mode full

Run without arguments for interactive mode:

npx style-capture

For frequent use, install globally with npm install -g style-capture.

Agent skill

Describe the element in natural language — no selectors needed:

/style-capture https://stripe.com the pricing table
/style-capture https://linear.app the hero section with the gradient

Install the Claude Code skill:

npx skills add mblode/style-capture -g --all -y

Output

A <style_capture> block containing:

• html_capture — sanitised HTML of the subtree
• css_capture — computed CSS grouped by element
• tailwind_hints — Tailwind utilities with confidence scores
• open_questions — ambiguous mappings flagged for review

Paste into Claude Code, Cursor, or any AI tool.

Privacy

All processing happens locally. No data leaves your machine.

License

MIT