How do I install the Style Extract skill?

Run npx skillmds@latest add clawic/style-extract in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Style Extract safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Style Extract?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Style Extract free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Style Extract?

clawic (@clawic) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Style Extract by clawic — Agent Skill

Name: Style Extract
Author: clawic

File contents

style-extract

Take an external reference (a URL, an image, a PDF) and turn it into a candidate Style in the workspace under .claw/styles/<id>/STYLE.md.

Inputs

A reference source, one of:
- HTTP(S) URL of a webpage
- Local image path (JPG/PNG)
- Local PDF path
Optional name for the style. Otherwise derive from the source.

Procedure

If the source is a local file, register it as a Reference first:

claw ref add --type <image|pdf> --source <path> --name "<source name>"

If the source is a URL, register it as a web reference:

claw ref add --type web --source <url> --name "<page title>"

Analyse the reference visually:
- Extract the dominant palette (4-8 colors). Pick the most saturated as accent, the darkest as fg, the lightest as bg, neutral as surface.
- Identify dominant typography. Treat headline font as display, body font as body. If unsure, default to Inter, Arial, sans-serif.
- Note any motion or interaction patterns visible (transitions, hover, scroll behavior).
Build a Style manifest by starting from the closest builtin (claw style builtins) and adjusting tokens. Use claw style create to scaffold:
```
claw style create "<Name>" --from <closest-builtin> --description "Extracted from <source>"
```
Edit the generated STYLE.md to set the extracted palette and fonts, and to write a short ## Voice section if the reference has copy.

Link the reference back to the style:

claw ref link <referenceId> --style <styleId>

Report back to the user: the style id, what was extracted, and any uncertainty so they can refine.

Constraints

Never invent logo files. Leave brand.logos empty if not provided.
Color extraction must use the actual reference, not a guessed palette. If the image cannot be loaded, fail clearly.
The candidate Style is editable. The user is expected to refine it after the first pass.

---name: style-extractdescription: Inspect a reference (web URL, image, PDF, screenshot) and propose a candidate Style for the workspace. Use when the user says "save this style", "guarda este estilo", or shares a reference and wants to reapply it later.---# style-extractTake an external reference (a URL, an image, a PDF) and turn it into a candidate `Style` in the workspace under `.claw/styles/<id>/STYLE.md`.## Inputs- A reference source, one of: - HTTP(S) URL of a webpage - Local image path (JPG/PNG) - Local PDF path- Optional name for the style. Otherwise derive from the source.## Procedure1. If the source is a local file, register it as a Reference first: ``` claw ref add --type <image|pdf> --source <path> --name "<source name>" ``` If the source is a URL, register it as a `web` reference: ``` claw ref add --type web --source <url> --name "<page title>" ```2. Analyse the reference visually: - Extract the dominant palette (4-8 colors). Pick the most saturated as `accent`, the darkest as `fg`, the lightest as `bg`, neutral as `surface`. - Identify dominant typography. Treat headline font as `display`, body font as `body`. If unsure, default to `Inter, Arial, sans-serif`. - Note any motion or interaction patterns visible (transitions, hover, scroll behavior).3. Build a Style manifest by starting from the closest builtin (`claw style builtins`) and adjusting tokens. Use `claw style create` to scaffold: ``` claw style create "<Name>" --from <closest-builtin> --description "Extracted from <source>" ```4. Edit the generated `STYLE.md` to set the extracted palette and fonts, and to write a short `## Voice` section if the reference has copy.5. Link the reference back to the style: ``` claw ref link <referenceId> --style <styleId> ```6. Report back to the user: the style id, what was extracted, and any uncertainty so they can refine.## Constraints- Never invent logo files. Leave `brand.logos` empty if not provided.- Color extraction must use the actual reference, not a guessed palette. If the image cannot be loaded, fail clearly.- The candidate Style is editable. The user is expected to refine it after the first pass.

Frequently asked questions

Style Extract