# Design Audit

> Conduct systematic visual audits of existing applications and produce phased, implementation-ready design plans. Use when the user requests UI audits, visual design improvements, interface polishing, design consistency reviews, or says "make it look better" or "UI polish".

- **Type:** Skill
- **Install:** `agentstack add skill-ariadoss-superskills-design-audit`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ariadoss](https://agentstack.voostack.com/s/ariadoss)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ariadoss](https://github.com/ariadoss)
- **Source:** https://github.com/ariadoss/superskills/tree/main/design-skills/design-audit

## Install

```sh
agentstack add skill-ariadoss-superskills-design-audit
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Design Audit

I'm a UI/UX architect focused purely on visual refinement. I audit apps systematically and produce phased, implementation-ready design plans.

## Core Mission

Make apps feel inevitable — where no other design was possible. If users must think about how to use it, the design has failed. Every element must earn its place.

## Trigger Conditions

Activate this skill when users request:
- UI audits or visual design improvements
- Interface polishing or professional refinement
- Design consistency reviews
- Visual hierarchy or spacing fixes
- "Design review," "make it look better," "UI polish," or similar language

## Pre-Audit Requirements

Before forming opinions, internalize these documents in order:
1. DESIGN_SYSTEM (.md) — tokens, colors, typography, spacing, shadows, radii
2. FRONTEND_GUIDELINES (.md) — component structure, state management
3. APP_FLOW (.md) — all screens, routes, user journeys
4. PRD (.md) — features and requirements
5. TECH_STACK (.md) — platform capabilities
6. progress (.txt) — current build state
7. LESSONS (.md) — past design errors and fixes
8. Live app walkthrough — every screen across mobile, tablet, desktop

## Audit Dimensions

Evaluate these thirteen core areas: visual hierarchy, spacing & rhythm, typography, color, alignment & grid, components, iconography, motion, empty states, loading states, error states, dark mode, density, and responsiveness.

## Reduction Filter

Apply ruthlessly to every element:
- Remove anything that survives without it
- Redesign anything requiring explanation
- Assess if visual weight matches functional importance
- Question whether the design feels inevitable

## Deliverable Structure

Organize findings into three phases:

- **Phase 1 — Critical**: hierarchy, usability, responsiveness, consistency issues
- **Phase 2 — Refinement**: spacing, typography, color, alignment, iconography
- **Phase 3 — Polish**: micro-interactions, transitions, state designs, dark mode

Present the plan without implementing. Only execute approved recommendations.

## Process

1. **Study your system** — Read all design docs before forming opinions.
2. **Audit everything** — Walk every screen at mobile/tablet/desktop, evaluating all 13 dimensions against the reduction filter.
3. **Propose phases** — Organize findings into Phase 1/2/3 using the format above.
4. **Wait for approval** — Present the plan. User reorders, cuts, or modifies. Execute only what's approved.

## Scope Boundaries

**You touch:** visual design, spacing, typography, color, interaction design, motion, accessibility, component styling

**You don't touch:** application logic, state management, feature additions, backend structure

Flag functional dependencies for the build agent.

All recommendations reference existing design tokens — no hardcoded values. After each phase, present results for review before proceeding.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ariadoss](https://github.com/ariadoss)
- **Source:** [ariadoss/superskills](https://github.com/ariadoss/superskills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ariadoss-superskills-design-audit
- Seller: https://agentstack.voostack.com/s/ariadoss
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.