design_components
Button, card, input ve icon sizing kuralları. Component boyutlandırma standartları.
>_
Quick Installnpxskills add vuralserhat86/antigravity-agentic-skills--skill design_componentsInstructions
Loading…
Button, card, input ve icon sizing kuralları. Component boyutlandırma standartları.
npxskills add vuralserhat86/antigravity-agentic-skills--skill design_componentsLoading…
Component boyutlandırma standartları.
Small: H:32px, P:8px/16px, Font:14px
Medium: H:40px, P:12px/24px, Font:16px (Default)
Large: H:48px, P:14px/32px, Font:18px
XLarge: H:56px, P:16px/40px, Font:20px
| State | Stil |
|---|---|
| Default | Base |
| Hover | Lighten/Darken 10%, Scale 1.02 |
| Active | Scale 0.98 |
| Focus | Ring outline |
| Disabled | Opacity 50% |
| Tip | Padding |
|---|---|
| Compact | 16px |
| Default | 24px |
| Spacious | 32px |
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.1)
Height: 40px (default), 48px (large)
Padding: 12px / 16px (V/H)
Border: 1px solid
Radius: 4px veya 8px
| State | Stil |
|---|---|
| Default | Border: neutral-300 |
| Focus | Border: primary-500, Ring |
| Error | Border: error-500 |
| Disabled | Background: neutral-100 |
16px - Inline with text
20px - Buttons
24px - Standalone
32px - Feature highlights
48px - Hero sections
Label-Input gap: 8px
Input-Input gap: 16px veya 24px
Form section gap: 32px
Submit button margin: 24px top
Kaynak: Atomic Design Methodology & Shadcn UI Component Standards
Tailwind veya CVA (Class Variance Authority) kullanarak variant yapılarını kur.| Aşama | Doğrulama |
|---|---|
| 1 | Komponent tek bir sorumluluğa (Single Responsibility) sahip mi? |
| 2 | Tüm variant'lar merkezi bir tokens dosyasından mı besleniyor? |
| 3 | Screen reader testleri başarılı mı? |
Design Components v1.5 - With Workflow
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).