For the agent-readable index of this site, see /llms.txt.

For developers and AI agents

Exemplars

Per-archetype layout anchors that Void Energy hands to AI before it composes a page — ten wireframes, ten READMEs, ten rendered references.

Why this layer exists

Without visual references, AI page output regresses to the same generic SaaS layout idiom — full-width hero, three-column feature grid, horizontal nav. The shape coherence of a real product gets diluted into the average of the training distribution. Recipes describe which primitives to compose; exemplars describe how to arrange them.

Each archetype ships three paired pieces

A visual reference, a written contract, and a working implementation — consumed together before any new page is written.

  • Wireframe

    A desktop-width layout shape, full scrollable height, VE primitives labeled — shape transfers via vision faster than via prose.

    .claude/exemplars/<slug>/wireframe.png
  • README

    When to use, key composition decisions, and traps to avoid. 80–150 words, written for the AI agent reading it before composing.

    .claude/exemplars/<slug>/README.md
  • Composer

    The rendered Svelte implementation — the canonical pattern to copy and adapt. Each composer is mounted at /exemplars/<slug>/.

    src/components/app/exemplars/<PascalCase>.svelte

How AI uses them

For any task editing src/pages/ or src/components/app/, the rule .claude/rules/exemplars.md auto-loads on path match and prescribes a five-step discovery flow.

  1. 1
    Identify the archetype

    Match the brief to the closest of the ten shipped archetypes. First ask whether the page is content-style (centered, marketing chrome) or app-style (edge-to-edge, workspace chrome).

  2. 2
    View the wireframe

    Open the PNG. The desktop layout shape transfers through vision in seconds.

  3. 3
    Read the README

    Composition decisions, when-not-to-use, and known traps for this archetype.

  4. 4
    Read the code

    The Svelte composer is the canonical pattern — copy its shape, adapt its content.

  5. 5
    Compose

    Match the exemplar’s shape; vary content, density, and brand profile freely.

The ten archetypes

Each tile links to a rendered exemplar at /exemplars/<slug>/. Together they cover every realistic page shape a SaaS, app, or content product needs — split between content-style (centered, marketing chrome) and app-style (edge-to-edge, workspace chrome). When unsure which a brief calls for, ask first; default tip is "if the user operates on data, it's app-style; if the user reads / converts / browses, it's content-style."

Dashboard overview

greeting + stat row + chart row + activity feed

Post-login landing / app home for SaaS

View exemplar

Settings sidebar form

docs-layout + left sidebar + form pane + danger zone

Settings, preferences, account management

View exemplar

Marketing landing

hero + Marquee + features + stats + FAQ + CTA

Product landing pages, top-of-funnel surfaces

View exemplar

Browse filter grid

toolbar + filter rail + card grid + pagination

"All your X" — browse N items with filtering

View exemplar

Detail tabbed sections

item header + Tabs + sectioned body + meta sidebar

Drill into one item from a list

View exemplar

Auth narrow card

centered narrow form, single focal mass

Sign-in, sign-up, password reset

View exemplar

Analytics chart grid

stat row + chart blocks + drill-down table

Data-dense reporting

View exemplar

Article with prose TOC

docs-layout-toc + prose + right-rail TOC + related items

Long-form content, docs, blog posts

View exemplar

Workspace shell

AppShell + left rail + edge-to-edge canvas + right inspector

Workspace apps, admin consoles, ops tools (Linear / Notion / Slack)

View exemplar

Ops tiles board

edge-to-edge hero + categorical tiles + raised-action grid + tinted highlights

Content-forward apps, discovery boards (Apple TV+ / Discord-browse)

View exemplar

An anchor, not a jail

When the brief explicitly diverges from an archetype's shape, deviate — using VE primitives correctly. The exemplar is the default, not the law. If a page genuinely doesn't pattern-match any of the ten, propose a new archetype via PR with a wireframe, a README, and one real exemplar composition demonstrating it.