skills.rest
NaKMiers
NaKMiersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-review

Audit live sites for visual inconsistencies and fix them with atomic commits.

1|2|Updated Jan 4, 2024
Search Tags:#typography#spacing#hierarchy#atomic-commits#design-audit#ui-polish#visual-audit
One-click install
npx skills add https://github.com/NaKMiers/Port4lio --skill design-review-nakmiers
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/NaKMiers/Port4lio/tree/main/.agents/skills/design-review
Command: npx skills add https://github.com/NaKMiers/Port4lio --skill design-review-nakmiers

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual quality and consistency across interfaces often slip during development, leading to misaligned typography, spacing issues, and slow interactions. This skill provides a structured QA workflow to identify, fix, and verify design problems with atomic commits and before/after screenshots.

Core Features & Use Cases

  • Visual QA: detect typography, spacing, hierarchy issues, and interaction bottlenecks.
  • Plan-mode design review: audit before implementation using /plan-design-review.
  • Atomic fixes: commit each change atomically and re-verify with before/after comparisons.
  • Live-site polish: proactively suggest improvements to live UIs and handoff.

Quick Start

Begin a live design audit by inspecting the target page for typography, spacing, and visual hierarchy, then fix issues and verify with before/after screenshots.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I audit my live website for visual inconsistencies and spacing issues?▼

Audit live websites for visual inconsistencies by inspecting target pages for typography, spacing, and hierarchy issues, then fix them with atomic commits and verify changes using before/after screenshots.

What is a design audit and when do I need to run one on my UI?▼

A design audit detects typography, spacing, hierarchy issues, and interaction latency across interfaces. You need to run one when visual quality slips during development or before finalizing a design-to-implementation handoff.

Can I review and audit UI designs before implementation begins?▼

Yes, you can audit UI designs before implementation using the /plan-design-review command, which enables plan-mode reviews to identify and resolve visual issues proactively prior to development.

What is the best way to fix UI polish problems without losing track of changes?▼

The best way to fix UI polish problems is committing each change atomically and re-verifying the results with before/after comparisons, ensuring strict commit discipline throughout the visual QA workflow.

Does the visual QA workflow support focused page reviews like dashboards or homepages?▼

Yes, the visual QA workflow applies to both full-site audits and focused page reviews, allowing you to target specific areas like dashboards or homepages to detect and fix interaction bottlenecks efficiently.

Related Skills

Explore More Design & Creative Skills→
Ronin15Ronin15
14

hammer-benchmark-regression

Compare SDL3 HammerEngine metrics against baselines to flag performance regressions.

Community
Intermediate
olaafrossiolaafrossi
10

design-review

Audit live interfaces for visual consistency and patch issues via atomic commits.

Community
Advanced
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
zinohomezinohome

visual-regression-tester

Implements visual regression testing with screenshot comparison and CI integration using Playwright or Chromatic.

Community
Intermediate