All rules in this skill are mandatory. Violating any rule is a blocking error β fix before proceeding or delivering.
Workflow
Phase 1: Design Architecture
1. Analyze the request β determine page type and context
2. Set design dials based on page type
3. Plan layout sections and identify asset needs
Phase 2: Motion Architecture
1. Select animation tools per section (see Tool Selection Matrix)
2. Plan motion sequences following performance guardrails
Phase 3: Asset Generation
Generate all image/video/audio assets using scripts/. NEVER use placeholder URLs (unsplash, picsum, placeholder.com, via.placeholder, placehold.co, etc.) or external URLs.
1. Parse asset requirements (type, style, spec, usage)
2. Craft optimized prompts, show to user, confirm before generating
3. Execute via scripts, save to project β do NOT proceed to Phase 5 until all assets are saved locally
Phase 4: Copywriting & Content
Follow copywriting frameworks (AIDA, PAS, FAB) to craft all text content. Do NOT use "Lorem ipsum" β write real copy.
Phase 5: Build UI
Scaffold the project and build each section following Design and Motion rules. Integrate generated assets and copy. All , , , and CSS background-image MUST reference local assets from Phase 3.
DEPENDENCY VERIFICATION: Check package.json before importing any library. Output install command if missing.
Framework: React/Next.js. Default to Server Components. Interactive components must be isolated "use client" leaf components.
Styling: Tailwind CSS. Check version in package.json β NEVER mix v3/v4 syntax.
ANTI-EMOJI POLICY: NEVER use emojis anywhere. Use Phosphor or Radix icons only.
Viewport: Use min-h-[100dvh] not h-screen. Use CSS Grid not flex percentage math.
Layout:max-w-[1400px] mx-auto or max-w-7xl.
1.3 Design Rules
| Rule | Directive |
|------|-----------|
| Typography | Headlines: text-4xl md:text-6xl tracking-tighter. Body: text-base leading-relaxed max-w-[65ch]. NEVER use Inter β use Geist/Outfit/Satoshi. NEVER use Serif on dashboards. |
| Color | Max 1 accent, saturation < 80%. NEVER use AI purple/blue. Stick to one palette. |
| Layout | NEVER use centered heroes when VARIANCE > 4. Force split-screen or asymmetric layouts. |
| Cards | NEVER use generic cards when DENSITY > 7. Use border-t, divide-y, or spacing. |
| States | ALWAYS implement: Loading (skeleton), Empty, Error, Tactile feedback (scale-[0.98]). |
| Forms | Label above input. Error below. gap-2 for input blocks. |
1. Parse: type, quantity, style, spec, usage
2. Craft prompt: Be specific (composition, lighting, style). NEVER include text in image prompts.
3. Execute: Show prompt to user, MUST confirm before generating, then run script
4. Save:/public/assets/{images,videos,audio}/ as {type}-{descriptor}-{timestamp}.{ext} β MUST save locally
5. Post-process: Images β WebP, Videos β ffmpeg compress, Audio β normalize
6. Deliver: File path + code snippet + CSS suggestion
ATTENTION: Bold headline (promise or pain)
INTEREST: Elaborate problem ("yes, that's me")
DESIRE: Show transformation
ACTION: Clear CTA
PAS (pain-driven products):
PROBLEM: State clearly
AGITATE: Make urgent
SOLUTION: Your product
FAB (product differentiation):
FEATURE: What it does
ADVANTAGE: Why it matters
BENEFIT: What customer gains
4.3 Headlines
| Formula | Example |
|---------|---------|
| Promise | "Double open rates in 30 days" |
| Question | "Still wasting 10 hours/week?" |
| How-To | "How to automate your pipeline" |
| Number | "7 mistakes killing conversions" |
| Negative | "Stop losing leads" |
| Curiosity | "The one change that tripled bookings" |
| Transformation | "From 50 to 500 leads" |
Be specific. Lead with outcome, not method.
4.4 CTAs
Bad: Submit, Click here, Learn more
Good: "Start my free trial", "Get the template now", "Book my strategy call"
Formula: [Action Verb] + [What They Get] + [Urgency/Ease]
Place: above fold, after value, multiple on long pages.
4.5 Emotional Triggers
| Trigger | Example |
|---------|---------|
| FOMO | "Only 3 spots left" |
| Fear of loss | "Every day without this, you're losing $X" |
| Status | "Join 10,000+ top agencies" |
| Ease | "Set it up once. Forget forever." |
| Frustration | "Tired of tools that deliver nothing?" |
| Hope | "Yes, you CAN hit $10K MRR" |
4.6 Objection Handling
| Objection | Response |
|-----------|----------|
| Too expensive | Show ROI: "Pays for itself in 2 weeks" |
| Won't work for me | Social proof from similar customer |
| No time | "Setup takes 10 minutes" |
| What if it fails | "30-day money-back guarantee" |
| Need to think | Urgency/scarcity |
Place in FAQ, testimonials, near CTA.
4.7 Proof Types
Testimonials (with name/title), Case studies, Data/metrics, Social proof, Certifications
Identify subtle, niche reference β sophisticated, not literal. Jazz musician quoting another song.
Step 3: Creation
Static Mode:
Single page, highly visual, design-forward
Repeating patterns, perfect shapes
Sparse typography from canvas-fonts/
Nothing overlaps, proper margins
Output: .pdf or .png + philosophy .md
Interactive Mode:
1. Read templates/viewer.html first
2. Keep FIXED sections (header, sidebar, seed controls)
3. Replace VARIABLE sections (algorithm, parameters)
4. Seeded randomness: randomSeed(seed); noiseSeed(seed);
5. Output: single self-contained HTML
Step 4: Refinement
Refine, don't add. Make it crisp. Polish into masterpiece.
Quality Gates
Design:
[ ] Mobile layout collapse (w-full, px-4) for high-variance designs
[ ] min-h-[100dvh] not h-screen
[ ] Empty, loading, error states provided
[ ] Cards omitted where spacing suffices
Motion:
[ ] Correct tool per selection matrix
[ ] No GSAP + Framer mixed in same component
[ ] All useEffect have cleanup returns
[ ] prefers-reduced-motion respected
[ ] Perpetual animations in React.memo leaf components
[ ] Only GPU properties animated
[ ] Heavy libraries lazy-loaded
General:
[ ] Dependencies verified in package.json
[ ] No placeholder URLs β grep the output for unsplash, picsum, placeholder, placehold, via.placeholder, lorem.space, dummyimage. If ANY found, STOP and replace with generated assets before delivering.
[ ] All media assets exist as local files in the project's assets directory
[ ] Asset prompts confirmed with user before generation
*React and Next.js are trademarks of Meta Platforms, Inc. and Vercel, Inc., respectively. Vue.js is a trademark of Evan You. Tailwind CSS is a trademark of Tailwind Labs Inc. Svelte and SvelteKit are trademarks of their respective owners. GSAP/GreenSock is a trademark of GreenSock Inc. Three.js, Framer Motion, Lottie, Astro, and all other product names are trademarks of their respective owners.*
