frontend-design-review

Overview of frontend-design-review skill

frontend-design-review is a GitHub skill for reviewing frontend UI work and, when needed, creating distinctive production-grade interfaces from scratch. It is most useful when you need the frontend-design-review skill to judge design system compliance, accessibility, visual quality, or whether a UI feels generic versus intentionally designed.

What this skill is for

This skill is built around two real jobs: reviewing existing UI and shaping new UI direction. For reviews, it checks whether the implementation matches design system expectations and the three pillars in the repo: Frictionless, Quality Craft, and Trustworthy. For new frontend work, it helps you push past default AI-looking output and toward a clear aesthetic concept.

Best-fit users

Use frontend-design-review for PR reviews, component reviews, accessibility audits, responsive design checks, theme checks, and creative frontend design. It is a good fit for frontend engineers, design-minded builders, and agents that need a stronger critique framework than a generic prompt.

When it is the right tool

Choose this skill when the key question is “Does this UI actually meet design quality standards?” or “How do I make this interface feel deliberate and production-ready?” It is less useful for backend logic, infrastructure work, or non-visual code paths, where the review criteria in frontend-design-review do not apply.

How to Use frontend-design-review skill

Install and first files to read

Use frontend-design-review install only if your environment exposes skills that way; in the repo, the practical starting point is the skill folder under .github/skills/frontend-design-review. Read SKILL.md first, then references/quick-checklist.md, references/review-output-format.md, references/pattern-examples.md, and references/review-type-modifiers.md. Those files give you the fastest route to how the frontend-design-review skill expects inputs and outputs.

Turn a rough request into a usable prompt

The skill works better when you name the review type, the target surface, and the decision you want. Good input is specific: “Review this settings modal for design system compliance and keyboard accessibility” or “Create a bold dashboard landing page with a brutalist direction, no generic card layout.” Weak input is vague: “Review my UI” or “Make it look better.”

Workflow that produces better results

Start by stating whether you need a review or a new design. Then include the component name, user task, platform, constraints, and any design system references. If the work already exists, provide screenshots, code snippets, Figma specs, or a concise behavior description. For creative frontend-design-review usage, also define the aesthetic direction, content hierarchy, and motion tolerance so the output does not drift into generic polish.

What to verify in the repository

The useful repo reading path is not just SKILL.md; the references files are where the skill becomes operational. quick-checklist.md shows the approval criteria, review-output-format.md shows the structure of a good response, pattern-examples.md shows good and bad patterns, and review-type-modifiers.md tells you how to narrow focus for PR, accessibility, or design system review modes.

frontend-design-review skill FAQ

Is frontend-design-review only for code review?

No. The frontend-design-review skill covers both evaluation and creation. Use it to review existing UI, audit accessibility, check design system adherence, or guide a new frontend concept with a stronger visual point of view.

How is this different from a normal prompt?

A normal prompt usually asks for “feedback” and gets broad advice. This skill gives a specific review frame, especially the three-pillar model and the review-type modifiers, so the output is more actionable and less subjective. That matters when you need consistent frontend-design-review guide results across multiple components or PRs.

Is it beginner-friendly?

Yes, if you can describe the UI and its intended user task. Beginners get the most value by starting with one component, one review type, and one clear outcome. The skill is less helpful if you cannot identify what screen, state, or interaction you want reviewed.

When should I not use it?

Do not use frontend-design-review for backend APIs, data models, DevOps, or business logic without a visible UI impact. It also is not the right fit if you only want copy editing or generic visual inspiration without a concrete frontend implementation target.

How to Improve frontend-design-review skill

Give stronger inputs up front

The biggest quality jump comes from including design context: what the interface does, who uses it, what “good” means, and what constraints matter. For a review, include screenshots or code plus the expected behavior. For a design request, specify layout goals, tone, density, accessibility requirements, and whether you want design-system alignment or a more expressive aesthetic.

Use the review type explicitly

frontend-design-review works best when you select the right lens: PR review, design review, accessibility audit, design system compliance, or creative frontend review. If you do not name the mode, the response can become too broad. The review-type modifiers file exists because each mode needs different evidence and different tradeoffs.

Watch for common failure modes

The most common miss is asking for “better UI” without naming the actual problem. Another is omitting the design system source of truth, which makes it hard to judge compliance. For creative frontend work, the biggest failure is vague aesthetic direction, which usually produces generic AI slop instead of a distinct interface.

Iterate with evidence, not adjectives

If the first output is close but not enough, refine with concrete diffs: “reduce interaction count,” “make the primary action clearer,” “replace generic typography,” or “show where token usage deviates from Figma.” For frontend-design-review usage, the more precise your next pass is, the more the skill can focus on the actual blocker instead of repeating high-level advice.