mikeparcewski/wicked-garden-product-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 wicked-garden-product-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: Jul 13, 2026, 8:02 AM132.9s2 files scanned
SKILL.md
- name:
- wicked-garden-product-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/wicked-garden-engineering-conformance-reviewer
development
VerifiedTrustedCommunity
Pattern-conformance agent-half: evaluates a produced artifact or diff against a set of architectural/design pattern rules from the conformance-rule store (wicked_governance schema). Returns structured findings with rule ID, severity, and rationale — the deterministic half (mechanical rule recall) is done by the guard pipeline; this is the semantic evaluation step. Triggered by: the guard_pipeline `outgov_pattern` check (session-close), or explicitly by an engineering review when WICKED_OUTGOV_RULES_DIR is populated. NOT a replacement for the full `engineering` review skill — focuses only on conformance to stored Pattern rules; architecture and code-quality checks live in the `engineering` skill. Semantic evaluation reuses `wicked-garden-qe-semantic-reviewer` as the designated agent-half evaluator (per garden#983 spec). This skill is the orchestrating wrapper that loads applicable Pattern rules and delegates the per-rule semantic judgment to qe-semantic-reviewer.
8SKILL.mdUpdated Jul 22, 2026
mikeparcewski/wicked-garden-domain
tools
VerifiedTrustedCommunity
The FOUNDATIONAL domain-model capability: extract a codebase's domain — testable business rules (with confidence + provenance), entities, requirements — as a schema-conformant model on the estate graph. The workers annotate the store; wicked-core reads it and builds the requirements graph, coverage-gating fail-closed. Steers three fork workers. A shared substrate, not a modernization tool. The `modernize` archetype DERIVES from it; build / migrate / review / specify / explore consume the SAME domain model — none OWN it. Understanding a codebase's domain is upstream of almost everything else garden does. Use when: "extract the business rules / domain model from this codebase", "build a requirements graph from the code", "what does this system actually require", "reverse-engineer the domain before we build/port/migrate". Works on ANY codebase (modern or legacy) — the value is the domain model, not the porting. NOT the code transform itself (that is the archetype consuming this model). This skill produces the DOMAIN MODEL, not new code.
8SKILL.mdUpdated Jul 15, 2026
mikeparcewski/wicked-garden-domain-modeler
development
VerifiedTrustedCommunity
Domain-graph fork worker for the modernize archetype. Groups the estate's Louvain communities into business domains, attaches each requirement to its cluster (advisory cluster_id provenance), and invokes wicked-core's domain-graph build (which reads the annotated estate store, recomputes coverage fail-closed, and builds the requirements graph) — then validates core's output against the vendored schema. Use when: dispatched by wicked-garden-domain after rule extraction to turn a flat rule set into cluster-keyed domains; "group these into domains", "build the requirements graph", "translate clusters into a domain model". NOT for mining the rules themselves (that is domain-extractor) or threat-modeling (that is domain-coverage).
8SKILL.mdUpdated Jul 15, 2026
mikeparcewski/wicked-garden-domain-extractor
tools
VerifiedTrustedCommunity
Rule-extraction fork worker for the FOUNDATIONAL domain-model capability. Mines testable business rules from a codebase — each with a numeric confidence and a provenance{source, ref, source_kinds} — and annotates them into the estate store so wicked-core can build the domain-model requirements graph (coverage-gated). This is a substrate, not a modernization tool: the `modernize` archetype DERIVES from it, and build / migrate / review / specify / explore can consume the same domain model — none OWN it. Use when: dispatched by wicked-garden-domain to mine the business_rules of a codebase (or a module); "extract the domain rules", "what does this system require", building the requirements half of a domain model. NOT for grouping into domains (that is domain-modeler) or judging coverage (that is domain-coverage — a seat-distinct evaluator).
8SKILL.mdUpdated Jul 15, 2026