frontend_design

by @vuralserhat86 in Tools

# Install this skill:

npx skills add vuralserhat86/antigravity-agentic-skills --skill "frontend_design"

Install specific skill from multi-skill repository

# Description

Premium/yaratıcı UI tasarım. ⚠️ Distinctive, memorable interface için kullan. Temel UI için → design-patterns.

# SKILL.md

name: frontend_design
router_kit: FullStackKit
description: Premium/yaratıcı UI tasarım. ⚠️ Distinctive, memorable interface için kullan. Temel UI için → 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

Adım	Soru
Purpose	Bu interface hangi sorunu çözüyor?
Audience	Kim kullanacak?
Tone	Hangi estetik? (aşağıdan seç)
Unforgettable	Neyi hatırlayacaklar?

🎭 Aesthetic Directions

Stil	Özellik
Brutally Minimal	Beyaz boşluk, az element
Maximalist	Yoğun, katmanlı, bold
Retro-Futuristic	Neon, gradient, 80s vibes
Luxury/Refined	Premium, altın/siyah
Editorial	Dergi layoutu, tipografi odaklı
Playful	Pastel, rounded, animations
Industrial	Raw, monospace, utility-first

🎯 Guidelines

Typography

❌ KAÇIN	✅ TERCİH ET
Inter, Roboto, Arial	Distinctive display fonts
System fonts	Unique pairings

Color

❌ KAÇIN	✅ TERCİH ET
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

Kaynak: Refactoring UI & Awwwards Evaluation

Aşama 1: Visual Hierarchy

[ ] Scale: Önemli elementleri daha büyük değil, çok daha büyük yap.
[ ] Contrast: Renk kontrastını kullanarak dikkati yönlendir.
[ ] WhiteSpace: Boşluğu bir element gibi aktif kullan (Nefes aldır).

Aşama 2: Implementation Details

[ ] Animation: Micro-interaction'lar ekle (Buton hover, Page transition).
[ ] Images: Görselleri optimize et (WebP, Lazy Load) ve aspect-ratio koru.
[ ] Typography: Satır yüksekliği (line-height) ve harf aralığını (letter-spacing) ayarla.

Aşama 3: Polish

[ ] Consistency: Padding ve Margin değerleri bir sistemden (Design Tokens) mi geliyor?
[ ] Responsive: Sadece küçülmekle kalmayıp, layout değişiyor mu?

Kontrol Noktaları

Aşama	Doğrulama
1	Siteye ilk giren 3 saniye içinde "Vay be" diyor mu?
2	Renk paleti 3-4 ana renkle sınırlı mı?
3	Mobilde parmakla tıklanabilir alanlar yeterince büyük mü?

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