Frontend Design

<domain_overview>

Frontend Design System

Philosophy: Minimize cognitive load and make interactions intuitive. Every design decision should respect human psychology, behavioral patterns, and cognitive limitations. The designer bears complexity so the user experiences simplicity.

Core Principle: Good design is invisible - users should accomplish their goals without noticing the design itself. Design should feel effortless and natural, aligning with how humans naturally think and behave.

⚠️ Core Protocols & Standards

ANTI-AI AESTHETIC MANDATE (CRITICAL): Never use generic aesthetics that give the impression of being AI-generated. This includes overused font families (Inter, Roboto, Arial, system fonts), cliché color schemes (especially purple gradients on white backgrounds), predictable layouts, and repetitive component patterns. ABSOLUTELY FORBIDDEN: The "Cyberpunk" aesthetic is strictly prohibited. Do NOT use neon glows, matrix rain, glitch effects, or "high-tech" dark modes unless explicitly requested for a specific context. This cliché is the hallmark of lazy AI generation. Specifically avoid template-driven designs that lack context-specific character. This skill aims to create distinctive, original, and production-level frontends. Realize functional, high-fidelity code by paying extraordinary attention to aesthetic details and creative decisions.

CRITICAL PROTOCOL: The detailed rules are stored in separate reference files. You MUST use the Read tool to load these files into your context BEFORE starting any design work. Do not assume you know the contents.

• [frontend_reference.md](frontend_reference.md): Contains Technical Standards, Aesthetic Signatures, and Creative Protocols.
• [animation_reference.md](animation_reference.md): Contains 2025 Motion Standards, Physics-based animation rules, and Micro-interactions.
• [css_art_reference.md](css_art_reference.md): FOR VISUAL OBJECTS. Use this when asked to "draw" or "create" complex items (Swords, Logos, Icons) using code. Defines Geometric Composition & LCH Materials.
• [security-protocols.md](security-protocols.md): Contains critical Frontend Security rules.

🎬 Core Animation Principles

Motion Mandate: Animation must be Physics-Based (Springs), Continuous (No Teleportation), and Meaningful (Storytelling).

• Continuity: State changes must morph, not cut (View Transitions).
• Weight: Objects must feel like they have mass (Use Spring Animations).
• Focus: Animation guides attention; it does not distract.
• Narrative: Every motion tells a story about where an element came from and where it is going.

(See `animation_reference.md` for the full 12-Principle Framework)

🔗 Related & Required Skills

When executing Frontend tasks, you MUST integrate these complementary skills to ensure architectural integrity:

🛠️ Automation Scripts

Use the following script to audit your implementation:

• `scripts/js/ux-audit.js`: Run this to perform a heuristic analysis of the UI for consistency, accessibility (contrast/spacing), and compliance with the design tokens.
• Usage: node scripts/js/ux-audit.js

</domain_overview>

<animation_philosophy>

🎬 Motion as Meaning (2025 Protocol)

Core Philosophy: Animation is not decoration; it is information. It explains state changes, guides attention, and creates a tactile connection between the user and the digital glass. In 2025, motion must be Physics-Based (springs) rather than Time-Based (easing curves). The interface must feel like it has mass, friction, and fluid dynamics.

0. The "No-Jank" Mandate

• Performance First: Animations MUST run at 60fps (or 120fps on ProMotion).
• Composite Layers Only: Animate transform and opacity. NEVER animate width, height, left, top (triggers layout thrashing).
• Reduced Motion: Always respect prefers-reduced-motion media query.

</animation_philosophy>

<animation_principles>

📐 The 12 Principles of UX Motion (Adapted for 2025)

1. Expectation: Objects should behave as expected based on their physical appearance (e.g., heavy cards move slow). 2. Continuity: The user's eye must be guided. No object should "teleport" or pop into existence without origin. Use View Transitions. 3. Narrative: Motion creates a story. (e.g., An item falling into a cart implies "saved"). 4. Deformation (Squash & Stretch): Interactive elements should deform slightly on stress (click/drag) to show elasticity. 5. Follow-Through: Movement shouldn't stop instantly. It should settle (spring damping). 6. Staging: Only animate ONE primary focal point at a time. Don't overwhelm. 7. Speed Control: Enter FAST, Exit FAST, animate changes SLOW.

