mikeparcewski/wicked-garden-product-visual-direction

Visual Direction Skill

Reason from content structure to visual form — not from available patterns to first fit.

The Problem This Solves

The nearest-neighbor trap: when Project B is being designed and Project A nearby used a pattern that worked (sidebar + sticky stage + crawling tick), the agent reaches for that pattern without asking whether Project B's content warrants it. A pattern that was right for A's content may be actively wrong for B's.

Real example: A marketing site redesign for wicked-garden kept applying the wicked-interactive conveyor pattern (sticky stage, left sidebar ledger, yellow tick) to sections where it didn't fit. The "No cloud / No black box" refusals are philosophical statements — they want to be big typographic text, not a scroll-pinned station list. The tools section is a pipeline — it wants to be a session log showing the system working, not a sidebar tour. It took three rounds of user pushback before the agent stopped copying and started reasoning from the content itself.

The Five Questions (answer in order)

Q1 — What IS this content?

Not "what should it look like" — what is its intrinsic structure?

| Content type | Examples | |---|---| | Timeline | Steps, stages, history, before/after | | Principles / manifesto | Philosophical statements, refusals, beliefs | | Pipeline | Tools in sequence, data flow, system working | | Comparison | Options side by side, trade-offs | | Catalog | Items browsed, filtered, selected | | Narrative | A story with a beginning, tension, resolution | | Metric / dashboard | Numbers, status, health |

Name the type before doing anything else.

Q2 — What does the audience already think in?

Match the metaphor to their mental model, not yours.

| Audience | Natural mental models | |---|---| | Developers | Logs, diffs, terminal output, config files | | Executives | Dashboards, summaries, traffic lights | | Designers | Grids, layers, component libraries | | End users | Shopping, browsing, reading | | Ops / SRE | Alerts, runbooks, timelines |

If the proposed visual form would feel alien to the intended audience, it's wrong.

Q3 — What action do we want the user to take?

The visual treatment — including motion — should serve the action, not decorate the section.

| Desired action | Visual implication | |---|---| | Trust it | Calm, credible, evidence-based — not flashy | | Install it | Clear path, no obstacles, quick scan | | Understand it | Progressive disclosure, not all at once | | Feel it | Emotion first, detail second | | Choose it | Comparison-friendly, scannable differences |

Animation that doesn't serve the desired action is noise.

Q4 — If this content were a physical artifact, what form would it take?

Bypass the pattern library entirely. Name the physical object.

Examples: a receipt, a log printout, a map, a library shelf, a garden, a contract, a command-line session, a newspaper front page, a sticky note wall, a timeline on a wall, a warning label.

The physical artifact test often surfaces the right visual form faster than any pattern catalog.

Q5 — The Stupid-Question Test

Would presenting this content in the proposed form feel obviously wrong to someone who just read it carefully?

Run the test explicitly: "If someone read all of [content] and then saw it rendered as [proposed form], would they laugh or wince?"

Examples of failing the stupid-question test:

• Four philosophical "No X" manifestos rendered as fake browser tabs
• A system pipeline tour rendered as a customer testimonial carousel
• A comparison of two tools rendered as a hero animation
• A timeline of events rendered as a card grid

Output: The Visual Brief

After answering all five questions, produce a one-paragraph visual brief in this form:

Visual Brief — [Section Name]

Content type: [name from Q1]. Audience mental model: [from Q2]. The section wants the
user to [action from Q3]. Physical artifact: [from Q4]. Proposed treatment: [one sentence
on form + motion]. Nearest-neighbor risk: [name the pattern being avoided and why it
doesn't fit]. Animation role: [one sentence on what motion does or "no animation — the
content is static"].

This brief is the handoff to the implementer. Do not skip to implementation without it.

Anti-Patterns to Name Explicitly

• Conveyor misuse: Sticky stage + sidebar ledger is a navigation pattern for sequential steps a user progresses through. Don't apply it to content that isn't a progression.
• Tab misuse: Tabs imply interchangeable peers. Don't use them for content that has an inherent order or a single message.
• Carousel misuse: Carousels hide content. Only use when content is genuinely optional and browsable, not when you want to make a list of items look impressive.
• Animation decoration: Motion that fires on scroll without serving a conceptual purpose (showing assembly, revealing sequence, indicating change) is decoration. Name it as such and remove it.

Integration

• After this skill: hand the visual brief to product:mockup for a wireframe, or directly to an implementer with the brief as the spec.
• Before this skill: product:ux to establish user flows, or product:strategy to establish what the section is trying to accomplish.
• If the stupid-question test fails: return to Q1. The content type is probably misidentified.