Frontend Ai Starter Recipes

CLI: AI agent rules and skills for frontend projects (React, Vue, Svelte, Angular)

Frontend AI Starter Recipes

Generate opinionated, customized AI agent instructions and workflows for your frontend web projects (React, Vue, Svelte, Angular, and common meta-frameworks).

Package: frontend-ai-starter-recipes on npm. Short CLI: fare (after global install).

For Node.js backends, the companion CLI is backend-ai-starter-recipes (bare) — see backend-ai-starter-recipes.

Requires Node.js 20+.

Try it in 2 minutes

npx frontend-ai-starter-recipes --preset react-vite-tailwind --output ./my-app

Then inspect:

./my-app/.ai/AGENT.md
./my-app/.ai/lifecycle/
./my-app/.ai/rules/
the IDE adapter files generated by the preset

Quick start

npx (no install)

npx frontend-ai-starter-recipes --output ./my-app

Global install (short command `fare`)

npm install -g frontend-ai-starter-recipes
fare --output ./my-app

Both commands accept the same flags (--output, --preset, etc.).

Answer the prompts to define your UI stack, meta-framework, styling, state, data fetching, testing, and target IDEs. The CLI writes a canonical .ai/ directory and IDE-specific files (Cursor, Claude Code, VS Code Copilot, Antigravity, Windsurf).

Documentation

Full walkthrough (problem → architecture → install → usage → output → workflow) and community guide:

jeelvankhede.github.io/frontend-ai-starter-recipes

Preset coverage

Preset	Stack coverage	Good first check
`react-vite-tailwind`	React SPA, Vite, Tailwind, shadcn/ui, Zustand, TanStack Query, React Hook Form, Storybook, Vitest, Playwright	`npx frontend-ai-starter-recipes --preset react-vite-tailwind --output ./my-app`
`nextjs-shadcn`	Next.js, Tailwind, shadcn/ui, Zustand, TanStack Query, React Hook Form, Storybook, Vitest, Playwright	`npx frontend-ai-starter-recipes --preset nextjs-shadcn --output ./my-next-app`
`vue-nuxt-pinia`	Vue, Nuxt, Tailwind, PrimeVue, Pinia, TanStack Query, VeeValidate, Storybook, Vitest, Cypress	`npx frontend-ai-starter-recipes --preset vue-nuxt-pinia --output ./my-nuxt-app`
`svelte-kit`	SvelteKit, Tailwind, Svelte stores, Vitest, Playwright	`npx frontend-ai-starter-recipes --preset svelte-kit --output ./my-svelte-app`
`angular-material`	Angular, Angular Material, NgRx, reactive forms, Jest, Cypress	`npx frontend-ai-starter-recipes --preset angular-material --output ./my-angular-app`

(Use fare instead of npx frontend-ai-starter-recipes if installed globally.)

Supported stack (prompts)

UI: React, Vue, Svelte, Angular
Meta-frameworks: Next.js, Nuxt, SvelteKit, Remix, Astro
Styling & components: Tailwind, CSS modules, styled-components, shadcn/ui, MUI, etc.
State & data: common client state and data-fetching patterns
Tooling: Storybook, Vitest/Jest, Playwright/Cypress, monitoring, CI/CD targets

What gets generated?

.ai/AGENT.md — core AI behavior
.ai/lifecycle/ — Think, Plan, Build, Review, Test, Ship, and Reflect workflow contracts
.ai/rules/ — architecture, components, styling, routing, state, data fetching, forms, performance, a11y, SEO, testing, errors, security, env, Git, pre-commit, and related topics
.ai/skills/ — workflows (plan-review, code-review, qa, ship, document-release, retro, performance-audit, accessibility-audit, component-audit, dependency-audit, …)
.ai/context/, .ai/tracking/ — reference (e.g. domain map, tech stack) and efficiency tracking
Plus adapters for each selected IDE (Cursor, Claude Code, Copilot, Antigravity, Windsurf)

Known Limitations

This is an early community release, not a mature or enterprise-ready governance product.
Presets are opinionated starting points; real projects should review and edit generated rules before relying on them.
Framework coverage is intentionally limited to the listed presets and prompt options.
IDE adapter behavior can vary by tool version and project setup.
The CLI generates AI operating instructions and adapter files; it does not generate a full frontend application.

Development

git clone https://github.com/JeelVankhede/frontend-ai-starter-recipes.git
cd frontend-ai-starter-recipes
npm ci
npm run build   # CLI; use dist/cli.js after build
npm test        # Vitest
npm run test:coverage
node dist/cli.js --help

Docs site locally: npm run docs:dev

Repository & contributing

Source: github.com/JeelVankhede/frontend-ai-starter-recipes
See CONTRIBUTING.md for branches, PRs, branch protection, and releases (manual workflow, npm Trusted Publishing / OIDC).

Security

Report vulnerabilities via GitHub Security Advisories or see SECURITY.md.

License

MIT — see LICENSE.

Top categories