takoyan33/pj-make-plan-doc
.agents/skills/pj-make-plan-doc/SKILL.md
設計書と画面仕様書とMermaidを作成する
$ install --global
skillsauthnpx skillsauth add takoyan33/nextjs-portfolio pj-make-plan-docInstall 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 16, 2026, 1:23 PM5.2s3 files scanned
SKILL.md
- name:
- pj-make-plan-doc
- description:
- 設計書と画面仕様書とMermaidを作成する
pj-make-plan-doc
このファイルは手順・原則のみ。詳細・コード例は reference.md に書く。
- ページの解析
- pj-make-plan-doc
パス名で指定されたパスを確認する - ページ内容を確認する
- 設計書の作成
- assets/DRAFT-DOC.md のフォーマットで設計書を作成
- docs/frontend/ に配置する
- assets/DRAFT-MERMAID.md のフォーマットでMermaidを作成
- docs/frontend/mermaid/ に配置する
- Draw.ioの画面設計図を作成
- 実際に画面を起動して確認 (yarn dev:mock)
- コードも確認し、画面図に詳細に記載する
- 左側に画面図と右側に画面要素の説明を日本語で記載する
- テーブル形式で記載し、No1, No2 と書く
- 条件分岐があればその説明を行う
- metaタグなどの情報も記載する
- pc版とsp版の両方を作成する
- pc版だとdocs/frontend/drawio/pc/
[page-name].drawioに配置する - sp版だとdocs/frontend/drawio/sp/
[page-name].drawioに配置する
- pc版だとdocs/frontend/drawio/pc/
Related Skills
takoyan33/vercel-react-best-practices
development
VerifiedTrustedCommunity
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
1SKILL.mdUpdated Apr 16, 2026
takoyan33/web-design-guidelines
development
VerifiedTrustedCommunity
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
1SKILL.mdUpdated Apr 16, 2026
takoyan33/vercel-react-best-practices
development
VerifiedTrustedCommunity
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
1SKILL.mdUpdated Apr 16, 2026
takoyan33/pj-check
testing
VerifiedTrustedCommunity
コードレビューのコマンド
1SKILL.mdUpdated Apr 16, 2026