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

Computed Styles

by bitovi in bitovi/ai-enablement-prompts

Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls.

MITAuto-check passedTesting & QA

Install Computed Styles

skills CLI
$ npx skills add bitovi/ai-enablement-prompts --skill computed-styles -a claude-code

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

GitHub CLI
$ gh skill install bitovi/ai-enablement-prompts computed-styles --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/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/playwright/skills/computed-styles .claude/skills/computed-styles && 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
computed-styles
GitHub stars
121
Token cost
~2.4k tokens
SKILL.md length
899 words
Files
1
Skills in repo
40
Repo updated
First seen
Licence
MIT

At a glance

Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls.

  • Works in 7 steps: Plan which elements and properties to… → Extract styles from the baseline → Extract styles from the current page → …
  • Visual differences have been identified and you need to find the exact CSS property mismatches to fix
  • SKILL.md covers When to Use, When NOT to Use, Prerequisites and Key Concepts, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Computed Styles is an agent skill from bitovi/ai-enablement-prompts. Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls. Use when visual differences have been identified and you need to find the exact CSS property mismatches to fix. Pairs with the visual-diff skill for a complete visual QA workflow.

Its SKILL.md is about 2.4k 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 Testing & QA, covering Visual regression testing, Browser testing and CSS and styling. It works with Storybook, Tailwind CSS, Model Context Protocol and Playwright. The repository describes itself as: Prompts Bitovi uses for software development. The licence is MIT.

When your agent uses it

  • Visual differences have been identified and you need to find the exact CSS property mismatches to fix
  • Tasks that involve Visual regression testing
  • Tasks that involve Browser testing

Example prompts

  • “/computed-styles”

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. Plan which elements and properties to extract
  2. Extract styles from the baseline
  3. Extract styles from the current page
  4. Compare and build a diff table
  5. Fix with Tailwind classes
  6. Verify the fix
  7. Repeat for remaining differences

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript and typescript).

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

  • Network

    No URLs in SKILL.md.

    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

Computed Styles loads about 2.4k tokens when it runs. Until then it costs about 80 tokens; SKILL.md has 899 words of instructions outside code blocks.

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

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 bitovi/ai-enablement-prompts at commit df229b1, republished under its MIT licence (© bitovi). 899 words, ~2,448 tokens.

