design_patterns
Visual hierarchy, z-index, shadows, animations ve white space kuralları.
>_
Quick Installnpxskills add vuralserhat86/antigravity-agentic-skills--skill design_patternsInstructions
Loading…
Visual hierarchy, z-index, shadows, animations ve white space kuralları.
npxskills add vuralserhat86/antigravity-agentic-skills--skill design_patternsLoading…
Visual hierarchy, layering ve animation kuralları.
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 - Behind content
0 - Base layer
10 - Dropdown menus
20 - Sticky headers
30 - Modal backdrop
40 - Modal content
50 - Tooltips
100 - Toast notifications
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)
75ms - Instant (very subtle)
150ms - Fast (hover states)
200ms - Normal (default)
300ms - Moderate (dropdown, modal)
500ms - Slow (page transitions)
| Easing | Kullanım |
|---|---|
| ease-out | En yaygın (hover, click) |
| ease-in-out | Modal, dropdown |
| ease-in | Çıkış animasyonları |
| Tip | Spacing |
|---|---|
| Tight | 8-12px (data tables) |
| Normal | 16-24px (default) |
| Relaxed | 32-48px (marketing) |
| Spacious | 64px+ (premium) |
:focus-visible {
outline: 2px solid var(--primary-500);
outline-offset: 2px;
}
design-tokens - Spacing, typographydesign-responsive - Breakpoints, fluidDesign Patterns v1.1 - Enhanced
Kaynak: Refactoring UI (Visual Hierarchy)
8px grid sistemine göre yerleştir.shadow ve z-index ile ayır.| 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? |
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).