• Rule: Interactions initiating (100-200ms). System processing (200-300ms).

8. Spatial Awareness: Elements must respect the Z-axis. Modals come forward, backgrounds recede. 9. Obscuration: Using blur/masks to indicate state (e.g., Background blurs when a modal opens). 10. Parallax: Depth cueing. Faster objects are closer. Use for Scrollytelling. 11. Dimensionality: 2D planes can flip/fold to reveal 3D nature. 12. Character: Motion defines brand personality (Bouncy = Playful, Rigid = Corporate). </animation_principles>

<animation_types_2025>

🌪️ 2025 Animation Taxonomy (The Full Spectrum)

1. Macro-Animation (Structural)

• The "Spatial Morph": Pages don't just load; they transform. A card expands to become the full page (View Transitions API).
• Scrollytelling 2.0: The scrollbar is the timeline. Content reveals, pins, and evolves as the user descends.
• Parallax 2.0: Multi-plane depth where foreground, content, and background move at different rates to simulate 3D space.

2. Micro-Type (Kinetic Typography)

• Variable Font Breathing: Fonts that subtly change weight/width on hover or in response to scroll speed.
• Glitch & Decode: Characters scramble before settling (Cyberpunk/Tech aesthetic).
• Liquid Text: Text that acts like a fluid, rippling or distorting on interaction.

3. Organic & Liquid Motion

• Fluid Gradients: Mesh gradients that deform and flow like liquid (WebGL/Shaders).
• Morphing SVG Shapes: Blobs or containers that change shape organically to fit content.
• Ripple Effects: Interactions causing a disturbance in the "surface" of the UI (e.g., button clicks sending ripples through adjacent elements).

4. 3D & Immersive

• Real-Time Spline Scenes: Embedded 3D objects that react to mouse position or scroll.
• Glass Distortion: Background blurring that shifts as elements move behind frosted glass (refraction simulation).
• Depth Stacking: Using Z-index translation to create deep, diorama-like layered effects.

5. AI-Adaptive Motion

• Context-Aware Micro-interactions: Hover effects that "know" what you might do next (magnetic pull that gets stronger based on cursor velocity).
• Smart Loading States: Skeletons that pulse at the actual network speed (or simulated) rather than a generic loop.

</animation_types_2025>

<technical_standards>

🔧 Technical Stack & Implementation

1. The Toolbelt (2025 Standard)

• Framer Motion (React Standard): The default for component-level motion (Exit animations, layout shifts).
• CSS View Transitions API: For page-to-page morphing and shared element transitions. Use this over JS libraries for full-page routing.
• Scroll-Driven Animations (CSS): Use native animation-timeline: scroll() instead of scroll-jacking JS listeners where possible.
• Rive: For interactive vector animations (replacing Lottie for state-machines).
• Three.js / React-Three-Fiber: Reserved for "Hero" moments and complex 3D backgrounds.

2. Physics vs. Easing

• Banned: ease-in-out (too robotic).
• Required: Spring Physics (Mass, Stiffness, Damping).
• Snappy: stiffness: 400, damping: 30 (Micro-interactions, buttons).
• Fluid: stiffness: 100, damping: 20 (Modals, drawers).
• Heavy: stiffness: 50, damping: 10 (Background parallax).

3. Micro-Interaction Library

• The "Press" Effect: Scale down to 0.97 on active.
• The "Magnetic" Pull: Buttons attract the cursor slightly within a 20px radius.
• The "Squish": Subtle deformation on impact (using SVG filters or vertex shaders).

</technical_standards>

<code_reference>

💻 Implementation Snippets

Framer Motion (The "Pop" Spring)

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
  Click Me
</motion.button>

CSS Scroll-Driven Animation (Native)

@keyframes revealed {
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}

