skills.rest
lucasmccomb
lucasmccombCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-review

Capture multi-viewport screenshots and analyze DOM, CSS, and computed styles for design issues.

1|Updated Mar 19, 2026
Search Tags:#automation#accessibility#frontend#responsive#design-review#visual-hierarchy#css-audit
One-click install
npx skills add https://github.com/lucasmccomb/ccgm --skill design-review-lucasmccomb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/lucasmccomb/ccgm/tree/main/modules/design-review/skills/design-review
Command: npx skills add https://github.com/lucasmccomb/ccgm --skill design-review-lucasmccomb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The design-review Skill performs comprehensive frontend visual audits by collecting screenshots, DOM structure, CSS sources, and computed styles, then analyzing them across multiple design lenses to produce prioritized, actionable fixes for spacing, typography, responsiveness, hierarchy, accessibility, and component consistency.

Core Features & Use Cases

  • Multi-viewport capture: full-page screenshots at desktop (1440px), tablet (768px), and mobile (375px), with optional dark-mode capture.
  • Deep code & computed-style analysis: reads CSS source and extracts computed styles and DOM structure to detect mismatches between intended and rendered design.
  • Six parallel analysis passes: runs concurrent agents focusing on spacing, typography, responsive behavior, visual hierarchy, accessibility (WCAG checks), and component consistency and returns JSON-formatted, file-specific fixes.
  • Automated fixes workflow: can optionally apply high-priority CSS/HTML fixes, rebuild, and verify changes with new screenshots.
  • Use Case: audit a dev-server page to get a prioritized remediation plan before shipping a design update.

Quick Start

Use the design-review skill to audit http://localhost:3000 and produce a prioritized list of actionable CSS and HTML fixes.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I perform an automated frontend design audit for my web application?▼

Perform an automated frontend design audit by capturing multi-viewport screenshots, DOM extracts, and computed CSS styles, then running parallel analysis passes to output JSON-formatted, file-specific fix recommendations.

What does a visual hierarchy and accessibility review check for in a static site?▼

A visual hierarchy and accessibility review checks rendered layouts and DOM structure against WCAG standards, identifying spacing, typography, and component consistency issues to produce a prioritized remediation plan.

Can I audit a local dev-server preview to get actionable CSS fixes before shipping?▼

Yes, you can audit local dev-server previews by capturing screenshots and CSS sources at desktop, tablet, and mobile viewports to receive prioritized, actionable CSS and HTML fixes before shipping.

Does the design review process capture responsive layouts at different screen widths?▼

The design review process captures responsive layouts by taking full-page screenshots at 1440px desktop, 768px tablet, and 375px mobile viewports, with optional dark-mode capture for comprehensive analysis.

What is the best way to identify mismatches between intended CSS and rendered design?▼

The best way to identify CSS and rendered design mismatches is by reading CSS source files and extracting computed styles and DOM structure, enabling parallel agents to detect discrepancies and output file-specific fixes.

Can the visual audit automatically apply high-priority HTML and CSS fixes and verify changes?▼

Yes, the visual audit can optionally apply high-priority CSS and HTML fixes, rebuild the project, and verify changes by capturing new screenshots to ensure the remediation resolved the identified issues.

Related Skills

Explore More Design & Creative Skills→
ImaginerLabsImaginerLabs

web-design-reviewer

Inspect web UI layouts and apply source-level fixes for visual issues.

Official
Advanced
forgivesam168forgivesam168
2

web-design-reviewer

Inspect websites visually and diagnose design issues across frameworks.

Community
Advanced
Lucent-SnowLucent-Snow
436

style-extractor

Extract UI style and motion data from websites into Markdown design guides.

Community
Advanced
emilneuraz-aiemilneuraz-ai

web-quality-audit

Audit websites for performance, accessibility, SEO, and best practices.

Community
Advanced