vuralserhat86/skills/design_components
skills/design_components/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, u
$ install --global
skillsauthnpx skillsauth add vuralserhat86/antigravity-agentic-skills skills/design_componentsInstall 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 AM224.4s1 file scanned
SKILL.md
- name:
- design_components
- router_kit:
- FullStackKit
- description:
- Button, card, input ve icon sizing kuralları. Component boyutlandırma standartları.
- 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:
TailwindveyaCVA(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
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