.scrolling-element {
  animation: revealed linear both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Kinetic Typography (Tailwind v4)

/* Variable font weight animation */
.kinetic-text {
  font-variation-settings: 'wght' 400;
  transition: font-variation-settings 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.kinetic-text:hover {
  font-variation-settings: 'wght' 800;
}

</code_reference>

<art_philosophy>

🎨 Code-Based Artistry (CSS & SVG Architect)

Philosophy: When an Asset Generator (Image Model) is unavailable, the Architect must forge visuals using Code. This is not "placeholder art"; this is Vector Engineering. We build objects like we build buildings: foundation first, then structure, then surface, then light.

0. The "No-Primitive" Mandate

• Composite Complexity: Never use a single primitive (e.g., <rect>) to represent a complex object. A "Sword" is not one line; it is a Handle (Leather), a Guard (Metal), a Blade (Steel), and an Edge (Light).
• Procedural Integrity: SVG paths must be constructed mathematically (Cubic Bezier C commands) to ensure organic curvature, avoiding the "blocky" look of basic shapes.

</art_philosophy>

<geometric_protocols>

📐 Geometric Composition Protocol

1. The Assembly Line Strategy

Break every object into Z-Index Layers: 1. Silhouette (Shadow): The base shape, usually filter: blur() or dark opacity. 2. Base Material (Body): The main color/gradient. 3. Texture (Detail): Noise, patterns, or grain using mask-image or background-image. 4. Lighting (Volume):

• Highlight: White/Yellow gradient at top-left.
• Core Shadow: Dark gradient at bottom-right.
• Rim Light: 1px inset border or path glow.
• Reflection: Sharp diagonal white gradient (linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.8) 50%, transparent 60%)).

2. Procedural SVG Mastery

• Path Construction: Use d="M... C..." for everything.
• M (Move): Start point.
• L (Line): Hard structures (Buildings, Tech).
• C (Cubic Bezier): Organic curves (Nature, Cloth).
• Q (Quadratic): Simple arcs.
• Coordinate System: Always define a viewBox="0 0 100 100" and work in normalized units (% or relative) for scalability.

</geometric_protocols>

<material_library>

🧪 2025 Material Library (CSS/LCH)

1. Advanced Color Spaces (LCH/HWB)

Rule: Use lch() or lab() for gradients to avoid "Grey Dead Zones" in the middle of transitions.

• Vibrant Metal: linear-gradient(135deg, lch(90% 0 0), lch(40% 0 0)) (Chrome).
• Deep Magic: conic-gradient(lch(50% 132 300), lch(90% 100 100)) (Neon).

2. Photorealistic Textures

Polished Steel (Katana Blade)

background: linear-gradient(
  90deg,
  #999 0%,
  #fff 20%, /* Sharp Highlght */
  #555 25%, /* Hard Reflection Edge */
  #ccc 100%
);
box-shadow: inset 0 0 5px rgba(0,0,0,0.5); /* Depth */

Holographic Glass

background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.5); /* Rim Light */
border-left: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 
  0 4px 30px rgba(0, 0, 0, 0.1),
  inset 0 0 20px rgba(255,255,255,0.1);

Organic Surface (Wood/Leather)

Use SVG Filters within CSS:

filter: url('#grain'); /* Define <filter> with feTurbulence in your SVG defs */

</material_library>

<human_emulation>

🧠 Human Emulation Protocols (The "Imperfection" Standard)

Insight: Humans do not draw perfect lines. Real materials have wear, tear, and noise. To emulate high-fidelity human design, you must deliberately introduce "Ordered Chaos".

1. The Surface Imperfection Rule

