frontend_design

by @DonggangChen in Tools

# 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?

# 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.