vuralserhat86/skills/figma_integration
skills/figma_integration/SKILL.md
--- name: figma_integration router_kit: FullStackKit description: Figma design-to-code, design system extraction ve component generation rehberi. metadata: skillport: category: design tags: [architecture, automation, best practices, clean code, coding, collaboration, compliance, debugging, design patterns, development, documentation, efficiency, figma integration, git, optimization, productivity, programming, project management, quality assurance, refactoring, software engineering, sta
$ install --global
skillsauthnpx skillsauth add vuralserhat86/antigravity-agentic-skills skills/figma_integrationInstall 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:30 AM305.3s1 file scanned
SKILL.md
- name:
- figma_integration
- router_kit:
- FullStackKit
- description:
- Figma design-to-code, design system extraction ve component generation rehberi.
- category:
- design
- tags:
- [architecture, automation, best practices, clean code, coding, collaboration, compliance, debugging, design patterns, development, documentation, efficiency, figma integration, git, optimization, productivity, programming, project management, quality assurance, refactoring, software engineering, standards, testing, utilities, version control, workflow] - design-system
🎨 Figma Integration
Figma design-to-code workflow rehberi.
📋 Design Token Extraction
Figma Variables → CSS
:root {
/* Colors from Figma */
--color-primary: #3b82f6;
--color-secondary: #10b981;
/* Spacing from Figma */
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
/* Typography */
--font-size-sm: 14px;
--font-size-base: 16px;
}
🔧 Component Mapping
| Figma | React Component |
|-------|-----------------|
| Frame | <div> |
| Auto Layout | Flexbox |
| Component | React Component |
| Instance | Component usage |
| Text | <p>, <h1>, etc. |
📐 Layout Translation
Figma Auto Layout → CSS Flexbox
/* Horizontal, space-between, gap 16 */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 16px;
}
/* Vertical, start, gap 8 */
.stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
🎯 Best Practices
- Naming: Figma layer names = component names
- Variants: Figma variants = component props
- Tokens: Export design tokens as JSON
- Components: Start from atoms → molecules → organisms
Figma Integration v1.1 - Enhanced
🔄 Workflow
Kaynak: Figma for Developers
Aşama 1: Inspection
- [ ] Dev Mode: Figma Dev Mode'u aç ve CSS/iOS/Android kodunu incele.
- [ ] Assets: Görselleri SVG veya 2x/3x PNG olarak export et.
- [ ] Variables: Renk/Spacing token'larını
theme.tsveyatailwind.config'e ekle.
Aşama 2: component Build
- [ ] Structure: Frame yapısını
FlexveyaGridolarak koda dök. - [ ] Props: Varyantları (Primary/Secondary) component prop'u yap.
- [ ] Responsive: Auto Layout constraint'lerine göre responsive davranışı kodla.
Aşama 3: Verification
- [ ] Pixel Perfect: Overlay ile tasarım ve kodu üst üste kontrol et.
- [ ] States: Hover, Focus, Active, Disabled durumlarını atlama.
Kontrol Noktaları
| Aşama | Doğrulama | |-------|-----------| | 1 | Tüm renkler hardcoded hex yerine variable mı? | | 2 | Component Figma'daki gibi esniyor (resize) mu? | | 3 | Yazı tipleri ve satır aralıkları birebir aynı mı? |
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