wireframe | ui-design | ClaudePluginHub

Skill

Community

wireframe

8

Description

Create wireframes for UI mockups. Supports SVG (precise layouts) and HTML/Tailwind (standard UI patterns). Use when creating wireframes, mockups, or skeletal UI layouts.

AI Summary

Creates skeletal UI mockups as SVG or HTML/Tailwind wireframes and renders them to PNG.

Install

1

Run in your terminal

$

npx claudepluginhub bendrucker/claude

Tool Access

This skill is limited to using the following tools:

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

Supporting Assets

View in Repository

assets/form.html

assets/form.svg

assets/grid.html

assets/grid.svg

assets/login-screen.html

assets/login-screen.svg

assets/modal.html

assets/modal.svg

assets/nested-groups.html

assets/nested-groups.svg

assets/table.html

assets/table.svg

assets/two-column.html

assets/two-column.svg

references/html.md

references/svg.md

scripts/fixtures/element-out-of-bounds.svg

scripts/fixtures/group-out-of-bounds.svg

scripts/fixtures/hidden-div.html

scripts/fixtures/missing-dimensions.svg

Skill Content

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

Links

GitHub Stats

1 forks

Updated 1 month ago

Actions

Similar Skills

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

68.7k

dispatching-parallel-agents

Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies

68.7k

executing-plans

Use when you have a written implementation plan to execute in a separate session with review checkpoints

68.7k