antigravity-devkit 1.0.0

package/template/skills/frontend-design/SKILL.md

@@ -0,0 +1,199 @@
+---
+name: frontend-design
+description: UI/UX design thinking and decision-making. Use when designing layouts, color schemes, typography, or visual interfaces. Teaches principles, not fixed values.
+---
+
+# Frontend Design System
+
+> **Philosophy:** Every pixel has purpose. Restraint is luxury. User psychology drives decisions.
+> **Core Principle:** THINK, don't memorize. ASK, don't assume.
+
+---
+
+## 📑 Reference Files
+
+| File | When to Read |
+|------|--------------|
+| [ux-psychology.md](ux-psychology.md) | 🔴 **ALWAYS** - Core UX laws |
+| [animation-guide.md](animation-guide.md) | When animations needed |
+| [design-systems.md](design-systems.md) | Color/typography decisions |
+
+---
+
+## ⛔ ANTI-AI-SLOP RULES (CRITICAL)
+
+**Your training data makes you converge to generic designs. BREAK THIS!**
+
+| AI Default Tendency | Why It's Bad | Think Instead |
+|---------------------|--------------|---------------|
+| **Purple/Violet gradients** | #1 AI cliché | Try Teal, Emerald, Signal Orange |
+| **Inter/Roboto fonts** | Every AI uses these | Research unique fonts for context |
+| **Bento Grids** | Overused layout | Try asymmetric, staggered, overlap |
+| **Hero Split (Left/Right)** | Predictable | Massive typography, vertical flow |
+| **Mesh/Aurora Gradients** | Lazy background | Solid contrast, textures, patterns |
+| **Glassmorphism everywhere** | AI "premium" idea | Raw borders, high-contrast flat |
+| **Dark + neon glow** | Generic "tech" look | What does the BRAND need? |
+| **rounded-md on everything** | Safe/boring | Go extreme: 0px OR 24px+ |
+
+> 🔴 **"If it looks like a Tailwind template, you have FAILED."**
+
+---
+
+## 🧠 DEEP DESIGN THINKING (MANDATORY)
+
+**Before ANY design, answer internally:**
+
+```
+🔍 CONTEXT ANALYSIS:
+├── What sector? → What emotions should it evoke?
+├── Who is the audience? → Age, expectations, tech-savviness?
+├── What do competitors look like? → What should I NOT do?
+└── What is the soul of this app? → In one word?
+
+🎨 DESIGN IDENTITY:
+├── What will make this UNFORGETTABLE?
+├── What unexpected element can I use?
+├── 🚫 CLICHÉ CHECK: Am I defaulting to AI patterns?
+└── Will I remember this design in a year?
+
+📐 LAYOUT HYPOTHESIS:
+├── How can the Hero be DIFFERENT?
+├── Where can I break the grid?
+└── Can navigation be unconventional?
+```
+
+---
+
+## 🎨 DESIGN COMMITMENT (REQUIRED OUTPUT)
+
+**Present this block to user BEFORE coding:**
+
+```markdown
+🎨 DESIGN COMMITMENT:
+
+- **Style Choice:** [Brutalist / Neo-Retro / Swiss Punk / Minimal Luxury]
+- **Primary Color:** [NOT purple/blue - justify choice]
+- **Typography:** [Specific fonts, not Inter/Roboto]
+- **Layout Risk:** [What unconventional decision did I take?]
+- **Cliché Avoided:** [Which AI default did I explicitly kill?]
+```
+
+---
+
+## ⚠️ ASK BEFORE ASSUMING
+
+**If user request is vague, ASK:**
+
+| Unspecified | Ask This |
+|-------------|----------|
+| Color | "What palette? (warm/cool/bold/minimal)" |
+| Style | "What vibe? (professional/playful/luxurious)" |
+| Layout | "Any preference? (spacious/dense/asymmetric)" |
+| Audience | "Who is this for? (age/tech-savviness)" |
+
+---
+
+## 📐 LAYOUT PRINCIPLES
+
+### Layout Alternatives (NOT Split Screen)
+
+| Layout | When to Use |
+|--------|-------------|
+| **Massive Typography** | Hero with 80px+ text as visual |
+| **Staggered Grid** | Cards at different alignments |
+| **Overlapping Elements** | Depth through z-layers |
+| **Extreme Asymmetry** | 90/10 split for tension |
+| **Vertical Flow** | No "above the fold" hero |
+
+### 8-Point Grid
+
+```
+All spacing in multiples of 8:
+├── Tight: 4px, 8px
+├── Medium: 16px, 24px
+├── Large: 32px, 48px
+└── XL: 64px, 80px
+```
+
+---
+
+## ✨ MANDATORY VISUAL POLISH
+
+### Animation Requirements
+
+- [ ] **Scroll reveals** - Staggered entrance animations
+- [ ] **Micro-interactions** - Hover/click feedback on all interactive elements
+- [ ] **Spring physics** - Natural, not linear easing
+- [ ] **prefers-reduced-motion** - MUST respect accessibility
+
+### Depth & Texture
+
+- [ ] **Layering** - Overlapping elements, parallax
+- [ ] **Shadows** - Meaningful elevation hierarchy
+- [ ] **Texture** - Grain, patterns, not flat colors only
+
+---
+
+## 🧐 REALITY CHECK (ANTI-SELF-DECEPTION)
+
+Before delivering, verify HONESTLY:
+
+| Question | FAIL | PASS |
+|----------|------|------|
+| "Could this be a template?" | "It's clean..." | "No way, this is unique" |
+| "Would I scroll past on Dribbble?" | "It's professional" | "I'd stop and look" |
+| "Can I describe without 'clean'?" | "Clean minimal" | "Brutalist with aurora accents" |
+
+### Self-Deception Patterns
+
+- ❌ "I used custom color" → But it's still blue+white
+- ❌ "I have hover effects" → But just `opacity: 0.8`
+- ❌ "Layout is varied" → But 3-column equal grid
+
+> 🔴 **If it looks generic, you have FAILED. No exceptions.**
+
+---
+
+## Vue3 + Tailwind Implementation
+
+### Component Animation (Vue)
+
+```vue
+<template>
+  <Transition name="slide-up" appear>
+    <div v-if="show" class="card">...</div>
+  </Transition>
+</template>
+
+<style>
+.slide-up-enter-active { transition: all 0.4s ease-out; }
+.slide-up-enter-from { opacity: 0; transform: translateY(20px); }
+</style>
+```
+
+### Tailwind Custom Theme
+
+```javascript
+// tailwind.config.js - CUSTOMIZE, don't use defaults
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: '#0d9488', // NOT default purple
+        accent: '#f59e0b',  // Distinctive accent
+      },
+      fontFamily: {
+        display: ['Space Grotesk', 'sans-serif'], // Unique font
+        body: ['DM Sans', 'sans-serif'],
+      },
+      borderRadius: {
+        'card': '2px', // Sharp, not rounded-md
+      }
+    }
+  }
+}
+```
+
+---
+
+> **Remember:** Design is THINKING, not copying. Avoid the "Modern SaaS Safe Harbor"!

