$npx skillfedfor your agent

design-review

This skill executes a comprehensive design review by comparing your built application against the design brief and aesthetic direction. It captures screenshots across responsive breakpoints, analyzes visual hierarchy and consistency, and produces a prioritized refinement list organized by severity.

Design-review runs a structured design critique against your brief and codebase with visual verification.

AI-generated summary based on this skill's SKILL.md

461 35 Apache-2.0updated by julianoczkowski

Decision gist · record as of 2026-07-06

Design-review runs a structured design critique against your brief and codebase with visual verification. This skill executes a comprehensive design review by comparing your built application against the design brief and aesthetic direction. It captures screenshots across responsive breakpoints, analyzes visual hierarchy and consistency, and produces a prioritized refinement list organized by severity.

manual: git clone https://github.com/julianoczkowski/designer-skills → cp -r designer-skills/design-review ~/.claude/skills/design-review
design-review/SKILL.md · version f573c058

Use it when

  • Yes.
  • Yes.

Verify before relying

Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.

Same gist for agents: .md · .json

Install

julianoczkowski/designer-skills/design-review

Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

What does design-review do?

design-review executes a comprehensive design review by comparing your built application against the design brief and aesthetic direction. It captures screenshots across responsive breakpoints, analyzes visual hierarchy and consistency, and produces a prioritized refinement list organized by severity.

Can design-review check my website design?

Yes. design-review verifies visual hierarchy, consistency, and responsive behavior across your site. It captures screenshots at different breakpoints and identifies gaps between your implementation and the design brief, then organizes findings into must-fix, should-fix, and improvement opportunities.

Does design-review review landing page design?

Yes. design-review performs a design review against your brief for landing pages and other components. It runs structured design critique, checks visual hierarchy and consistency, verifies accessibility compliance, and captures screenshots to analyze aesthetic fidelity across all responsive sizes.

What accessibility checks does design-review perform?

design-review checks accessibility compliance as part of its comprehensive audit. It verifies that your design meets accessibility standards alongside visual hierarchy, consistency, and responsive behavior checks, ensuring your interface is both aesthetically sound and usable for all users.

How does design-review organize its findings?

design-review identifies and prioritizes findings into must-fix issues, should-fix improvements, and enhancement opportunities. This severity-based organization helps you focus refinement efforts efficiently, addressing critical design gaps before polish passes.

Can design-review check design consistency?

Yes. design-review verifies visual hierarchy, consistency, and responsive behavior as core functions. It analyzes your component design across breakpoints and produces a prioritized refinement list, ensuring your interface maintains consistent aesthetic direction throughout.

SKILL.md

Rendered from the published skill. Quoted content, verbatim.

This skill runs a structured design review of what has been built, measured against the design brief and the chosen aesthetic philosophy.

> CRITICAL — Visual Screenshot Capture > > You MUST capture screenshots of the running application as part of every design review. Code review alone is insufficient — you need to see what the user sees. Follow the screenshot capture protocol in Step 3 below. This is not optional.

Example prompts

  • "Review what I just built"
  • "Run a design critique on the landing page"
  • "Check this against the brief"
  • "Here's a screenshot. How does it look?" [paste screenshot]
  • "QA pass before I ship this"

Process

  1. Read the brief. Look for the active feature's brief at .design/<feature-slug>/DESIGN_BRIEF.md. If multiple feature folders exist under .design/, ask the user which feature to review. If no .design/ folder exists, fall

(truncated - see the full file via the links below)

File tree — 1 file
design-review/SKILL.md

Let your AI agent find skills like this

Example. Real query, live index.

You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.

wish › “Run structured design critique against brief and codebase”

Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →

Related skills

design-flow
by julianoczkowski · julianoczkowski/designer-skills

design-flow walks you through the complete design process as a guided sequence, running each phase in order and waiting for confirmation before advancing. It orchestrates six core phases—from clarifying your thinking through building components—plus an optional design review, with the ability to skip phases you don't need and resume mid-project where you left off.

Apache-2.0updated Jul 2026
★ 461repo stars
design-brief
by julianoczkowski · julianoczkowski/designer-skills

Design Brief walks you through a structured conversation to define a new feature or page, then scans your codebase for existing design tokens, components, and patterns. It produces a markdown brief that captures the problem, solution, design principles, aesthetic direction, and component inventory—ensuring your design extends rather than duplicates existing work.

Apache-2.0updated Jul 2026
★ 461repo stars
brief-to-tasks
by julianoczkowski · julianoczkowski/designer-skills

This skill transforms a design brief into a structured task list where each item is a vertical slice—a complete, self-contained piece of work that can be built and verified independently. It scans your codebase for existing components and tokens, then orders tasks by dependencies, visual priority, and risk to keep your build moving forward efficiently.

Apache-2.0updated Jul 2026
★ 461repo stars
design-tokens
by julianoczkowski · julianoczkowski/designer-skills

This skill creates a complete token foundation for new projects, generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format—whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy.

Apache-2.0updated Jul 2026
★ 461repo stars
information-architecture
by julianoczkowski · julianoczkowski/designer-skills

This skill guides you through defining the structural skeleton of a product or site—the navigation, page hierarchy, URL patterns, and user flows that sit between your design brief and build phase. It examines your existing codebase, interviews you on key structural decisions, then generates a complete IA document with sitemaps, navigation models, content priorities, and growth strategies.

Apache-2.0updated Jul 2026
★ 461repo stars
code-review
by blueberrycongee · blueberrycongee/termcanvas

Code Review executes a systematic multi-phase examination of pull requests and code diffs, starting with scope and intent identification before conducting a critical pass for logic errors, injection vulnerabilities, and resource leaks. Specialist lenses then apply targeted checks based on change type—tests, data access, auth, or UI—with each finding assigned a confidence level to guide merge decisions.

MITupdated May 2026
★ 374repo stars

More skills frontend-design (Apache-2.0)

Tags
visual-auditdesign-qabrief-complianceresponsive-checkaccessibility-auditcomponent-reviewaesthetic-fidelitydesign-polishhierarchy-analysisconsistency-validation