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.
Visual development with Patchright screenshots. An agent skill from adam-s/intercept.
Install Visual Dev
$ npx skills add adam-s/intercept --skill visual-dev -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install adam-s/intercept visual-dev --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/adam-s/intercept.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/visual-dev .claude/skills/visual-dev && rm -rf skills-srcUse ~/.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/
Install the "visual-dev" agent skill from https://github.com/adam-s/intercept/tree/main/.claude/skills/visual-dev into .claude/skills/visual-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-dev", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/adam-s/intercept/tree/main/.claude/skills/visual-devType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add adam-s/intercept --skill visual-dev -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install adam-s/intercept visual-dev --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/adam-s/intercept.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/visual-dev .agents/skills/visual-dev && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "visual-dev" agent skill from https://github.com/adam-s/intercept/tree/main/.claude/skills/visual-dev into .agents/skills/visual-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-dev", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add adam-s/intercept --skill visual-dev -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install adam-s/intercept visual-dev --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/adam-s/intercept.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/visual-dev .cursor/skills/visual-dev && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "visual-dev" agent skill from https://github.com/adam-s/intercept/tree/main/.claude/skills/visual-dev into .cursor/skills/visual-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-dev", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/adam-s/intercept.git --path .claude/skills/visual-dev--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add adam-s/intercept --skill visual-dev -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install adam-s/intercept visual-dev --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/adam-s/intercept.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/visual-dev .gemini/skills/visual-dev && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "visual-dev" agent skill from https://github.com/adam-s/intercept/tree/main/.claude/skills/visual-dev into .gemini/skills/visual-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-dev", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install adam-s/intercept visual-devInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add adam-s/intercept --skill visual-dev -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/adam-s/intercept.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/visual-dev .github/skills/visual-dev && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "visual-dev" agent skill from https://github.com/adam-s/intercept/tree/main/.claude/skills/visual-dev into .github/skills/visual-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-dev", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add adam-s/intercept --skill visual-dev -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install adam-s/intercept visual-dev --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/adam-s/intercept.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/visual-dev .opencode/skills/visual-dev && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "visual-dev" agent skill from https://github.com/adam-s/intercept/tree/main/.claude/skills/visual-dev into .opencode/skills/visual-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-dev", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
visual-dev- GitHub stars
- 189
- Token cost
- ~812 tokens
- SKILL.md length
- 289 words
- Files
- 9
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- MIT
At a glance
Visual development with Patchright screenshots. An agent skill from adam-s/intercept.
- Works in 3 steps: Discover the running server → Discover auth credentials → Create screenshot directory
- Creating new UI pages and dashboard components
- SKILL.md covers Prerequisites, Phase Overview, Critical Gate and Cleanup
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Visual Dev is an agent skill from adam-s/intercept. Visual development with Patchright screenshots. Use when building, fixing, reviewing, or creating new UI pages and dashboard components. Use when the user wants to build a dashboard, create a new page, verify UI works correctly, or iterate on visual design. Takes screenshots, analyzes layout, iterates until correct.
Its SKILL.md is about 810 tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files (for example `reference/common-visual-bugs.md`, `reference/phase-1-understand.md` and `reference/phase-2-enumerate.md`).
It sits in Frontend & Design, covering UI design. The repository describes itself as: Turn any website into a typed JSON API using self improving agents. The licence is MIT.
When your agent uses it
- Creating new UI pages and dashboard components
- The user wants to build a dashboard
- Create a new page
- Verify UI works correctly
Example prompts
- “/visual-dev”
Workflow steps
3 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 6451b89. 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 bash).
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
Visual Dev loads about 812 tokens when it runs. Until then it costs about 82 tokens; SKILL.md has 289 words of instructions outside code blocks.
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: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NoteMentions a .env fileSKILL.md:26
check: existing e2e tests, seed files, `.env.test`, CLAUDE.md. Also extract the post-login redirect URL for `waitForURL
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 adam-s/intercept at commit 6451b89, republished under its MIT licence (© adam-s). 289 words, ~812 tokens.
Download SKILL.mdSave it as
.claude/skills/visual-dev/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.- name
- visual-dev
- description
- Visual development with Patchright screenshots. Use when building, fixing, reviewing, or creating new UI pages and dashboard components. Use when the user wants to build a dashboard, create a new page, verify UI works correctly, or iterate on visual design. Takes screenshots, analyzes layout, iterates until correct.
Visual Development Loop
This skill is a mandatory validation gate, not an optional polish step. Every dashboard page must be screenshotted and judged against the 7 criteria before the iteration is complete. See dashboard-builder/SKILL.md "Required states" table for the full list of visual states to implement and screenshot.
Core principle: Build, screenshot, judge, fix, re-screenshot, repeat until zero problems. The screenshot loop IS the development loop.
Prompt compliance gate: Before committing: list every prompt requirement, state evidence for each (curl output, screenshot, Patchright click). Any requirement without evidence = not done. Loop until all have evidence.
Prerequisites
1. Discover the running server
lsof -iTCP -sTCP:LISTEN -P 2>/dev/null | grep -E ':(3000|3001|3002|3003|4000|5173|8080)\s'CRITICAL: curl every candidate port and verify the HTML title matches this project before setting BASE_URL.
2. Discover auth credentials
Search for login files, then check: existing e2e tests, seed files, .env.test, CLAUDE.md. Also extract the post-login redirect URL for waitForURL.
3. Create screenshot directory
mkdir -p /tmp/interceptor-dev-screenshotsPhase Overview
| Phase | Purpose | Details |
|---|---|---|
| 1. Understand | Read source code, build mental model before screenshotting | reference/phase-1-understand.md |
| 2. Enumerate | List every visual state before taking any screenshots | reference/phase-2-enumerate.md |
| 3. Verify | Build + screenshot + judge loop with 7 criteria | reference/phase-3-verify.md |
| 4. Interactions | Test button clicks, form submits, state transitions | reference/phase-4-interactions.md |
| 5. Viewports | Multi-viewport sweep (mobile, tablet, desktop, wide) | reference/phase-5-viewports.md |
Cross-cutting references:
- reference/ui-patterns.md — shadcn components, transitions, dark mode
- reference/common-visual-bugs.md — Common bugs checklist
- reference/troubleshooting.md — Getting unstuck
Critical Gate
The loop for a given state ends when you find zero issues across all 7 judgment criteria (3-second test, data accuracy, visual hierarchy, interaction affordance, error communication, empty states, density balance). The full page is done when every enumerated state passes.
Cleanup
Run only at the very end, after all states pass. Delete the entire directory:
rm -rf /tmp/interceptor-dev-screenshots/Do this before committing or switching branches. Never leave Patchright scripts in the repo.
© adam-s, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 8 other files in .claude/skills/visual-dev of adam-s/intercept.
- SKILL.md
- reference/common-visual-bugs.md
- reference/phase-1-understand.md
- reference/phase-2-enumerate.md
- reference/phase-3-verify.md
- reference/phase-4-interactions.md
- reference/phase-5-viewports.md
- reference/troubleshooting.md
- reference/ui-patterns.md
Open the folder on GitHubat commit 6451b89
Compare with similar skills
Visual Dev 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Visual Dev this skilladam-s/intercept | 189 | — | ~812 | Automated safety check: Notes | MIT | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Make Interfaces Feel Bettersamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxZxBing0066/pixel-converter | 181 | 13 repos | ~2.6k | Automated safety check: Notes | BSD-2-Clause | |
| Stitch Prompt Enhancergoogle-labs-code/stitch-skills | 8.4k | 6 repos | ~1.7k | Automated safety check: Pass | Apache-2.0 |
Similar skills
LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Make Interfaces Feel Better
samuelclay/NewsBlur
Design engineering principles for making interfaces feel polished.
UI UX Pro Max
ZxBing0066/pixel-converter
UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.
- Official
Stitch Prompt Enhancer
google-labs-code/stitch-skills
Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
More from adam-s/intercept
All 10 skills in this repoAPI Discovery
adam-s/intercept
Discover any website's API and create domain plugins with proxy routes.
App
adam-s/intercept
Build a complete application from a short description. An agent skill from adam-s/intercept.
Debug Logs
adam-s/intercept
Iterative debugging with targeted logs. An agent skill from adam-s/intercept.
Instruction Dashboard Tuning
adam-s/intercept
Use sub-agents to iteratively improve dashboard-building instructions.
Instruction Tuning
adam-s/intercept
Use sub-agents as test subjects to iteratively improve .claude/ instruction files.
Systematic Testing
adam-s/intercept
Bottom-up systematic validation for multi-layer architectures.
Related
Categories
Questions about Visual Dev
What does Visual Dev do?
Visual development with Patchright screenshots. An agent skill from adam-s/intercept. Visual Dev is an agent skill from adam-s/intercept. Visual development with Patchright screenshots.
When should I use Visual Dev?
Visual Dev fits situations like: creating new UI pages and dashboard components; the user wants to build a dashboard; create a new page; verify UI works correctly.
How do I install Visual Dev in Claude Code?
Run `npx skills add adam-s/intercept --skill visual-dev -a claude-code`. Or copy the skill folder (.claude/skills/visual-dev in adam-s/intercept) into .claude/skills/visual-dev in your project. Claude Code loads it when a task matches its description.
How do I install Visual Dev in Codex?
Run `npx skills add adam-s/intercept --skill visual-dev -a codex`. Or copy the skill folder (.claude/skills/visual-dev in adam-s/intercept) into .agents/skills/visual-dev in your project. Codex loads it when a task matches its description.
Can I use Visual Dev 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 adam-s/intercept --skill visual-dev -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visual-dev, .gemini/skills/visual-dev, .github/skills/visual-dev and .opencode/skills/visual-dev in your project.
What does Visual Dev need to run?
SKILL.md names no scripts, command-line tools or credentials: Visual Dev is instructions for the agent only.
Does Visual Dev 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 Visual Dev safe to install?
Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Visual Dev use?
Visual Dev 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 Visual Dev use?
About 812 tokens (SKILL.md is roughly 3.2k 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 Visual Dev?
Skills that share tags, products or a category with Visual Dev: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Visual Dev?
adam-s (a GitHub user) maintains it in adam-s/intercept, which has 189 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on July 31, 2026.
Source: adam-s/intercept on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.