Skill

wireframe

Creates wireframes for UI mockups using SVG for precise layouts or HTML/Tailwind for standard UI patterns. Use for wireframing, mockups, skeletal layouts.

Html

Css

Tailwind

frontend

design

Install

npx claudepluginhub bendrucker/claude --plugin ui-design

Tool Access

This skill is limited to using the following tools:

Bash(bun ${CLAUDE_SKILL_DIR}/scripts/render.ts:*)Bash(bun ${CLAUDE_SKILL_DIR}/scripts/render-html.ts:*)

Preview

Create wireframes for UI mockups with two approaches.

Supporting Assets

SKILL.md

Similar Skills

using-git-worktrees

Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.

superpowers

168.3k

subagent-driven-development

3 files

Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.

superpowers

168.3k

dispatching-parallel-agents

Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.

superpowers

168.3k

Stats

Parent Repo Stars10

Parent Repo Forks1

Last CommitMar 29, 2026

Actions

View Source View Plugin View on GitHub View README

Wireframe

Create wireframes for UI mockups with two approaches.

Wireframes are skeletal, black-and-white representations of UI layout. They focus on structure, content priority, and function—not visual design. No colors, no styling, minimal fidelity.

Choose Your Approach

Use	When	Render Script
SVG	Precise positioning, overlapping elements, custom shapes, artistic layouts	`render.ts`
HTML/Tailwind	Standard UI patterns (forms, grids, navigation, modals), flexbox layouts	`render-html.ts`

Before creating any wireframe: Read the reference file for your chosen approach. The references contain required patterns, component examples, and the exact rendering workflow.

References

SVG Reference — Absolute positioning with validation
HTML Reference — Tailwind/flexbox patterns

Rendering

Use ONLY the provided render scripts. Do not improvise alternative methods (Chrome headless, third-party CLI tools, etc.).

Format	Command
SVG	`bun {SKILL_DIR}/scripts/render.ts [--scale N] <file.svg> [output.png]`
HTML	`bun {SKILL_DIR}/scripts/render-html.ts [--scale N] <file.html> [output.png]`

Common Sizes

Device	Width	Height
iPhone	375	667
iPad	768	1024
Desktop	1280	800
Mobile web	360	640

Iteration Process

Create wireframe in the scratchpad directory
Run validation (SVG) or render directly (HTML)
Render to PNG (1x for quick verification)
Read the PNG file to visually inspect
Iterate until satisfied
Render final version at 2x for sharing