---

name: wireframe-skill description: | Generates wireframes from natural language descriptions, outputting machine-readable JSON (.wireframe.json) and interactive HTML with drag-and-drop reordering and undo/redo. Requires only Python 3 and a browser — no design tool accounts needed. triggers:

• "wireframe-skill"
• "yhassy wireframe"
• "JSON wireframe"
• "interactive wireframe HTML" das: type: skill category: diagrams upstream: "https://github.com/yhassy/wireframe-skill" upstream_path: "SKILL.md" version: latest install: true

---

wireframe-skill

Catalogue stub — full skill: yhassy/wireframe-skill

Decision tree

1. Is the full skill already installed? Check whether the skill at this location still has a das: block:

   • Global: grep -q "^das:" ~/.agents/skills/wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • Project: grep -q "^das:" .agents/skills/wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • No das: block → full skill installed, invoke it and proceed
   • das: block present → go to step 2

2. Detect scope, then install:

   To detect scope:

   [ -e ~/.agents/skills/wireframe-skill ] && echo "global" || echo "project"
   

   Global (installed with -g):

   npx skills add yhassy/wireframe-skill --skill wireframe-skill -g -y
   

   Project (installed without -g):

   npx skills add yhassy/wireframe-skill --skill wireframe-skill -y
   

   Claude Code: send either command as a chat message starting with ! to run it without leaving the conversation.

Invoke after install

Skill name: wireframe-skill, triggers: "wireframe-skill", "yhassy wireframe", "JSON wireframe", "interactive wireframe HTML"

What it does

Converts natural language UI descriptions into structured wireframes in two output formats: machine-readable .wireframe.json for programmatic use and single-file interactive HTML with drag-and-drop element reordering and undo/redo history. Requires only Python 3 and a modern browser. Ideal for rapid lo-fi ideation before any visual design work begins.

When NOT to use

• High-fidelity mockups with color and typography — use wireframer instead
• Excalidraw-format output — use excalidraw-diagram instead
• When 5 parallel UX variants are needed — use claude-wireframe-skill instead