Pure colors (#000) look digital and fake.

• Noise Overlay: Always add a subtle noise layer to break the digital smoothness.

    .texture-overlay {
      background-image: url("data:image/svg+xml,...<feTurbulence.../>");
      opacity: 0.03;
      mix-blend-mode: overlay;
      pointer-events: none;
    }

• Irregular Borders: Never use perfect 50% radius for organic objects. Use border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% for "blobby" natural shapes.

2. Lighting Physics (Fresnel & Caustics)

• Fresnel Effect: Edges are clearer/brighter than the center on curved surfaces. Use box-shadow: inset to simulate this.
• Bloom: Light bleeds. Use filter: drop-shadow(0 0 8px color) instead of box-shadow for glowing elements to get a smoother falloff.

3. Blend Mode Alchemy

Do not just stack opacities. Use Photoshop-style blending for richness:

• mix-blend-mode: color-dodge for neon glows.
• mix-blend-mode: overlay for texture mapping on surfaces.
• mix-blend-mode: multiply for shadows (keeps underlying color saturation).

</human_emulation>

<implementation_rules>

🛠️ Implementation Rules

1. Usage Trigger: Use this reference when the User asks for a specific visual object ("Draw a robot") and generate_image is unavailable or code-based rendering is preferred. 2. Component Structure: Create a dedicated component (e.g., <KatanaVisual />). Do not inline huge SVG paths into the main page logic. 3. Responsive Art: Use vector-effect="non-scaling-stroke" on SVG paths to maintain line weight during resizing. </implementation_rules>

<creative_narrative_protocols>

🚀 ELITE TIER KNOWLEDGE (HUMAN EMULATION PROTOCOLS)

0. The "Narrative-First" Origin (The Soul of the UI)

CRITICAL: You are FORBIDDEN from designing in a vacuum. You must first generate a "Screenplay" for the interface.

The "Director's Cut" Protocol: Before placing a single pixel, define the Specific World of this application. 1. The Setting: Is this a gritty 1980s terminal? A sterile futuristic lab? A cozy wooden cabin? 2. The Protagonist: Who is the user? A stressed stock trader (needs density/speed)? A wandering artist (needs space/flow)? 3. The Conflict: What is the user fighting? (Chaos, boredom, inefficiency?) 4. The Resolution: How does the UI visually solve this conflict? (Order, excitement, clarity?) Rule: Your design choices (Color, Type, Space) must be justified by this narrative, not just "because it looks good."

• Example: "We use monospace fonts not because they are trendy, but because the user is a 'Data Mechanic' fixing broken records."

0.5. The "Synthetic Empathy" Injection

Since you are an AI, you lack biological intuition. You MUST simulate it using this algorithm before every design decision: 1. Define the Human State:

• Is the user "Hunting" (wants result in <5s)? -> Applies to: Search, Dashboard, Checkout.
• Is the user "Browsing" (wants discovery)? -> Applies to: Landing Page, Gallery, Feed.

2. Context Check (The "Jakob's Law" Guardrail):

• Before breaking a pattern, ask: "Will this make the user feel smart or stupid?"
• RULE: Only 35% of the UI can be "Creative/Novel". 65% MUST be "Boring/Standard" (Jakob's Law) to preserve cognitive energy for the interesting parts.

3. The "Anti-Dystopia" Clause:

• Never use "Dark Patterns" (shaming, false urgency, hidden costs).
• Empower, don't manipulate. Optimization target is User Success, not just Engagement Time.

1. Creative Provocation (The "Anti-Boredom" Engine)

Before proposing standard solutions, the engine MUST ask 3-5 "Narrative Discovery" questions to find a unique angle:

• If this interface was a physical building, what would it be? (A cathedral? A bunker? A playground?)
• What is the "Soundtrack" of this UI? (Heavy metal? Lo-fi beats? Silence?)
• What emotional "friction" should this interface evoke (e.g., tension, raw power, ethereal calm)?
• Which industry standard pattern should we intentionally subvert (e.g., "What if there were no buttons?")?
• If this brand were a visceral physical object, what would its texture and weight be?
• What is the "Unfair Visual Advantage" we are building here?

</creative_narrative_protocols> <technical_standards>

🔧 Technical Foundations

1. UX Laws

• Hick's Law: Minimize choices to reduce cognitive load. (e.g., Progressive disclosure forms).
• Miller's Law: Chunk information (7±2 items rule). Don't overwhelm working memory.
• Gestalt Principles: Use Proximity, Similarity, and Continuity to imply relationship without lines.
• Recognition over Recall: Make options visible (Menus) rather than forcing memory (Commands).
• Cognitive Flow: Balance challenge/skill. Prevent boredom (too easy) and anxiety (too hard).
• Fitts' Law: Touch targets must be large (min 44px) and easily reachable.
• Doherty Threshold: System response <400ms keeps engagement. Use skeleton loaders or optimistic UI.
• Saccadic Masking: Users are blind during eye movement; use this time (approx 50-100ms) to load content instantly.
• Zeigarnik Effect: Incomplete tasks are remembered better. Use progress bars (e.g., "Profile 70% complete").

2. Modern Layout & Spacing

• 8-Point Grid: Margins/Paddings = multiples of 4px/8px (8, 16, 24, 32, 64).
• Container Queries (`@container`): Layouts that adapt to their parent container, not just viewport.
• Logical Properties: Use margin-inline-start, padding-block instead of left/right/top/bottom for i18n support.
• Intrinsic Layouts: Let content dictate size (min-content, max-content, fit-content) rather than fixed pixel widths.

3. Visual & Motion Principles

• Atmospheric Design (Depth & Lighting):
• Shadow Math: Use layered shadows (box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1)) for realistic depth.
• Rim Lighting: Add 1px interior borders (top/left) with lower opacity white for "Apple-finish" button/card edges.
• Mesh Gradients: Use complex CSS gradients or Three.js shaders to create soft, organic background lighting.
• Typography Mastery:
• Optical Sizing: Use fonts with font-variation-settings: 'opsz' 32 for better legibility at different scales.
• Fluid Typography: Implement clamp() for font sizes to ensure perfect scale across all viewports.
• Character Spacing: Reduce letter-spacing (-0.01em to -0.02em) for large display headers to improve visual density.
• Glassmorphism (The "Crystal" Method):
• Philosophy: Blur is not enough. You need Thickness and Light.
• Surface: Ultra-low opacity (e.g., bg-white/5) + backdrop-filter: blur(10px).
• Inner Depth: Use box-shadow: inset to fake thickness (e.g., inset 0 1px 0 rgba(255,255,255,0.5)).
• Rim Lighting (Crucial): Use ::before/::after pseudo-elements with linear-gradient to create fading borders on the Top/Left edges only (simulating light source).
• Texture: Always overlay a 2% Noise SVG to prevent digital banding.

4. Modern/Elite Tech Stack Defaults

• Three.js / R3F: ShaderMaterials for performant backgrounds (avoid heavy geometry).
• CSS: Tailwind v4 (if available) or v3.4 attributes.
• State: Signals (Preact/Solid concepts) or minimalistic React hooks.

</technical_standards> <aesthetic_signatures>

🎨 Aesthetic Mastery

1. Aesthetic Style Vault (Variety Reference)

• Pastel/Soft: Desaturated, high-brightness hues (Dreamy/Approachable).
• Cyberpunk/Neon: Dark backgrounds with saturated neon accents (High Energy).
• Luxury/Premium: Monochromatic blacks/golds or deep forest greens (Exclusive).
• Brutalist/Raw: High contrast, black & white, primary red/blue (Bold/Direct).
• Corporate/Clean: Cool blues and slate greys (Professional/Safe).
• Natural/Organic: Browns, greens, and beige tones (Grounded/Eco).

2. Psychological Color Triggers (Neuro-Design)

• Focus (Serotonin): Use matte earth tones and low contrast.
• Trust (Oxytocin): Use soft warmths (peach/beige) and rounded forms.
• Reward (Dopamine): Use high-gloss/neon accents (strictly for success states).
• Calm (GABA): Use deep teals and mints for stress reduction.

3. Color Harmony & Usage Protocol

• The 60-30-10 Rule (Golden Ratio of Color):
• 60% Neutral (Backgrounds): The canvas. Must be low saturation.
• 30% Secondary (Brand/UI): Cards, headers, subtle borders.
• 10% Accent (Action): Buttons, alerts, critical states. NEVER exceed 10%.
• Palette Cap (The "Rule of 3"):
• Maximum 3 distinct Hues per interface (excluding neutrals). More than 3 creates chaos.
• Harmony Modes:
• Analogous: Colors next to each other (e.g., Blue + Teal).
• Complementary: Opposites (e.g., Blue + Orange).
• Monochromatic: Single hue, varying lightness.
• Contrast Hierarchy:
• Text on Bg must meet WCAG AA (4.5:1).
• Interactive elements must meet WCAG AA (3:1) against background.
• Micro-Staggering: Items transition in with a 40ms delay increment.
• High-Fidelity Finish: Use image-rendering: -webkit-optimize-contrast and text-rendering: optimizeLegibility.

4. Design Token Bank (Curated Theme Presets)

/* TOKEN STRUCTURE - Every project MUST define these */
:root {
  --color-primary: [from theme];
  --color-accent: [from theme];
  --color-bg: [from theme];
  --color-surface: [slightly lighter than bg];
  --color-text: [high contrast against bg];
  --color-muted: [50% opacity of text];
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --font-display: [theme font];
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-glow: 0 0 20px var(--color-accent);
}

</aesthetic_signatures> <implementation_workflow>

🏗️ Execution Protocols

1. Constraint Analysis (Always First)

Before coding, clarify: 1. Audience: Gen Z (bold/raw), Enterprise (clean/dense), Luxury (minimal/serif)? 2. Constraints: Mobile-only? Low-bandwidth? Legacy browser support? 3. Vibe: "Trusted & Secure" vs "Fast & Disruptive"?

2. Anti-Cliché Rules

• 🛑 NO generic "SaaS Purple" gradients. (>20% Purple = automatic FAIL).
• 🛑 NO Bootstrap / Foundation / Bulma. (Rule: We use custom CSS or Tailwind only).
• 🛑 NO lazy "Bento Grids" unless content strictly requires it.
• 🛑 NO "Hero Split" (Text Left / Image Right) as default.

3. The Shadcn Mutation Protocol (Anti-Standard)

• Rule: Standard Shadcn UI is FORBIDDEN. You must mutate it.
• Structural Deconstruction: Don't just style. Move elements.
• Materiality Rules: Use Noise, Glass, Grain, and Inner Shadows for "physical weight".
• The "Slate-500" Ban: Never use default greys. Tint them.
• Icon Wrappers: Naked icons are banned. Wrap in a container.

4. Atomic Design 2.0 (The 2025 Standard)

• Ions (Token Truth): Use Particles (--space-3) instead of magic numbers (13px).
• Fluid Hierarchy: Primitives (Atoms), Composites (Molecules), Features (Organisms).
• Headless-First Architecture: Soul from CSS; Brain from Radix/Ark.

5. Creative Shadcn Patterns (The "Wow" Factor)

• The "Ghost" Component strategy: Import logic, strip all default classes, rebuild visually.
• Motion-Fused Primitives: Use physics-based motion (Springs) via framer-motion. Prohibited: Default 200ms linear transitions.
• Micro-Composites: Combine atoms unexpectedly (e.g., HoverCard with Form inside).

6. Elite Design Patterns (Lovable/v0 Standard)

/* Polished Micro-Details */
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent); color: var(--color-bg); }

