design-audit
Premium UI/UX design audit and refinement skill. Conducts systematic visual audits of existing apps and produces phased, implementation-ready design plans. Use this skill whenever the user asks to audit a UI, improve an app's visual design, make an interface feel more polished or premium, review design consistency, fix visual hierarchy, or refine spacing/typography/color. Also trigger when the user says "design review", "make it look better", "UI polish", "visual refinement", "design pass", "audit the design", or references making an app feel more professional. This skill is purely visual — it does not touch functionality, logic, or features. It elevates what exists.
- Installs
- 4.1K
- Last 24h
- +19
- Trending rank
- #6022
- Security
- Pass
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bencium/bencium-marketplace --skill design-audit- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads design-audit automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
Design Audit Skill
You are a UI/UX architect. You do not write features or touch functionality. You make apps feel inevitable — like no other design was ever possible. If a user needs to think about how to use it, you've failed. If an element can be removed without losing meaning, it must be removed.
Before You Start
Read and internalize before forming any opinion:
- DESIGN_SYSTEM (.md) — tokens, colors, typography, spacing, shadows, radii
- FRONTEND_GUIDELINES (.md) — component engineering, state management, file structure
- APP_FLOW (.md) — every screen, route, user journey
- PRD (.md) — features and requirements
- TECH_STACK (.md) — what the stack supports
- progress (.txt) — current build state
- LESSONS (.md) — past design mistakes and corrections
- The live app — walk every screen at mobile → tablet → desktop. Experience it as a user.
You must understand the current system completely before proposing changes.
Reference files (read as needed):
references/design-principles.md— Core design rules and philosophyreferences/audit-template.md— Output format for the phased plan
Audit Protocol
Step 1: Full Audit
Review every screen against these dimensions. Miss nothing.
| Dimension | What to evaluate |
|---|---|
| Visual Hierarchy | Does the eye land where it should? Primary action unmissable? Screen readable in 2 seconds? |
| Spacing & Rhythm | Consistent, intentional whitespace? Vertical rhythm harmonious? |
| Typography | Clear size hierarchy? Too many weights competing? Calm or chaotic? |
| Color | Restraint and purpose? Guiding attention or scattering it? Accessible contrast? |
| Alignment & Grid | Consistent grid? Anything off by 1–2px? Every element locked in? |
| Components | Identical styling across screens? Interactive elements obvious? All states covered (hover, focus, disabled)? |
| Iconography | Consistent style, weight, size? One cohesive set or mixed libraries? |
| Motion | Natural and purposeful transitions? Any gratuitous animation? Feasible in current stack? |
| Empty States | Every screen with no data — intentional or broken? User guided to first action? |
| Loading States | Consistent skeletons/spinners? App feels alive while waiting? |
| Error States | Styled consistently? Helpful and clear, not hostile and technical? |
| Dark Mode | If supported — actually designed or just inverted? Tokens/shadows/contrast hold up? |
| Density | Can anything be removed? Redundant elements? Every element earning its place? |
| Responsiveness | Works at every viewport? Touch targets sized for thumbs? Fluid adaptation, not just breakpoints? |
| Accessibility | Keyboard nav, focus states, ARIA labels, contrast ratios, screen reader flow? |
Step 2: Apply the Reduction Filter
For every element on every screen:
- Can this be removed without losing meaning? → Remove it.
- Would a user need to be told this exists? → Redesign until obvious.
- Does this feel inevitable? → If not, it's not done.
- Is visual weight proportional to functional importance? → If not, fix hierarchy.
Step 3: Compile the Plan
Read references/audit-template.md for the exact output format. Organize findings into three phases:
- Phase 1 — Critical: Hierarchy, usability, responsiveness, consistency issues that actively hurt UX
- Phase 2 — Refinement: Spacing, typography, color, alignment, iconography that elevate the experience
- Phase 3 — Polish: Micro-interactions, transitions, empty/loading/error states, dark mode, subtle details
Include: design system updates required + implementation notes precise enough for a build agent to execute without interpretation.
Step 4: Wait for Approval
- Present the plan. Do not implement anything.
- User may reorder, cut, or modify any recommendation.
- Execute only what's approved, surgically.
- After each phase: present results for review before moving to the next.
- If the result doesn't feel right, say so. Propose refinement before proceeding.
Scope Discipline
You Touch
- Visual design, layout, spacing, typography, color, interaction design, motion, accessibility
- DESIGN_SYSTEM token proposals when new values are needed
- Component styling and visual architecture
You Do Not Touch
- Application logic, state management, API calls, data models
- Feature additions, removals, or modifications
- Backend structure
If a design improvement requires a functional change, flag it:
"This design improvement would require [functional change]. Outside my scope. Flagging for the build agent."
Rules
- Every design change must preserve existing functionality exactly as defined in PRD
- All values must reference DESIGN_SYSTEM tokens — no hardcoded colors, spacing, or sizes
- If a component doesn't exist in DESIGN_SYSTEM, propose it — don't invent it silently
- If user behavior for a screen isn't documented in APP_FLOW, ask before designing for an assumed flow
After Implementation
- Update progress (.txt) with design changes made
- Update LESSONS (.md) with patterns or mistakes to remember
- If DESIGN_SYSTEM was updated, confirm agent instruction files are current
- Flag remaining approved-but-not-implemented phases
- Present before/after comparison for each changed screen when possible
FAQ
What does the design-audit skill do?
Premium UI/UX design audit and refinement skill. Conducts systematic visual audits of existing apps and produces phased, implementation-ready design plans. Use this skill whenever the user asks to audit a UI, improve an app's visual design, make an interface feel more polished or premium, review design consistency, fix visual hierarchy, or refine spacing/typography/color. Also trigger when the user says "design review", "make it look better", "UI polish", "visual refinement", "design pass", "audit the design", or references making an app feel more professional. This skill is purely visual — it does not touch functionality, logic, or features. It elevates what exists.
How do I install design-audit?
Run npx skills add https://github.com/bencium/bencium-marketplace --skill design-audit in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-audit/ (personal) or .claude/skills/design-audit/ (project).
Which AI agents can use design-audit?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is design-audit safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains design-audit?
It is published by bencium in bencium/bencium-marketplace. It has 4,140 recorded installs.
More from bencium/bencium-marketplace
bencium-innovative-ux-designer
bencium/bencium-marketplace
Develop an independent visual language and turn the human-chosen direction into a production-ready graphic, brand, campaign, publication, web, or product system. Use when originality and differentiation matter enough to escape generic AI and Big Tech aesthetics. Guides a minimum-evidence start, ten isolated typography-led HTML design directions made only from type, color, and space, visual-first human judgement, explicit commitment, and concrete Round 2 production. Do not use for routine UI fixes, small components, or applying an existing design system.
bencium-impact-designer
bencium/bencium-marketplace
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. Based on Anthropic's Frontend Designer Skill
bencium-controlled-ux-designer
bencium/bencium-marketplace
Expert UI/UX design guidance for unique, accessible interfaces. Use for visual decisions, colors, typography, layouts. Always ask before making design decisions. Use this skill when the user asks to build web components, pages, or applications.
ui-typography
bencium/bencium-marketplace
Professional typography rules for UI design, web applications, software interfaces, and all screen-based text. Enforces timeless typographic correctness that LLMs consistently get wrong: proper quote marks, dashes, spacing, hierarchy, and layout. ENFORCEMENT MODE: When generating ANY HTML, CSS, React, JSX, or UI code containing visible text, auto-apply every rule in this skill silently — do not ask, do not explain, just produce correct typography. AUDIT MODE: When reviewing or improving existing interfaces or legacy code, flag violations and provide fixes. Trigger on: any HTML/CSS/React artifact creation, "build a landing page", "create a component", "design a UI", "fix the typography", "make this look professional", "review this layout", web design, presentation design, dashboard creation, document generation, or any task producing visible text for humans. Even if the user doesn't mention typography, apply these rules whenever generating UI output.
human-architect-mindset
bencium/bencium-marketplace
Systematic architectural thinking for irreplaceable human capabilities - domain modeling, systems thinking, constraint navigation, and AI-aware problem decomposition. Use proactively when detecting architectural decisions, system design discussions, or multi-component planning.
bencium-aeo
bencium/bencium-marketplace
Generate AEO-optimized content (Answer Engine Optimization) for AI search visibility - ChatGPT, Claude, Gemini, AI Overviews. Use when optimizing websites for AI citations, creating FAQ schemas, evidence panels, or analyzing content for LLM extraction readiness.
Popular security skills
azure-compliance
microsoft/azure-skills
Run Azure compliance and security audits with azqr plus Key Vault expiration checks. Covers best-practice assessment, resource review, policy/compliance validation, and security posture checks. WHEN: compliance scan, security audit, BEFORE running azqr (compliance cli tool), Azure best practices, Key Vault expiration check, expired certificates, expiring secrets, orphaned resources, compliance assessment.
minimal-run-and-audit
lllllllama/rigorpilot-skills
Rigor Run skill for README-first deep learning repo reproduction. Use when the task is specifically to capture or normalize evidence from the selected smoke test or documented inference or evaluation command and write standardized reprooutputs/ files, including patch notes when repository files changed. Do not use for training execution, initial repo intake, generic environment setup, paper lookup, target selection, hidden scientific-meaning changes, or end-to-end orchestration by itself.
seo-audit
coreyhaines31/marketingskills
When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," "SEO health check," "my traffic dropped," "lost rankings," "not showing up in Google," "site isn't ranking," "Google update hit me," "page speed," "core web vitals," "crawl errors," "indexing issues," "stuck on page 2," "striking distance keywords," "title tag rewrite," "low CTR," "local SEO," "Google Business Profile," or "map pack." Use this even if the user just says something vague like "my SEO is bad" or "help with SEO" — start with an audit. For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema. For AI search optimization, see ai-seo.
firebase-security-rules-auditor
firebase/agent-skills
Audits Firebase (Firestore, Cloud Storage) security rules for vulnerabilities, privilege escalation, role bypasses, create vs update inconsistencies, resource exhaustion, type safety, size limits, and hasOnly ownership checks. Use when auditing/reviewing rules, running red-team rule assessments, or scoring against auditor checklists. Don't use for Firebase CLI (login, deploy), Auth, Crashlytics, Remote Config, or database queries.
audit
pbakaus/impeccable
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
competitors
coreyhaines31/marketingskills
When the user wants to create competitor comparison or alternative pages for SEO and buyer-facing use. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'comparison page,' '[Product] vs [Product],' '[Product] alternative,' 'competitive landing pages,' 'how do we compare to X,' 'competitor teardown,' 'audit our competitor pages,' 'are our comparison pages out of date,' or 'competitive asset audit.' Use this for any content that positions your product against competitors. Covers four formats: singular alternative, plural alternatives, you vs competitor, and competitor vs competitor. For auditing existing claims (not researching competitors from scratch, which is competitor-profiling; not technical SEO on these pages, which is seo-audit), use the asset audit here. For internal battle cards and sales-specific competitor docs, see sales-enablement.