frontend-design-audit

Identifies usability issues in front-end code or live URLs and outputs actionable fixes with severity ratings.

Updated Sep 10, 2025
One-click install
npx skills add https://github.com/tillysoso/mv1 --skill frontend-design-audit-tillysoso
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design-audit
Source: https://github.com/tillysoso/mv1/tree/main/.claude/skills/frontend-design-audit
Command: npx skills add https://github.com/tillysoso/mv1 --skill frontend-design-audit-tillysoso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Evaluate and improve front-end usability for existing code or live sites, helping teams diagnose why users struggle and convert insights into concrete fixes.

Core Features & Use Cases

You perform a comprehensive design audit against 15 usability principles, identify problems at both the component level and system level, rate their severity using a 0-4 scale, and provide concrete, actionable recommendations that can be implemented in code. This audit covers cross-page consistency, design-system coherence, interaction patterns, information architecture, and accessibility considerations to improve real user outcomes.

Quick Start

Provide your front-end project or URL to audit, and I'll run a comprehensive usability audit and deliver actionable fixes.

Frequently Asked Questions about frontend-design-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit frontend usability for existing code or a live URL?

Audit frontend usability by evaluating your codebase or live URL against 15 usability principles, rating severity on a 0-4 scale, and producing actionable fixes. The audit covers accessibility, information architecture, interaction patterns, and design-system coherence.

What does a frontend design audit check for in a web application?

A frontend design audit checks for cross-page consistency, design-system coherence, interaction patterns, information architecture, and accessibility considerations. It identifies usability issues at both component and system levels to improve real user outcomes.

Can I use this audit to find accessibility issues in my frontend code?

Yes, you can use this audit to find accessibility issues in your frontend code. Accessibility is a core focus, evaluating against established usability principles to document problems and provide precise, code-level recommendations for fixes.

How do I get actionable code-level recommendations for UX problems?

Get actionable code-level recommendations for UX problems by providing your frontend project or URL. The audit evaluates usability, rates issue severity on a 0-4 scale, and outputs precise fixes and a structured audit report for direct implementation.

What is the best way to diagnose why users struggle with my website's flow?

Diagnose why users struggle by running a comprehensive usability audit that evaluates frontend clarity and flow. It documents usability issues, rates severity from 0 to 4, and converts insights into concrete, code-level fixes to improve user outcomes.

Does this usability audit evaluate design-system coherence across multiple pages?

Yes, this usability audit evaluates design-system coherence across multiple pages. It checks cross-page consistency and interaction patterns, documenting system-level usability issues and providing actionable recommendations to ensure frontend coherence.