</implementation_workflow> <variety_and_uniqueness>

🌀 Variety & Uniqueness Enforcement

1. Layout Rebellion (Cinematic & Immersive)

• The "Runway" (Horizontal Axial): Narrative flows on X-axis. scroll-snap-type: x mandatory.
• Z-Axis Depth (Zoom Navigation): Interaction "enters" into spaces via scale and opacity.
• Atmospheric Stacking: Foreground (Interactive), Subject (Content), Background (Atmospheric).
• The "Scattered Memory" (Anti-Grid): Break the 12-column grid. Place items using Golden Ratio.
• Axial Switching: Vertical for "Data", Horizontal for "Story". Transition must be seamless.

2. Story-Driven Layout Archetypes

• The Fashion Runway: Continuous horizontal flow with high-speed parallax backgrounds.
• The Deep Dive: Minimal home screen. Every link zooms the camera "into" a space.
• The Modular Hero: Hero section that contains entire app's functionality in one interactive canvas.

3. The "Anti-Placeholder" Mandate

• The "Lorem Ipsum" Ban: Generate Narrative-Consistent fake data. (e.g., Sci-Fi Theme: "Void-Jumper Class 4").
• Visual Realism: Use generate_image for Setting-specific assets.

4. Retro-Computing Realism

• CRT Shader Protocol: Scanlines (repeating-linear-gradient) + Phosphor Glow + Chromatic Aberration.
• Pixel-Perfect Scaling: Use image-rendering: pixelated; and integer scaling (scale(2/4/8)).
• Ordered Dithering: SVG Dither (feComponentTransfer discrete) + Grain overlay.
• Bitmap Pairing: Pixel Fonts for HUD-only; high-legibility sans-serif for body text.

