← All skills
📐
UX / Design
Wireframe Specification
Detailed spec for any page: layout, content blocks, interactions, states, edge cases. Dev-ready.
Step 1
Get the skill
Pick one. Copy to paste straight away, or download wireframe-spec.md to keep.
Step 2
Paste it into your AI
Pair with the Design Brief skill. Wireframe spec stops the "design vs dev mismatch" cycle.
▸Preview the skill· what gets copied
Write a wireframe spec.
Page: {{PAGE}}
Goal / user job to be done: {{JTBD}}
Audience: {{ICP}}
Device priority: {{MOBILE-FIRST / DESKTOP-FIRST}}
Output:
1. Section-by-section layout (top to bottom)
For each section: purpose, content blocks, interaction, edge case
2. Component inventory (named, with re-use across the site)
3. States: empty, loading, error, success, partial
4. Microcopy (every button label, form helper, error)
5. Responsive behavior: mobile, tablet, desktop
6. Animations (where, what, on what trigger, respects reduced-motion)
7. Performance: lazy-load below-the-fold images, defer JS
8. Analytics: events to fire per interaction
9. SEO: meta, schema, internal links
10. Accessibility: keyboard order, focus, contrast, alt text
Acceptance test (5 manual steps to verify the page works as specified).Works with: Claude · Claude Code · ChatGPT · Cursor · Any model
By Rishi Jain
More skills like this
⌨️
Claude Code Project Spec
Hand Claude Code a project spec it can actually build from. Stack, files, behavior, edge cases.
🎨Design Project Brief
Designer-ready brief: goal, audience, references, scope, deliverables, dates. Stops the "vibe revisions" loop.
🧑🔬User Research Interview Script
30-min 1:1 user interview script. Warm-up, jobs to be done, pain, solutions tried, willingness to pay.