vuralserhat86/skills/design_tokens
skills/design_tokens/SKILL.md
--- name: design_tokens router_kit: FullStackKit description: 8-point grid spacing, typography scale ve color system. Temel tasarım değişkenleri. metadata: skillport: category: design tags: [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, design tokens, frameworks, frontend, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, we
$ install --global
skillsauthnpx skillsauth add vuralserhat86/antigravity-agentic-skills skills/design_tokensInstall 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:23 AM125.4s1 file scanned
SKILL.md
- name:
- design_tokens
- router_kit:
- FullStackKit
- description:
- 8-point grid spacing, typography scale ve color system. Temel tasarım değişkenleri.
- category:
- design
- tags:
- [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, design tokens, frameworks, frontend, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development] - design-responsive
🎨 Design Tokens
Temel tasarım değişkenleri: spacing, typography, colors.
📐 1. Spacing System (8-Point Grid)
Temel Kural
Tüm boşluklar 8'in katları olmalı.
4px - Minimum (micro)
8px - XS
16px - SM (icon-text arası)
24px - MD (card içi)
32px - LG (component'ler arası)
48px - XL (section içi gruplar)
64px - 2XL (section'lar arası)
96px - 3XL (major section'lar)
128px - 4XL (hero padding)
Padding Yapısı
| Element | Padding | |---------|---------| | Card/Container | 24px veya 32px | | Button | 12px / 24px (V/H) | | Input | 12px / 16px (V/H) | | Section (Desktop) | 64px - 96px | | Section (Mobile) | 32px - 48px |
🔤 2. Typography Scale
Font Sizes
12px - Caption / Helper
14px - Small / Metadata
16px - Body (Base)
20px - Lead paragraph
24px - H4
32px - H3
40px - H2
48px - H1
64px - Hero
Line Height
| Tip | Oran | |-----|------| | Başlıklar (H1-H3) | 1.2 - 1.3 | | Body text | 1.5 - 1.6 | | Small text | 1.4 | | Hero text | 1.1 |
Font Weight
400 - Regular (Body)
500 - Medium (Subtle emphasis)
600 - Semibold (Subheadings, buttons)
700 - Bold (Headings)
800 - Extra bold (Hero)
🎨 3. Color System
Contrast Ratios (WCAG)
| Tip | Minimum | |-----|---------| | Normal text | 4.5:1 | | Large text (18px+) | 3:1 | | UI components | 3:1 | | AAA ideal | 7:1 |
Palet Yapısı
Primary: 50, 100, 200...900, 950 (10 shade)
Secondary: 10 shades
Neutral: 10 shades
Success/Warning/Error/Info: 5 shades
Opacity Scale
100% - Default
75% - Disabled
60% - Placeholder
40% - Dividers
20% - Subtle backgrounds
10% - Hover overlays
📦 4. Border Radius
0px - Sharp
4px - Small (buttons)
8px - Medium (cards) ← Default
16px - Large (feature cards)
9999px - Full (pills, avatars)
🔄 Workflow
Kaynak: W3C Design Tokens Format & Style Dictionary Best Practices
Aşama 1: Audit & Token Hierarchy
- [ ] Color/Type Audit: Marka renklerini ve tipografi ölçeğini (Scale) standartlaştır.
- [ ] Classification: Tokenlar'ı 3 seviyeye ayır: Primitive (Global), Semantic (Purpose) ve Component-specific.
- [ ] Naming Convention:
category-type-item-state(örn:action-primary-hover) formatını uygula.
Aşama 2: Definition & Tooling
- [ ] JSON Definition: Token'ları merkezi bir JSON dosyasında tanımla.
- [ ] Multi-Platform Export:
Style Dictionarykullanarak tokens'ları CSS, JS ve Swift/Kotlin formatlarına dönüştür. - [ ] Theme Variation: Dark/Light mode için semantik eşlemeleri yap.
Aşama 3: Consumption & Maintenance
- [ ] Implementation: Kod içerisinde hardcoded değerleri token değişkenleriyle değiştir.
- [ ] Version Control: Token değişikliklerini merkezi tasarım kütüphanesi üzerinden takip et.
- [ ] Governance: Yeni eklenen renk veya boşluk değerlerinin sisteme uygunluğunu denetle.
Kontrol Noktaları
| Aşama | Doğrulama | |-------|-----------| | 1 | Tüm renkler WCAG erişilebilirlik (Contrast) testinden geçti mi? | | 2 | Token isimleri geliştirici ve tasarımcı için aynı anlamı taşıyor mu? | | 3 | Token değişikliği tüm platformlarda otomatik güncelleniyor mu? |
Design Tokens 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