Download SKILL.mdSave it as .claude/skills/computed-styles/SKILL.md (or your agent's skills folder).
name
computed-styles
description
Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls. Use when visual differences have been identified and you need to find the exact CSS property mismatches to fix. Pairs with the visual-diff skill for a complete visual QA workflow.

Skill: Computed Style Comparison

Use Playwright MCP's evaluate to extract getComputedStyle() values from a baseline page and a current page, compare them property-by-property, and fix the differences with Tailwind classes.

When to Use

  • After the visual-diff skill has identified pixel differences between two pages
  • When you need exact CSS property values to guide Tailwind class changes
  • When visual comparison alone is ambiguous (e.g., is the font 20px or 24px?)
  • When fixing a component to match production styling

When NOT to Use

  • For initial discovery of visual differences (use visual-diff first)
  • When the pages have fundamentally different HTML structures
  • For layout issues caused by content differences, not style differences

Prerequisites

  1. Playwright MCP is configured in .vscode/mcp.json
  2. Both URLs are accessible (baseline and current)
  3. You know which elements to compare (from visual-diff results or user input)

Key Concepts

Accessing Storybook Content

Storybook renders stories inside an iframe. You must access elements through it:

js
// Inside mcp_playwright_browser_evaluate
const iframe = document.querySelector('#storybook-preview-iframe');
const doc = iframe.contentDocument;
const cs = doc.defaultView.getComputedStyle.bind(doc.defaultView);

const element = doc.querySelector('nav');
const styles = cs(element);
Accessing Regular Pages

For production or dev server pages, access elements directly:

js
const cs = window.getComputedStyle.bind(window);
const element = document.querySelector('nav');
const styles = cs(element);
Tailwind v4 Theme Gotcha

This project uses Tailwind v4 with a custom theme in src/styles/bitovi-theme.css. Standard utility classes may not map to expected values. For example, text-xl in this project is 1.5rem (24px), not the standard 20px. Always verify with getComputedStyle() after applying Tailwind classes, and use arbitrary values like text-[20px] when standard classes don't produce the right output.

CSS Specificity in Tailwind v4

Tailwind v4 uses CSS layers, so class order in the HTML doesn't determine specificity the way it did in v3. If you apply both lg:text-teal-950 and lg:text-teal-600 to the same element, whichever comes later in the generated CSS wins, not whichever is last in the class attribute. To conditionally apply colors, use ternary expressions:

tsx
// WRONG: both classes always present, CSS layer order wins
className={`lg:text-teal-950 ${isActive ? 'lg:text-teal-600' : ''}`}

// RIGHT: only one color class at a time
className={isActive ? 'lg:text-teal-600' : 'lg:text-teal-950'}

Workflow

Step 1: Plan which elements and properties to extract

Based on the visual-diff results, identify the regions with differences and map them to DOM elements. Build a list of element/property pairs to extract.

Common element targets:

RegionTypical selectorKey properties
Nav containernav, nav parentheight, padding, maxWidth, boxShadow, backgroundColor
Logonav img, nav svgwidth, height
Nav itemsnav ul > lifontSize, fontWeight, color, lineHeight, margin, fontFamily
CTA buttonbutton with CTA textheight, padding, borderRadius, backgroundColor, fontSize
Dropdown panel[id^="dropdown-"]backgroundColor, borderRadius, overflow, maxWidth
Card / list itemsli, .cardmargin, padding, fontSize, fontWeight, color, lineHeight
Headingsh1–h6, [class*="uppercase"]fontSize, fontWeight, color, letterSpacing, textTransform
Linksacolor, fontSize, fontWeight, textDecoration

Common properties to compare:

fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, textTransform,
color, backgroundColor, borderRadius, boxShadow,
width, height, maxWidth, minHeight,
padding, margin, gap,
display, alignItems, justifyContent, flexDirection,
overflow, opacity
Step 2: Extract styles from the baseline

Navigate to the baseline URL and use mcp_playwright_browser_evaluate to extract all target properties in a single call. Return a structured object.

Template for production pages:

js
// mcp_playwright_browser_evaluate
() => {
  const cs = window.getComputedStyle.bind(window);

  // Find elements — use text content or structure, not brittle selectors
  const nav = document.querySelector('nav');
  // ... find other elements ...

  return {
    nav: {
      height: cs(nav).height,
      padding: cs(nav).padding,
      maxWidth: cs(nav).maxWidth,
    },
    // ... other elements ...
  };
}

Tips for finding elements on production pages:

  • Search by text content with TreeWalker or querySelectorAll + .textContent filtering
  • Search by class name fragments: [class*="nav-icon"]
  • Filter multiple matches by visibility: getComputedStyle(el).display !== 'none'
  • Walk up from a known text node: element.closest('li'), .parentElement
Step 3: Extract styles from the current page

Navigate to the current URL and run the same extraction. For Storybook, use the iframe access pattern.

Template for Storybook:

js
// mcp_playwright_browser_evaluate
() => {
  const iframe = document.querySelector('#storybook-preview-iframe');
  const doc = iframe.contentDocument;
  const cs = doc.defaultView.getComputedStyle.bind(doc.defaultView);

  const nav = doc.querySelector('nav');
  // ... find other elements ...

  return {
    nav: {
      height: cs(nav).height,
      padding: cs(nav).padding,
      maxWidth: cs(nav).maxWidth,
    },
    // ... other elements ...
  };
}
Step 4: Compare and build a diff table

Compare every extracted value. Build a table like:

ElementPropertyBaselineCurrentMatch
navheight80px60pxNO
navpadding0px 128px0px 32pxNO
nav itemfontSize20px24pxNO
nav itemfontWeight600600YES

Focus on the mismatches.

Show full SKILL.md (350 more words)Show less
Step 5: Fix with Tailwind classes

For each mismatch, determine the correct Tailwind class. Prefer standard utilities; use arbitrary values when the theme doesn't have an exact match.

Desired valueTailwind approach
Standard spacing (4px, 8px, 16px...)p-1, p-2, p-4 etc.
Non-standard spacingp-[13px], m-[38px]
Standard colors in themetext-teal-600, bg-teal-950
Box shadowsshadow-[0_0_24px_-4px_rgb(191,197,198)]
Font sizes matching themeCheck bitovi-theme.css @theme block first
Font sizes not in themetext-[20px]
Step 6: Verify the fix

After applying changes, re-extract computed styles from the current page and confirm the values now match the baseline. This is critical because:

  1. Tailwind theme overrides can produce unexpected values
  2. CSS specificity conflicts can prevent classes from taking effect
  3. Parent element styles can cascade and override child styles
Step 7: Repeat for remaining differences

Work through the diff table systematically. After fixing a batch of related properties (e.g., all nav container styles), re-extract and verify before moving to the next batch.

Comprehensive Extraction Pattern

For efficiency, extract all properties in a single evaluate call rather than making many small calls. Here's a pattern for extracting a full nav component:

js
() => {
  const cs = window.getComputedStyle.bind(window);
  const props = (el) => !el ? null : ({
    fontSize: cs(el).fontSize,
    fontWeight: cs(el).fontWeight,
    fontFamily: cs(el).fontFamily.split(',')[0].trim(),
    color: cs(el).color,
    backgroundColor: cs(el).backgroundColor,
    lineHeight: cs(el).lineHeight,
    letterSpacing: cs(el).letterSpacing,
    height: cs(el).height,
    width: cs(el).width,
    padding: cs(el).padding,
    margin: cs(el).margin,
    borderRadius: cs(el).borderRadius,
    boxShadow: cs(el).boxShadow,
  });

  const nav = document.querySelector('nav');
  // ... find elements ...

  return {
    nav: props(nav),
    // ... other elements ...
  };
}

Common Pitfalls

  1. Storybook iframe: Always access through #storybook-preview-iframe. Queries on the top-level document won't find story content.

  2. Multiple matching elements: Production pages often have duplicate elements (mobile vs desktop nav). Filter by display !== 'none' or check for the presence of child elements unique to the visible version.

  3. React state in Storybook: You cannot trigger React state changes via dispatchEvent inside evaluate. Use Storybook story variants (e.g., --services-dropdown-open) or the play function in stories to set the desired state.

  4. Color format differences: rgb(0, 132, 139) and #00848B are the same color. Compare numerically if needed, but getComputedStyle always returns rgb() or rgba() format on both sides.

  5. Subpixel rendering: Values like 37.6406px vs 38px are acceptable matches. Don't chase fractional pixel differences.

  6. Font family strings: getComputedStyle returns the full stack (e.g., Inter, sans-serif). Split on comma and compare only the first family.

Cleanup

No files are created on disk. All data lives in the evaluate return values and the conversation context.

© bitovi, 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 plugins/playwright/skills/computed-styles of bitovi/ai-enablement-prompts.

Open the folder on GitHubat commit df229b1

Compare with similar skills

Computed Styles 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.

Computed Styles compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Computed Styles this skillbitovi/ai-enablement-prompts121—~2.4kAutomated safety check: PassMIT
Sanity Visual Regressionsanity-io/sanity6.4k—~3.4kAutomated safety check: PassMIT
Economical Visual Testsigrlk/storybook-addon-test-codegen1541 repos~1.1kAutomated safety check: PassMIT
Playwright Testingchongdashu/vibejam-starter-pack149—~2.2kAutomated safety check: PassNone
Plugin InstallerIgorWarzocha/Opencode-Workflows122—~1.3kAutomated safety check: PassNone
Smartui Skillsickn33/agentic-awesome-skills47k1 repos~1.1kAutomated safety check: PassMIT

Similar skills

  • Sanity Visual Regression

    sanity-io/sanity

    Official

    Add, review, and maintain Chromatic visual regression coverage in the Sanity monorepo via dev/storybook stories, the vitest browser-mode suite, and Playwright e2e snapshots.

    6.4k GitHub stars~3.4k tokensUpdated today
    Testing & QAAuto-check passed

  • Economical Visual Tests

    igrlk/storybook-addon-test-codegen

    Author economical visual tests — full visual coverage in the fewest billable snapshots.

    154 GitHub starsUsed in 1 repo~1.1k tokens
    Testing & QAAuto-check passed

  • Playwright Testing

    chongdashu/vibejam-starter-pack

    Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.

    149 GitHub stars~2.2k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed

  • Plugin Installer

    IgorWarzocha/Opencode-Workflows

    Find, install, and configure OpenCode plugins from the catalog or community.

    122 GitHub stars~1.3k tokensUpdated 8 mo ago
    Frontend & DesignAuto-check passed

  • Smartui Skill

    sickn33/agentic-awesome-skills

    Generates SmartUI visual regression test configurations for screenshot comparison on TestMu AI cloud.

    47k GitHub starsUsed in 1 repo~1.1k tokens
    Testing & QAAuto-check passed

  • Triaging Visual Review Runs

    PostHog/posthog

    Official

    Inspects PostHog Visual Review (VR) runs that gate PR merges with screenshot regression checks.

    40k GitHub stars~9.1k tokensUpdated today
    Testing & QAAuto-check passed

More from bitovi/ai-enablement-prompts

All 40 skills in this repo

  • Component Registry

    bitovi/ai-enablement-prompts

    Track reusable UI components and unextracted patterns. An agent skill from bitovi/ai-enablement-prompts.

    121 GitHub stars~597 tokensUpdated 27 days ago
    Auto-check passed

  • Create Plugin

    bitovi/ai-enablement-prompts

    A skill your agent uses when the user asks to "create a plugin", "add a plugin", "make a new plugin", "build a plugin", or wants to package skills into an installable plugin for this marketplace.

    121 GitHub stars~2k tokensUpdated 27 days ago
    Auto-check passed

  • Create React Modlet

    bitovi/ai-enablement-prompts

    Create React components, hooks, or utilities following the modlet pattern.

    121 GitHub stars~2.1k tokensUpdated 27 days ago
    Auto-check passed

  • Create Skill

    bitovi/ai-enablement-prompts

    A skill your agent uses when the user asks to "create a skill", "add a skill", "make a new skill", "build a skill", or wants to automate a repeated workflow into a reusable prompt.

    121 GitHub stars~1.6k tokensUpdated 27 days ago
    Auto-check passed

  • Create Skill

    bitovi/ai-enablement-prompts

    Create new Agent Skills for this project. An agent skill from bitovi/ai-enablement-prompts.

    121 GitHub stars~1.7k tokensUpdated 27 days ago
    Auto-check passed

  • Cross Package Types

    bitovi/ai-enablement-prompts

    Type flow patterns for tRPC + Prisma monorepos. An agent skill from bitovi/ai-enablement-prompts.

    121 GitHub stars~1.1k tokensUpdated 27 days ago
    Auto-check passed

Works with

Categories

Questions about Computed Styles

What does Computed Styles do?

Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls. Computed Styles is an agent skill from bitovi/ai-enablement-prompts. Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls.

When should I use Computed Styles?

Computed Styles fits situations like: visual differences have been identified and you need to find the exact CSS property mismatches to fix; tasks that involve Visual regression testing; tasks that involve Browser testing.

How do I install Computed Styles in Claude Code?

Run `npx skills add bitovi/ai-enablement-prompts --skill computed-styles -a claude-code`. Or copy the skill folder (plugins/playwright/skills/computed-styles in bitovi/ai-enablement-prompts) into .claude/skills/computed-styles in your project. Claude Code loads it when a task matches its description.

How do I install Computed Styles in Codex?

Run `npx skills add bitovi/ai-enablement-prompts --skill computed-styles -a codex`. Or copy the skill folder (plugins/playwright/skills/computed-styles in bitovi/ai-enablement-prompts) into .agents/skills/computed-styles in your project. Codex loads it when a task matches its description.

Can I use Computed Styles 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 bitovi/ai-enablement-prompts --skill computed-styles -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/computed-styles, .gemini/skills/computed-styles, .github/skills/computed-styles and .opencode/skills/computed-styles in your project.

What does Computed Styles need to run?

SKILL.md names no scripts, command-line tools or credentials: Computed Styles is instructions for the agent only.

Does Computed Styles access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Computed Styles 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 Computed Styles use?

Computed Styles 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 Computed Styles use?

About 2.4k tokens (SKILL.md is roughly 9.8k 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 Computed Styles?

Skills that share tags, products or a category with Computed Styles: Sanity Visual Regression (sanity-io/sanity, 6.4k stars), Economical Visual Tests (igrlk/storybook-addon-test-codegen, 154 stars), Playwright Testing (chongdashu/vibejam-starter-pack, 149 stars) and Plugin Installer (IgorWarzocha/Opencode-Workflows, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Computed Styles?

bitovi (a GitHub organization) maintains it in bitovi/ai-enablement-prompts, which has 121 GitHub stars. The repository holds 40 skills in this directory. The repository was last updated on September 11, 2026.

Source: bitovi/ai-enablement-prompts on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.