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/config-gc
tools
VerifiedTrustedCommunity
Garbage collection for your Claude Code configuration. Periodically scans ~/.claude (skills, memory, hooks, permissions, MCP servers, caches) for redundant, stale, orphaned, or low-value items, then walks the user through a confirm-each-deletion cleanup. Use when the user says "clean up my config", "config GC", "too many skills", "audit my setup", "my .claude is bloated", or asks for a periodic config review.
213,637SKILL.mdUpdated Jun 12, 2026
affaan-m/parallel-execution-optimizer
data-ai
VerifiedTrustedCommunity
当用户希望通过并行工作、并发 agents、批量工具调用、隔离 worktree 或多条独立验证通道来大幅加速任务、同时不损失正确性时使用。
213,637SKILL.mdUpdated Jun 12, 2026
affaan-m/ecc-guide
documentation
VerifiedTrustedCommunity
在回答之前先读取仓库的实时状态，引导用户了解 ECC 当前的 agents、skills、命令、hooks、规则、安装配置档案以及项目接入流程。
213,637SKILL.mdUpdated Jun 12, 2026
affaan-m/gateguard
testing
VerifiedTrustedCommunity
Fact-forcing gate that blocks Edit/Write/Bash (including MultiEdit) and demands concrete investigation (importers, data schemas, user instruction) before allowing the action. Measurably improves output quality by +2.25 points vs ungated agents.
213,637SKILL.mdUpdated Apr 15, 2026