New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Stylebot

by ankit in ankit/stylebot

Restyle websites in the user's browser with the Stylebot extension's stylebot CLI — dark modes, themes, fonts, bigger text, hiding clutter, fixing a layout, or editing and managing the CSS and…

MITAuto-check passedFrontend & Design

Install Stylebot

skills CLI
$ npx skills add ankit/stylebot --skill stylebot -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ankit/stylebot stylebot --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ankit/stylebot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/tools/claude-plugin/skills/stylebot .claude/skills/stylebot && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
stylebot
GitHub stars
1.6k
Token cost
~2.8k tokens
SKILL.md length
1,785 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
MIT

At a glance

Restyle websites in the user's browser with the Stylebot extension's stylebot CLI — dark modes, themes, fonts, bigger text, hiding clutter, fixing a layout, or editing and managing the CSS and…

  • Works in 9 steps: Open the page: stylebot open shows it in… → If the user hasn't said what to change,… → Start a profile: run stylebot profiles… → …
  • The user wants to change how a website looks
  • SKILL.md covers Running commands, Setup, Workflow and Reading the outline, plus 4 more sections
  • Calls npm

What it does

Stylebot is an agent skill from ankit/stylebot. Restyle websites in the user's browser with the Stylebot extension's stylebot CLI — dark modes, themes, fonts, bigger text, hiding clutter, fixing a layout, or editing and managing the CSS and profiles Stylebot has saved for a site. Use when the user wants to change how a website looks, or asks about their Stylebot styles.

Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Theming and dark mode. It works with Chrome Extensions. The repository describes itself as: Change the appearance of the web instantly. The licence is MIT.

When your agent uses it

  • The user wants to change how a website looks
  • Asks about their Stylebot styles

Example prompts

  • “s browser with the Stylebot extension”
  • “/stylebot”

