frontend-technical-spec SKILL.md skillA
frontend-technical-spec from shinpr/ai-coding-project-boilerplate is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add shinpr/ai-coding-project-boilerplate/frontend-technical-spec@git:20260923.03f66bePins git:20260923.03f66be in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- shinpr/ai-coding-project-boilerplate
- Path
.claude/skills-ja/frontend-technical-spec/SKILL.md- Versions recorded
- 5
- Latest version
- git:20260923.03f66be, committed Sep 23, 2026
- First version recorded
- Aug 18, 2026
- Size
- 9,571 bytes
- Repository stars
- 234
- License
- MIT
リポジトリの根拠に基づき、Reactの環境、コンポーネントアーキテクチャ、状態・データフロー、ビルド検証、フロントエンドの非機能基準を定義。Reactフロントエンド、そのビルド、ランタイム境界の設定・設計時に使用。.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# 技術設計ルール（フロントエンド）
## 前提条件の検出
ツールやフレームワークに固有のルールを適用する前に、`package.json`、ロックファイル、TypeScript・ビルド設定、CI定義、代表的なコンポーネントを確認する。React、Vite、Next.js、状態管理ライブラリ、フォームライブラリ、スクリプトは、リポジトリ内の根拠に明記されている場合にのみ利用可能として扱う。周辺のパターンから導いた結論には推測であることを明記する。不足している判断によってレンダリングアーキテクチャ、互換性、セキュリティ、検証方法が変わる場合は作業を止め、必要な根拠またはユーザー判断を具体的に示す。
## 技術スタックの基本方針
リポジトリ設定からTypeScriptベースのReactアプリケーションであることを確認できる場合に、このルールを適用する。現行要件と制約を、コンポーネントの責務、状態の所有者、サーバー/クライアント境界、観測可能な検証点へ対応付けてアーキテクチャを選択する。
## 環境変数管理とセキュリティ
### 環境変数管理
- **ビルドツールのクライアント公開機構を使用**: ブラウザコードが読めるのは設定済みのbundler/frameworkによって明示的に公開された値だけとし、サーバー専用の環境アクセスはクライアントバンドルの外側に置く
- 設定レイヤーを通じて環境変数を一元管理
- 公開値は、アプリケーションで使用する前に1つの型付き設定境界でパースする
- 要件で未設定時の有効な振る舞いが定義されている場合にのみデフォルト値を設ける。それ以外は、変数名と期待する形式を示して起動時またはビルド時の検証を失敗させる
```typescript
// ビルドツールの環境変数（公開値のみ。クライアント公開変数は VITE_ 接頭辞が必要）
const config = {
apiUrl: import.meta.env.VITE_API_URL || 'http://localhost:3000',
appName: import.meta.env.VITE_APP_NAME || 'My App'
}
// フロントエンドでは動作しない
const apiUrl = process.env.API_URL // NG
```
### セキュリティ（クライアントサイド制約）
- **重要**: すべてのフロントエンドコードは公開され、ブラウザで見える
- **シークレットはサーバー側に置く**: クライアントへ公開する設定には公開値だけを含め、APIキー、トークン、認証情報はバックエンドまたは信頼できるサービスが所有する
…Read the whole file at its exact version.
How to install
mdr add shinpr/ai-coding-project-boilerplate/frontend-technical-spec@sha256:3871ba31d004d7c4The line at the top of this page pins the label git:20260923.03f66be, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_hvwk5orhctkmoeau)
2 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 5 versions of this file, between Aug 18, 2026 and Sep 23, 2026, about one every 9 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20260923.03f66be latest | 2026-09-23 | 03f66be | 9,571 B | A | view · diff |
| git:20260901.fbc397a | 2026-09-01 | fbc397a | 9,413 B | A | view · diff |
| git:20260901.dd3607b | 2026-09-01 | dd3607b | 9,416 B | A | view · diff |
| git:20260831.b183037 | 2026-08-31 | b183037 | 9,383 B | A | view · diff |
| git:20260818.2a2fe8e | 2026-08-18 | 2a2fe8e | 9,530 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (9571 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
shinpr/ai-coding-project-boilerplate · 234 stars · license MIT · pushed 2026-10-14 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_hvwk5orhctkmoeau GET https://markdownregistry.com/api/v1/resolve?ref=shinpr/ai-coding-project-boilerplate/frontend-technical-spec GET https://markdownregistry.com/api/v1/blob/3871ba31d004d7c403997821ffb22c60e5aea86fe0abb7fed547d9d6d2e2f943
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.
More from shinpr/ai-coding-project-boilerplate
Every file in shinpr/ai-coding-project-boilerplate