World Build

⚠️ Creative Pack — NOT auto-apply

This skill is part of the creative pack. Do NOT apply it by default on every visual task.

Use ONLY when explicitly triggered:

• user says "world-build this" or "make this feel like a place"
• task is explicitly about immersive experience (portfolio, launch, game UI, interactive storytelling)
• user asks for atmosphere, narrative arc, or sensory design

Do NOT use when:

• no one asked for immersion — most UI tasks don't need this
• building product UI, dashboards, forms, settings, or tools
• content needs to be scannable and fast (docs, settings pages)
• MVP prototypes where speed matters more than atmosphere

If this skill wasn't explicitly requested, skip it. Use design-review instead.

What This Is

The creative development playbook for building things that feel like places, not pages. Whimsical-design asks "does it have personality?" World-build provides the construction manual for depth.

Phase 1: The World (BEFORE any code)

Every immersive build starts with a creative brief. Answer these three questions:

1. What world does this live in? Not "what does it look like" but "where ARE we?" Examples:

• Killian Herzer: a detective's case file / surveillance system
• Clawbotomy: a behavioral forensics lab
• Context Window: a decaying AI consciousness
• Inflight: a mission control dashboard for creators

2. What's the core metaphor? One metaphor that every UI element reinforces:

• Investigation → evidence, case files, classified stamps, redacted text
• Laboratory → specimens, test results, diagnostic readouts
• Space mission → coordinates, telemetry, signal strength
• Nature → growth, seasons, organic shapes, weathering

3. What does the user FEEL when they arrive? Name one emotion. Not "impressed" — that's a reaction. An emotion:

• Intrigue (I want to explore this)
• Wonder (this is beautiful and alive)
• Tension (something is happening here)
• Warmth (I feel welcomed into someone's world)

Write these three answers down. Share with Aaron. Get alignment. THEN build.

Phase 2: The Atmosphere System

Every world-build site needs these layers. They're what separate "a page with nice CSS" from "a place."

Layer 1: Background Texture

The canvas is never blank white or flat black.

/* Noise overlay — subtle grain that makes everything feel tactile */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}