skills.rest
kwakseongjae
kwakseongjaeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

omd:designer-review

Audit HTML, MD, and JSX artifacts for visual consistency against DESIGN.md.

416|35|Updated Apr 13, 2026
Search Tags:#design consistency#consistency check#brand audit#DESIGN.md#UI review
One-click install
npx skills add https://github.com/kwakseongjae/oh-my-design --skill omd-designer-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: omd:designer-review
Source: https://github.com/kwakseongjae/oh-my-design/tree/main/.claude/skills/omd-designer-review
Command: npx skills add https://github.com/kwakseongjae/oh-my-design --skill omd-designer-review

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the review of design consistency in HTML/MD/JSX artifacts against a brand's DESIGN.md, saving time and reducing manual errors.

Core Features & Use Cases

  • Visual and Brand Consistency Audit: Automatically checks for typography, color, radius, component states, mobile responsiveness, and spacing/layout consistency.
  • Severity Reporting: Provides severity levels (BLOCK/WARN/FYI) and line references for issues.
  • Integration with Existing Tools: Can be integrated with Claude Code, Codex, OpenCode, and Cursor AI coding agents.

Quick Start

Run the 'omd:designer-review' skill with the following command: omd:designer-review --artifact_path <path_to_artifact> --design_md_path <path_to_DESIGN_md>.

Frequently Asked Questions about omd:designer-review

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

FAQPage Schema
How do I automate design consistency checks in HTML and JSX files?▼

You can automate design consistency checks by running a review command that audits your HTML and JSX artifacts against a specified DESIGN.md file. The process validates typography, colors, radius, and spacing, returning severity levels like BLOCK or WARN with line references.

What is a brand audit for UI components and how does it work?▼

A UI brand audit evaluates visual artifacts against your brand's DESIGN.md guidelines to ensure consistency. It automatically inspects typography, color, radius, component states, mobile responsiveness, and spacing layout, flagging deviations with severity levels.

Does this design review tool work with Claude Code and Cursor AI?▼

Yes, the design consistency review integrates directly with Claude Code, Codex, OpenCode, and Cursor AI coding agents. This allows you to automate UI audits and receive severity reports within your existing AI-assisted development workflow.

How do I check mobile responsiveness and spacing layout in my code?▼

To check mobile responsiveness and spacing layout, run a design consistency audit targeting your HTML or JSX artifacts. The review compares your component spacing and responsive behavior against the rules defined in your DESIGN.md file.

Related Skills

Explore More Design & Creative Skills→
TobiasPerryTobiasPerry

design-consultation

Generate a design system proposal and DESIGN.md with typography, color, spacing, and motion guidelines.

Community
Advanced
narrative-ionarrative-io

lint

Identify and fix linting errors in TypeScript/JavaScript projects with bun check.

Official
Advanced
edheltzeledheltzel
134

converting-slash-commands

Convert Claude Code slash commands to OpenCode command format.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced