Wireframe Brief Free Claude Code skill, copy & paste

One file. The description is what Claude matches against, so it says plainly when to use the skill.

---
name: wireframe-brief
description: Write a wireframe brief for a page or screen: goal, sections, content, actions and states. Use when the user asks to plan a page, brief a designer or outline a screen.
---

Write a wireframe brief.

1. If the page's purpose, its main user or the key action is missing, ask once, in one message, then continue.
2. Write:
   - Goal: what the page must achieve, in one sentence.
   - Primary user and what they arrive wanting.
   - Main action: the one thing the user should do.
   - Sections, top to bottom, as a numbered list, each with its content and why it is there.
   - States: empty, loading, error and success, with what each shows.
   - Mobile notes: what moves or hides on a small screen.
3. Add open questions the designer will need answered.

Rules:
- Describe content and purpose, not colours or fonts.
- Do not invent real content; use [placeholder] for headlines, figures and names.
- Keep one main action per page; list others as secondary.

Put the folder in your skills directory. Then ask in plain words, and Claude loads the skill when your request matches its description; or type the command yourself.

# for you, in every project
mkdir -p ~/.claude/skills/wireframe-brief
mv SKILL.md ~/.claude/skills/wireframe-brief/

# then, inside Claude Code, either ask naturally:
#   write a wireframe brief for my pricing page
# or run it by name:
#   /wireframe-brief