---
name: bigstack-plan-design-review
version: 0.1.0
description: |
  Multi-dimension design plan review. Seven-pass review scoring
  each dimension 0-10, with visual mockup generation and comparison.
allowed-tools:
  - Bash
  - Read
  - Glob
  - Grep
  - AskUserQuestion
---
<!-- Auto-generated from SKILL.md.tmpl by bigstack. DO NOT EDIT. -->
<!-- Regenerate: npm run gen:skill-docs -->

<!-- bigstack v0.1.0 | skill: bigstack-plan-design-review -->

> **bigstack v0.1.0** — skills for Bigscreen development.

Before starting, run this setup block silently:

```bash
# Session context
BIGSTACK_VERSION="0.1.0"
BIGSTACK_DIR="C:/Users/GGPC/Documents/Github/bigstack"
REPO_NAME=$(basename "$(git rev-parse --show-toplevel 2>/dev/null)" 2>/dev/null || echo "unknown")
BRANCH=$(git branch --show-current 2>/dev/null || echo "unknown")
echo "bigstack v$BIGSTACK_VERSION | repo: $REPO_NAME | branch: $BRANCH"
```

**Guidelines:**
- When asking the user a question, use AskUserQuestion (not inline text questions)
- When uncertain about a change, state your confidence level before proceeding
- Prefer modifying existing code over creating new files
- This is an existing codebase — understand before changing

# /bigstack-plan-design-review — Design Plan Review

Review a product or UX design plan against multiple quality dimensions.

## Input

The user should provide:
- A design document, mockup, or wireframe description
- The target user/audience
- Any existing design system or component library in use

## Seven-Pass Review

### Pass 1: User Value (0-10)

- Does this solve a real user problem?
- Is the value proposition clear within 5 seconds?
- Will users understand what to do without instructions?

### Pass 2: Information Architecture (0-10)

- Is content organized logically?
- Can users find what they need in ≤3 clicks/taps?
- Is the navigation consistent with the rest of the product?

### Pass 3: Visual Hierarchy (0-10)

- Do the most important elements draw attention first?
- Is there a clear reading flow?
- Are call-to-action elements prominent?

### Pass 4: Consistency (0-10)

- Does it follow the existing design system?
- Are spacing, colors, and typography consistent?
- Are interaction patterns reused from existing screens?

### Pass 5: Accessibility (0-10)

- Color contrast meets WCAG AA (4.5:1 for text)?
- Touch targets are ≥44px?
- Screen reader flow makes sense?
- Keyboard navigation is possible?

### Pass 6: Edge Cases (0-10)

- Empty states designed?
- Error states designed?
- Loading states designed?
- Long text / internationalization considered?
- Offline behavior considered?

### Pass 7: Feasibility (0-10)

- Can this be built with the existing component library?
- Are there technical constraints the design doesn't account for?
- Is the implementation effort proportional to the user value?

## Scoring Summary

| Dimension | Score | Key Issue |
|-----------|-------|-----------|
| User Value | /10 | |
| Information Architecture | /10 | |
| Visual Hierarchy | /10 | |
| Consistency | /10 | |
| Accessibility | /10 | |
| Edge Cases | /10 | |
| Feasibility | /10 | |
| **Overall** | **/70** | |

## Recommendations

List top 3 changes that would most improve the design, ordered by impact.

## Confidence Calibration

Before completing a major action, state your confidence:

| Level | Meaning | Action |
|-------|---------|--------|
| **High** | Well-understood change, clear test coverage, matches existing patterns | Proceed |
| **Medium** | Reasonable approach but some uncertainty — unfamiliar area, partial test coverage | Proceed but flag risks |
| **Low** | Significant unknowns, could break existing behavior, no test coverage | Stop and ask the user |

Format: **Confidence: [High/Medium/Low]** — [one-line rationale]