mcpField
W
web-application-developer

web-application-developer

github.com/rade-nugroho開発1237 回インストール23 週間前に更新
リポジトリ

web-application-developer について

ブラウザー向けアプリの開発と、API、認証、セキュリティ、リリース確認を扱うスキルです。SSR、SPA、ハイブリッド構成を対象とし、ネイティブモバイルやデスクトップクライアントは対象外です。

主な機能

  1. 01SSR、SPA、ハイブリッドアプリの構成
  2. 02HTTP API連携とエラー処理
  3. 03ブラウザー認証とセッション設計
  4. 04フォーム、アップロード、入力検証
  5. 05CORS、CSRF、CSPのセキュリティ確認
  6. 06ユニット、統合、エンドツーエンドテスト

活用シーン

  1. 01Webアプリのルートとレンダリング方式の設計
  2. 02ブラウザーUIとHTTP APIの接続
  3. 03ログイン、セッション、トークン処理の実装
  4. 04Webセキュリティと重要なユーザーフローの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rade-nugroho/agentic-enteprises-skill --skill web-application-developer

インストール後、Claude Code で/web-application-developerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
api_integration.md
auth_sessions.md
web_app_architecture.md
web_security.md

詳細

Web アプリケーション開発者

使用する場面

  • ブラウザベースの Web アプリケーション（ネイティブモバイルではない）を構築または拡張する場合
  • Web のコンテキストで認証フロー、セッション、トークン処理を実装する場合
  • 適切なエラー処理と読み込み処理を行いながら、UI を HTTP API に接続する場合
  • ブラウザとサーバー間の CORS、Cookie、CSRF、キャッシュの挙動に対処する場合
  • SSR、SPA、またはハイブリッド（例：Next.js）のルーティングとデータ読み込みを実装する場合

使用しない場面

  • ネイティブ iOS／Android またはデスクトップ専用クライアント → スタック固有のモバイル／デスクトップ向けガイダンス
  • インフラやパイプラインのみ → devops、infrastructure-engineer
  • UX の調査とワイヤーフレームのみ → product-designer
  • 組織全体のセキュリティプログラム → cybersecurity
  • サービス横断のシニア向け RFC → senior-software-engineer

関連スキル

必要なことスキル
フルスタックの IC 機能（一般）fullstack-software-engineer
シニア向けフルスタック開発senior-fullstack-developer
フロントエンドアーキテクチャのみsenior-frontend-software-engineer
デザイン仕様に基づく UI 画面ui-software-engineer
UX 仕様とフローproduct-designer
パイプラインとホスティングdevops
パイプラインのセキュリティスキャンdevsecops

主なワークフロー

1. Web アプリの構成

レンダリングモデルを明示的に選択します。

モデル使用する場面
SSR／ハイブリッドSEO、初回描画の高速化、認証済みダッシュボード
SPAクライアント側のインタラクションが多いアプリ、ログイン後に利用するアプリ
静的サイト＋APIマーケティングサイトと別のアプリ用サブドメイン

ルート、認証ゲート、グローバルレイアウト、エラーバウンダリーを文書化します。

ルーティングと環境変数のパターンについては、references/web_app_architecture.md を参照してください。

2. HTTP API の統合
  • 型付きクライアントまたは OpenAPI から生成した型を使用します
  • 401 の場合はトークンを更新するか、ログイン画面にリダイレクトします
  • タイムアウトと再試行は、冪等な GET リクエストに限って行います
  • リストのエンドポイントはページネーションを行い、ブラウザで上限のないデータを読み込まないようにします

クライアントのパターンについては、references/api_integration.md を参照してください。

3. ブラウザでの認証
  • セッション Cookie には HttpOnly、Secure、SameSite 属性の使用を推奨します
  • または、有効期間の短いアクセストークンをメモリに保存し、リフレッシュトークンをローテーションします
  • リスクの高いアプリでは、シークレットを localStorage に保存しないでください
  • Cookie を使用する場合は、状態を変更するルートを CSRF トークンで保護します

フロー図については、references/auth_sessions.md を参照してください。

4. フォームとアップロード
  • UX のためにクライアント側で検証し、サーバー側でも必ず検証します
  • ファイルには multipart/form-data を使用し、進捗表示とサイズ制限を設けます
  • ファイル名をサニタイズし、ポリシーで定められている場合はサーバー側でスキャンします
5. Web セキュリティの基本
  • 出力をエスケープし、サニタイザーなしで dangerouslySetInnerHTML を使用しないでください
  • CSP ヘッダーを設定し、スクリプトのソースを制限します
  • CORS では許可するオリジンを明示的に指定します。認証情報と併せて * を使用しないでください
  • セキュリティヘッダー：HSTS、X-Frame-Options または frame-ancestors

チェックリストについては、references/web_security.md を参照してください。

6. テストとリリース
  • 単体テスト：バリデーター、フック、API マッパー
  • 統合テスト：テスト用 DB を使った API ルート
  • E2E テスト：ログインと重要なユーザージャーニーを 1 つ（Playwright／Cypress）
  • デプロイ後、ステージング URL でスモークテストを実施します

環境と設定については、references/web_app_architecture.md を参照してください。

参照資料を読み込む場面

  • アーキテクチャと環境 → references/web_app_architecture.md
  • API クライアント → references/api_integration.md
  • ログインとセッション → references/auth_sessions.md
  • CSRF、CSP、CORS → references/web_security.md

コメント

Markdown 対応