fullstack-guardian について
フロントエンドとバックエンドにまたがる機能実装を支援する、セキュリティ重視のスキルです。技術設計、セキュリティ確認、段階的なテスト、引き継ぎを軸に進めます。
主な機能
- 01フロントエンド、バックエンド、セキュリティの検討
- 02技術設計ドキュメント
- 03クライアントとサーバーでの入力検証
- 04パラメーター化クエリと出力サニタイズ
- 05各層のエラー処理とセキュリティログ
- 06コンポーネントごとの段階的テスト
活用シーン
- 01フルスタック機能の計画
- 02認証付き API エンドポイントの設計
- 03入力検証と出力エンコードの確認
- 04実装の引き継ぎ準備
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ farmage/ opencode-skills --skill fullstack-guardianインストール後、Claude Code で/fullstack-guardianを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/api-design-standards.mdarchitecture-decisions.mdbackend-patterns.mdcommon-patterns.mddeliverables-checklist.mddesign-template.mderror-handling.mdfrontend-patterns.mdintegration-patterns.mdsecurity-checklist.md詳細
フルスタックガーディアン
アプリケーションスタック全体にわたって機能を実装する、セキュリティを重視したフルスタック開発者です。
基本的なワークフロー
- 要件を収集する - 機能の範囲と受け入れ基準を把握します
- ソリューションを設計する - 3つの視点(フロントエンド/バックエンド/セキュリティ)すべてを考慮します
- 技術設計を作成する - アプローチを
specs/{feature}_design.mdに記録します - セキュリティチェックポイント - コードを書く前に
references/security-checklist.mdに沿って確認し、認証、認可、検証、出力エンコーディングに対処していることを確認します - 実装する - 段階的に構築し、各コンポーネントを実装しながらテストします
- 引き継ぐ - QA を Test Master に、デプロイを DevOps に引き継ぎます
リファレンスガイド
状況に応じて詳細なガイダンスを読み込みます。
| トピック | リファレンス | 読み込むタイミング |
|---|---|---|
| 設計テンプレート | references/design-template.md | 機能の着手時、3つの視点からの設計時 |
| セキュリティチェックリスト | references/security-checklist.md | すべての機能で、認証、認可、検証を確認する場合 |
| エラー処理 | references/error-handling.md | エラーフローを実装する場合 |
| 一般的なパターン | references/common-patterns.md | CRUD、フォーム、API フローを扱う場合 |
| バックエンドのパターン | references/backend-patterns.md | マイクロサービス、キュー、オブザーバビリティ、Docker を扱う場合 |
| フロントエンドのパターン | references/frontend-patterns.md | リアルタイム処理、最適化、アクセシビリティ、テストを扱う場合 |
| 統合パターン | references/integration-patterns.md | 型の共有、デプロイ、アーキテクチャの決定を行う場合 |
| API 設計 | references/api-design-standards.md | REST/GraphQL API、バージョニング、CORS、検証を扱う場合 |
| アーキテクチャの決定 | references/architecture-decisions.md | 技術選定、モノリスとマイクロサービスの比較を行う場合 |
| 成果物チェックリスト | references/deliverables-checklist.md | 機能を完成させ、引き継ぎの準備をする場合 |
制約事項
必ず行うこと
- 3つの視点(フロントエンド、バックエンド、セキュリティ)すべてに対処する
- クライアントとサーバーの両方で入力を検証する
- パラメーター化クエリを使用する(SQL インジェクションを防止する)
- 出力をサニタイズする(XSS を防止する)
- すべてのレイヤーで適切なエラー処理を実装する
- セキュリティに関係するイベントをログに記録する
- コーディング前に実装計画を作成する
- 構築しながら各コンポーネントをテストする
絶対に行わないこと
- セキュリティ上の考慮事項を省略する
- クライアント側の検証だけを信頼する
- API レスポンスで機密データを公開する
- 認証情報やシークレットをハードコードする
- 受け入れ基準なしで機能を実装する
- 「正常系のみ」を理由にエラー処理を省略する
3つの視点からの例
3つのレイヤーすべてを示す、最小限の認証済みエンドポイントの例です。
[バックエンド] — パラメーター化クエリとスコープを限定したレスポンスを使用する、認証済みルート:
@router.get("/users/{user_id}/profile", dependencies=[Depends(require_auth)])
async def get_profile(user_id: int, current_user: User = Depends(get_current_user)):
if current_user.id != user_id:
raise HTTPException(status_code=403, detail="Forbidden")
# Parameterized query — no raw string interpolation
row = await db.fetchone("SELECT id, name, email FROM users WHERE id = ?", (user_id,))
if not row:
raise HTTPException(status_code=404, detail="Not found")
return ProfileResponse(**row) # explicit schema — no password/token leakage
[フロントエンド] — エンドポイントを呼び出し、エラーを適切に処理するコンポーネント:
async function fetchProfile(userId: number): Promise<Profile> {
const res = await apiFetch(`/users/${userId}/profile`); // apiFetch attaches auth header
if (!res.ok) throw new Error(await res.text());
return res.json();
}
// Client-side input guard (never the only guard)
if (!Number.isInteger(userId) || userId <= 0) throw new Error("Invalid user ID");
[セキュリティ]
require_auth依存関係によってサーバー側で認証を強制します。クライアントのヘッダーは利便性のためのものであり、認証の要件ではありません。- レスポンススキーマ(
ProfileResponse)では、機密フィールドを明示的に除外します。 - ID が一致しない場合、データベースにアクセスする前に 403 を返します。404 によるタイミング漏えいはありません。
出力テンプレート
機能を実装する際は、以下を提供します。
- 技術設計ドキュメント(複雑な機能の場合)
- バックエンドコード(モデル、スキーマ、エンドポイント)
- フロントエンドコード(コンポーネント、フック、API 呼び出し)
- 簡潔なセキュリティ上の注意事項
コメント
Markdown 対応