add-to-project
Add capabilities, addons, deployment targets, generated CI, services, or stack updates to an existing Better Fullstack project. Use when the current repo has bts.jsonc or the user asks to extend a generated project. Prefer bfs_plan_stack_update and bfs_apply_stack_update; use legacy addon tools only for addon/deploy-only flows.
git clone --depth 1 https://github.com/Marve10s/Better-Fullstack /tmp/add-to-project && cp -r /tmp/add-to-project/plugin/skills/add-to-project ~/.claude/skills/add-to-projectSKILL.md
# Add to an Existing Better Fullstack Project Use the Better Fullstack MCP server for existing-project updates. Do not hand-edit generated stack metadata or guess which template files belong to a capability. ## Workflow 1. Confirm the project directory and ensure it contains `bts.jsonc`. 2. Call `bfs_get_guidance` and `bfs_get_schema`. 3. For capability changes, call `bfs_plan_stack_update` with the target `projectDir` and requested stack fields. 4. Review the preview, including blockers, file changes, dependency changes, env changes, and compatibility adjustments. 5. Call `bfs_apply_stack_update` only when the plan is acceptable. 6. For legacy addon/deploy-only changes, call `bfs_plan_addition` before `bfs_add_feature`. 7. Report changed files and the exact install/test commands. ## Rules - Keep update semantics preview-first. - Prefer additive updates first: generated CI, docs, observability, email, search, vector DB, file storage, rate limiting, and mobile capabilities. - Treat database, ORM, auth, API, and payment-provider swaps as risky and make compatibility changes explicit. - Set installs disabled unless the user asks for dependency installation. - Do not start a dev server. ## CLI-only fallback If the Better Fullstack MCP tools are unavailable, inspect the current flags with `npx -y create-better-fullstack@latest add --help`, then run the explicit add command with `--project-dir <path> --dry-run --no-install`. Review that preview before rerunning without `--dry-run`. Do not guess option names or hand-edit generated stack metadata.
Scaffold, plan, or extend Better Fullstack projects with the generator, CLI, or MCP server. Use when a user asks to create, generate, or scaffold a fullstack starter; choose a Better Fullstack stack; add Better Fullstack capabilities; compare agent scaffolding paths; or avoid hand-authoring boilerplate project files.
Create Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's visual style - dark theme, spring animations, Geist typography, and the Geist color palette.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Create modern product launch/pitch videos using Remotion. Use when creating app promo videos, SaaS launch videos, product demos, or startup pitch videos.
Generates animation configurations for Remotion including spring configs, interpolations, easing functions, and timing logic. Focuses ONLY on animation parameters, NOT component implementation. Use when defining animation behavior or when asked to "configure animations", "setup spring configs", "define easing curves".
Best practices for Remotion - Video creation in React
Animation components and utilities for Remotion video projects. Use when building Remotion compositions with text animations, gradient transitions, particle effects, 3D scenes, or staggered motion effects. Provides example bits (complete compositions) and reusable components that can be installed via jsrepo.
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays