antigravity-claudekit/skills/ck-frontend-design/SKILL.md

name, description

name	description
ck-frontend-design	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