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

Discover Visual States

by bitovi in bitovi/ai-enablement-prompts

Discover all visual states of a component by interactively exploring the production baseline page — not by reading story files.

MITAuto-check passedFrontend & Design

Install Discover Visual States

skills CLI
$ npx skills add bitovi/ai-enablement-prompts --skill discover-visual-states -a claude-code

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

GitHub CLI
$ gh skill install bitovi/ai-enablement-prompts discover-visual-states --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/discover-visual-states .claude/skills/discover-visual-states && 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
discover-visual-states
GitHub stars
121
Token cost
~2.7k tokens
SKILL.md length
710 words
Files
1
Skills in repo
40
Repo updated
First seen
Licence
MIT

At a glance

Discover all visual states of a component by interactively exploring the production baseline page — not by reading story files.

  • Works in 8 steps: Check for existing config → Navigate to baseline and scope the… → Discover interactive elements → …
  • Tasks that involve Design to code
  • SKILL.md covers When to Use, When NOT to Use, Inputs and Output:…, plus 3 more sections
  • Reaches bitovi.com

What it does

Discover Visual States is an agent skill from bitovi/ai-enablement-prompts. Discover all visual states of a component by interactively exploring the production baseline page — not by reading story files. Finds every interactive element (nav items, dropdowns, toggles, buttons) that produces a distinct visual state, records the interactions needed to reach each one, and saves a pixel-perfect.config.json that the pixel-perfect skill uses to replay those same interactions on both production and Storybook. Run this once per component; re-run when the production page changes.

Its SKILL.md is about 2.7k 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 Design to code. It works with Storybook. The repository describes itself as: Prompts Bitovi uses for software development. The licence is MIT.

When your agent uses it

  • Tasks that involve Design to code

Example prompts

  • “/discover-visual-states”

Workflow steps

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

  1. Check for existing config
  2. Navigate to baseline and scope the component
  3. Discover interactive elements
  4. Probe each element to confirm it produces a distinct visual state
  5. Determine interaction type (hover vs click)
  6. Build and confirm the config
  7. Verify interactions work on Storybook too
  8. Save config

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, json and typescript).

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • bitovi.com

    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

Discover Visual States loads about 2.7k tokens when it runs. Until then it costs about 131 tokens; SKILL.md has 710 words of instructions outside code blocks.

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

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). 710 words, ~2,661 tokens.

