Discover the toolingbehind modern intelligence
The operating system for AI infrastructure discovery. Search a live map of MCP servers, AI agents, LLM tools, automation systems, and developer infrastructure.
frontend-design-audit
This is a claude skill to audit the front end based on established usability heuristrics and systematically improve your website.
54stars
10forks
Quality signals
StaleNo testsNo CIThin docsNo licenseNew
AI summary
Auto-generated overview of what this skill does and when to reach for it.
A Claude Code skill that audits and fixes front-end interfaces by checking 15 usability principles, rating issues, and applying concrete code-level improvements.
Use this when
- You need a quick expert review of your UI code
- Your site has accessibility or usability complaints
- You want to extract a design system from existing code
- You’re adding new features but worried about breaking UX
- You inherited messy front-end code and need a clean baseline
Don't use when
- You need a full design overhaul (not just fixes)
- Your project is purely backend with no UI
- You want visual design changes like color or typography tweaks
Capabilities
- Audits HTML, CSS, JS, React, Vue, Svelte, and more
- Rates issues on a 0–4 severity scale with principle references
- Provides concrete code-level fixes for each finding
- Extracts design systems (spacing, colors, typography) from existing code
- Implements fixes directly in your codebase
- Generates structured reports with before/after examples
InstallSKILLInstall as a Claude Code skill
Universal installANY TOOL
$ npx skillcity@latest mistyhx/frontend-design-auditAuto-detects the skill or MCP server in this repo and installs it for Claude Code, Codex, Cursor, Cline, OpenCode, Gemini CLI, Anti-Gravity, OpenClaw and Hermes.
Requires Node.js 18+ (ships with npx).
Or install manually
# Install into ~/.claude/skills/ mkdir -p ~/.claude/skills/frontend-design-audit curl -fsSL https://raw.githubusercontent.com/mistyhx/frontend-design-audit/main/SKILL.md -o ~/.claude/skills/frontend-design-audit/SKILL.md
Loading README…
Ask a simulated agent to run this skill. It loads the real SKILL.md and reasons over your task with NVIDIA.
frontend-design-audit — sandboxAI sandbox
Pick a quick prompt below or type your own — watch the agent execute this skill step by step.
guest@skillcity:~$Try a prompt