Leonxlnx · Jaylonnet · Feb 25, 2026
diff --git a/SKILL.md b/SKILL.md
diff --git a/references/architecture.md b/references/architecture.md
@@ -0,0 +1,36 @@
+# Architecture & Conventions
+
+## Dependency Verification [MANDATORY]
+Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), check `package.json`. If missing, output the installation command before providing code. **Never** assume a library exists.
+
+## Framework & Interactivity
+- React or Next.js. Default to Server Components (`RSC`).
+- **RSC SAFETY:** Global state works ONLY in Client Components. Wrap providers in `"use client"`.
+- **INTERACTIVITY ISOLATION:** If motion/glass effects are active, extract interactive UI as isolated leaf component with `'use client'`. Server Components render static layouts only.
+
+## State Management
+- Use local `useState`/`useReducer` for isolated UI.
+- Use global state strictly for deep prop-drilling avoidance.
+
+## Styling Policy
+- Tailwind CSS (v3/v4) for 90% of styling.
+- **TAILWIND VERSION LOCK:** Check `package.json` first. Do not use v4 syntax in v3 projects.
+- **T4 CONFIG GUARD:** For v4, do NOT use `tailwindcss` plugin in `postcss.config.js`. Use `@tailwindcss/postcss` or Vite plugin.
+
+## Anti-Emoji Policy [CRITICAL]
+NEVER use emojis in code, markup, text content, or alt text. Replace with high-quality icons (Radix, Phosphor) or clean SVG primitives.
+
+## Responsiveness & Spacing
+- Standardize breakpoints: `sm`, `md`, `lg`, `xl`.
+- Contain layouts: `max-w-[1400px] mx-auto` or `max-w-7xl`.
+- **Viewport Stability [CRITICAL]:** NEVER use `h-screen` for full-height Heroes. ALWAYS use `min-h-[100dvh]` to prevent layout jumping on mobile (iOS Safari).
+- **Grid over Flex-Math:** NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`).
+
+## Icons
+Use exactly `@phosphor-icons/react` or `@radix-ui/react-icons`. Standardize `strokeWidth` globally (e.g., `1.5` or `2.0`).
+
+## Forms
+- Label MUST sit above input.
+- Helper text optional but should exist in markup.
+- Error text below input.
+- Use standard `gap-2` for input blocks.
diff --git a/references/creative-arsenal.md b/references/creative-arsenal.md
@@ -0,0 +1,87 @@
+# The Creative Arsenal
+
+Pull from this library of advanced concepts to ensure output is visually striking and memorable.
+
+## The Standard Hero Paradigm
+Stop doing centered text over a dark image. Try asymmetric Hero sections: Text cleanly aligned to the left or right. Background should feature a high-quality, relevant image with subtle stylistic fade.
+
+---
+
+## Navigation & Menus
+
+| Pattern | Description |
+|---------|-------------|
+| **Mac OS Dock Magnification** | Nav-bar at the edge; icons scale fluidly on hover |
+| **Magnetic Button** | Buttons that physically pull toward the cursor |
+| **Gooey Menu** | Sub-items detach from main button like viscous liquid |
+| **Dynamic Island** | Pill-shaped UI component that morphs to show status/alerts |
+| **Contextual Radial Menu** | Circular menu expanding at click coordinates |
+| **Floating Speed Dial** | FAB that springs out into curved line of secondary actions |
+| **Mega Menu Reveal** | Full-screen dropdowns with stagger-fade content |
+
+## Layout & Grids
+
+| Pattern | Description |
+|---------|-------------|
+| **Bento Grid** | Asymmetric, tile-based grouping (Apple Control Center) |
+| **Masonry Layout** | Staggered grid without fixed row heights (Pinterest) |
+| **Chroma Grid** | Grid borders/tiles with subtle animating color gradients |
+| **Split Screen Scroll** | Two screen halves sliding in opposite directions on scroll |
+| **Curtain Reveal** | Hero section parting in the middle like a curtain on scroll |
+
+## Cards & Containers
+
+| Pattern | Description |
+|---------|-------------|
+| **Parallax Tilt Card** | 3D-tilting card tracking mouse coordinates |
+| **Spotlight Border Card** | Card borders that illuminate dynamically under cursor |
+| **Glassmorphism Panel** | True frosted glass with inner refraction borders |
+| **Holographic Foil Card** | Iridescent, rainbow light reflections shifting on hover |
+| **Tinder Swipe Stack** | Physical stack of cards user can swipe away |
+| **Morphing Modal** | Button that seamlessly expands into full-screen dialog |
+
+## Scroll-Animations
+
+| Pattern | Description |
+|---------|-------------|
+| **Sticky Scroll Stack** | Cards that stick to top and physically stack over each other |
+| **Horizontal Scroll Hijack** | Vertical scroll translates into smooth horizontal gallery pan |
+| **Locomotive Scroll Sequence** | Video/3D sequences where framerate is tied to scrollbar |
+| **Zoom Parallax** | Central background image zooming in/out as you scroll |
+| **Scroll Progress Path** | SVG vector lines that draw themselves as you scroll |
+| **Liquid Swipe Transition** | Page transitions that wipe screen like viscous liquid |
+
+## Galleries & Media
+
+| Pattern | Description |
+|---------|-------------|
+| **Dome Gallery** | 3D gallery feeling like a panoramic dome |
+| **Coverflow Carousel** | 3D carousel with center focused and edges angled back |
+| **Drag-to-Pan Grid** | Boundless grid you can freely drag in any direction |
+| **Accordion Image Slider** | Narrow vertical/horizontal image strips that expand on hover |
+| **Hover Image Trail** | Mouse leaves a trail of popping/fading images |
+| **Glitch Effect Image** | Brief RGB-channel shifting digital distortion on hover |
+
+## Typography & Text
+
+| Pattern | Description |
+|---------|-------------|
+| **Kinetic Marquee** | Endless text bands that reverse direction or speed up on scroll |
+| **Text Mask Reveal** | Massive typography acting as transparent window to video background |
+| **Text Scramble Effect** | Matrix-style character decoding on load or hover |
+| **Circular Text Path** | Text curved along a spinning circular path |
+| **Gradient Stroke Animation** | Outlined text with gradient continuously running along stroke |
+| **Kinetic Typography Grid** | Grid of letters dodging or rotating away from cursor |
+
+## Micro-Interactions & Effects
+
+| Pattern | Description |
+|---------|-------------|
+| **Particle Explosion Button** | CTAs that shatter into particles upon success |
+| **Liquid Pull-to-Refresh** | Mobile reload indicators acting like detaching water droplets |
+| **Skeleton Shimmer** | Shifting light reflections moving across placeholder boxes |
+| **Directional Hover Aware Button** | Hover fill entering from exact side mouse entered |
+| **Ripple Click Effect** | Visual waves rippling precisely from click coordinates |
+| **Animated SVG Line Drawing** | Vectors that draw their own contours in real-time |
+| **Mesh Gradient Background** | Organic, lava-lamp-like animated color blobs |
+| **Lens Blur Depth** | Dynamic focus blurring background UI layers to highlight foreground |
diff --git a/references/design-rules.md b/references/design-rules.md
@@ -0,0 +1,96 @@
+# Design Engineering Rules
+
+LLMs have statistical biases toward specific UI cliché patterns. Proactively construct premium interfaces using these engineered rules.
+
+## Rule 1: Deterministic Typography
+
+### Display/Headlines
+```css
+text-4xl md:text-6xl tracking-tighter leading-none
+```
+
+**ANTI-SLOP:** Discourage `Inter` for "Premium" or "Creative" vibes. Force unique character using `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.
+
+**TECHNICAL UI RULE:** Serif fonts are strictly BANNED for Dashboard/Software UIs. Use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`).
+
+### Body/Paragraphs
+```css
+text-base text-gray-600 leading-relaxed max-w-[65ch]
+```
+
+## Rule 2: Color Calibration
+
+- Max 1 Accent Color. Saturation < 80%.
+- **THE LILA BAN:** "AI Purple/Blue" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc/Slate) with high-contrast, singular accents (e.g. Emerald, Electric Blue, or Deep Rose).
+- **COLOR CONSISTENCY:** Stick to one palette for the entire output. Do not fluctuate between warm and cool grays.
+
+## Rule 3: Layout Diversification
+
+**ANTI-CENTER BIAS:** Centered Hero/H1 sections are strictly BANNED when `LAYOUT_VARIANCE > 4`. Force:
+- Split Screen (50/50)
+- Left Aligned content / Right Aligned asset
+- Asymmetric White-space structures
+
+## Rule 4: Materiality, Shadows, and Anti-Card Overuse
+
+**DASHBOARD HARDENING:** For `VISUAL_DENSITY > 7`, generic card containers are strictly BANNED. Use logic-grouping via `border-t`, `divide-y`, or purely negative space.
+
+Use cards ONLY when elevation communicates hierarchy. When a shadow is used, tint it to the background hue.
+
+## Rule 5: Interactive UI States
+
+LLMs naturally generate "static" successful states. You MUST implement full interaction cycles:
+
+- **Loading:** Skeletal loaders matching layout sizes (avoid generic circular spinners).
+- **Empty States:** Beautifully composed empty states indicating how to populate data.
+- **Error States:** Clear, inline error reporting (e.g., forms).
+- **Tactile Feedback:** On `:active`, use `-translate-y-[1px]` or `scale-[0.98]` to simulate physical push.
+
+---
+
+# The 100 AI Tells (Forbidden Patterns)
+
+To guarantee a premium, non-generic output, strictly avoid these common AI design signatures unless explicitly requested.
+
+## Visual & CSS
+
+```
+NO Neon/Outer Glows: Do not use default box-shadow glows or auto-glows. Use inner borders or subtle tinted shadows.
+NO Pure Black: Never use #000000. Use Off-Black, Zinc-950, or Charcoal.
+NO Oversaturated Accents: Desaturate accents to blend elegantly with neutrals.
+NO Excessive Gradient Text: Do not use text-fill gradients for large headers.
+NO Custom Mouse Cursors: They are outdated and ruin performance/accessibility.
+```
+
+## Typography
+
+```
+NO Inter Font: Banned. Use Geist, Outfit, Cabinet Grotesk, or Satoshi.
+NO Oversized H1s: The first heading should not scream. Control hierarchy with weight and color, not just massive scale.
+NO Serif on Dashboards: Use Serif fonts ONLY for creative/editorial designs.
+```
+
+## Layout & Spacing
+
+```
+NO Misaligned Elements: Ensure padding and margins are mathematically perfect.
+NO Floating Elements: Avoid awkward gaps.
+NO 3-Column Card Layouts: The generic "3 equal cards horizontally" feature row is BANNED. Use 2-column Zig-Zag, asymmetric grid, or horizontal scrolling.
+```
+
+## Content & Data (The "Jane Doe" Effect)
+
+```
+NO Generic Names: "John Doe", "Sarah Chan", "Jack Su" are banned. Use creative, realistic-sounding names.
+NO Generic Avatars: DO NOT use standard SVG "egg" or Lucide user icons. Use creative, believable photo placeholders.
+NO Fake Numbers: Avoid 99.99%, 50%, or 1234567. Use organic, messy data (47.2%, +1 (312) 847-1928).
+NO Startup Slop Names: "Acme", "Nexus", "SmartFlow". Invent premium, contextual brand names.
+NO Filler Words: Avoid "Elevate", "Seamless", "Unleash", "Next-Gen". Use concrete verbs.
+```
+
+## External Resources & Components
+
+```
+NO Broken Unsplash Links: Do not use Unsplash. Use https://picsum.photos/seed/{random_string}/800/600 or SVG UI Avatars.
+NO Default shadcn/ui: You may use shadcn/ui, but NEVER in generic default state. Customize radii, colors, shadows.
+```
diff --git a/references/dials.md b/references/dials.md
@@ -0,0 +1,73 @@
+# Design Dials
+
+## Active Baseline
+
+```
+DESIGN_VARIANCE: 8
+MOTION_INTENSITY: 6
+VISUAL_DENSITY: 4
+```
+
+The standard baseline for all generations is strictly set to these values. Do not ask the user to edit this file.
+
+**Always listen to the user:** Adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as global variables to drive specific logic.
+
+---
+
+## DESIGN_VARIANCE (Level 1-10)
+
+### 1-3 (Predictable)
+- Flexbox `justify-center`
+- Strict 12-column symmetrical grids
+- Equal paddings
+
+### 4-7 (Offset)
+- `margin-top: -2rem` overlapping
+- Varied image aspect ratios (e.g., 4:3 next to 16:9)
+- Left-aligned headers over center-aligned data
+
+### 8-10 (Asymmetric)
+- Masonry layouts
+- CSS Grid with fractional units (`grid-template-columns: 2fr 1fr 1fr`)
+- Massive empty zones (`padding-left: 20vw`)
+
+**MOBILE OVERRIDE:** For levels 4-10, any asymmetric layout above `md:` MUST aggressively fall back to strict, single-column layout (`w-full`, `px-4`, `py-8`) on viewports `< 768px` to prevent horizontal scrolling and layout breakage.
+
+---
+
+## MOTION_INTENSITY (Level 1-10)
+
+### 1-3 (Static)
+- No automatic animations
+- CSS `:hover` and `:active` states only
+
+### 4-7 (Fluid CSS)
+```css
+transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+```
+- `animation-delay` cascades for load-ins
+- Focus on `transform` and `opacity`
+- `will-change: transform` sparingly
+
+### 8-10 (Advanced Choreography)
+- Complex scroll-triggered reveals or parallax
+- Framer Motion hooks
+- NEVER use `window.addEventListener('scroll')`
+
+---
+
+## VISUAL_DENSITY (Level 1-10)
+
+### 1-3 (Art Gallery Mode)
+- Lots of white space
+- Huge section gaps
+- Everything feels expensive and clean
+
+### 4-7 (Daily App Mode)
+- Normal spacing for standard web apps
+
+### 8-10 (Cockpit Mode)
+- Tiny paddings
+- No card boxes; just 1px lines to separate data
+- Everything is packed
+- **Mandatory:** Use Monospace (`font-mono`) for all numbers
diff --git a/references/motion.md b/references/motion.md
@@ -0,0 +1,103 @@
+# Motion & Animation
+
+## Creative Proactivity (Anti-Slop Implementation)
+
+### Liquid Glass Refraction
+When glassmorphism is needed, go beyond `backdrop-blur`:
+```css
+border-white/10
+shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]
+```
+
+### Magnetic Micro-physics (If MOTION_INTENSITY > 5)
+Buttons that pull slightly toward the mouse cursor.
+
+**CRITICAL:** NEVER use React `useState` for magnetic hover or continuous animations. Use EXCLUSIVELY Framer Motion's `useMotionValue` and `useTransform` outside the React render cycle to prevent performance collapse on mobile.
+
+### Perpetual Micro-Interactions
+When `MOTION_INTENSITY > 5`, embed continuous, infinite micro-animations (Pulse, Typewriter, Float, Shimmer, Carousel) in standard components.
+
+Apply premium Spring Physics:
+```javascript
+type: "spring", stiffness: 100, damping: 20
+```
+
+No linear easing.
+
+### Layout Transitions
+Always utilize Framer Motion's `layout` and `layoutId` props for smooth re-ordering, resizing, and shared element transitions.
+
+### Staggered Orchestration
+Do not mount lists or grids instantly. Use:
+- `staggerChildren` (Framer Motion)
+- CSS cascade: `animation-delay: calc(var(--index) * 100ms)`
+
+**CRITICAL:** For `staggerChildren`, the Parent (`variants`) and Children MUST reside in the identical Client Component tree. If data is fetched asynchronously, pass data as props into a centralized Parent Motion wrapper.
+
+---
+
+## Motion Intensity Levels (1-10)
+
+### 1-3 (Static)
+- No automatic animations.
+- CSS `:hover` and `:active` states only.
+
+### 4-7 (Fluid CSS)
+```css
+transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+```
+- Use `animation-delay` cascades for load-ins.
+- Focus strictly on `transform` and `opacity`.
+- Use `will-change: transform` sparingly.
+
+### 8-10 (Advanced Choreography)
+- Complex scroll-triggered reveals or parallax.
+- Use Framer Motion hooks.
+- NEVER use `window.addEventListener('scroll')`.
+
+---
+
+## The Motion-Engine Bento Paradigm
+
+For modern SaaS dashboards, enforce "Vercel-core meets Dribbble-clean" aesthetic.
+
+### Core Philosophy
+- **Aesthetic:** High-end, minimal, functional.
+- **Palette:** Background `#f9fafb`. Cards `#ffffff` with `border-slate-200/50`.
+- **Surfaces:** `rounded-[2.5rem]`. Diffusion shadow: `shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]`.
+- **Typography:** Geist, Satoshi, or Cabinet Grotesk. `tracking-tight` for headers.
+- **Labels:** Place titles/descriptions **outside and below** cards.
+- **Padding:** `p-8` or `p-10` inside cards.
+
+### Animation Engine Specs
+All cards must contain **Perpetual Micro-Interactions:**
+- **Spring Physics:** `type: "spring", stiffness: 100, damping: 20`
+- **Layout Transitions:** Heavy use of `layout` and `layoutId` props
+- **Infinite Loops:** Every card has an "Active State" that loops infinitely
+- **Performance:** Wrap dynamic lists in `<AnimatePresence>`
+
+**PERFORMANCE CRITICAL:** Any perpetual motion or infinite loop MUST be memoized (`React.memo`) and isolated in its own microscopic Client Component. Never trigger re-renders in the parent layout.
+
+### The 5-Card Archetypes
+
+1. **The Intelligent List:** Vertical stack with infinite auto-sorting loop. Items swap positions using `layoutId`.
+
+2. **The Command Input:** Search/AI bar with multi-step Typewriter Effect. Cycles through prompts with blinking cursor and "processing" shimmer gradient.
+
+3. **The Live Status:** Scheduling interface with "breathing" status indicators. Pop-up notification badge emerges with "Overshoot" spring, stays 3 seconds, vanishes.
+
+4. **The Wide Data Stream:** Horizontal "Infinite Carousel" of data cards. Seamless loop using `x: ["0%", "-100%"]`.
+
+5. **The Contextual UI (Focus Mode):** Document view with staggered text highlight, followed by "Float-in" of floating action toolbar.
+
+---
+
+## GSAP / ThreeJS Usage
+
+Default to Framer Motion for UI/Bento interactions.
+
+Use GSAP (ScrollTrigger/Parallax) or ThreeJS/WebGL EXCLUSIVELY for:
+- Isolated full-page scrolltelling
+- Canvas backgrounds
+
+**CRITICAL:** Never mix GSAP/ThreeJS with Framer Motion in the same component tree. Wrap in strict `useEffect` cleanup blocks.