affaan-m/design-system
docs/ja-JP/skills/design-system/SKILL.md
アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
$ install --global
skillsauthnpx skillsauth add affaan-m/everything-claude-code design-systemInstall 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: May 18, 2026, 4:10 AM172.8s1 file scanned
SKILL.md
- name:
- design-system
- description:
- アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
- origin:
- ECC
デザイン システム
スケーラブルで保守可能なデザインシステムの構築。
使用時期
- デザインシステムを初期化
- コンポーネントライブラリを拡張
- デザインと実装の間の同期を保つ
- アクセシビリティ標準を強制
- テーマング実装
コア要素
1. デザイントークン
色、タイポグラフィ、スペーシング、シャドウの中央コレクション。
2. コンポーネント
ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。
3. レイアウトパターン
ページレイアウト、フォーム、グリッド。
4. アイコン
SVGベースのアイコンライブラリ。
ツール
- Figma 設計ツール
- Storybook コンポーネント展示
- Chromatic ビジュアルテスト
- Design tokens JSON管理
チェックリスト
- [ ] トークン定義（色、スペーシング、タイプ）
- [ ] 基本コンポーネント実装
- [ ] Storybook設定
- [ ] アクセシビリティテスト
- [ ] ドキュメント作成
- [ ] チーム採用
詳細については、ドキュメントを参照してください。
Related Skills
affaan-m/unified-memory
development
VerifiedTrustedCommunity
Share durable, inspectable context and handoffs between Claude, Codex, Hermes, Cursor, OpenCode, and other agents through the local ECC Memory Vault. Use when an agent must save work state, transfer context, resume another agent's task, or search shared project knowledge.
234,238SKILL.mdUpdated Jul 28, 2026
affaan-m/contract-first
development
VerifiedTrustedCommunity
Use when multiple consumers and providers must evolve an API or event schema without field drift, integration surprises, or one side silently redefining the interface.
234,238SKILL.mdUpdated Jul 28, 2026
affaan-m/ito-compute
tools
VerifiedTrustedCommunity
Query live GPU inventory, submit an authenticated Itô fixed-rate RFQ, inspect RFQ or procurement status, and run explicitly gated node qualification through the separately installed canonical CLI. Use when a user asks to find H100/H200 capacity, request a fixed compute rate, check Itô compute status, or validate GPU nodes.
234,238SKILL.mdUpdated Jul 24, 2026
affaan-m/continuous-learning-v2
data-ai
VerifiedTrustedCommunity
Instinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents. v2.1 adds project-scoped instincts to prevent cross-project contamination.
234,238SKILL.mdUpdated Mar 27, 2026