firebase-app-platform
firebase-app-platform is an engineering AI skill with a core value of Build and operate apps on Firebase using Auth, Firestore, Cloud Functions, and Hosting. It
helps developers solve real-world problems in the engineering domain, boosting
efficiency, automating repetitive tasks, and optimizing workflows.
Build and operate apps on Firebase using Auth, Firestore, Cloud Functions, and Hosting. Use when building mobile/web backends with managed services, real-time data sync, or serverless APIs.
Quick Facts
mkdir -p ./skills/firebase-app-platform && curl -sfL https://raw.githubusercontent.com/sickn33/antigravity-awesome-skills/main/skills/firebase-app-platform/SKILL.md -o ./skills/firebase-app-platform/SKILL.md Run in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).
Skill Content
# Firebase App Platform
Ship mobile and web backends with Firebase managed services.
When to Use This Skill
Use this skill when:
- Building mobile or web apps with real-time data sync
- Need authentication with minimal backend code
- Prototyping quickly with managed infrastructure
- Building serverless APIs with Cloud Functions
- Hosting static sites or SPAs with CDN
Prerequisites
- Node.js 18+
- Firebase CLI (`npm install -g firebase-tools`)
- Google Cloud account (Firebase is part of GCP)
- A Firebase project (create at console.firebase.google.com)
Quick Start
# Install and authenticate
npm install -g firebase-tools
firebase login
# Initialize in your project directory
firebase init
# Select: Firestore, Functions, Hosting, Emulators
# Start local emulators
firebase emulators:start
# Deploy everything
firebase deploy
# Deploy specific services
firebase deploy --only functions
firebase deploy --only hosting
firebase deploy --only firestore:rulesFirestore Database
Security Rules
// firestore.rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Users can only read/write their own data
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
// Messages: authenticated users can read, only owner can write
match /channels/{channelId}/messages/{messageId} {
allow read: if request.auth != null;
allow create: if request.auth != null
&& request.resource.data.userId == request.auth.uid
&& request.resource.data.body is string
&& request.resource.data.body.size() <= 5000;
allow update, delete: if request.auth != null
&& resource.data.userId == request.auth.uid;
}
// Admin-only collection
match /admin/{document=**} {
allow read, write: if request.auth != null
&& get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == 'admin';
}
// Default: deny everything
match /{document=**} {
allow read, write: if false;
}
}
}Data Operations
// lib/firestore.ts
import { getFirestore, collection, doc, setDoc, getDoc,
query, where, orderBy, limit, onSnapshot,
serverTimestamp, increment } from "firebase/firestore";
const db = getFirestore();
// Create document with auto-ID
async function createMessage(channelId: string, body: string, userId: string) {
const ref = doc(collection(db, "channels", channelId, "messages"));
await setDoc(ref, {
body,
userId,
createdAt: serverTimestamp(),
});
return ref.id;
}
// Real-time listener
function subscribeToMessages(channelId: string, callback: (msgs: any[]) => void) {
const q = query(
collection(db, "channels", channelId, "messages"),
orderBy("createdAt", "desc"),
limit(50)
);
return onSnapshot(q, (snapshot) => {
const messages = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
callback(messages);
});
}
// Atomic counter
async function incrementViews(postId: string) {
await setDoc(doc(db, "posts", postId), {
views: increment(1),
}, { merge: true });
}Indexes
// firestore.indexes.json
{
"indexes": [
{
"collectionGroup": "messages",
"queryScope": "COLLECTION",
"fields": [
{ "fieldPath": "channelId", "order": "ASCENDING" },
{ "fieldPath": "createdAt", "order": "DESCENDING" }
]
}
]
}Authentication
// lib/auth.ts
import { getAuth, signInWithPopup, GoogleAuthProvider,
createUserWithEmailAndPassword, signInWithEmailAndPassword,
signOut, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();
// Google sign-in
async function signInWithGoogle() {
const provider = new GoogleAuthProvider();
const result = await signInWithPopup(auth, provider);
return result.user;
}
// Email/password registration
async🎯 Best For
- UI designers
- Product designers
- Claude users
- AI users
💡 Use Cases
- Generating component mockups
- Creating design system tokens
- Using firebase-app-platform in daily workflow
- Automating repetitive engineering tasks
📖 How to Use This Skill
- 1
Install the Skill
Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.
- 2
Load into Your AI Assistant
Open Claude and reference the skill. Paste the SKILL.md content or use the system prompt tab.
- 3
Apply firebase-app-platform to Your Work
Provide context for your task — paste source material, describe your audience, or share existing work to guide the AI.
- 4
Review and Refine
Edit the AI output for accuracy, tone, and completeness. Add human insight where the AI lacks context.
❓ Frequently Asked Questions
Does this work with Figma?
Some design skills integrate with Figma plugins. Check the Works With section for supported tools.
How do I install firebase-app-platform?
Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/firebase-app-platform/SKILL.md, ready to use.
Can I customize this skill for my team?
Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.
⚠️ Common Mistakes to Avoid
Skipping usability testing
AI-generated designs should be validated with real users before development.
Not reading the full skill
Skills contain important context and edge cases beyond the quick start.