modern-frontend-architecture（モダンフロントエンド設計）

このSkillでできること

✓新規Webアプリのフレームワークや構成を選定する
✓クライアント・サーバーデータと状態管理を設計する
✓ルーティング、URL状態、フォーム、デザインシステムを整理する
✓Cloudflareやセルフホストなどのデプロイ方針を検討する

使い方

STEP 1

要件に応じて境界と責務を先に定義する

STEP 2

Webスタック、データ、状態、UIの既定方針を確認する

STEP 3

必要な参照資料だけを読み込んで設計を具体化する

STEP 4

実装前にログ、i18n、セキュリティ、運用面を確認する

Skillのインストール

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/Amir-Abushanab/modern-frontend-architecture

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

Cloudflareへデプロイする新規Webアプリについて、SSR、データ取得、状態管理、URL状態、フォーム、RTL対応を含むフロントエンド構成を提案してください。

出力例を見る

技術選定、責務の境界、データフロー、状態管理、UI設計、デプロイ方針。

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信検出あり

Shellコマンド実行明確な記述なし

ファイル読み取り明確な記述なし

ファイル書き込み明確な記述なし

ネットワークアクセス検出あり

認証情報明確な記述なし

検出根拠を見る

network: mplementation of the patterns: [`ultimate-ts-starter`](https://github.com/Amir-Abushanab/ultimate-ts-starter). ## Install **Any agent** — via the [skil
network: er). ## Install **Any agent** — via the [skills CLI](https://github.com/vercel-labs/skills): ``` npx skills add Amir-Abushanab/modern-frontend-archite

modern-frontend-architecture

このSkillでできること

使い方

Skillのインストール

AIにこのSkillを追加してもらう

このSkillを使うプロンプト例

安全性チェック

関連Skill

aigo-builder

shipping-artifacts

cs-reference