design_components

by @vuralserhat86 in Tools

# Install this skill:

npx skills add vuralserhat86/antigravity-agentic-skills --skill "design_components"

Install specific skill from multi-skill repository

# Description

Button, card, input ve icon sizing kuralları. Component boyutlandırma standartları.

# SKILL.md

name: design_components
router_kit: FullStackKit
description: Button, card, input ve icon sizing kuralları. Component boyutlandırma standartları.
metadata:
skillport:
category: design
tags: [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, design components, frameworks, frontend, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development] - design-patterns

🧩 Design Components

Component boyutlandırma standartları.

🔘 1. Button Sizes

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

Button States

State	Stil
Default	Base
Hover	Lighten/Darken 10%, Scale 1.02
Active	Scale 0.98
Focus	Ring outline
Disabled	Opacity 50%

📦 2. Card Sizing

Padding

Tip	Padding
Compact	16px
Default	24px
Spacious	32px

Shadow (Elevation)

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)

📝 3. Input Fields

Height:  40px (default), 48px (large)
Padding: 12px / 16px (V/H)
Border:  1px solid
Radius:  4px veya 8px

Input States

State	Stil
Default	Border: neutral-300
Focus	Border: primary-500, Ring
Error	Border: error-500
Disabled	Background: neutral-100

🎯 4. Icon Sizes

16px - Inline with text
20px - Buttons
24px - Standalone
32px - Feature highlights
48px - Hero sections

Icon + Text Spacing

Icon ve text arası: 8px

📋 5. Form Layout

Label-Input gap:     8px
Input-Input gap:     16px veya 24px
Form section gap:    32px
Submit button margin: 24px top

🔄 Workflow

Kaynak: Atomic Design Methodology & Shadcn UI Component Standards

Aşama 1: Component Definition & Atomic Audit

[ ] Inventory: Mevcut arayüzdeki tekrarlayan elementleri (Button, Input) tespit et ve Atom'lara ayır.
[ ] State Mapping: Her komponentin tüm state'lerini (Default, Hover, Active, Disabled, Loading) tanımla.
[ ] Accessibility (A11y): Aria-label ve role tanımlarının doğruluğunu denetle.

Aşama 2: Sizing & Variants Setup

[ ] Base Unit Alignment: Tüm boyutların 8-point grid (Design Tokens) sistemine uygunluğunu doğrula.
[ ] Variant Creation: Tailwind veya CVA (Class Variance Authority) kullanarak variant yapılarını kur.
[ ] Visual Consistency: Padding ve gap değerlerinin hiyerarşiye uygunluğunu kontrol et.

Aşama 3: Testing & Documentation

[ ] Visual Testing: Komponentin farklı tarayıcılarda ve viewports'larda görsel bütünlüğünü test et (Storybook).
[ ] Unit Testing: Etkileşimli komponentler (Dropdown, Modal) için logic testleri yaz.
[ ] Handoff: Tasarımın geliştiriciye aktarımı için dokümantasyonu (Design-to-Code) güncelle.

Kontrol Noktaları

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

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.