← All skills
frontend-design
80 / 100 · Low risk
Fine to try.
By anton-abyzov/vskill (GitHub) · design · 47 stars · scanned at commit 5b88d6c
Create distinctive, production-grade frontend interfaces with visual verification. Use this skill when the user asks to build web components, pages, landing pages, dashboards, React/Vue/Svelte components, HTML/CSS layouts, or any web UI that needs to look polished. Also activates when styling, beautifying, redesigning, or doing visual refresh of existing UI. Covers the full loop: design thinking, code generation, and browser-based visual verification to iterate until the result actually looks r…
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 17 places.
Show 14 more
- plugins/frontend/skills/frontend-design/frontend-design-workspace/iteration-1/eval-4-no-browser/with_skill/output.md, line 657
claude mcp add playwright -- npx @playwright/mcp@latest - plugins/frontend/skills/frontend-design/frontend-design-workspace/iteration-1/eval-6-console-errors/without_skill/output.md, line 66
- Running any available linters or type checkers (`npx tsc --noEmit`, `npx eslint`). - plugins/frontend/skills/frontend-design/frontend-design-workspace/iteration-1/eval-6-console-errors/without_skill/output.md, line 67
- Running any existing tests (`npx vitest run`). - plugins/frontend/skills/frontend-design/references/browser-verification-setup.md, line 64
claude mcp add playwright -- npx @playwright/mcp@latest - plugins/frontend/skills/frontend-design/references/browser-verification-setup.md, line 69
claude mcp add playwright -- npx @playwright/mcp@latest --headless - plugins/frontend/skills/frontend-design/references/browser-verification-setup.md, line 74
npx playwright install chromium - plugins/frontend/skills/frontend-design/references/browser-verification-setup.md, line 96
claude mcp add playwright -- npx @playwright/mcp@latest --caps=verify - plugins/frontend/skills/frontend-design/references/browser-verification-setup.md, line 99
claude mcp add playwright -- npx @playwright/mcp@latest --caps=vision - plugins/frontend/skills/frontend-design/references/browser-verification-setup.md, line 102
claude mcp add playwright -- npx @playwright/mcp@latest --codegen=typescript - plugins/frontend/skills/frontend-design/references/browser-verification-setup.md, line 105
claude mcp add playwright -- npx @playwright/mcp@latest --caps=verify,vision --codegen=typescript - plugins/frontend/skills/frontend-design/references/browser-verification-setup.md, line 139
npx playwright install chromium - plugins/frontend/skills/frontend-design/references/browser-verification-setup.md, line 142
npx playwright test - plugins/frontend/skills/frontend-design/references/browser-verification-setup.md, line 145
npx playwright test --reporter=html - plugins/frontend/skills/frontend-design/references/browser-verification-setup.md, line 146
npx playwright show-report
Connects to the internet
The author does not mention this.
Found in 3 places.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'frontend-design' ] || [ -L ~/.agents/skills/'frontend-design' ]; then echo 'A skill folder named frontend-design already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/anton-abyzov/vskill' "$d" && git -C "$d" checkout --quiet '5b88d6c775780e8f31c43cbbbb91b6fcf6bbe8dd' -- 'plugins/frontend/skills/frontend-design' && mkdir -p ~/.agents/skills && cp -R "$d"/'plugins/frontend/skills/frontend-design' ~/.agents/skills/'frontend-design' && 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/'frontend-design' ~/.claude/skills/'frontend-design' (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 anton-abyzov/vskill shows the score of its lowest-scoring skill.

[](https://zalavijaysinh.github.io/skilltrust/repos/anton-abyzov/vskill/)
Score history
| Date | Version | Score |
|---|
| 2026-11-11 | 5b88d6c | 80 |
| 2026-11-08 | 1b83d04 | 80 |
| 2026-11-06 | 1b83d04 | 80 |