Agent skill
frontend-design-vuralserhat86-antigravity-agentic-
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/frontend-design-vuralserhat86-antigravity-agentic-
SKILL.md
🎨 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ü? |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?