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/ito-compute
tools
VerifiedTrustedCommunity
Query live GPU inventory, submit an authenticated Itô fixed-rate RFQ, inspect RFQ or procurement status, revoke device credentials, 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, validate GPU nodes, revoke Itô access, or rent or purchase GPU compute and needs the supported boundary explained.
247,258SKILL.mdUpdated Jul 24, 2026
affaan-m/social-publisher
testing
VerifiedTrustedCommunity
Agent-driven scheduling and publishing of social media posts across 13 platforms via SocialClaw. Use when the user wants to publish to X, LinkedIn, Instagram, Facebook Pages, TikTok, Discord, Telegram, YouTube, Reddit, WordPress, or Pinterest — or when managing campaigns, uploading media, or monitoring post delivery status.
247,258SKILL.mdUpdated May 26, 2026
affaan-m/cost-aware-llm-pipeline
development
VerifiedTrustedCommunity
LLM APIの使用量のコスト最適化パターン — タスクの複雑さによるモデルルーティング、予算追跡、リトライロジック、プロンプトキャッシング。
247,258SKILL.mdUpdated May 18, 2026
affaan-m/jira-integration
tools
VerifiedTrustedCommunity
Use this skill when retrieving Jira tickets, analyzing requirements, updating ticket status, adding comments, or transitioning issues. Provides Jira API patterns via MCP or direct REST calls.
247,258SKILL.mdUpdated Apr 10, 2026