NioPD PD wireframe

Skill 8421bit/NioPD-Skills/plugins/niopd/skills/NioPD-PD-wireframe

Creates wireframe specifications for UI concepts. Use for design handoff, stakeholder review, or early prototyping.From its SKILL.md

Install

npx -y skills add 8421bit/NioPD-Skills --skill NioPD-PD-wireframe

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.7 KB, 291 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it: 1 file

119 B alongside SKILL.md

references/

wireframe-template.md119 B