firebase-development-add-feature
Firebaseプロジェクトに機能を追加する際に、テスト駆動開発の手法で、セキュリティルールやエミュレーターでの検証を行いながら、関数やAPI、コレクションなどを実装するSkill。
📜 元の英語説明(参考)
This skill should be used when adding features to existing Firebase projects. Triggers on "add function", "create endpoint", "new tool", "add api", "new collection", "implement", "build feature". Guides TDD workflow with test-first development, security rules, and emulator verification.
🇯🇵 日本人クリエイター向け解説
Firebaseプロジェクトに機能を追加する際に、テスト駆動開発の手法で、セキュリティルールやエミュレーターでの検証を行いながら、関数やAPI、コレクションなどを実装するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o firebase-development-add-feature.zip https://jpskill.com/download/16716.zip && unzip -o firebase-development-add-feature.zip && rm firebase-development-add-feature.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/16716.zip -OutFile "$d\firebase-development-add-feature.zip"; Expand-Archive "$d\firebase-development-add-feature.zip" -DestinationPath $d -Force; ri "$d\firebase-development-add-feature.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
firebase-development-add-feature.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
firebase-development-add-featureフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Firebase 機能追加
概要
このサブスキルは、TDD を用いて既存の Firebase プロジェクトに新しい機能を追加する方法をガイドします。Cloud Functions、Firestore コレクション、API エンドポイントを扱います。
主要な原則:
- 最初にテストを書く (TDD の要件)
{success, message, data?}のレスポンスパターンを使用する- すべてのファイルは ABOUTME コメントから始める
- 完了を主張する前にエミュレーターで検証する
このサブスキルが適用される場合
- 新しい Cloud Function を追加する場合
- 新しい Firestore コレクションをルール付きで作成する場合
- API エンドポイントを Express アプリに追加する場合
- ユーザーが「関数を追加」、「エンドポイントを作成」、「新しいコレクション」、「実装」と言う場合
以下には使用しないでください:
- 初期プロジェクトのセットアップ →
firebase-development:project-setup - デバッグ →
firebase-development:debug - コードレビュー →
firebase-development:validate
TodoWrite ワークフロー
以下の 12 ステップでチェックリストを作成します。
ステップ 1: 機能の種類の特定
追加するものを決定します。
- HTTP Endpoint - API ルート (GET/POST など)
- Firestore Trigger - ドキュメントの変更時に実行
- Scheduled Function - Cron ジョブ
- Callable Function - クライアント SDK からの呼び出し
- New Collection - ルール付きの Firestore コレクション
ステップ 2: 既存のアーキテクチャの確認
プロジェクトを調べてパターンを理解します。
ls -la functions/src/
grep -r "onRequest" functions/src/
grep "express" functions/package.json
決定事項: アーキテクチャスタイル、認証方法、セキュリティモデル。
参考: docs/examples/express-function-architecture.md
ステップ 3: 最初に失敗するテストを書く (TDD)
実装前にテストファイルを作成します。
// ABOUTME: [機能名] 機能の単体テスト
// ABOUTME: さまざまなシナリオで [機能が何をするか] をテストします
import { describe, it, expect } from 'vitest';
import { handleYourFeature } from '../../tools/yourFeature';
describe('handleYourFeature', () => {
it('should return success when given valid input', async () => {
const result = await handleYourFeature('user-123', { name: 'test' });
expect(result.success).toBe(true);
});
it('should return error for invalid input', async () => {
const result = await handleYourFeature('user-123', { name: '' });
expect(result.success).toBe(false);
});
});
テストを実行して、失敗することを確認します: npm run test
ステップ 4: ABOUTME を含む関数ファイルを作成する
実装ファイルを作成します。
// ABOUTME: [目的] のための [機能名] を実装します
// ABOUTME: {success, message, data?} レスポンスを返します
export async function handleYourFeature(
userId: string,
params: { name: string }
): Promise<{ success: boolean; message: string; data?: any }> {
if (!userId) {
return { success: false, message: 'Authentication required' };
}
if (!params.name) {
return { success: false, message: 'Invalid input: name required' };
}
// Implementation here
return { success: true, message: 'Success', data: { /* ... */ } };
}
参考: docs/examples/express-function-architecture.md
ステップ 5: Firestore セキュリティルールの追加
新しいコレクションのために firestore.rules を更新します。
サーバー書き込み専用 (推奨):
match /yourCollection/{docId} {
allow read: if request.auth != null;
allow write: if false; // Only Cloud Functions
}
クライアント書き込み (必要な場合):
match /yourCollection/{docId} {
allow create: if request.auth != null &&
request.resource.data.userId == request.auth.uid;
allow update: if request.auth != null &&
resource.data.userId == request.auth.uid &&
request.resource.data.diff(resource.data).affectedKeys()
.hasOnly(['name', 'updatedAt']);
}
参考: docs/examples/firestore-rules-patterns.md
ステップ 6: 必要に応じてインデックスを更新する
複雑なクエリのために firestore.indexes.json に追加します。
{
"collectionGroup": "yourCollection",
"fields": [
{"fieldPath": "userId", "order": "ASCENDING"},
{"fieldPath": "createdAt", "order": "DESCENDING"}
]
}
複雑なクエリがない場合はスキップします (単一フィールドのインデックスは自動)。
ステップ 7: 認証チェックの追加
プロジェクトのパターンに基づきます。
API Keys:
app.post('/endpoint', apiKeyGuard, async (req, res) => {
const userId = req.userId!;
// ...
});
Firebase Auth:
if (!req.auth) {
res.status(401).json({ success: false, message: 'Auth required' });
return;
}
const userId = req.auth.uid;
参考: docs/examples/api-key-authentication.md
ステップ 8: レスポンスパターンでハンドラーを実装する
すべてのハンドラーは一貫したパターンを使用します。
interface HandlerResponse {
success: boolean;
message: string;
data?: any;
}
すべてのレイヤーで検証を含めます (多層防御)。
ステップ 9: 関数を適切にエクスポートする
functions/src/index.ts に追加します。
Express: ルートまたは switch case を追加
Domain-grouped: export * from './yourDomain';
Individual: index.js でインポートしてエクスポート
検証: npm run build
ステップ 10: テストをパスさせる (TDD Green)
テストを実行します: npm run test
すべてのテストがパスする必要があります。そうでない場合は、(テストではなく) 実装を修正します。
ステップ 11: 統合テストの作成
functions/src/__tests__/emulator/yourFeature.test.ts を作成します。
エミュレーターを使用して完全なワークフローをテストします。
- エンドポイントへの HTTP リクエスト
- Firestore データが作成されたことを確認
- 認証の強制をテスト
実行: npm run test:emulator (エミュレーターを実行した状態)
ステップ 12: エミュレーターでテストする
firebase emulators:start
open http://127.0.0.1:4000
検証:
- エンドポイントが 200 を返す
- レスポンスがパターンに従う
- ドキュメントが Firestore に表示される
- 認証が強制される (無効な場合は 401)
- ルールが Rules Playground で動作する
レスポンスパターン
すべてのハンドラーは以下を返す必要があります。
// Success
{ success: true, message: "Created", data: { id: "abc" } }
// Error
{ success: false, message: "Invalid input" }
検証チェックリスト
完了とする前に:
- [ ] テストが最初に書かれ、パスしている
- [ ] すべてのファイルに ABOUTME コメントがある
- [ ] セキュリティルールが追加されている
- [ ] 認証チェックが実装されている
- [ ] レスポンスパターンに従っている
- [ ] エミュレーターテストが成功している
(原文はここで切り詰められています)
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Firebase Add Feature
Overview
This sub-skill guides adding new features to existing Firebase projects using TDD. It handles Cloud Functions, Firestore collections, and API endpoints.
Key principles:
- Write tests FIRST (TDD requirement)
- Use
{success, message, data?}response pattern - Every file starts with ABOUTME comments
- Verify with emulators before claiming done
When This Sub-Skill Applies
- Adding a new Cloud Function
- Creating a new Firestore collection with rules
- Adding an API endpoint to Express app
- User says: "add function", "create endpoint", "new collection", "implement"
Do not use for:
- Initial project setup →
firebase-development:project-setup - Debugging →
firebase-development:debug - Code review →
firebase-development:validate
TodoWrite Workflow
Create checklist with these 12 steps:
Step 1: Identify Feature Type
Determine what's being added:
- HTTP Endpoint - API route (GET/POST/etc.)
- Firestore Trigger - Runs on document changes
- Scheduled Function - Cron job
- Callable Function - Client SDK calls
- New Collection - Firestore collection with rules
Step 2: Check Existing Architecture
Examine the project to understand patterns:
ls -la functions/src/
grep -r "onRequest" functions/src/
grep "express" functions/package.json
Determine: Architecture style, auth method, security model.
Reference: docs/examples/express-function-architecture.md
Step 3: Write Failing Test First (TDD)
Create test file before implementation:
// ABOUTME: Unit tests for [feature name] functionality
// ABOUTME: Tests [what the feature does] with various scenarios
import { describe, it, expect } from 'vitest';
import { handleYourFeature } from '../../tools/yourFeature';
describe('handleYourFeature', () => {
it('should return success when given valid input', async () => {
const result = await handleYourFeature('user-123', { name: 'test' });
expect(result.success).toBe(true);
});
it('should return error for invalid input', async () => {
const result = await handleYourFeature('user-123', { name: '' });
expect(result.success).toBe(false);
});
});
Run test to confirm it fails: npm run test
Step 4: Create Function File with ABOUTME
Create implementation file:
// ABOUTME: Implements [feature name] for [purpose]
// ABOUTME: Returns {success, message, data?} response
export async function handleYourFeature(
userId: string,
params: { name: string }
): Promise<{ success: boolean; message: string; data?: any }> {
if (!userId) {
return { success: false, message: 'Authentication required' };
}
if (!params.name) {
return { success: false, message: 'Invalid input: name required' };
}
// Implementation here
return { success: true, message: 'Success', data: { /* ... */ } };
}
Reference: docs/examples/express-function-architecture.md
Step 5: Add Firestore Security Rules
Update firestore.rules for new collections:
Server-write-only (preferred):
match /yourCollection/{docId} {
allow read: if request.auth != null;
allow write: if false; // Only Cloud Functions
}
Client-write (if needed):
match /yourCollection/{docId} {
allow create: if request.auth != null &&
request.resource.data.userId == request.auth.uid;
allow update: if request.auth != null &&
resource.data.userId == request.auth.uid &&
request.resource.data.diff(resource.data).affectedKeys()
.hasOnly(['name', 'updatedAt']);
}
Reference: docs/examples/firestore-rules-patterns.md
Step 6: Update Indexes if Needed
Add to firestore.indexes.json for complex queries:
{
"collectionGroup": "yourCollection",
"fields": [
{"fieldPath": "userId", "order": "ASCENDING"},
{"fieldPath": "createdAt", "order": "DESCENDING"}
]
}
Skip if no complex queries (single-field indexes are automatic).
Step 7: Add Authentication Checks
Based on project pattern:
API Keys:
app.post('/endpoint', apiKeyGuard, async (req, res) => {
const userId = req.userId!;
// ...
});
Firebase Auth:
if (!req.auth) {
res.status(401).json({ success: false, message: 'Auth required' });
return;
}
const userId = req.auth.uid;
Reference: docs/examples/api-key-authentication.md
Step 8: Implement Handler with Response Pattern
All handlers use consistent pattern:
interface HandlerResponse {
success: boolean;
message: string;
data?: any;
}
Include validation at every layer (defense in depth).
Step 9: Export Function Properly
Add to functions/src/index.ts:
Express: Add route or switch case
Domain-grouped: export * from './yourDomain';
Individual: Import and export in index.js
Verify: npm run build
Step 10: Make Tests Pass (TDD Green)
Run tests: npm run test
All tests should pass. If not, fix implementation (not tests).
Step 11: Write Integration Test
Create functions/src/__tests__/emulator/yourFeature.test.ts:
Test complete workflow with emulators:
- HTTP request to endpoint
- Verify Firestore data created
- Test auth enforcement
Run: npm run test:emulator (with emulators running)
Step 12: Test with Emulators
firebase emulators:start
open http://127.0.0.1:4000
Verify:
- Endpoint returns 200
- Response follows pattern
- Documents appear in Firestore
- Auth enforced (401 for invalid)
- Rules work in Rules Playground
Response Pattern
All handlers MUST return:
// Success
{ success: true, message: "Created", data: { id: "abc" } }
// Error
{ success: false, message: "Invalid input" }
Verification Checklist
Before marking complete:
- [ ] Tests written FIRST and pass
- [ ] ABOUTME comments on all files
- [ ] Security rules added
- [ ] Auth checks implemented
- [ ] Response pattern followed
- [ ] Emulator testing successful
- [ ] Code linted
Pattern References
- Architecture:
docs/examples/express-function-architecture.md - Auth:
docs/examples/api-key-authentication.md - Rules:
docs/examples/firestore-rules-patterns.md - Emulators:
docs/examples/emulator-workflow.md