wireframe-skill
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.
How do I install this agent skill?
npx skills add https://github.com/podo/design-agent-skills --skill wireframe-skillIs this agent skill safe to install?
- Gen Agent Trust Hubwarn
This skill acts as a catalogue stub that facilitates the installation of a wireframing tool from a community GitHub repository. It performs system checks using shell commands and invokes npx to download and execute remote code from a non-trusted source. It also presents an indirect prompt injection surface by processing natural language descriptions into interactive HTML outputs.
- Socketpass
No alerts
- Snykwarn
Risk: MEDIUM · 2 issues
What does this agent skill do?
wireframe-skill
Catalogue stub — full skill: yhassy/wireframe-skill
Decision tree
-
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
- Global:
-
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 -yProject (installed without
-g):npx skills add yhassy/wireframe-skill --skill wireframe-skill -yClaude 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
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/podo/design-agent-skills/wireframe-skill">View wireframe-skill on skillZs</a>