the-own-lab/wireframe
skills/wireframe/SKILL.md
Sketch low-fidelity UI wireframes before frontend work. Absorbs the former ui-designer agent's role as a skill. Uses Pencil MCP if available; otherwise produces an ASCII/markdown wireframe.
tools
Updated Apr 21, 2026
$ install --global
skillsauthnpx skillsauth add the-own-lab/Claude-company-of-one wireframeInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 30, 2026, 9:31 AM3.6s1 file scanned
SKILL.md
- name:
- wireframe
- description:
- Sketch low-fidelity UI wireframes before frontend work. Absorbs the former ui-designer agent's role as a skill. Uses Pencil MCP if available; otherwise produces an ASCII/markdown wireframe.
Wireframe
Before writing a React component, sketch the layout. Saves rework when the layout is wrong.
When to Use
- Any new page or screen
- Any non-trivial component with multiple states
- Redesigns of existing flows
Skip for: small tweaks (color change, copy edit, single-field addition).
Two Modes
Mode 1: Pencil MCP available
If the Pencil MCP server is configured (check for mcp__pencil__* tools):
- Sketch the page layout via Pencil tools
- Export as SVG / image
- Reference from the
design-doc
Mode 2: Fallback — ASCII / markdown
If Pencil is not available, produce a text wireframe:
+---------------------------------------------------+
| [Logo] [Search...] [Sign in] |
+---------------------------------------------------+
| |
| # Page title |
| Short subtitle or lede. |
| |
| +-----------------+ +---------------------+ |
| | Primary action | | Secondary action | |
| +-----------------+ +---------------------+ |
| |
| [ Content area ] |
| |
+---------------------------------------------------+
ASCII is fine. The point is shape + hierarchy, not pixel fidelity.
What to Capture
- Layout — major regions and their relative position
- Hierarchy — which element is primary, secondary, tertiary
- States — empty, loading, error, filled (sketch each if they differ meaningfully)
- Responsive — note mobile behavior if it diverges (stack vs side-by-side)
What to Ignore
- Colors, fonts, exact spacing — these belong to the component library (
packages/ui) - Animations — describe in words, don't try to sketch
- Pixel-perfect alignment — this is a wireframe, not a comp
Integration
- Output goes into the
design-docas an embedded sketch or link - For implementation, the wireframe is a reference, not a contract — adjust during build when reality intrudes
- If
packages/uihas a matching primitive, name it next to the sketch (e.g. "use<Card>frompackages/ui")
Open Question (tracked in spec)
Whether Pencil MCP can be invoked from a skill (rather than an agent) — spike during first real use. If not, this skill produces only ASCII and a future revision may reintroduce a lightweight agent wrapper.
What This Replaces
The former ui-designer agent's wireframing role. The role-specific persona ("senior UX designer") isn't needed for solo-dev wireframes — structure is.
Related Skills
the-own-lab/write-brief
documentation
VerifiedTrustedCommunity
Update BRIEF.md sections during a command run. Any skill that produces a brief-persisted artifact calls this to write it back.
SKILL.mdUpdated Apr 22, 2026
the-own-lab/verify
development
VerifiedTrustedCommunity
Post-code check: run tests + confirm TODO acceptance items map to passing tests; applies a security lens but is not a separate scan.
SKILL.mdUpdated Apr 22, 2026
the-own-lab/update-docs
documentation
VerifiedTrustedCommunity
Command post-step: write CHANGELOG + TODO once per command run. One call, not per-skill doc writes.
SKILL.mdUpdated Apr 22, 2026
the-own-lab/spec-writing
content-media
VerifiedTrustedCommunity
Author REQUIREMENTS.md + DESIGN.md + TODO.md for a feature. The three files are one contract; they ship together.
SKILL.mdUpdated Apr 22, 2026