local-development
Running functions and web app locally, troubleshooting emulator issues, Storybook. Use when running or debugging locally.
Best use case
local-development is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Running functions and web app locally, troubleshooting emulator issues, Storybook. Use when running or debugging locally.
Teams using local-development should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/local-development/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How local-development Compares
| Feature / Agent | local-development | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Running functions and web app locally, troubleshooting emulator issues, Storybook. Use when running or debugging locally.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Local Development ## When to Use Use this skill when running the web app or functions locally, troubleshooting emulator issues, or running Storybook. ## Important The user runs functions and web app locally for testing. Claude writes code and creates PRs -- Claude does NOT deploy or run dev servers. ## Running Functions Locally (user runs this) ```bash npx nx run functions:serve ``` This command: 1. Builds the functions 2. Copies `.env.dev` to `dist/apps/functions/.env` 3. Starts watch mode for rebuilds (background) 4. Runs `firebase serve --only functions --project=dev` on port 5001 ## Running Web App Locally (user runs this) ```bash npx nx run maple-spruce:serve ``` Runs on http://localhost:3000 ## Running Storybook ```bash npx nx run maple-spruce:storybook # Opens http://localhost:6006 ``` Building Storybook: ```bash npx nx run maple-spruce:build-storybook # Output: dist/storybook/maple-spruce ``` ## Running Tests ```bash npm test ``` ## Deployment User decides when to deploy to dev. Production deploys automatically via CI/CD on merge to main. ## Troubleshooting Local Functions ### Emulator prompts for environment variables The Firebase emulator is not finding the `.env` file. This happens when: - The build clears `dist/apps/functions/` before the `.env` is copied - A stale watch process is interfering **Fix:** ```bash # Kill any stale processes pkill -f "firebase serve" pkill -f "nx run functions" # Clean and restart rm -rf dist/apps/functions npx nx run functions:serve ``` **Why this happens:** - Firebase reads `.env` from `dist/apps/functions/` - The `nx run functions:build` clears this directory - The serve command copies `.env.dev` after build, before starting the emulator - If ordering is wrong or stale processes exist, the emulator starts without the `.env` **Key indicator it's working:** ``` i functions: Loaded environment variables from .env. ```
Related Skills
miniprogram-development
WeChat Mini Program development rules. Use this skill when developing WeChat mini programs, integrating CloudBase capabilities, and deploying mini program projects.
minimalist-surgical-development
Use when editing an existing codebase and the goal is minimal, standard, and non-invasive changes - prioritizes simplest solution, standard libraries first, and surgical modification without unsolicited refactors
MCP Widget Development
This skill should be used when the user asks to "build a widget", "create UI component", "ChatGPT UI", "window.openai API", "widget template", "skybridge", "render in ChatGPT", "CSP configuration", or needs guidance on building interactive UI components for OpenAI Apps SDK that render inside ChatGPT.
mcp-development
Model Context Protocol (MCP) server development and AI/ML integration patterns. Covers MCP server implementation, tool design, resource handling, and LLM integration best practices. Use when developing MCP servers, creating AI tools, integrating with LLMs, or when asking about MCP protocol, prompt engineering, or AI system architecture.
local-qa
Run local QA for the repository. Use when asked to run formatting, linting, or pre-commit checks, when verifying local QA, or whenever any file has been updated and local QA should be re-run.
laravel-type-bridge-development
Generate TypeScript/JavaScript type artifacts from Laravel PHP definitions — enums, i18n translations, and enum translator composables.
kafka-development-practices
Applies general coding standards and best practices for Kafka development with Scala.
graphql-api-development
Comprehensive guide for building GraphQL APIs including schema design, queries, mutations, subscriptions, resolvers, type system, error handling, authentication, authorization, caching strategies, and production best practices
Golang Backend Development
Architectural standards and coding practices for the Go backend.
game-development
Game development orchestrator. Routes to platform-specific skills based on project needs.
frontend-mobile-development-component-scaffold
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
Frontend Development
Multi-framework frontend development. Frameworks: React 18+ (Suspense, hooks, TanStack), Vue 3 (Composition API, Pinia, Nuxt), Svelte 5 (Runes, SvelteKit), Angular (Signals, standalone). Common: TypeScript, state management, routing, data fetching, performance optimization, component patterns. Actions: create, build, implement, style, optimize, refactor components/pages/features. Keywords: React, Vue, Svelte, Angular, component, TypeScript, hooks, Composition API, runes, signals, useSuspenseQuery, Pinia, stores, state management, routing, lazy loading, Suspense, performance, bundle size, code splitting, reactivity, props, events. Use when: creating components in any framework, building pages, fetching data, implementing routing, state management, optimizing performance, organizing frontend code, choosing between frameworks.