Requirements

  • Node.js
  • Pre-approved tools (allowed-tools): Bash(stylebot *), Read(~/.stylebot/work/**), Edit(~/.stylebot/work/**)

Workflow steps

9 steps, taken from the first numbered list in SKILL.md.

  1. Open the page: stylebot open shows it in Stylebot's own window, behind the user's, without taking focus. It prints Opened (or Found when…
  2. If the user hasn't said what to change, or asks for ideas, run stylebot suggestions : the requests Stylebot's own Chat offers for this…
  3. Start a profile: run stylebot profiles to see which profile is in use (starred), then stylebot profile create "Claude: " --from --use…
  4. Read the page: stylebot outline prints its visible elements and how each looks. stylebot css-variables prints its CSS variables. stylebot…
  5. Write the CSS to ~/.stylebot/work/.css, then save it with stylebot css set --file ~/.stylebot/work/.css. It replaces the site's whole…
  6. Fix what css set reports: it checks the page the way Stylebot's Chat does, listing how many elements each selector matched, text your CSS…
  7. Look at it: stylebot screenshot -o ~/.stylebot/work/-.png, then open the image and look at it; never report a change you haven't seen. Run…
  8. Close up: run stylebot done to close Stylebot's window.
  9. Tell the user in a sentence or two what changed, that it's saved in the "Claude: " profile, and that stylebot profile use (or the profile…

What it can do on your machine

Read from SKILL.md and the folder at commit 96a61f5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash(stylebot *)
    • Read(~/.stylebot/work/**)
    • Edit(~/.stylebot/work/**)

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • stylebot.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Stylebot loads about 2.8k tokens when it runs. Until then it costs about 84 tokens; SKILL.md has 1,785 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~84
When it runs · the whole SKILL.md, loaded when a task matches
~2.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ankit/stylebot at commit 96a61f5, republished under its MIT licence (© ankit). 1,785 words, ~2,842 tokens.

Download SKILL.mdSave it as .claude/skills/stylebot/SKILL.md (or your agent's skills folder).
name
stylebot
description
Restyle websites in the user's browser with the Stylebot extension's `stylebot` CLI — dark modes, themes, fonts, bigger text, hiding clutter, fixing a layout, or editing and managing the CSS and profiles Stylebot has saved for a site. Use when the user wants to change how a website looks, or asks about their Stylebot styles.
allowed-tools
Bash(stylebot *), Read(~/.stylebot/work/**), Edit(~/.stylebot/work/**)
argument-hint
[site] [what to change]

Restyling websites with Stylebot

Stylebot is a browser extension that saves custom CSS per site and applies it every time the site loads. The stylebot command drives it in the user's running browser: it opens and reads pages, saves CSS that applies live, checks the page after each save, and takes screenshots. stylebot --help lists every command, and stylebot <command> --help describes one.

Read and check pages only through stylebot, never another browser tool (browser automation, a screenshot tool, fetching the url). The page Stylebot styles can be in a different browser or profile from the one those tools see, so what they report won't reflect the CSS you saved.

Running commands

  • Run one stylebot command per Bash call, exactly as written here: no cd, &&, ;, pipes, $(...), < or heredocs. Those need the user's approval each time; a plain stylebot command doesn't.
  • Keep every file in ~/.stylebot/work/: CSS as ~/.stylebot/work/<site>.css, screenshots as ~/.stylebot/work/<site>-1.png, -2.png and so on. You can read and write there without asking. Write files with your file-writing tool, never the shell.

Setup

The first command sets the CLI up with the user's browsers on its own. When a command can't reach Stylebot, or says the CLI and Stylebot don't match, its message names the one thing to do, such as turning on the setting, opening or restarting the browser, or updating Stylebot or the CLI. Tell the user the message as it is, and try again once they say it's done.

To see everything that's left, run stylebot install: it prints a checklist. Tell the user each step not yet done (marked ○) as written.

If stylebot isn't found, the CLI isn't installed: tell the user to install it with npm install -g @stylebot/cli, as https://stylebot.dev/cli describes.

Workflow

  1. Open the page: stylebot open <site or url> shows it in Stylebot's own window, behind the user's, without taking focus. It prints Opened <tab> <url> (or Found when it reuses a tab). Pass that tab id to every command that reads the page (stylebot outline <tab>, --tab <tab> for commands that take selectors, stylebot screenshot <tab>), and the site to the commands that change a style (stylebot css set <site>). Never rely on the active tab: the user can switch tabs while you work, and commands that change a style refuse to guess.
  2. If the user hasn't said what to change, or asks for ideas, run stylebot suggestions <tab>: the requests Stylebot's own Chat offers for this page, chosen from what's on it, plus a creative look. Offer their names as choices, with your tool for asking the user a question if you have one, and an option for something else. Carry out the chosen suggestion's full request text.
  3. Start a profile: run stylebot profiles <site> to see which profile is in use (starred), then stylebot profile create "Claude: <look>" <site> --from <profile in use> --use, naming the look in a word or two ("Claude: Dark", "Claude: Compact"). Your changes go there, and the user's own style stays one stylebot profile use <profile> <site> away. If the profile already exists from an earlier session, reuse it with stylebot profile use.
  4. Read the page: stylebot outline <tab> prints its visible elements and how each looks. stylebot css-variables <tab> prints its CSS variables. stylebot css get <site> prints the CSS already saved; build on it rather than starting over unless the user asks for a fresh start.
    • To style something that only shows on hover (a menu, a tooltip), open it first with stylebot hover <tab> <selector>, then read the outline again. A point works in place of a selector, as x,y in the pixels of a screenshot of the tab. Hovering doesn't apply the page's CSS :hover, so check hover styles by reading the CSS, not a screenshot.
    • When the user points at something you can't find in the outline, stylebot inspect <tab> <x,y> prints the selector Stylebot's inspector would pick for the element at that point of a screenshot, then other selectors for it with how many elements each matches: choose the one whose reach fits what the user asked to change.
  5. Write the CSS to ~/.stylebot/work/<site>.css, then save it with stylebot css set <site> --file ~/.stylebot/work/<site>.css. It replaces the site's whole stylesheet and applies to open tabs right away, so the file always holds the complete stylesheet: what was there and should stay, plus your changes. It refuses CSS that doesn't parse, and imports any Google Fonts family you name.
  6. Fix what css set reports: it checks the page the way Stylebot's Chat does, listing how many elements each selector matched, text your CSS made hard to read, surfaces a theme change missed, and selectors built on class names the site generates. Edit the file and save again until the report is clean:
    • Fix the cause, not the symptom. When only some of a selector's elements are hard to read, or one of your selectors painted a background, that selector is probably too broad (tr:first-child td matches the first row of every table): narrow it or take it back rather than recoloring text everywhere.
    • When one of your variables set the text's color, change that variable once instead of recoloring each element that uses it.
    • Replace a selector that matched nothing with one from the outline, unless it's meant for another page of the site. One that matched hundreds of elements is probably too broad.
    • Swap a fragile selector for the stable version it suggests, or select by something else.
  7. Look at it: stylebot screenshot <tab> -o ~/.stylebot/work/<site>-<n>.png, then open the image and look at it; never report a change you haven't seen. Run stylebot outline <tab> again too: it shows the colors and sizes as they are now, so it confirms a selector took effect and catches dark text on a dark background. Fix what's off and repeat.
  8. Close up: run stylebot done to close Stylebot's window.
  9. Tell the user in a sentence or two what changed, that it's saved in the "Claude: <look>" profile, and that stylebot profile use <their profile> <site> (or the profile menu in Stylebot) switches back. Don't paste the CSS unless they ask.

Empty CSS deletes the site's style. Confirm with the user before deleting a style or a profile they made themselves.

Show full SKILL.md (738 more words)Show less

Reading the outline

  • Each line is an element: tag, id, classes, a [bgcolor] attribute when it has one (that's its own background, so no bg repeats it; select by it, as in td[bgcolor="#ff6600"], when nothing else picks the element out), a snippet of its own text, then in brackets how it looks where that differs from its parent. bg is its own background color, bg-image a background image or gradient, color its text color, font its text size, family the font it sets.
  • The first of a run of repeated items (rows, cards, list items) also shows how it's spaced: pad and margin as CSS shorthand, lh its line-height as a multiple of its font size, h its rendered height; a container of such items shows its flex or grid gap. Size spacing changes from these. Making a list compact means h should shrink: lower lh (toward 1.2), and the pad, margin and gap that are above 0; never add any, and leave what is already 0.
  • The first line, (page), is the page's base background, text color, size and font. An element without bg shows whatever is behind it.
  • Use the brackets to find what a request is about: the elements with a white bg, the dark color that won't read on a new background, the small font that should grow.

Looking closer

  • stylebot page-rules <selector> --tab <tab> prints the site's own rules for the elements a selector matches: match or outdo their selectors where specificity matters, and build on the values already there.
  • stylebot computed-styles <selector> [property...] --tab <tab> prints computed values on the first element a selector matches, for exact sizes, colors and fonts.
  • stylebot match-count <selector...> --tab <tab> prints how many elements each selector matches, to try a selector before saving it.

Quote selectors in single quotes: stylebot match-count '.titleline > a' --tab 1234.

Writing CSS

  • Use selectors that match elements in the outline. Prefer stable ids and classes; avoid generated-looking class names (long random strings) and :nth-child chains. Keep selectors as short as they can be while still matching the right elements.
  • Never style bare element selectors that sweep the whole page, like div, span, section, article, p or *: a background on div paints over every card and panel at once. Name the specific elements instead.
  • Stylebot applies every declaration with !important unless the user has turned that off for the site, so don't add it yourself.
  • For fonts, name any Google Fonts family and css set imports it. Set font-family to that one family with no fallback stack (font-family: Lora, not font-family: Lora, Georgia, serif), quoted only if the name has spaces.
  • An element with its own family in the outline doesn't inherit a font set on body. To change the font everywhere, override the page's font variables when it has them, and otherwise set it on body and on each element that shows its own family; leave code and monospace alone unless asked.

Changing colors

Always check the page's CSS variables first (stylebot css-variables <tab>). Many sites define their palette as custom properties, and overriding a variable recolors everything that uses it consistently, including states and parts not in the outline. Set the variable itself on the selector it's listed under (:root or body), and only set colors on individual elements when no variable covers what the user asked for, or to fix an element that doesn't follow the variables.

Restyling a whole page (a dark mode, a new theme)

  1. Override the palette variables, if the page has them.
  2. Set the base background and text color on body, and on html when the (page) background comes from it.
  3. Recolor each element the outline shows with its own bg that would clash, with its own selector, and give it a matching color if its text would no longer read.
  4. Set color on the containers that hold text, not on every element. Links, headings and buttons that set their own color need theirs too.
  5. Remember form fields, borders, and icons drawn with fill or stroke. Set color-scheme on :root so scrollbars and native controls follow.

Keep text readable: light text on dark backgrounds or the reverse, never dark on dark, and a contrast of at least 4.5.

When asked to surprise the user, pick one coherent direction, a palette and a font pairing, and say in a sentence what you're going for: the colors, the fonts and the feel.

© ankit, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in tools/claude-plugin/skills/stylebot of ankit/stylebot.

Open the folder on GitHubat commit 96a61f5

Compare with similar skills

Stylebot next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Stylebot compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Stylebot this skillankit/stylebot1.6k—~2.8kAutomated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    184 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

More from ankit/stylebot

  • Eval Chat

    ankit/stylebot

    Measure whether a change makes Chat's styling replies better, with yarn eval:chat — it runs styling requests on recorded real pages for two versions of Stylebot and measures on the page whether each…

    1.6k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Release

    ankit/stylebot

    Cut a Stylebot release — CHANGELOG entry, version bump, release PR, tag, and store zips.

    1.6k GitHub stars~897 tokensUpdated today
    Auto-check passed

  • Translate

    ankit/stylebot

    Translate Stylebot's locale strings — fill in strings that English has and other locales lack, retranslate English strings that changed, or add a whole new locale (e.g.

    1.6k GitHub stars~1.9k tokensUpdated today
    Auto-check passed

  • Validate Stylebot

    ankit/stylebot

    Launch Stylebot in a real, headed Chrome window (via yarn dev:chrome) so the user can manually eyeball a change — in whatever checkout the current session is in, worktree or main.

    1.6k GitHub stars~780 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Stylebot

What does Stylebot do?

Restyle websites in the user's browser with the Stylebot extension's stylebot CLI — dark modes, themes, fonts, bigger text, hiding clutter, fixing a layout, or editing and managing the CSS and…. Stylebot is an agent skill from ankit/stylebot. Restyle websites in the user's browser with the Stylebot extension's stylebot CLI — dark modes, themes, fonts, bigger text, hiding clutter, fixing a layout, or editing and managing the CSS and profiles Stylebot has saved for a site.

When should I use Stylebot?

Stylebot fits situations like: the user wants to change how a website looks; asks about their Stylebot styles.

How do I install Stylebot in Claude Code?

Run `npx skills add ankit/stylebot --skill stylebot -a claude-code`. Or copy the skill folder (tools/claude-plugin/skills/stylebot in ankit/stylebot) into .claude/skills/stylebot in your project. Claude Code loads it when a task matches its description.

How do I install Stylebot in Codex?

Run `npx skills add ankit/stylebot --skill stylebot -a codex`. Or copy the skill folder (tools/claude-plugin/skills/stylebot in ankit/stylebot) into .agents/skills/stylebot in your project. Codex loads it when a task matches its description.

Can I use Stylebot in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ankit/stylebot --skill stylebot -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/stylebot, .gemini/skills/stylebot, .github/skills/stylebot and .opencode/skills/stylebot in your project.

What does Stylebot need to run?

Going by SKILL.md and its folder, Stylebot needs the command-line tools its instructions call (npm). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Bash(stylebot *), Read(~/.stylebot/work/**), Edit(~/.stylebot/work/**).

Does Stylebot access the network?

SKILL.md names 1 domain. As links in the text: stylebot.dev. This is read from the text; nothing was executed.

Is Stylebot safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Stylebot use?

Stylebot is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Stylebot use?

About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Stylebot?

Skills that share tags, products or a category with Stylebot: Impeccable (bestofjs/bestofjs, 3.1k stars), Figma Design System Builder (warpdotdev/warp, 65k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars) and UI Styling (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Stylebot?

ankit (a GitHub user) maintains it in ankit/stylebot, which has 1,647 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 8, 2026.

Source: ankit/stylebot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.