mikeparcewski/mockup
skills/product/mockup/SKILL.md
Use when you need a quick ASCII wireframe or HTML mockup in-chat without Figma overhead. NOT for production design work — use the figma plugin for that.
$ install --global
skillsauthnpx skillsauth add mikeparcewski/wicked-garden mockupInstall 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: May 8, 2026, 5:52 AM113.3s2 files scanned
SKILL.md
- name:
- mockup
- description:
- |
- portability:
- portable
- phase_relevance:
- ["clarify", "design", "review"]
- archetype_relevance:
- ["*"]
Mockup Skill
Generate wireframes and mockup designs in multiple fidelity levels — from quick ASCII sketches to HTML/CSS previews ready for developer handoff.
Output Format Selection
| Format | Fidelity | Best For | |--------|---------|----------| | ASCII wireframe | Low | Quick ideation, flow discussion | | Markdown spec | Medium | Annotated layouts, component inventory | | HTML/CSS preview | High | Stakeholder review, dev handoff | | Component spec | Medium-High | Design system documentation |
ASCII Wireframes
Fast, text-based layout sketches. Use for early ideation and flow discussion.
┌─────────────────────────────────────────┐
│ [Logo] [Nav Item] [Nav Item] │
│─────────────────────────────────────────│
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ │ │ │ │
│ │ [Image] │ │ [Image] │ │
│ │ │ │ │ │
│ │ Card Title │ │ Card Title │ │
│ │ Description │ │ Description │ │
│ │ [Button] │ │ [Button] │ │
│ └──────────────┘ └──────────────┘ │
│ │
│ ─────── Section Heading ─────────── │
│ │
│ ████████████████████ [CTA Button] │
└─────────────────────────────────────────┘
ASCII Symbol Guide
┌─┬─┐ Box borders
│ │ │ Vertical dividers
└─┴─┘ Box bottoms
[...] Button or interactive element
{...} Input field
████ Image placeholder
~~~~ Text content placeholder
──── Horizontal rule / divider
HTML/CSS Preview
For higher-fidelity mockups, generate minimal HTML with embedded CSS using design tokens. Match the project's existing tokens if available (check styles/tokens.css or equivalent).
Full template: refs/templates.md § HTML/CSS Preview.
Component Specs (Markdown)
For developer handoff without visual preview, use the spec template. Sections: Anatomy, States table, Spacing tokens, Responsive Behavior, Accessibility Notes.
Full template: refs/templates.md § Component Spec (Markdown).
Wireframe from Description
When given a description, generate a wireframe in this sequence:
- Identify layout pattern: Single column, two-column, grid, sidebar+main
- List components: Header, nav, cards, forms, tables, modals
- Arrange hierarchy: Most important content first (F-pattern or Z-pattern)
- Add interactions: Buttons, links, inputs, toggles
- Annotate: Notes on behavior, states, responsive changes
Integration with Frontend Design
When handing off to developers, attach handoff notes covering: design tokens to use, closest existing component, new patterns required, assets needed, animation specs.
Template: refs/templates.md § Handoff Notes.
Output Checklist
Before delivering a mockup:
- [ ] All states shown (default, hover, error, empty, loading)
- [ ] Mobile and desktop layouts included
- [ ] Spacing annotated with token names (not pixel values)
- [ ] Interactive elements clearly marked
- [ ] Accessibility notes included
- [ ] Open questions flagged for stakeholder input
Integration
- ux-review skill: Pair mockups with the UX flow they support
- screenshot skill: Compare mockup against built implementation
- visual-review skill: Mockups set the standard for visual review
- engineering/frontend-design skill: Coordinate component implementation
Related Skills
mikeparcewski/skills/engineering/large-scale-migration
development
VerifiedTrustedCommunity
--- name: large-scale-migration description: How to execute a LARGE MECHANICAL change across any codebase with LEVERAGE instead of an agent-grind or hand-edits — a cross-cutting migration, refactor, rename, dialect/framework/DB port, library adoption, or bulk transform. The map→transform→gate pattern: a deterministic transform driven by a source-of-truth map, proven by a differential-equivalence gate. Use when the work is "migrate all X to Y", "rename Z everywhere", "port to a new DB/dialect/fra
8SKILL.mdUpdated Jun 3, 2026
mikeparcewski/wicked-garden:classify
testing
VerifiedTrustedCommunity
v11 LLM-based work-shape classifier. Replaces the regex archetype detector with the model's own reasoning. Reads the user's prompt, picks the right archetype(s) from the catalog, identifies signals (blast_radius, novelty, reversibility, etc.), and persists to SessionState so subsequent turns steer correctly. Use when: the prompt_submit hook emitted a `<wg classify-due />` directive, OR explicitly invoked at session start, OR when re-classifying after the user changes scope mid-session.
8SKILL.mdUpdated May 26, 2026
mikeparcewski/wicked-garden:archetype
tools
VerifiedTrustedCommunity
v11 work-shape archetype runner. When a prompt has been routed to one of the 9 archetypes (triage, explore, specify, decide, ship, review, incident, build, migrate), this skill is the entry point. It picks the right per-archetype playbook from refs/ and executes the phase shape declared in `.claude-plugin/archetypes.json`. Use when: a `<wg archetype="X">` or `<wg archetypes>` system-reminder tag appears, an explicit "let's run the X archetype" request, or when one of the per-archetype slash commands resolves to this skill.
8SKILL.mdUpdated May 8, 2026
mikeparcewski/intent
development
VerifiedTrustedCommunity
Show or set the session intent variable. Intent gates how loud the framework is — simple-edit (silent), feature/research (synthesis directive), rigor (full crew context). Auto-detected on turn 1; this skill overrides explicitly. Sticky for the session. Use when: "set intent", "intent override", "/wicked-garden:intent", "make the framework quiet", "force rigor", "what's my intent".
8SKILL.mdUpdated May 6, 2026