Plan, design, and implement A/B tests and experiments with statistical rigor. Covers hypothesis frameworks, sample sizing, metrics, and result analysis.
日本語の概要は準備中です。原文の説明を表示しています。
SebastianLuser/claude-code-arcane32026年10月27日 更新
無料GitHub で公開
figma-tokens
Extract Figma design tokens and generate consumable formats: CSS variables, Tailwind config, JSON, Style Dictionary, Swift, Flutter.
日本語の概要は準備中です。原文の説明を表示しています。
SebastianLuser/claude-code-arcaneスター 3(GitHub 3 + cccskills 0)
連携ツールFigma
実行スコア 未検証
インストール方法を見る含まれるファイル（1）
- SKILL.md2.4 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Figma Tokens → Code
Extrae tokens desde Figma y los convierte a formatos usables por el stack.
Fuentes en Figma
| Fuente | API | Notas |
|---|---|---|
| Variables (moderna, preferida) | GET /v1/files/$KEY/variables/local | Primitives, aliases, modes (light/dark) |
| Styles (legacy) | GET /v1/files/$KEY/styles | Color, text, effect styles |
Token Categories
| Category | Structure |
|---|---|
| Colors | Nested by scale: color.primary.500: "#3B82F6" |
| Typography | Composite: fontFamily, fontWeight, fontSize, lineHeight, letterSpacing |
| Spacing | Scale: 1: 4px, 2: 8px, 3: 12px, 4: 16px, 6: 24px, 8: 32px |
| Border radius | sm: 4px, md: 8px, lg: 12px, full: 9999px |
| Shadows | CSS shadow strings: 0 4px 6px rgba(0,0,0,0.1) |
Output Formats
| Format | Target | Naming |
|---|---|---|
| CSS Variables | :root { --color-primary-500: ... } + [data-theme="dark"] | kebab-case |
| Tailwind Config | theme.extend.colors/spacing/borderRadius/boxShadow | nested dot |
| Style Dictionary | Multi-platform (iOS Swift, Android XML, Web CSS) | per-platform |
| SwiftUI | extension Color { static let primary500 = ... } | camelCase |
| Flutter (Dart) | class AppColors { static const primary500 = Color(0xFF...) } | camelCase |
Comando
/figma-tokens <figma_url> [--output css|tailwind|json|style-dictionary|swift|flutter]
Flujo: pedir formato (default: Tailwind web, JSON multi-platform) → extraer variables → categorizar → generar output → preguntar ubicación (Next.js→tailwind.config.ts, Vue→src/styles/tokens.css, Swift→Sources/DesignSystem/Tokens.swift, Flutter→lib/design/tokens.dart).
Naming Conventions
Figma Primary/500 → primary-500. Convertir: CSS kebab-case (--color-primary-500), Tailwind nested (primary.500), Swift camelCase (primary500).
Reglas
- Preservar modes (light/dark) si existen en Figma
- Aliases semánticos > primitives: exportar ambos, priorizar aliases en uso
- Validar coherencia: alias sin valor → flaggear
- Versionar tokens: git commit cada regeneración
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
コメント
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
同じリポジトリのスキル
Web/mobile accessibility decision guide: WCAG 2.2 AA, ARIA, keyboard nav, focus management, contrast, testing. Use for: a11y, accessibility, wcag, aria, screen reader, keyboard, contrast.
日本語の概要は準備中です。原文の説明を表示しています。
SebastianLuser/claude-code-arcane32026年10月27日 更新
Generate, iterate, and scale ad creative for paid advertising across Google, Meta, LinkedIn, and X. Covers platform specs, creative frameworks, and quality validation.
日本語の概要は準備中です。原文の説明を表示しています。
SebastianLuser/claude-code-arcane32026年10月27日 更新
Musica interactiva para juegos: layering vertical, re-secuenciacion horizontal, stingers, reglas de transicion con sync points, y mapeo de estados de gameplay a musica. Usar para: musica adaptativa, sistema de musica dinamica, transiciones musicales, combat music.
日本語の概要は準備中です。原文の説明を表示しています。
SebastianLuser/claude-code-arcane32026年10月27日 更新
Design multi-agent systems, create agent architectures, define communication patterns, and build autonomous agent workflows with structured evaluation frameworks.
日本語の概要は準備中です。原文の説明を表示しています。
SebastianLuser/claude-code-arcane32026年10月27日 更新
Inter-agent communication protocol for C-suite agent teams. Defines invocation syntax, loop prevention, isolation rules, response formats, and quality loops.
日本語の概要は準備中です。原文の説明を表示しています。
SebastianLuser/claude-code-arcane32026年10月27日 更新