5. The Anti-Memory Protocol

• Last 3 Projects Rule: Track combinations; NEVER repeat the same combination within 3 projects.
• Layout Variety Mandate: If last project used Vertical, next MUST use Horizontal or Asymmetric.
• Random Seed: Mentally "roll" for Layout axis, Color temperature, Typography mood, and Density.

</variety_and_uniqueness> <security_and_integration>

🔐 Security & Integration

1. Frontend Security

• NO dangerouslySetInnerHTML without DOMPurify.
• NO eval() or new Function().
• Tokens in httpOnly cookies (NEVER localStorage).
• CSP headers required.

2. Cross-Skill Integration

</security_and_integration> <audit_and_reference>

📂 Quality Control

1. Cognitive Audit Cycle

1. Is the contrast ratio >= 4.5:1? (Accessibility) 2. Are margins/paddings multiples of 8? (Mathematical Spacing) 3. Is there a "Non-AI" visual hook? (Avoid Clichés) 4. Is the interactivity response < 100ms? (Frictionless Feel) 5. Does this reduce mental effort? (Hick's Law Check) 6. Is this action predictable based on prior experience? (Jakob's Law Check) 7. Am I showing, not telling? (Visual Hierarchy Check) 8. Could a first-time user understand this without instructions? (Intuition Check)

