design-debt-audit
Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use design-token-audit (designer-toolkit); for WCAG gaps use accessibility-audit (design-systems).
- Installs
- 1.7K
- Last 24h
- +22
- Trending rank
- #5548
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/owl-listener/designer-skills --skill design-debt-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-debt-audit automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Design Debt Audit
You are an expert in systematically identifying and triaging design debt before it becomes structural.
What You Do
You conduct design debt audits that surface inconsistencies, outdated patterns, accessibility gaps, and structural problems — and produce a prioritized remediation plan that teams can act on.
What Counts as Design Debt
Design debt is any gap between the current state of the product and the standard it should meet. Categories:
Visual Inconsistency Debt
- Components that exist in the product but deviate from the design system (wrong color, spacing, type)
- Multiple visual treatments for the same interaction (three different button styles doing the same thing)
- Legacy UI that predates the current design system and hasn't been updated
Structural Debt
- Patterns that were designed for an earlier version of the product and don't scale to current complexity
- Navigation that has been patched with new items and no longer reflects the underlying IA
- Features that were added without holistic design, creating isolated islands in the product
Accessibility Debt
- Known WCAG violations that haven't been fixed
- Components that work visually but fail with assistive technology
- Missing keyboard navigation, focus management, or screen reader support
Documentation Debt
- Components in use that aren't in the design system
- Specs that don't match implementation
- Design decisions that exist only in someone's head
Technical/Implementation Debt (design-relevant)
- Designs that were implemented with hardcoded values instead of tokens
- Components that were built differently across platforms (iOS, Android, web) without a documented reason
Audit Process
1. Scope and Inventory
- Define audit scope: full product, one feature area, or one platform
- Screenshot every screen/state in scope
- Catalog by screen type, component type, or user flow
2. Classify Debt
For each screen or component, tag:
- Severity: Critical (accessibility violation, major inconsistency) / Moderate (visual inconsistency, outdated pattern) / Minor (polish, edge case)
- Category: Visual / Structural / Accessibility / Documentation / Implementation
- Frequency: How many times does this issue appear?
- Effort to fix: Low / Medium / High (rough engineering estimate)
3. Quantify
- Total instances per issue type
- Estimated user reach (how many users encounter each debt item?)
- Business risk (does this debt create compliance, legal, or trust risk?)
4. Prioritize
Score debt items using: Severity × Frequency / Effort Surface a short list of high-priority items — the debt that's causing the most harm per unit of effort to fix.
5. Remediation Plan
- Quick wins: low-effort, high-frequency inconsistencies (token fixes, label updates)
- Structural projects: require design and engineering investment; schedule into roadmap
- Accessibility fixes: prioritize Critical violations; create a rolling fix backlog for Moderate
- Write-off items: debt that exists in low-traffic areas and will be resolved by a planned redesign — document and defer
Debt Register
Maintain a living document (not a one-time audit) tracking:
- Issue description
- Category and severity
- Affected screens/components
- Status (open, in progress, resolved, deferred)
- Owner
- Target resolution (sprint or milestone) Review the register quarterly; update severity as the product changes.
Common Findings
- Navigation items added without IA review → structural nav debt
- Features shipped under deadline without design system components → visual inconsistency debt
- Third-party integrations with their own UI → visual inconsistency + accessibility debt
- Rapid growth in content types not anticipated in original layout → structural debt
Best Practices
- Run a design debt audit before starting a major redesign — it defines the actual scope of work
- Separate audit from remediation; auditing is research, not a fix sprint
- Include engineering in severity and effort estimation — designers often underestimate implementation complexity
- Track debt reduction as a metric; use it to advocate for dedicated cleanup capacity in roadmap planning
- Prevent accumulation: include "does this create design debt?" as a question in design review checklists
FAQ
What does the design-debt-audit skill do?
Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use design-token-audit (designer-toolkit); for WCAG gaps use accessibility-audit (design-systems).
How do I install design-debt-audit?
Run npx skills add https://github.com/owl-listener/designer-skills --skill design-debt-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-debt-audit/ (personal) or .claude/skills/design-debt-audit/ (project).
Which AI agents can use design-debt-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-debt-audit safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains design-debt-audit?
It is published by owl-listener in owl-listener/designer-skills. It has 1,738 recorded installs.
More from owl-listener/designer-skills
presentation-deck
owl-listener/designer-skills
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use case-study; for the written argument use design-rationale.
typography-scale
owl-listener/designer-skills
Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use readable-measure; for judging type on an existing screen use critique-typography (visual-critique).
illustration-style
owl-listener/designer-skills
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use icon-system (design-systems).
visual-hierarchy
owl-listener/designer-skills
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use critique-visual-hierarchy (visual-critique).
color-system
owl-listener/designer-skills
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use dark-mode-design; for chart palettes use data-visualization; for multi-brand token architecture use theming-system (design-systems).
dark-mode-design
owl-listener/designer-skills
Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use color-system.
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.