Design Handoff BriefCAUTION

1255 professional Agent Skills for Claude, ChatGPT, Gemini, Cursor & Codex — PRDs, postmortems, leases, medical bills, layoffs, go-bags, new countries. Plain markdown, MIT, in Anthropic's plugin directory. Plus a typed decision layer: which skill, is it safe, ship or slip. Free in-browser or npx pm-

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: design-handoff-brief
description: "Transform feature briefs into structured design briefs that give designers the context they need before opening Figma. Use when asked to write a design brief, create a design handoff, brief a designer on a new feature, or translate a PRD into design requirements. Produces a brief with user goal, emotional context, success criteria, constraints, edge cases, and out-of-scope boundaries."
---

# Design Handoff Brief Skill

Produce a design brief that sets designers up for success — grounding them in user context and constraints before they open Figma, not after they've gone in the wrong direction.

## Required Inputs

Work from what is given. If any of these is missing, still produce the complete output: fill each gap with a reasonable assumption marked *(assumed, confirm)* and list those assumptions at the end. Ask a question first only when the core subject itself is missing (there is nothing to write about).
- **Feature brief or PRD** (even rough notes work)
- **Designer's name or team** (for personalisation)
- **Technical constraints** (any engineering limitations already known)
- **Timeline** (when does design need to be done?)

## What Designers Actually Need (and PMs Often Skip)
- The user's goal, not the feature name
- The emotional state of the user at this moment in the journey
- What success looks like — how will we know the design worked?
- Constraints: technical, legal, brand, accessibility
- Edge cases that must be handled
- What we're explicitly NOT solving for

## Process
1. Read the feature brief or PRD provided
2. Extract user goal (reframe from feature language to user outcome language)
3. Identify constraints — technical limitations, brand guidelines, accessibility requirements
4. List edge cases the design must handle
5. Define success criteria the design should be evaluated against
6. Write a "not in scope" section to prevent scope creep in design
7. **Validate** — Confirm every edge case listed is specific enough to design for, and every out-of-scope item is concrete enough to say "no" to


## Programmatic Helper

Contrast ratios cannot be eyeballed. The AA line sits at 4.5:1, and `#777777`
on white is 4.478 (fails) while `#767676` is 4.54 (passes) — no amount of
looking at a screenshot separates those. Compute them:

```bash
npx --yes notugly fix "#8ab4f8" "#ffffff"     # ratio, APCA, and the nearest passing colour
npx --yes notugly onepager <url> --out review.html   # every pairing, printable
npx --yes notugly vision                      # which colours merge for colour-blind viewers
```

`notugly fix` returns the ratio, the APCA lightness contrast, and the closest
colour to the one already chosen that passes — same hue, same chroma. Paste
those numbers into the tables below rather than estimating them.

Deterministic, zero dependencies, and **no model call** — so it costs nothing to
run and gives the same answer every time.

Handoff is exactly where contrast gets lost: a designer picks a colour in a tool
with no contrast checker, and an engineer implements it faithfully. Put the
measured ratio next to every colour in the handoff table so the number travels
with the value.

## Output Structure

### Design Brief: [Feature Name]

**User Goal:** (in the user's words, not ours)
"When I [situation], I want to [motivation] so that I can [outcome]."

**Context & Emotional State:**
[Where is the user in their journey? What are they feeling? What just happened?]

**Design Success Criteria:**
- [Criterion 1 — measurable where possible]
- [Criterion 2]
- [Criterion 3]

**Constraints:**
- Technical: [limitations engineering has flagged]
- Brand: [relevant brand guidelines]
- Accessibility: [WCAG level required, any specific requirements]
- Legal/Compliance: [if applicable]

**Edge Cases to Design For:**
- [Edge case 1]
- [Edge case 2]
- [Edge case 3]

**Explicitly Out of Scope:**
- [What we are NOT solving in this design iteration]

**Reference Material:**
- User research: [link]
- Existing patterns: [Figma component library link]
- Competitor examples: [links if relevant]

## Quality Checks

- [ ] User goal is written in user language (not feature/product language)
- [ ] At least one edge case covers an error or failure state
- [ ] Success criteria are measurable or observable (not "looks good")
- [ ] Out-of-scope section names at least one thing that might seem in scope but isn't
- [ ] Technical constraints are specific enough for an engineer to confirm

## Anti-Patterns

- [ ] Do not write the user goal in feature language ("design the checkout flow") — it must be written from the user's perspective with a motivation and outcome
- [ ] Do not skip the "Explicitly Out of Scope" section — without it, designers will inadvertently solve problems not intended for this iteration
- [ ] Do not list edge cases that are so generic they apply to any feature (e.g. "handle errors") — each edge case must be specific to this feature's failure modes
- [ ] Do not hand off the brief without confirming engineering constraints are accurate — a constraint that is wrong is worse than no constraint
- [ ] Do not omit the emotional context of the user — designs without emotional grounding produce technically correct but experientially flat results

## Example Trigger Phrases

- "Write a design brief."
- "Create a design handoff."
- "Brief a designer on a new feature."
- "Translate a PRD into design requirements."

CAUTIONgrade B · trust 87/100 Install with care. The audit found things worth knowing before you trust its output.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (6)

templates/pm-discovery-agent/skills/assumption-mapper/SKILL.md

templates/pm-discovery-agent/skills/discovery-interview-guide/SKILL.md

templates/pm-discovery-agent/skills/job-story-mapper/SKILL.md

templates/pm-discovery-agent/skills/user-interview-synthesis/SKILL.md

templates/pm-launch-agent/skills/content-calendar/SKILL.md

npx --yes notugly fix "#8ab4f8" "#ffffff"

Gates applied: no_behavioural_pass.