Initial commit: antigravity-claudekit

skills/ck-frontend-design/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: ck-frontend-design
+description: Create polished frontend interfaces from designs, screenshots, or videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, design system work, avoiding generic AI output.
+---
+
+# ck-frontend-design
+
+Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention. Embeds the `ui-ux-designer` agent role.
+
+## When to Use
+
+- Replicating a UI from a screenshot or video
+- Building web components from scratch with a strong aesthetic direction
+- Creating 3D/WebGL immersive experiences
+- Design system creation or audit
+- Quick prototypes needing real visual polish
+- Any frontend work where "AI slop" aesthetics are unacceptable
+
+## Don't Use When
+
+- Pure backend logic with no visual component
+- Simple data display with no design requirements
+- Already have a design system and just need to implement components per spec — use `ck-frontend-development`
+
+## Workflow Selection
+
+| Input | Workflow |
+|-------|----------|
+| Screenshot | Replicate exactly |
+| Video | Replicate with animations |
+| Screenshot/Video (describe only) | Document for developers |
+| 3D/WebGL request | Three.js immersive experience |
+| Quick task | Rapid implementation |
+| From scratch | Design Thinking process below |
+
+**All workflows:** Activate design intelligence database first for pattern research.
+
+## Screenshot/Video Replication
+
+1. **Analyze** — extract colors, fonts, spacing, effects from the visual
+2. **Plan** — dispatch `ck-frontend-design` sub-process to create phased implementation
+3. **Implement** — match source precisely
+4. **Verify** — compare implementation to original
+5. **Document** — update `./docs/design-guidelines.md` if approved
+
+## Design Thinking (From Scratch)
+
+Before coding, commit to a BOLD aesthetic direction:
+
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
+- **Constraints**: Technical requirements (framework, performance, accessibility)
+- **Differentiation**: What makes this UNFORGETTABLE?
+
+**CRITICAL:** Execute with precision. Bold maximalism and refined minimalism both work — intentionality is key.
+
+## Aesthetics Guidelines
+
+- **Typography**: Avoid Arial/Inter; use distinctive, characterful fonts. Pair display + body fonts.
+- **Color**: Commit to cohesive palette. CSS variables. Dominant colors with sharp accents.
+- **Motion**: CSS-first animations. Orchestrated page loads > scattered micro-interactions.
+- **Spatial**: Unexpected layouts. Asymmetry. Overlap. Negative space OR controlled density.
+- **Backgrounds**: Atmosphere over solid colors. Gradients, noise, patterns, shadows, grain.
+- **Assets**: Generate with multimodal AI tools when needed
+
+## Anti-Patterns (AI Slop — NEVER use)
+
+- Overused fonts: Inter, Roboto, Arial, Space Grotesk
+- Cliched colors: purple gradients on white
+- Predictable cookie-cutter layouts
+- Generic card grids with drop shadows everywhere
+
+## Design Principles
+
+- **Mobile-First**: Always start with mobile, scale up
+- **Accessibility**: WCAG 2.1 AA minimum (4.5:1 contrast for normal text)
+- **Consistency**: Maintain design system coherence
+- **Performance**: Optimize animations for smooth 60fps
+- **Conversion-Focused**: Every design decision serves user goals
+- **Trend-Aware**: Stay current while maintaining timeless principles
+
+## Quality Standards
+
+- Responsive across breakpoints (320px+, 768px+, 1024px+)
+- Color contrast ratios meet WCAG 2.1 AA
+- Interactive elements have clear hover/focus/active states
+- Animations respect `prefers-reduced-motion`
+- Touch targets minimum 44x44px on mobile
+- Line height 1.5–1.6 for body text
+
+## Required Skills (in order)
+
+1. Design intelligence database search for patterns
+2. `ck-frontend-design` screenshot/video analysis workflows
+3. Web design best practices references
+4. Framework-specific patterns (`ck-web-frameworks`)
+5. Styling system (shadcn/ui, Tailwind CSS)
+
+## Output
+
+- Production-ready HTML/CSS/JS implementation
+- Updated `./docs/design-guidelines.md` with new patterns
+- Design rationale documented