design-review

Identifies and fixes visual inconsistencies in codebases.

Updated Mar 13, 2026
One-click install
npx skills add https://github.com/AkbarDevop/ayah-studio --skill design-review-akbardevop
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/AkbarDevop/ayah-studio/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/AkbarDevop/ayah-studio --skill design-review-akbardevop

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion, WebSearch, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a designer's perspective on visual quality assurance, identifying and fixing issues like inconsistencies, spacing, and hierarchy problems in code.

Core Features & Use Cases

  • Visual QA: Identifies visual inconsistencies, spacing issues, and hierarchy problems.
  • Iterative Fixes: Automatically fixes issues in source code, committing each fix atomically.
  • Plan-Mode Review: Supports plan-mode design review before implementation.
  • Use Case: When asked to audit the design or perform visual QA on a live site.

Quick Start

Run the design-review skill on your codebase to automatically identify and fix visual inconsistencies.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I automate visual QA for inconsistencies in my codebase?

Performing visual QA involves scanning source code to identify spacing, hierarchy, and visual inconsistencies. This Skill provides AI-assisted design review to detect these issues and apply iterative fixes directly in the codebase.

Can I review design issues in plan-mode before applying code changes?

Yes, you can review design issues in plan-mode before implementation. This Skill supports plan-mode design review to proactively identify visual inconsistencies, allowing you to evaluate proposed iterative fixes before committing changes.

Does this visual QA tool commit iterative fixes automatically?

Yes, this visual QA tool commits iterative fixes automatically. It identifies visual inconsistencies and hierarchy problems in source code, applying and atomically committing each iterative fix to maintain a clean development history.

What tools are required to run AI-assisted design review on a live site?

Running AI-assisted design review requires Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion, and WebSearch tools. These dependencies enable the Skill to scan codebases, identify visual issues, and execute iterative fixes.

What is the best way to fix spacing and hierarchy problems in source code?

The best way to fix spacing and hierarchy problems is using AI-assisted visual QA. This Skill provides a designer's perspective to proactively identify inconsistencies in source code and automatically apply iterative fixes for visual quality assurance.

When should I not use AI-assisted design review for code quality?

You should not use AI-assisted design review when your codebase lacks the required Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion, and WebSearch dependencies. Without these tools, the Skill cannot scan source code or apply iterative fixes.