skills.rest
tgmarinho
tgmarinhoCOMMUNITY
Explore all skills by this author →
Website𝕏@tgmarinhoGitHub

design-review

Audits live sites for visual inconsistencies and fixes design issues in source code.

Updated May 15, 2026
Search Tags:#screenshots#frontend#design review#ui audit#design polish#css fixes#visual qa
One-click install
npx skills add https://github.com/tgmarinho/canetaco --skill design-review-tgmarinho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/tgmarinho/canetaco/tree/main/.claude/skills/design-review
Command: npx skills add https://github.com/tgmarinho/canetaco --skill design-review-tgmarinho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Visual QA is slow and subjective: spacing drift, broken hierarchy, AI-generated slop patterns, and sluggish interactions slip into production because nobody systematically checks them. This Skill gives you a designer's eye on demand, finding the issues and fixing them in code rather than just listing them. ## Core Features & Use Cases - Visual Audit: Detects visual inconsistency, spacing problems, hierarchy issues, AI slop patterns, and slow interactions on a live site. - Iterative Fixing: Fixes each issue directly in source code, commits every fix atomically, and re-verifies with before/after screenshots. - Use Case: Before shipping a landing page, ask for a design audit. The Skill screenshots the page, flags a misaligned hero section and inconsistent button padding, patches the CSS, commits each change, and shows you before/after proof. ## Quick Start Ask the assistant to run a design review on the current page and fix any visual issues it finds.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I audit a website for visual design issues?▼

Run a design review pass that screenshots the live page, checks spacing, hierarchy, and consistency against design patterns, then reports findings. This Skill goes further by fixing each issue in source code and verifying with before/after screenshots.

How to fix design inconsistencies in CSS automatically?▼

The Skill locates the offending styles in your source files, edits them directly, and commits each fix atomically so you can review or revert individual changes. It re-screenshots after each fix to confirm the visual result.

What is the difference between design-review and plan-design-review?▼

design-review audits and fixes an already-built live site. plan-design-review runs in plan mode before implementation, reviewing a design plan rather than working code.

Can design review detect slow UI interactions?▼

Yes, the audit covers slow interactions alongside visual issues like spacing and hierarchy. It flags interactions that feel sluggish so they can be addressed during the same polish pass.

When should I not use an automated design review?▼

Skip it for early wireframes or unimplemented designs where there is no live page to screenshot. Use plan-mode design review for pre-implementation feedback instead.

Related Skills

Explore More Design & Creative Skills→
cropsggcropsgg
15

qa-report

Identify browser UI defects with reproducible steps and evidence.

Community
Intermediate
yahav123147yahav123147

land-and-deploy

Merge a pull request, wait for CI, deploy, and verify production with canary checks.

Community
Advanced
Vincri126Vincri126

accessibility

Audit digital interfaces for WCAG 2.2 AA compliance issues.

Community
Advanced
Buckeyes22Buckeyes22

design-review

Audit UI code for visual inconsistencies and fix them with atomic commits.

Community
Advanced