Agent-Skills.md

Agent Skills: 🎨 Frontend Design (Premium)

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

[accessibilityapiintegrationbackendbrowserapisclient-sidecomponentscss3debuggingdeploymentframeworksfrontendfrontenddesignfullstackhtml5javascriptlibrariesnode.jsnpmperformanceoptimizationresponsivedesignseostatemanagementtestingtypescriptui/uxwebdevelopment]-frontend-design
frontendID: vuralserhat86/antigravity-agentic-skills/frontend_design
4212

Install this agent skill to your local

pnpm dlx add-skill https://github.com/vuralserhat86/antigravity-agentic-skills/tree/HEAD/skills/frontend_design

Skill Files

Browse the full folder contents for frontend_design.

Download Skill

Loading file tree…

skills/frontend_design/SKILL.md

Skill Metadata

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

🎨 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ü? |