Fare — 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 the IDE adapter files generated by the preset:

• .cursor/rules/ — AI rules (Cursor)
• CLAUDE.md + .claude/rules/ — AI rules (Claude Code)
• .github/copilot-instructions.md — AI rules (VS Code Copilot)

(adapter files depend on the preset's IDE selection — no .ai/ directory is written)

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 IDE-specific files directly — no intermediate .ai/ directory (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?

IDE adapter files written directly to each tool's native paths:

• Rules — 13 topic files covering architecture, components, styling, routing, state, data fetching, forms, performance, a11y, SEO, testing, errors, security, env, Git, and pre-commit
• Lifecycle — 7 stage files (Think, Plan, Build, Review, Test, Ship, Reflect) for guiding AI through tasks
• Agent instructions — project context, domain map, and tech stack embedded in AGENT content

Output paths vary by IDE: .cursor/rules/ for Cursor, .claude/rules/ + CLAUDE.md for Claude Code, .github/copilot-instructions.md for VS Code Copilot, .windsurf/rules/ + .windsurfrules for Windsurf, .agents/workflows/ for Antigravity.

Lifecycle in practice

The generated lifecycle files guide your AI through every coding task — from understanding the goal to capturing what to improve next.

See the full worked example →

Upgrading from v1.1

What changed

v1.2 no longer writes a .ai/ directory. Rules, lifecycle files, and agent instructions are written directly to your IDE's native paths — only the files your IDE actually reads.

New output paths

| Adapter | v1.2 output location | | --- | --- | | Cursor | .cursor/rules/<rule>.mdc · .cursor/skills/<stage>/SKILL.md | | Claude Code | .claude/rules/<rule>.md · .claude/commands/<stage>.md · CLAUDE.md | | VS Code Copilot | .github/copilot-instructions.md (all merged) | | Windsurf | .windsurf/rules/<rule>.md · .windsurf/rules/lifecycle-<stage>.md · .windsurfrules | | Antigravity | .agents/workflows/<stage>.md |

Re-running the CLI

Re-running on an existing project backs up existing adapter files to <file>.fare-backup by default. Use --write-mode overwrite to skip backups.

Manual cleanup

After confirming v1.2 output is correct:

rm -rf .ai/

See the full migration guide → for the complete before/after comparison, rule change table, and FAQ.

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.