Download SKILL.mdSave it as .claude/skills/discover-visual-states/SKILL.md (or your agent's skills folder).
name
discover-visual-states
description
Discover all visual states of a component by interactively exploring the production baseline page — not by reading story files. Finds every interactive element (nav items, dropdowns, toggles, buttons) that produces a distinct visual state, records the interactions needed to reach each one, and saves a pixel-perfect.config.json that the pixel-perfect skill uses to replay those same interactions on both production and Storybook. Run this once per component; re-run when the production page changes.

Skill: Discover Visual States

Explore the production page to discover every distinct visual state a component can be in. Save the interactions needed to reach each state to pixel-perfect.config.json. The pixel-perfect skill then replays those same interactions on both production and Storybook — no separate story per state required.

When to Use

  • Before running pixel-perfect on a component for the first time
  • When the production page has gained new interactive states
  • When pixel-perfect.config.json does not exist yet for a component

When NOT to Use

  • When pixel-perfect.config.json already exists and is up to date (pixel-perfect will tell you)
  • For components with no interactive states (config will just have the default state)

Inputs

InputRequiredExample
Baseline URLYeshttps://www.bitovi.com
Component scope hintYesnavbar, header nav, [aria-label="Main navigation"] — narrows which part of the page to inspect
Storybook default story URLYeshttp://localhost:6007/iframe.html?id=components-meganavbar--default&viewMode=story
Config output pathAuto-derivedtemp/MegaNavBar/pixel-perfect.config.json — always temp/{ComponentName}/pixel-perfect.config.json

Output: pixel-perfect.config.json

json
{
  "baselineUrl": "https://www.bitovi.com",
  "storybookUrl": "http://localhost:6007/iframe.html?id=components-meganavbar--default&viewMode=story",
  "configPath": "temp/MegaNavBar/pixel-perfect.config.json",
  "states": [
    {
      "label": "default",
      "description": "Component in resting state — no interactions",
      "interactions": []
    },
    {
      "label": "services-dropdown",
      "description": "Services dropdown open",
      "interactions": [
        { "type": "hover", "target": "text:Services" }
      ]
    },
    {
      "label": "our-work-dropdown",
      "description": "Our work dropdown open",
      "interactions": [
        { "type": "hover", "target": "text:Our work" }
      ]
    },
    {
      "label": "contact-form",
      "description": "Contact form panel open",
      "interactions": [
        { "type": "click", "target": "text:Contact Us" }
      ]
    }
  ]
}

Workflow

Step 1: Check for existing config

Derive the config path from the component name: temp/{ComponentName}/pixel-perfect.config.json (e.g. MegaNavBar → temp/MegaNavBar/pixel-perfect.config.json). Create the directory if it does not exist.

Look for pixel-perfect.config.json at that path.

  • If it exists: read it, show the user the current states, ask whether to re-discover or use as-is.
  • If it does not exist: proceed to Step 2.
Step 2: Navigate to baseline and scope the component
  1. Navigate to the baseline URL with Playwright
  2. Dismiss any cookie banners or overlays
  3. Resize viewport to 1280x720
  4. Wait for the page to fully load (2 seconds)
  5. Use mcp_playwright_browser_evaluate to find the component root element using the scope hint:
js
() => {
  const el = document.querySelector('[aria-label="Main navigation"]')
    || document.querySelector('nav')
    || document.querySelector('header');
  return el ? {
    tag: el.tagName,
    id: el.id,
    class: el.className.substring(0, 100),
    rect: el.getBoundingClientRect()
  } : null;
}
Step 3: Discover interactive elements

Within the scoped component, find all elements that can produce a distinct visual state. Run this evaluation:

js
() => {
  const scope = document.querySelector('[aria-label="Main navigation"]') || document.querySelector('nav');
  if (!scope) return [];

  const candidates = [];

  // Buttons and role=button elements
  scope.querySelectorAll('button, [role="button"]').forEach(el => {
    if (el.offsetParent === null) return; // skip hidden
    candidates.push({
      type: 'button',
      text: el.textContent.trim().substring(0, 40),
      ariaExpanded: el.getAttribute('aria-expanded'),
      ariaLabel: el.getAttribute('aria-label'),
    });
  });

  // Links that might reveal sub-menus
  scope.querySelectorAll('a[aria-haspopup], li[aria-haspopup]').forEach(el => {
    candidates.push({
      type: 'link-with-popup',
      text: el.textContent.trim().substring(0, 40),
    });
  });

  // List items with cursor:pointer that aren't plain links
  scope.querySelectorAll('li').forEach(el => {
    if (window.getComputedStyle(el).cursor === 'pointer') {
      const text = el.querySelector('button, a')?.textContent?.trim()?.substring(0, 40);
      if (text) candidates.push({ type: 'clickable-li', text });
    }
  });

  return candidates;
}

Deduplicate by text. This gives a raw list of interactive elements.

Step 4: Probe each element to confirm it produces a distinct visual state

For each candidate, probe it by hovering and clicking to see if the page changes:

  1. Reset: reload the baseline URL (fresh state)
  2. Apply interaction (hover first, then click if hover produces nothing):
    • Use mcp_playwright_browser_snapshot to find the element ref by its text
    • Use mcp_playwright_browser_hover or mcp_playwright_browser_click
    • Wait 500ms
  3. Check if state changed: look for newly visible elements (dropdowns, panels, overlays) using:
js
() => {
  // Find elements that became visible (have content and are now visible)
  return Array.from(document.querySelectorAll('[aria-expanded="true"], [class*="dropdown"][style*="block"], [class*="open"], [class*="active"]'))
    .filter(el => el.offsetParent !== null)
    .map(el => ({ tag: el.tagName, class: el.className.substring(0, 60) }));
}
  1. If new content appeared: take a screenshot, record this as a distinct state with the interaction that triggered it
  2. If nothing changed: skip this element — it doesn't produce a distinct visual state in the component's scope
Show full SKILL.md (301 more words)Show less
Step 5: Determine interaction type (hover vs click)

For nav items and dropdowns, prefer hover if it opens the state — it more accurately reflects the production behavior. Use click for toggles (contact forms, mobile menus, accordions).

Heuristic:

  • If the element has aria-expanded that changes on hover → use hover
  • If clicking is required to toggle → use click
  • If both work → prefer hover for dropdowns, click for forms/panels
Step 6: Build and confirm the config

Assemble the states list:

  1. Always include { label: "default", interactions: [] } as the first state
  2. Add one entry per probed interaction that produced a distinct visual state
  3. Use kebab-case for label derived from the element text (e.g. "Services" → "services-dropdown", "Contact Us" → "contact-form")

Show the proposed config to the user in a formatted block:

Discovered N visual states for [component] on [baselineUrl]:

  ✅ default             → no interactions (resting state)
  ✅ services-dropdown   → hover "Services"
  ✅ our-work-dropdown   → hover "Our work"
  ✅ community-dropdown  → hover "Community"
  ✅ contact-form        → click "Contact Us"

Storybook URL: http://localhost:6007/iframe.html?id=...--default

Does this look correct? Confirm to save, or describe any changes needed.

Wait for user confirmation before saving.

Step 7: Verify interactions work on Storybook too

Navigate to the storybookUrl. For each state (except default), attempt the interaction on the Storybook component using the same text/role target.

  • If the element is found and the interaction works → mark ✅
  • If the element is not found or produces no visible change → mark ⚠️ and note it in the config with "storybookWarning": "element not found"

This catches mismatches early — e.g. if the Storybook component uses different text for a button.

Step 8: Save config

Write pixel-perfect.config.json to the specified output path. Confirm the saved path to the user.

Interaction Object Reference

ts
// Hover interaction
{ "type": "hover", "target": "text:Services" }

// Click interaction
{ "type": "click", "target": "text:Contact Us" }

// Keyboard interaction
{ "type": "keydown", "target": "text:Search", "key": "Enter" }

// Type into a field
{ "type": "type", "target": "label:Search", "value": "consulting" }

Target format:

  • text:X — find the first visible element whose trimmed text content is X
  • role:button:X — find <button> or role="button" with accessible name X
  • label:X — find an input associated with label text X
  • selector:X — use X directly as a CSS selector (last resort)

When replaying interactions in pixel-perfect, translate targets to Playwright MCP calls:

  1. mcp_playwright_browser_snapshot → find the ref matching the target description
  2. mcp_playwright_browser_hover / mcp_playwright_browser_click with that ref

Example Output

User: "Discover visual states for the MegaNavBar.
       Baseline: https://www.bitovi.com
       Scope: nav[aria-label='Main navigation']
       Storybook: http://localhost:6007/iframe.html?id=components-meganavbar--default&viewMode=story
       Config: temp/MegaNavBar/pixel-perfect.config.json"

Agent:
1. Navigate to https://www.bitovi.com
2. Dismiss cookie banner
3. Scope to <nav> — found navigation element
4. Discover interactive elements:
   - Buttons: Services, Our work, Community, Contact Us
   - Clickable LIs: About, Careers
5. Probe each:
   - "Services" hover → dropdown appeared (Project management, Product design...) ✅
   - "Our work" hover → dropdown appeared (Showcase, More Projects...) ✅
   - "Community" hover → dropdown appeared (Blog, Academy...) ✅
   - "Contact Us" click → form panel appeared ✅
   - "About" click → navigates away — skip (full navigation, not a visual state)
   - "Careers" click → navigates away — skip
6. Verify on Storybook:
   - All 4 interactions work on Storybook default story ✅
7. Config saved to temp/MegaNavBar/pixel-perfect.config.json
   5 states: default, services-dropdown, our-work-dropdown,
             community-dropdown, contact-form

© 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/discover-visual-states of bitovi/ai-enablement-prompts.

Open the folder on GitHubat commit df229b1

Compare with similar skills

Discover Visual States 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.

Discover Visual States compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Discover Visual States this skillbitovi/ai-enablement-prompts121—~2.7kAutomated safety check: PassMIT
Design To Codeyonatangross/orchestkit292—~4.4kAutomated safety check: NotesMIT
Storybook MCP Integrationyonatangross/orchestkit292—~1.5kAutomated safety check: PassMIT
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma Design to Codewarpdotdev/warp65k4 repos~2.9kAutomated safety check: PassAGPL-3.0
Scalar Design Systemscalar/scalar16k—~2.7kAutomated safety check: PassMIT

Similar skills

  • Design To Code

    yonatangross/orchestkit

    Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP.

    292 GitHub stars~4.4k tokensUpdated yesterday
    Frontend & DesignAuto-check: notes

  • Storybook MCP Integration

    yonatangross/orchestkit

    Reference for the Storybook MCP server itself (@storybook/addon-mcp): 6 tools across 3 toolsets (dev, docs, testing), availability detection, and per-agent toolset filtering.

    292 GitHub stars~1.5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

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

  • Figma Design to Code

    warpdotdev/warp

    Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

    65k GitHub starsUsed in 4 repos~2.9k tokens
    Frontend & DesignAuto-check passed

  • Scalar Design System

    scalar/scalar

    Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.

    16k GitHub stars~2.7k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Figma Design System Rules Generator

    warpdotdev/warp

    Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.

    65k GitHub starsUsed in 3 repos~4.6k tokens
    Frontend & DesignAuto-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 1 mo ago
    Auto-check passed

  • Computed Styles

    bitovi/ai-enablement-prompts

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

    121 GitHub stars~2.4k tokensUpdated 1 mo 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 1 mo 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 1 mo 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 1 mo 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 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Discover Visual States

What does Discover Visual States do?

Discover all visual states of a component by interactively exploring the production baseline page — not by reading story files. Discover Visual States is an agent skill from bitovi/ai-enablement-prompts. Discover all visual states of a component by interactively exploring the production baseline page — not by reading story files.

When should I use Discover Visual States?

Discover Visual States fits situations like: tasks that involve Design to code.

How do I install Discover Visual States in Claude Code?

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

How do I install Discover Visual States in Codex?

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

Can I use Discover Visual States 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 discover-visual-states -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/discover-visual-states, .gemini/skills/discover-visual-states, .github/skills/discover-visual-states and .opencode/skills/discover-visual-states in your project.

What does Discover Visual States need to run?

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

Does Discover Visual States access the network?

SKILL.md names 1 domain. In commands or code: bitovi.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Discover Visual States 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 Discover Visual States use?

Discover Visual States 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 Discover Visual States use?

About 2.7k 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 Discover Visual States?

Skills that share tags, products or a category with Discover Visual States: Design To Code (yonatangross/orchestkit, 292 stars), Storybook MCP Integration (yonatangross/orchestkit, 292 stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars) and Figma Design to Code (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Discover Visual States?

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.