Use when you have a written implementation plan to execute in a separate session with review checkpoints
frontend_design
2
2
# Install this skill:
npx skills add DonggangChen/antigravity-agentic-skills --skill "frontend_design"
Install specific skill from multi-skill repository
# Description
Premium/creative UI design. ⚠️ Use for Distinctive, memorable interface. For basic UI → design-patterns.
# SKILL.md
name: frontend_design
router_kit: FullStackKit
description: Premium/creative UI design. ⚠️ Use for Distinctive, memorable interface. For basic UI → design-patterns.
metadata:
skillport:
category: frontend
tags: [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, frameworks, frontend, frontend design, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development] - frontend-design
🎨 Frontend Design (Premium)
Distinctive, production-grade UI. "AI slop" estetikten kaçın.
⚡ Pre-Design Checklist
| Step | Question |
|---|---|
| Purpose | What problem does this interface solve? |
| Audience | Who will use it? |
| Tone | Which aesthetic? (select below) |
| Unforgettable | What will they remember? |
🎭 Aesthetic Directions
| Style | Feature |
|---|---|
| Brutally Minimal | White space, few elements |
| Maximalist | Dense, layered, bold |
| Retro-Futuristic | Neon, gradient, 80s vibes |
| Luxury/Refined | Premium, gold/black |
| Editorial | Magazine layout, typography focused |
| Playful | Pastel, rounded, animations |
| Industrial | Raw, monospace, utility-first |
🎯 Guidelines
Typography
| ❌ AVOID | ✅ PREFER |
|---|---|
| Inter, Roboto, Arial | Distinctive display fonts |
| System fonts | Unique pairings |
Color
| ❌ AVOID | ✅ PREFER |
|---|---|
| Purple gradient on white | Dominant + sharp accent |
| Generic palettes | CSS variables, cohesive theme |
Motion
Focus: High-impact moments
- Staggered page load reveals
- Scroll-triggered animations
- Surprising hover states
Composition
✅ Asymmetry · Overlap · Diagonal flow
✅ Grid-breaking · Generous negative space
❌ Predictable layouts · Cookie-cutter patterns
📋 Output Requirements
- [ ] Production-grade, functional code
- [ ] Visually striking & memorable
- [ ] Clear aesthetic point-of-view
- [ ] Meticulously refined details
Frontend Design v1.1 - Enhanced
🔄 Workflow
Source: Refactoring UI & Awwwards Evaluation
Phase 1: Visual Hierarchy
- [ ] Scale: Do not just make important elements bigger, make them much bigger.
- [ ] Contrast: Direct attention using color contrast.
- [ ] WhiteSpace: Use white space actively as an element (Let it breathe).
Phase 2: Implementation Details
- [ ] Animation: Add micro-interactions (Button hover, Page transition).
- [ ] Images: Optimize images (WebP, Lazy Load) and preserve aspect-ratio.
- [ ] Typography: Adjust line-height and letter-spacing.
Phase 3: Polish
- [ ] Consistency: Does Padding and Margin values come from a system (Design Tokens)?
- [ ] Responsive: Does layout change, not just shrink?
Checkpoints
| Phase | Verification |
|---|---|
| 1 | Does a visitor say "Wow" in the first 3 seconds? |
| 2 | Is color palette limited to 3-4 main colors? |
| 3 | Are clickable areas large enough on mobile? |
# Related Skills
Use when starting any conversation - establishes how to find and use skills, requiring Skill...
|
|
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Amp
Antigravity
Claude Code
Clawdbot
Codex
Cursor
Droid
Gemini CLI
GitHub Copilot
Goose
Kilo Code
Kiro CLI
OpenCode
Roo Code
Trae
Windsurf
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.