visual-test

75 / 100 · Review before installing

Check before installing.

By microsoft/fluentui (GitHub) · design · 20,399 stars · scanned at commit 49a668c

Visually verify a component by launching its Storybook story and taking a screenshot with playwright-cli. Use after making visual changes to a component.

Works with any agent that supports SKILL.md skills.

What this skill can do

Downloads and installs other software

The author does not mention this.

Found in 9 places.

.agents/skills/visual-test/SKILL.md, line 18npx -y @playwright/cli@0.1.1 <command>
.agents/skills/visual-test/SKILL.md, line 82npx -y @playwright/cli@0.1.1 open "http://localhost:$SB_PORT"
.agents/skills/visual-test/SKILL.md, line 89npx -y @playwright/cli@0.1.1 goto "http://localhost:$SB_PORT/iframe.html?id=components-<component>--default&viewMode=story"

Show 6 more

.agents/skills/visual-test/SKILL.md, line 90npx -y @playwright/cli@0.1.1 screenshot --filename=/tmp/visual-test-$ARGUMENTS.png
.agents/skills/visual-test/SKILL.md, line 98npx -y @playwright/cli@0.1.1 snapshot
.agents/skills/visual-test/SKILL.md, line 107npx -y @playwright/cli@0.1.1 close
.agents/skills/visual-test/SKILL.md, line 155- Use `npx -y @playwright/cli@0.1.1 snapshot` to get an accessibility tree — useful for verifying ARIA attributes and finding interactive elements.
.agents/skills/visual-test/SKILL.md, line 156- Use `npx -y @playwright/cli@0.1.1 click <ref>` to interact with the component (test hover states, open menus, etc.) before taking a screenshot.
.agents/skills/visual-test/SKILL.md, line 157- Use `npx -y @playwright/cli@0.1.1 resize <width> <height>` to test responsive behavior.

Runs commands on your computer

The author does not mention this.

Found in 10 places.

.agents/skills/visual-test/SKILL.md, line 18npx -y @playwright/cli@0.1.1 <command>
.agents/skills/visual-test/SKILL.md, line 30yarn nx show project react-<lowercase-component-name>-stories --json
.agents/skills/visual-test/SKILL.md, line 38yarn nx run react-<component>-stories:storybook &

Show 7 more

.agents/skills/visual-test/SKILL.md, line 52for i in $(seq 1 180); do
.agents/skills/visual-test/SKILL.md, line 69for i in $(seq 1 60); do
.agents/skills/visual-test/SKILL.md, line 82npx -y @playwright/cli@0.1.1 open "http://localhost:$SB_PORT"
.agents/skills/visual-test/SKILL.md, line 89npx -y @playwright/cli@0.1.1 goto "http://localhost:$SB_PORT/iframe.html?id=components-<component>--default&viewMode=story"
.agents/skills/visual-test/SKILL.md, line 98npx -y @playwright/cli@0.1.1 snapshot
.agents/skills/visual-test/SKILL.md, line 107npx -y @playwright/cli@0.1.1 close
.agents/skills/visual-test/SKILL.md, line 119cd packages/react-components/react-<component>/stories && yarn storybook dev --port 0 &

Connects to the internet

The author does not mention this.

Found in 2 places.

.agents/skills/visual-test/SKILL.md, line 56CT=$(curl -sI --max-time 2 "http://localhost:$port/" 2>/dev/null | grep -i '^content-type:' | grep -i 'text/html')
.agents/skills/visual-test/SKILL.md, line 70N=$(curl -s --max-time 2 "http://localhost:$SB_PORT/index.json" 2>/dev/null \

Safer alternatives

Low-risk skills in the same category (design) that look related. Check that one does what you need.

Other copies in this repository

microsoft/fluentui has 1 more folder with a skill named visual-test. This page shows the lowest-scoring copy.

.claude/skills/visual-test 100/100 · Low risk

Install

Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.

if [ -e ~/.agents/skills/'visual-test' ] || [ -L ~/.agents/skills/'visual-test' ]; then echo 'A skill folder named visual-test already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/microsoft/fluentui' "$d" && git -C "$d" checkout --quiet '49a668c1a20525b764e80d61e641a90fcf9276a0' -- '.agents/skills/visual-test' && mkdir -p ~/.agents/skills && cp -R "$d"/'.agents/skills/visual-test' ~/.agents/skills/'visual-test' && rm -rf "$d"; fi

Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'visual-test' ~/.claude/skills/'visual-test' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.

Badge for your README

The badge for microsoft/fluentui shows the score of its lowest-scoring skill.

SkillTrust badge for microsoft/fluentui

[![SkillTrust](https://zalavijaysinh.github.io/skilltrust/badges/microsoft/fluentui.svg)](https://zalavijaysinh.github.io/skilltrust/repos/microsoft/fluentui/)

Score history

Date	Version	Score
2026-11-11	`49a668c`	75
2026-11-08	`19e2d5c`	75
2026-11-07	`19e2d5c`	75