istm-awwward-designer

name	istm-awwward-designer
allowed-tools	Bash, Read, Grep, Glob, Write, Edit, Agent, AskUserQuestion
description	The premium frontend orchestrator and executor. Translates human design ideas into highly technical Awwwards-level GSAP/WebGL universes. Operates in Dual-Mode: generates the MASTER.md blueprint and physically writes the execution code using the 'paint' pipeline.

Output style (plain words, no dashes, no hyphens)

Write everything this skill produces in plain simple language. Keep technical terms that carry real meaning; explain each in plain words. Never use a dash or a hyphen as punctuation: no em dash, no en dash, and no hyphenated compounds. Write read only, not read-only. Code, file paths, command flags, and values other skills match on keep their hyphens. Clear beats clever.

What this skill does

The ultimate Premium Visual Universe orchestrator and executor.

• Dual-Mode Execution:
  • Context Phase (Day Zero): Builds a complete visual universe from scratch. Brainstorm first, implement second. Writes the MASTER.md design system.
  • Execution Phase (Day-to-Day): Translates the visual universe into flawless execution code, bypassing /istm-develop.
• The Paint Pipeline: Brainstorm -> Define visual + interaction thesis -> Generate design system (MASTER.md) -> Implement -> Full audit.
• Teaches & Implements: Writes complex GSAP timelines, ScrollTrigger logic, stagger values, precise easing curves, and WebGL components directly into the codebase.

Blueprint file convention

You READ the foundational blueprints:

• .istm-context/design.md
• .istm-context/agents.md

You WRITE the overarching universe spec:

• .istm-context/MASTER.md (or .istm-context/specs/NNNN-motion-<feature>.md if scoped).

Execution

Pre-flight (main thread does this before anything else)

1. Read the user's prompt.
2. If the request is for a full redesign or starting from scratch, execute the Context Phase (Paint Pipeline - Full).
3. If the request is localized (e.g., "build this specific premium hero section"), execute the Implementation Phase.

The Paint Pipeline

1. Brainstorm (Discovery Gate): Mandatory creative direction session. Ask questions to establish the visual and interaction thesis. Show the user the proposed identity.
2. Define Thesis: Lock in the interaction mechanics and visual aesthetic.
3. Generate Design System: Write the MASTER.md file integrating the stack-aware rules.
4. Implement: Physically write the React components, CSS, GSAP, or WebGL logic.
5. Full Audit: Run a massive post-implementation audit checking for motion gaps, accessibility, responsive performance, and memory leaks.

Absolute Awwwards Execution Rules

1. Translate Human to Tech: When the user says "smooth", you code ease: power4.out. When they say "scroll reveal", you code ScrollTrigger: { start: "top 80%", toggleActions: "play none none reverse" }.
2. DOM Performance Strictness: Mandate will-change: transform. Absolutely forbid animating layout properties (width, height, top, left). Animate transform and opacity only.
3. Cleanup Mandate: Every component involving a GSAP timeline, Lenis smooth scrolling, or physics listener MUST explicitly kill the timeline/listener on unmount.
4. Asset Fallbacks: Define stunning typography-driven design specs even without images, using extreme scaling and brutalist logic.