Frontend Technical Spec

Frontend Technical Spec is a Frontend skill for Claude Code, published by shinpr in ai-coding-project-boilerplate.

227 stars25 forkson shinpr/ai-coding-project-boilerplateAdded 2026/09/03Repository updated 2026/09/01

agent-skillsagentic-aiagentic-workflowai-agentsanthropicboilerplateclaude-codecontext-engineeringdeveloper-toolsllm-orchestrationproductivityquality-gatestypescript

Install in seconds

Install Frontend Technical Spec

Copy Frontend Technical Spec into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-ja/frontend-technical-spec ~/.claude/skills/frontend-technical-spec

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/shinpr/ai-coding-project-boilerplate.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: .claude/skills-ja/frontend-technical-spec/SKILL.md in shinpr/ai-coding-project-boilerplate
Installs to: ~/.claude/skills/frontend-technical-spec
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 621 skills

What Frontend Technical Spec does

Frontend Technical Spec defines React environment, component architecture, state and data flow, build checks, and frontend nonfunctional criteria from repository evidence. Use it when designing or validating a React frontend, its build, or runtime boundaries.

Frontend Technical Spec is cataloged under Frontend on DirSkills. Frontend Technical Spec comes from a repository tagged agent-skills, agentic-ai, agentic-workflow, ai-agents and anthropic.

Documentation

README

Excerpt

技術設計ルール（フロントエンド）

前提条件の検出

ツールやフレームワークに固有のルールを適用する前に、package.json、ロックファイル、TypeScript・ビルド設定、CI定義、代表的なコンポーネントを確認する。React、Vite、Next.js、状態管理ライブラリ、フォームライブラリ、スクリプトは、リポジトリ内の根拠に明記されている場合にのみ利用可能として扱う。周辺のパターンから導いた結論には推測であることを明記する。不足している判断によってレンダリングアーキテクチャ、互換性、セキュリティ、検証方法が変わる場合は作業を止め、必要な根拠またはユーザー判断を具体的に示す。

技術スタックの基本方針

リポジトリ設定からTypeScriptベースのReactアプリケーションであることを確認できる場合に、このルールを適用する。現行要件と制約を、コンポーネントの責務、状態の所有者、サーバー/クライアント境界、観測可能な検証点へ対応付けてアーキテクチャを選択する。

環境変数管理とセキュリティ

環境変数管理

ビルドツールのクライアント公開機構を使用: ブラウザコードが読めるのは設定済みのbundler/frameworkによって明示的に公開された値だけとし、サーバー専用の環境アクセスはクライアントバンドルの外側に置く
設定レイヤーを通じて環境変数を一元管理
公開値は、アプリケーションで使用する前に1つの型付き設定境界でパースする
要件で未設定時の有効な振る舞いが定義されている場合にのみデフォルト値を設ける。それ以外は、変数名と期待する形式を示して起動時またはビルド時の検証を失敗させる

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Frontend Technical Spec

What else does shinpr publish alongside Frontend Technical Spec?
Frontend Technical Spec is one of 25 skills that DirSkills catalogs from shinpr/ai-coding-project-boilerplate, the repository it ships in. Its siblings there include Coding Standards, Coding Standards and Create Skill. Each one is a separate skill with its own page in this directory, installs the same way Frontend Technical Spec does, and is maintained by shinpr in that same repository. The rest of the collection is listed on the shinpr/ai-coding-project-boilerplate page.
How does Frontend Technical Spec compare to other Frontend skills?
Frontend Technical Spec ranks #569 by stars among the 621 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Frontend Technical Spec against them. Open each page to compare what they document and how they install.