# Nean Design Review

> Visual design review using Playwright screenshots against nean-styleguide.

- **Type:** Skill
- **Install:** `agentstack add skill-edfenton-claude-skills-nean-design-review`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [edfenton](https://agentstack.voostack.com/s/edfenton)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [edfenton](https://github.com/edfenton)
- **Source:** https://github.com/edfenton/claude-skills/tree/main/nean/nean-design-review

## Install

```sh
agentstack add skill-edfenton-claude-skills-nean-design-review
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

## Purpose

Capture screenshots at multiple breakpoints and evaluate against nean-styleguide. Report issues, then (with approval) fix and run tests to confirm.

## Arguments

- `--base-url ` — App URL (default: http://localhost:4200)
- `--routes ` — Comma-separated routes (default: discover from `app.routes.ts`)
- `--no-fix` — Report only, don't offer to fix

## Workflow

### 1. Setup

- Ensure dev servers running (`npm run dev`)
- Discover routes if not specified (scan for route configurations)

### 2. Capture screenshots

Use Playwright to capture each route at:

- Mobile: 390×844
- Tablet: 834×1194
- Desktop: 1440×900

Save to `playwright-artifacts/design-review/` (don't commit).

### 3. Evaluate against nean-styleguide

Review each screenshot for:

- **Responsiveness** — intentional adaptation, not just stacking
- **Typography** — no banned fonts, contributes voice
- **Spacing/hierarchy** — premium feel, clear visual order
- **Color** — uses semantic tokens, proper contrast
- **Accessibility** — visible focus states, adequate tap targets
- **PrimeNG customization** — not using default themes unchanged
- **Anti-patterns** — no unchanged PrimeNG defaults, card nesting, decorative effects

For each issue, note:

- Route and viewport
- Severity: `must-fix` | `should-fix` | `nice-to-have`
- What violates nean-styleguide
- Concrete fix

### 4. Report results

Summary of screens/viewports reviewed + findings by severity.

### 5–6. Approval gate, fix and confirm

See `/shared-review-workflow` for severity definitions, approval gate protocol, and fix constraints. After fixes, re-capture affected screenshots and run `/nean-unit-test`.

## Reference

For Playwright setup, screenshot scripts, and evaluation checklist, see `reference/nean-design-review-reference.md`

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [edfenton](https://github.com/edfenton)
- **Source:** [edfenton/claude-skills](https://github.com/edfenton/claude-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-edfenton-claude-skills-nean-design-review
- Seller: https://agentstack.voostack.com/s/edfenton
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.