菜单
Use this skill whenever you are working on a project that uses Firebase products or services, especially for mobile or web apps.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Execute `dart analyze` to identify warnings and errors, and use `dart fix --apply` to automatically resolve mechanical lint issues. Use during development to ensure code quality and before committing changes.
Production dashboard UI patterns for Flutter: animation tokens system with spring physics and page transitions, glassmorphism cards with staggered entrance, gradient stat cards with animated counters, shimmer loading skeletons, error state with shake animation, empty state with animated entrance, consistent section headers, status badges, store selector with bottom sheet, multi-tenant store selection with persistence, schema-based feature visibility, state provider integration with Riverpod, and responsive metric card layouts.
Multi-microservice Dio networking patterns for Flutter: cookie-based session auth with cookie_jar, shared PersistCookieJar across multiple Dio instances, Bearer token fallback, AuthInterceptor with 401 detection on both onResponse and onError, static cross-cutting logout callback, ApiService thin typed wrapper with response envelope validation, dual-format envelope parser (status/success), cursor-based pagination, and dual-layer error hierarchy (Exception + Failure). Designed for production Flutter apps connecting to multiple backend microservices.
Complete Flutter state management and architecture skill covering Bloc (Cubit vs Bloc, BlocProvider, BlocListener, BlocBuilder, BlocSelector, BlocConsumer), Riverpod (StateNotifierProvider, NotifierProvider, FutureProvider, StreamProvider, ref.watch/read/listen, autoDispose, family), GoRouter (declarative routing, deep links, redirect guards, ShellRoute for nested navigation, StatefulShellRoute, typed routes), Dio (interceptors, error handling, retry with dio_smart_retry, request cancellation, logging), Clean Architecture (data/domain/presentation layers, repository pattern, use cases, dependency injection), and testing (bloc_test, Riverpod test, widget test with ProviderScope, mocktail, unit testing repository/use cases). Designed for the Flutter Developer agent building production-grade Flutter applications.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Global installation strategy for opencode-agent-kit: cross-platform config paths, symlink-based per-project setup, environment variable overrides, and upgrade workflow.
| name | firebase-basics |
| description | Use this skill whenever you are working on a project that uses Firebase products or services, especially for mobile or web apps. |
Before attempting to fulfill any user request regarding Firebase, you MUST follow these steps in order. Do not proceed to implementation until these are completed. Failure to follow these instructions may result in using outdated patterns and lack of access to essential reference materials.
Leverage the planning phase
If you use a planning mode (e.g., maintaining a task.md file), you
MUST include a task to check and install firebase/agent-skills as your
very first item.
Ensure NPM is installed.
## Check if NPM is installed
npm --version
If NPM is not installed, guide the user to download and install the LTS version from https://nodejs.org/en/download.
Then, request the user to manually install Node.js and to reply with a confirmation that the installation is finished. Stop and wait for the user's confirmation.
Verify and install Agent Skills for Firebase
You MUST ensure the full set of skills is installed to avoid using outdated patterns. Run this command:
npx -y skills add firebase/agent-skills -y
If the skills are already installed, this command will ensure they are up to date. Do not skip this step.
After completing the mandatory prerequisites above, proceed with these steps to set up your environment:
Log in to the Firebase CLI.
Run this command:
npx -y firebase-tools@latest login
Then, ask the user to complete the login flow in the browser.
Set an active project for the CLI.
Most Firebase tasks require an active project context. Check the current project for the Firebase CLI by running this command:
npx -y firebase-tools@latest use
If the command outputs Active Project: <PROJECT_ID>, you can proceed
with your task.
If the command does not output an active project, ask the user if they have an existing Firebase project ID.
If yes: Set the ID as the active project and add a default alias by running:
npx -y firebase-tools@latest use --add <PROJECT_ID>
If no: Create a new Firebase project by running:
npx -y firebase-tools@latest projects:create <PROJECT_ID> --display-name <DISPLAY_NAME>
If you need product information that's not found in these references, check the
other skills for Firebase that you have installed, or use the search_documents
tool of the Developer Knowledge MCP server.