niopd-pd-wireframe

name: niopd-pd-wireframe description: Creates wireframe specifications for UI concepts. Use for design handoff, stakeholder review, or early prototyping.

Wireframe Specification Skill

This skill creates text-based wireframe specifications.

Instructions

Step 1: Define Screen Purpose

• What screen/page?
• What user goal?
• What context?

Step 2: Describe Layout

┌─────────────────────────────────────┐
│ Header: [Logo] [Nav] [User Menu]    │
├─────────────────────────────────────┤
│ Main Content Area                   │
│ ┌─────────┐ ┌─────────────────────┐ │
│ │ Sidebar │ │ Content             │ │
│ └─────────┘ └─────────────────────┘ │
├─────────────────────────────────────┤
│ Footer                              │
└─────────────────────────────────────┘

Step 3: Detail Components

For each component:

• Purpose
• Content
• Interactions
• States (loading, error, empty)

Step 4: Note Technical Requirements

• Responsive behavior
• Accessibility needs
• Performance considerations

Step 5: Generate Document

File path: 03-docs/[YYYYMMDD]-wireframe-v0.md

Output Specifications

• File Naming: [YYYYMMDD]-wireframe-v0.md
• Location: 03-docs/
• Template: references/wireframe-template.md