Skip to content
Back to skills

Design Review

ASecurity

Adversarial art-direction, UX, copy, SEO, accessibility, and implementation review for emisar marketing website pages. Use before shipping public marketing pages, after LLM-generated redesigns, when a page feels generic or overdesigned, or when rendered screenshots need critique against an agency-quality bar.

  • 391 stars
  • 0 votes
  • 0 copies
  • 0 views
  • Added November 7, 2026
ai-agentsrustgobashsecurityperformance

Security analysis

A100/100

Pro scans all 4 files and shows the line behind each finding

Scanned November 7, 2026

npx -y skills add AndrewDryga/emisar --skill design-review --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Design Review?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Design Review
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/andrewdryga-design-review/badge)](https://www.skillsdirectory.com/skills/andrewdryga-design-review)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: design-review
description: Adversarial art-direction, UX, copy, SEO, accessibility, and implementation review for emisar marketing website pages. Use before shipping public marketing pages, after LLM-generated redesigns, when a page feels generic or overdesigned, or when rendered screenshots need critique against an agency-quality bar.
effort: high
argument-hint: "[route, URL, or diff]"
allowed-tools: Read, Grep, Glob, Bash
---

# Design Review

Review the rendered marketing page like a strict design director and conversion
reviewer. Lead with concrete issues that make the page generic, unclear,
untrustworthy, inaccessible, slow, or hard to act on. Do not rewrite the whole
page unless the concept itself is wrong.

## Inputs

Prefer all of these:

- The creative brief and chosen direction from `design-creative-director`.
- The rendered URL or static HTML.
- Desktop and mobile screenshots.
- The changed files or diff.
- The target conversion goal and SEO intent.

If screenshots are missing and the site can run locally, ensure the review has
a claimed task (create a basic one when needed), then render it and capture into
that task's `screenshots/` directory before judging. The viewports and sections
to capture are in `references/screenshot-checklist.md`. If rendering is blocked,
say so and review the code with lower confidence.

## Review Passes

1. **Template smoke test.**
   Use `references/quality-rubric.md`. Flag any split hero, generic feature grid,
   decorative gradient/blob, fake dashboard, vague SaaS copy, stock metaphor, or
   one-note palette.

2. **First-viewport test.**
   In five seconds, can a buyer tell that emisar lets an infrastructure agent keep
   working inside explicit bounds, why that is safer than the alternative, and what
   to do next? The first viewport must also feel specific to this product. Treat
   approvals and audit as proof of control, not the headline outcome.

3. **Narrative and conversion test.**
   Check the page argument: claim, mechanism, proof, comparison, objections,
   trust/security, and CTA. Identify missing proof and weak transitions.

4. **Visual craft test.**
   Inspect hierarchy, alignment, rhythm, typography, image treatment, spacing,
   responsive behavior, and whether the art direction is carried through every
   section. Then run the `design-interface-polish` micro-craft pass for the
   small details that read as unfinished, checked against design-system §3.

5. **Usability and accessibility test.**
   Check scan path, CTA clarity, keyboard/focus states, contrast, reduced motion,
   text fit, alt text, mobile ergonomics, and no horizontal overflow.

6. **SEO and performance test.**
   Check initial HTML content, one H1, title/meta, semantic sections, internal
   links, schema candidates, image weight/dimensions, layout shift, and whether
   motion/visuals hurt load or comprehension.

7. **Implementation fit.**
   Check the code matches existing Phoenix/HEEx/Tailwind patterns, keeps marketing
   pages server-rendered, avoids unnecessary dependencies, and remains maintainable.

## Severity

- BLOCKER: generic concept, false/security-risk claim, broken responsive layout,
  inaccessible primary action, SEO/crawl breakage, or page cannot ship.
- MAJOR: weak proof, confusing narrative, visible layout/craft failure, poor mobile
  experience, heavy asset/motion problem, or likely conversion loss.
- MINOR: polish issue, copy tightening, inconsistent detail, missing secondary
  state, or small SEO/accessibility improvement.
- NIT: optional refinement that does not materially affect clarity or trust.

## Output

```
Verdict: SHIP | SHIP-AFTER-FIXES | RETHINK
Summary: <why this verdict, in plain terms>

Findings:
- SEVERITY file:line or viewport - issue - why it matters - concrete fix

Scores:
- Distinctiveness: 1-5
- Clarity: 1-5
- Trust/proof: 1-5
- Visual craft: 1-5
- UX/accessibility: 1-5
- SEO/performance: 1-5

Fix order:
1. <highest leverage fix>
2. <next>
```

Keep the critique tied to rendered evidence. If the page is clean, say so and list
only residual risks worth acting on.

Files in this skill

  • SKILL.md4 KB
  • agents/openai.yaml230 B
  • references/quality-rubric.md2.2 KB
  • references/screenshot-checklist.md948 B

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.