Built-in Claude Code Skills for SaaS Development

[chaoming]

We just shipped built-in Claude Code skills with Fireact. Every project scaffolded with create-fireact-app now includes structured AI playbooks that teach Claude how Fireact works.

What it does

Tell Claude what you want — "add a reports page" — and it handles all the wiring:

• Creates the component with proper hooks (useSubscription, useConfig, useTranslation)
• Updates app.config.json with the route path
• Adds the route to App.tsx wrapped in ProtectedSubscriptionRoute
• Adds i18n translation keys

All in one shot, following every Fireact convention.

8 Playbooks

What you want	What to say
Add a subscription-scoped page	"Add a reports page"
Add an authenticated page	"Add an API keys page"
Add a public page	"Add a landing page"
Customize an existing component	"Customize the sign-in page"
Modify navigation	"Add reports to the sidebar"
Change branding	"Change the nav bar to blue"
Add backend logic	"Add a cloud function that sends welcome emails"
Store custom data	"Add a notes collection to subscriptions"

How it ships

The skill lives in .claude/skills/fireact-builder/ and is copied into your project automatically when you run create-fireact-app. No separate installation or configuration needed.

Try it

npm install -g create-fireact-app
create-fireact-app my-saas-app

Then open in Claude Code and start building.

📖 Full blog post: https://fireact.dev/blog/build-saas-apps-with-ai-powered-development-skills/
📚 Docs: https://docs.fireact.dev/custom-development/claude-code/

We think this is the beginning of a new pattern: open-source frameworks that ship with AI skills. Let us know what you think!