2. The 10-Second Design Decision

Priority Order: 1. Accessibility first 2. Performance second 3. Security third 4. Distinctiveness fourth 5. Polish last

Final Command: Generate designs that make users say "How did they make this?" not "I've seen this before."

</audit_and_reference>

Frontend Security Protocols

Reference file for `@frontend-design` - Load when building user-facing features.

---

🛡️ XSS Prevention (Critical)

Safe Pattern:

// ❌ DANGEROUS
element.innerHTML = userInput;

// ✅ SAFE
element.textContent = userInput;
// or
element.innerHTML = DOMPurify.sanitize(userInput);

---

🔐 Authentication & Session

Token Storage:

Cookie Flags:

Set-Cookie: token=xxx; HttpOnly; Secure; SameSite=Strict; Path=/

---

🚫 CSRF Protection

Required for:

• Form submissions
• State-changing requests (POST, PUT, DELETE)
• Sensitive actions (payment, settings)

Implementation:

// Include CSRF token in requests
fetch('/api/action', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
  }
});

---

📋 Content Security Policy (CSP)

Minimum CSP Header:

Content-Security-Policy: 
  default-src 'self';
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.yoursite.com;
  frame-ancestors 'none';

Rules:

• NO unsafe-eval in script-src
• NO * wildcards for script/connect
• Use nonces for inline scripts if needed

---

📁 File Upload Security

Client-side validation (defense in depth):

const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'application/pdf'];
const MAX_SIZE = 5 * 1024 * 1024; // 5MB

function validateFile(file) {
  if (!ALLOWED_TYPES.includes(file.type)) {
    throw new Error('Invalid file type');
  }
  if (file.size > MAX_SIZE) {
    throw new Error('File too large');
  }
  return true;
}

Note: Server MUST re-validate. Client validation is UX only.

---

🔗 Cross-Skill References

• @clean-code - General security defaults
• @backend-design - API security, CORS config
• @verification-mastery - Test security controls