k2works/analyzing-ui-design
.claude/skills/analyzing-ui-design/SKILL.md
PlantUML を使用した画面遷移図・画面イメージ（salt 図）の作成と UI 設計を支援。「画面設計をしたい」「画面遷移図を作りたい」「UI を設計したい」「ワイヤーフレームを作りたい」「画面一覧を整理したい」といった場面で発動する。UI を先に設計することで、フロントエンド実装時の「画面が決まっていない」手戻りを防ぐ。
data-ai
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add k2works/getting-started-algorithm analyzing-ui-designInstall 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 30, 2026, 1:26 AM5.0s1 file scanned
SKILL.md
- name:
- analyzing-ui-design
- description:
- PlantUML を使用した画面遷移図・画面イメージ（salt 図）の作成と UI 設計を支援。「画面設計をしたい」「画面遷移図を作りたい」「UI を設計したい」「ワイヤーフレームを作りたい」「画面一覧を整理したい」といった場面で発動する。UI を先に設計することで、フロントエンド実装時の「画面が決まっていない」手戻りを防ぐ。
UI 設計
PlantUML のステートチャート図（画面遷移）と salt 図（画面イメージ）を使用して UI を設計する。
UI 設計はユーザーとシステムの接点を定義する活動。ユースケースが「何ができるか」を定義するのに対し、UI 設計は「どのように操作するか」を定義する。画面遷移と画面レイアウトを先に決めることで、フロントエンド実装の方向性が確定する。
参照ドキュメントとテンプレート
| 種類 | パス | 備考 |
|------|------|------|
| ガイド | @docs/reference/UI設計ガイド.md | UI 設計の進め方詳細 |
| テンプレート | @docs/template/設計.md | 編集禁止。コピーして使用する |
| 入力 | @docs/requirements/requirements_definition.md | 要件定義 |
| 入力 | @docs/requirements/business_usecase.md | ビジネスユースケース |
| 入力 | @docs/requirements/system_usecase.md | システムユースケース |
| 入力 | @docs/requirements/user_story.md | ユーザーストーリー |
| 入力 | @docs/design/architecture_backend.md | バックエンドアーキテクチャ |
| 入力 | @docs/design/architecture_frontend.md | フロントエンドアーキテクチャ |
| 成果物 | docs/design/ui_design.md | UI 設計 |
画面一覧作成
ユースケースから必要な画面を網羅的に識別する。画面の漏れはフロントエンド実装の後半で発覚しやすいため、この段階で徹底的に洗い出せ。
- ユースケースからの画面識別: 各ユースケースのアクターが操作する画面を列挙する
- 画面の目的と機能の定義: 各画面で「何を見る」「何を操作する」を明確にする
画面遷移図作成
PlantUML のステートチャート図を使用して画面間の遷移を定義する。遷移条件（ボタンクリック、バリデーション成功等）を必ず明記せよ。
画面イメージ作成
PlantUML の salt 図を使用して画面レイアウトを定義する。入力項目・ボタン・表示項目の配置を決定する。ピクセル単位の精度は不要だが、情報の優先順位とグルーピングを正確に表現せよ。
インタラクション設計
ユーザー操作フローとシステムのフィードバックを定義する。エラー時のユーザー体験は正常時以上に重要。
- ユーザー操作フローの定義: 主要な操作シナリオをステップバイステップで記述する
- エラー処理・フィードバックの設計: バリデーションエラー、通信エラー、タイムアウト時の表示と回復方法を定義する
作成の進め方
- 入力ドキュメント（ユーザーストーリー、フロントエンドアーキテクチャ）を確認する
- @docs/reference/UI設計ガイド.md を読み込む
- 画面一覧→画面遷移図→画面イメージ→インタラクション設計の順に作成する
docs/design/ui_design.mdとして出力する
途中から再開する場合
既存の docs/design/ui_design.md がある場合は、まずその内容を確認する。不足している画面や更新が必要な遷移のみを修正する。
Example:
ユーザー: 「画面一覧は作った。画面遷移図を作りたい」
回答: 既存の ui_design.md の画面一覧を確認し、
各画面間の遷移を PlantUML ステートチャート図で定義する。
遷移条件（ボタン操作・バリデーション結果）を明記する。
注意事項
- 要件定義とユースケースが完了していることが前提。未完了でも進めて構わない
- 画面遷移には PlantUML のステートチャート図、画面イメージには PlantUML の salt 図を使用する
- ユーザビリティを考慮し、一貫性のある UI を設計する。操作パターンの統一が使いやすさの基本
- タスク項目（リスト）の前には空行を入れる（Markdown Lint 準拠）
関連スキル
orchestrating-analysis— 分析フェーズ全体のワークフロー案内analyzing-usecases— 入力となるユースケース・ユーザーストーリーanalyzing-architecture— フロントエンドアーキテクチャとの整合性developing-frontend— 後続のフロントエンド TDD 実装
Related Skills
k2works/validating-iteration-plan
tools
VerifiedTrustedCommunity
イテレーション計画と上流設計ドキュメント群（ユーザーストーリー、ドメインモデル、データモデル、UI 設計）との整合性を検証する。「イテレーション計画を検証したい」「計画の整合性をチェックして」「イテレーション計画を作成した」「計画と設計ドキュメントの不整合を確認したい」といった場面で発動する。planning-releases でイテレーション計画を作成した直後にも積極的に使用すること。計画作成後に必ず本検証を実施することで、開発着手前にドキュメント間の不整合を検知・修正できる。
SKILL.mdUpdated Apr 16, 2026
k2works/tracking-progress
tools
VerifiedTrustedCommunity
プロジェクトの開発進捗を多角的に分析しレポートを生成。イテレーション達成度、技術実装状況、品質メトリクスを確認し、計画ドキュメントを自動更新する。「進捗を確認したい」「プロジェクトの状態を知りたい」「イテレーションの達成度を分析したい」「進捗ドキュメントを更新したい」といった場面で発動する。定期的な進捗可視化により、遅延や品質低下を早期に発見しプロジェクトの透明性を確保する。
SKILL.mdUpdated Apr 16, 2026
k2works/syncing-github-project
testing
VerifiedTrustedCommunity
リリース計画を GitHub Project・Issue・Milestone に反映し一元管理。初回の一括同期から差異検出・自動同期まで対応する。「GitHub Project に同期したい」「Issue を作成したい」「計画と GitHub の差異を確認したい」「Milestone を設定したい」といった場面で発動する。計画ドキュメントを Single Source of Truth とし GitHub に自動反映することで、二重管理の手間と不整合を排除する。
SKILL.mdUpdated Apr 16, 2026
k2works/practicing-getting-start-tdd
development
VerifiedTrustedCommunity
テスト駆動開発から始めるプログラミング入門」の対話式チュートリアル。FizzBuzz を題材に TDD の Red-Green-Refactor サイクルを 14 言語で体験する。「TDD を練習したい」「FizzBuzz で TDD を学びたい」「テスト駆動開発の入門をしたい」「Java で TDD を体験したい」「Python で TDD を始めたい」「プログラミング入門チュートリアルをやりたい」「getting-start-tdd をやりたい」「TDD のハンズオンがしたい」「Red-Green-Refactor を体験したい」といった場面で発動する。TDD チュートリアルやプログラミング入門の要望があれば積極的に使用すること。
SKILL.mdUpdated Apr 16, 2026