vuralserhat86/skills/design_patterns
skills/design_patterns/SKILL.md
--- name: design_patterns router_kit: FullStackKit description: Visual hierarchy, z-index, shadows, animations ve white space kuralları. metadata: skillport: category: design tags: [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, design patterns, frameworks, frontend, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web devel
$ install --global
skillsauthnpx skillsauth add vuralserhat86/antigravity-agentic-skills skills/design_patternsInstall 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:25 AM231.8s1 file scanned
SKILL.md
- name:
- design_patterns
- router_kit:
- FullStackKit
- description:
- Visual hierarchy, z-index, shadows, animations ve white space kuralları.
- category:
- design
- tags:
- [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, design patterns, frameworks, frontend, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development] - design-components
🎭 Design Patterns
Visual hierarchy, layering ve animation kuralları.
⚠️ Bu Skill vs arch-patterns
| Bu Skill | arch-patterns |
|----------|-----------------|
| UI/UX tasarım | Sistem mimarisi |
| Z-index, shadows | Microservices, CQRS |
| Animation, spacing | Database seçimi |
Kural: UI tasarımı → bu skill, Sistem tasarımı →
arch-patterns
📊 1. Visual Hierarchy
Z-Index Scale
-1 - Behind content
0 - Base layer
10 - Dropdown menus
20 - Sticky headers
30 - Modal backdrop
40 - Modal content
50 - Tooltips
100 - Toast notifications
Shadows (Elevation)
shadow-xs: 0 1px 2px rgba(0,0,0,0.05)
shadow-sm: 0 1px 3px rgba(0,0,0,0.1)
shadow-md: 0 4px 6px rgba(0,0,0,0.1)
shadow-lg: 0 10px 15px rgba(0,0,0,0.1)
shadow-xl: 0 20px 25px rgba(0,0,0,0.15)
⚡ 2. Animation & Transitions
Duration Scale
75ms - Instant (very subtle)
150ms - Fast (hover states)
200ms - Normal (default)
300ms - Moderate (dropdown, modal)
500ms - Slow (page transitions)
Easing Functions
| Easing | Kullanım | |--------|----------| | ease-out | En yaygın (hover, click) | | ease-in-out | Modal, dropdown | | ease-in | Çıkış animasyonları |
📐 3. White Space Rules
Content Density
| Tip | Spacing | |-----|---------| | Tight | 8-12px (data tables) | | Normal | 16-24px (default) | | Relaxed | 32-48px (marketing) | | Spacious | 64px+ (premium) |
Reading Width
- Optimal: 60-75 karakter (600-750px)
- Maximum: 90 karakter
- Minimum: 45 karakter
🔍 4. Focus States
:focus-visible {
outline: 2px solid var(--primary-500);
outline-offset: 2px;
}
🔗 İlgili Skill'ler
design-tokens- Spacing, typographydesign-responsive- Breakpoints, fluid
Design Patterns v1.1 - Enhanced
🔄 Workflow
Kaynak: Refactoring UI (Visual Hierarchy)
Aşama 1: Foundation (Hierarchy)
- [ ] Spacing: Elemanları
8pxgrid sistemine göre yerleştir. - [ ] Typography: Başlık/Gövde oranını (Scale) belirle.
- [ ] Contrast: En önemli öğeyi (Primary Button) en yüksek kontrasta koy.
Aşama 2: Interaction (Feedback)
- [ ] States: Hover, Focus, Active, Disabled durumlarını tasarla.
- [ ] Motion: 200ms default transition ile mikro-animasyon ekle.
- [ ] Elevation: Katmanları
shadowvez-indexile ayır.
Aşama 3: Validation
- [ ] A11y: Renk kontrast oranları AA standardında mı?
- [ ] Responsiveness: Mobilde touch target'lar >44px mi?
- [ ] Consistency: Tüm butonlar aynı radius/padding değerine sahip mi?
Kontrol Noktaları
| Aşama | Doğrulama | |-------|-----------| | 1 | Sayfada nereye bakılacağı (Focal Point) net mi? | | 2 | Focus ring klavye ile gezinirken görünüyor mu? | | 3 | Animasyonlar performansı (FPS) düşürüyor mu? |
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