package/template/skills/frontend-design/animation-guide.md

@@ -0,0 +1,217 @@
+# Animation Guidelines
+
+> Animation principles and timing psychology. Learn to decide, not copy.
+
+---
+
+## Duration Principles
+
+### What Affects Timing
+
+```
+Factors determining animation speed:
+├── DISTANCE: Further travel = longer duration
+├── SIZE: Larger elements = slower animations
+├── IMPORTANCE: Critical actions = clear feedback
+└── CONTEXT: Urgent = fast, luxurious = slow
+```
+
+### Duration Ranges
+
+| Purpose | Range | Example |
+|---------|-------|---------|
+| Instant feedback | 50-100ms | Button press |
+| Micro-interactions | 100-200ms | Hover effects |
+| Standard transitions | 200-300ms | Tabs, toggles |
+| Complex animations | 300-500ms | Modal open |
+| Page transitions | 400-600ms | Route change |
+| Premium/Wow effects | 800ms+ | Hero reveals |
+
+---
+
+## Easing Principles
+
+| Easing | Best For | Feels Like |
+|--------|----------|------------|
+| **ease-out** | Elements entering | Arriving, settling |
+| **ease-in** | Elements leaving | Departing, exiting |
+| **ease-in-out** | Emphasis, loops | Smooth, deliberate |
+| **linear** | Continuous motion | Mechanical |
+| **spring/bounce** | Playful UI | Fun, energetic |
+
+### The Pattern
+
+```css
+/* ENTERING = ease-out (decelerate) */
+.enter { animation-timing-function: ease-out; }
+
+/* LEAVING = ease-in (accelerate) */
+.exit { animation-timing-function: ease-in; }
+
+/* CONTINUOUS = ease-in-out */
+.loop { animation-timing-function: ease-in-out; }
+```
+
+---
+
+## Micro-Interactions
+
+### Purpose
+
+```
+├── FEEDBACK: Confirm action happened
+├── GUIDANCE: Show what's possible
+├── STATUS: Indicate current state
+└── DELIGHT: Small moments of joy
+```
+
+### Button States
+
+| State | Effect | Tailwind Example |
+|-------|--------|------------------|
+| Hover | Lift + glow | `hover:-translate-y-1 hover:shadow-lg` |
+| Active | Press down | `active:scale-95` |
+| Focus | Ring indicator | `focus:ring-2 focus:ring-offset-2` |
+| Loading | Spinner | `animate-spin` |
+
+---
+
+## Scroll Animations (Vue3 + Tailwind)
+
+### Intersection Observer Pattern
+
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const isVisible = ref(false)
+const element = ref<HTMLElement>()
+
+onMounted(() => {
+  const observer = new IntersectionObserver(([entry]) => {
+    isVisible.value = entry.isIntersecting
+  }, { threshold: 0.1 })
+  
+  if (element.value) observer.observe(element.value)
+})
+</script>
+
+<template>
+  <div 
+    ref="element"
+    :class="[
+      'transition-all duration-500 ease-out',
+      isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
+    ]"
+  >
+    Content reveals on scroll
+  </div>
+</template>
+```
+
+### Staggered Animation
+
+```vue
+<template>
+  <div v-for="(item, i) in items" :key="i"
+    :style="{ transitionDelay: `${i * 100}ms` }"
+    :class="isVisible ? 'opacity-100' : 'opacity-0'"
+  >
+    {{ item }}
+  </div>
+</template>
+```
+
+---
+
+## Vue Transition Components
+
+```vue
+<!-- Fade -->
+<Transition name="fade">
+  <div v-if="show">Content</div>
+</Transition>
+
+<style>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+</style>
+
+<!-- Slide Up -->
+<Transition name="slide-up" appear>
+  <div v-if="show">Content</div>
+</Transition>
+
+<style>
+.slide-up-enter-active {
+  transition: all 0.4s ease-out;
+}
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+</style>
+```
+
+---
+
+## Performance Rules
+
+### ✅ Animate ONLY
+
+```css
+/* GPU-accelerated (FAST) */
+transform: translate(), scale(), rotate();
+opacity: 0 to 1;
+```
+
+### ❌ NEVER Animate
+
+```css
+/* CPU-intensive (SLOW) */
+width, height
+top, left, right, bottom
+margin, padding
+border-radius
+box-shadow
+```
+
+### Accessibility (MANDATORY)
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+---
+
+## Animation Checklist
+
+Before adding animation:
+
+- [ ] **Purpose** - Feedback, guidance, or delight?
+- [ ] **Timing** - Appropriate duration?
+- [ ] **Easing** - Correct for enter/exit/emphasis?
+- [ ] **Performance** - transform/opacity only?
+- [ ] **Reduced motion** - Accessibility respected?
+- [ ] **Consistency** - Matches other animations?
+
+### Anti-Patterns
+
+- ❌ Same timing every project
+- ❌ Animation without purpose
+- ❌ Ignoring reduced-motion
+- ❌ Animating expensive properties
+- ❌ Too many things moving at once
+
+---
+
+> **Remember:** Animation is communication. Every motion should serve the user.

package/template/skills/frontend-design/design-systems.md

@@ -0,0 +1,230 @@
+# Design Systems Reference
+
+> Color theory, typography, and visual hierarchy principles for Vue3 + Tailwind.
+
+---
+
+## Color Principles
+
+### 60-30-10 Rule
+
+```
+60% → Primary/Background (calm, neutral base)
+30% → Secondary (supporting areas)
+10% → Accent (CTAs, highlights)
+```
+
+### Color Psychology
+
+| Need | Consider | Avoid |
+|------|----------|-------|
+| Trust, calm | Blue family | Aggressive reds |
+| Growth, nature | Green family | Industrial grays |
+| Energy, urgency | Orange, red | Passive blues |
+| Luxury | Deep Teal, Gold, Emerald | Cheap brights |
+| Clean, minimal | Neutrals | Overwhelming color |
+
+### ⛔ Colors to AVOID (AI Clichés)
+
+| ❌ Avoid | Why | ✅ Try Instead |
+|----------|-----|----------------|
+| Purple/Violet | #1 AI default | Teal, Emerald, Coral |
+| Fintech Blue | Safe harbor | Signal Orange, Deep Green |
+| Pink gradients | Overused | Rich Gold, Warm Terracotta |
+| Neon glow | Generic "tech" | Solid contrast, texture |
+
+### Selection Process
+
+1. **Industry?** → Narrows options
+2. **Emotion?** → Picks primary
+3. **Light/Dark mode?** → Sets foundation
+4. **ASK USER** if not specified
+
+---
+
+## Tailwind Custom Palette
+
+```javascript
+// tailwind.config.js - UNIQUE colors
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Define brand-specific colors
+        brand: {
+          50: '#f0fdfa',
+          500: '#14b8a6', // Primary - NOT purple
+          900: '#134e4a',
+        },
+        accent: {
+          DEFAULT: '#f59e0b', // Distinctive accent
+          hover: '#d97706',
+        }
+      }
+    }
+  }
+}
+```
+
+---
+
+## Typography Principles
+
+### Scale Ratios
+
+| Content Type | Ratio | Feel |
+|--------------|-------|------|
+| Dense UI | 1.125-1.2 | Compact, efficient |
+| General web | 1.25 | Balanced |
+| Editorial | 1.333 | Readable, spacious |
+| Hero/display | 1.5-1.618 | Dramatic |
+
+### Font Pairing Concept
+
+```
+Contrast + Harmony:
+├── DIFFERENT enough for hierarchy
+├── SIMILAR enough for cohesion
+└── Usually: display + neutral, or serif + sans
+```
+
+### ⛔ Fonts to AVOID (AI Defaults)
+
+| ❌ Avoid | Why | ✅ Try Instead |
+|----------|-----|----------------|
+| Inter | Every AI uses it | Space Grotesk, DM Sans |
+| Roboto | Generic | Outfit, General Sans |
+| Poppins | Overused | Cabinet Grotesk, Clash Display |
+| System fonts | Lazy | Research unique fonts |
+
+### Unique Font Suggestions
+
+| Purpose | Font Options |
+|---------|--------------|
+| Display/Hero | Clash Display, Cabinet Grotesk, Syne |
+| Body | DM Sans, Outfit, General Sans |
+| Mono/Code | JetBrains Mono, Fira Code |
+| Elegant | Fraunces, Newsreader, Lora |
+
+---
+
+## Tailwind Typography Setup
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      fontFamily: {
+        display: ['Clash Display', 'sans-serif'],
+        body: ['DM Sans', 'sans-serif'],
+        mono: ['JetBrains Mono', 'monospace'],
+      },
+      fontSize: {
+        'hero': ['4.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
+        'display': ['3rem', { lineHeight: '1.2' }],
+      }
+    }
+  }
+}
+```
+
+### Readability Rules
+
+- **Line length:** 45-75 characters optimal
+- **Line height:** 1.4-1.6 for body
+- **Contrast:** WCAG AA minimum (4.5:1)
+- **Base size:** 16px+ for web
+
+---
+
+## Visual Hierarchy
+
+### Sizing Principles
+
+| Element | Consideration |
+|---------|---------------|
+| **Touch targets** | Min 44×44px mobile |
+| **Buttons** | Height by importance (48/40/36px) |
+| **Inputs** | Match button height |
+| **Cards** | Consistent padding |
+| **Reading width** | max-w-prose (65ch) |
+
+### 8-Point Grid
+
+```css
+/* All spacing in multiples of 8 */
+.spacing {
+  --space-1: 4px;   /* half-step */
+  --space-2: 8px;
+  --space-3: 16px;
+  --space-4: 24px;
+  --space-5: 32px;
+  --space-6: 48px;
+  --space-7: 64px;
+  --space-8: 80px;
+}
+```
+
+---
+
+## Border Radius Strategy
+
+**Don't default to `rounded-md`!**
+
+| Style | Radius | Use Case |
+|-------|--------|----------|
+| **Sharp** | 0-2px | Tech, Luxury, Brutalist |
+| **Subtle** | 4-6px | Professional, B2B |
+| **Medium** | 8-12px | General, balanced |
+| **Friendly** | 16-24px | Social, lifestyle |
+| **Pill** | 9999px | Buttons, badges |
+
+```javascript
+// tailwind.config.js - COMMIT to a style
+module.exports = {
+  theme: {
+    extend: {
+      borderRadius: {
+        'card': '2px',      // Sharp for tech
+        'button': '9999px', // Pill buttons
+      }
+    }
+  }
+}
+```
+
+---
+
+## Shadow Hierarchy
+
+```css
+/* Tailwind shadow scale */
+.elevation-1 { @apply shadow-sm; }   /* Subtle lift */
+.elevation-2 { @apply shadow-md; }   /* Cards */
+.elevation-3 { @apply shadow-lg; }   /* Modals, dropdowns */
+.elevation-4 { @apply shadow-xl; }   /* Popovers */
+.elevation-5 { @apply shadow-2xl; }  /* Dialogs */
+
+/* Custom dramatic shadow */
+.shadow-dramatic {
+  box-shadow: 
+    0 25px 50px -12px rgba(0, 0, 0, 0.25),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+```
+
+---
+
+## Quick Decision Checklist
+
+- [ ] **Color** - NOT purple, justified choice
+- [ ] **Typography** - NOT Inter/Roboto, unique fonts
+- [ ] **Border radius** - Committed style (sharp OR rounded)
+- [ ] **Shadows** - Elevation hierarchy defined
+- [ ] **Spacing** - 8-point grid consistent
+- [ ] **60-30-10** - Color ratio balanced
+
+---
+
+> **Remember:** Design systems create consistency. Define your tokens ONCE, use everywhere.