# Niopd Pd Wireframe

> Creates wireframe specifications for UI concepts. Use for design handoff, stakeholder review, or early prototyping.

- Skill: `8421bit/niopd-pd-wireframe` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add 8421bit/niopd-pd-wireframe`
- Raw SKILL.md: https://api.skillmd.com/api/skills/8421bit/niopd-pd-wireframe/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: 8421bit (https://skillmd.com/u/8421bit)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/8421bit/niopd-pd-wireframe

---


# 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`