Better-Fullstack

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

Produce programmable videos with Remotion using scene planning, asset orchestration, and validation gates for automated, brand-consistent video content.

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

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.

Scaffold a new app, API, backend, fullstack project, mobile app, polyglot service, monorepo, or starter with Better Fullstack. Use when the user wants to create, start, bootstrap, initialize, or generate a project from a stack description. Prefer the bundled Better Fullstack MCP server: guidance, schema, compatibility, plan, then create.