vuralserhat86/skills/frontend_design
skills/frontend_design/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 managemen
$ install --global
skillsauthnpx skillsauth add vuralserhat86/antigravity-agentic-skills skills/frontend_designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 22, 2026, 1:26 AM79.6s1 file scanned
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.
- 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ü? |
Related Skills
vuralserhat86/zustand_state
tools
VerifiedTrustedCommunity
Production-tested setup for Zustand state management in React. Includes patterns for persistence, devtools, and TypeScript patterns. Prevents hydration mismatches and render loops.
42SKILL.mdUpdated Apr 22, 2026
vuralserhat86/xlsx
development
VerifiedTrustedCommunity
Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas
42SKILL.mdUpdated Apr 22, 2026
vuralserhat86/skills/websocket_engineer
development
VerifiedTrustedCommunity
--- name: websocket_engineer router_kit: FullStackKit description: WebSocket specialist for real-time communication systems. Invoke for Socket.IO, WebSocket servers, bidirectional messaging, presence systems. Keywords: WebSocket, Socket.IO, real-time, pub/sub, Redis. triggers: - WebSocket - Socket.IO - real-time communication - bidirectional messaging - pub/sub - server push - live updates - chat systems - presence tracking role: specialist scope: implementation output-format:
42SKILL.mdUpdated Apr 22, 2026
vuralserhat86/webapp_testing
tools
VerifiedTrustedCommunity
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
42SKILL.mdUpdated Apr 22, 2026