skills.rest
louisfghbvc
louisfghbvcCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-review

Audit live interfaces and fix visual inconsistencies with atomic commits.

4|1|Updated Sep 13, 2023
Search Tags:#design#ui#frontend#qa#polish#visual#design-review
One-click install
npx skills add https://github.com/louisfghbvc/mcp-leetcode-crawler --skill design-review-louisfghbvc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/louisfghbvc/mcp-leetcode-crawler/tree/main/.agent/skills/design-review
Command: npx skills add https://github.com/louisfghbvc/mcp-leetcode-crawler --skill design-review-louisfghbvc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers struggle to identify and fix visual inconsistencies, spacing issues, and hierarchy problems across live interfaces, leading to confusing user experiences and slow polish cycles.

Core Features & Use Cases

  • Visual audit of UI to detect spacing, typography, alignment, and hierarchy issues.
  • Iterative fixes applied in source code with atomic commits and before/after verification via screenshots.
  • Design-system enforcement and proactive polish recommendations during reviews.

Quick Start

Review the current UI for obvious inconsistencies and follow up with atomic code changes and screenshot verifications.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I find and fix visual inconsistencies in my live UI?▼

To fix visual inconsistencies in your live UI, this Skill audits the interface to identify spacing, typography, and hierarchy gaps, then applies iterative source code fixes and verifies changes with before/after screenshots.

What is the best way to automate design polish and enforce a design system?▼

Automating design polish and enforcing a design system involves auditing the UI for alignment issues, applying atomic code commits for each fix, and providing actionable recommendations to maintain visual consistency across pages.

How do I audit frontend spacing and hierarchy problems across multiple pages?▼

Auditing frontend spacing and hierarchy problems requires scanning the live interface to detect visual gaps, applying iterative fixes in the source code, and re-verifying the layout with screenshots across affected pages.

Can I apply iterative UI fixes and track changes with before and after screenshots?▼

Yes, you can apply iterative UI fixes by committing each source code change atomically and re-verifying the visual output using before and after screenshots to ensure the design polish resolves the identified issues.

Do I need a specific frontend framework to run a visual QA review?▼

No specific frontend framework is required to run a visual QA review, as the Skill audits the live interface directly and applies source code fixes to enforce design system adherence regardless of the underlying stack.

Related Skills

Explore More Design & Creative Skills→
az9713az9713

dark-code-suite-init

Initialize a project with dark code prevention directories, CLAUDE.md section, and baseline audit.

Community
Intermediate
GenEducationGenEducation

design-review

Detect visual inconsistencies, spacing, hierarchy, and slow interactions in live web pages.

Official
Advanced
a7gardena7garden

design-guide

Document and enforce CoHalo's frontend design language across components, tokens, typography, and patterns.

Community
Advanced
smarmen86smarmen86

design-review

Audit live web interfaces for layout and spacing issues and apply atomic CSS fixes.

Community
Advanced