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+.

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

Non-interactive presets

npx frontend-ai-starter-recipes --preset react-vite-tailwind --output ./out
npx frontend-ai-starter-recipes --preset nextjs-shadcn --output ./out
npx frontend-ai-starter-recipes --preset vue-nuxt-pinia --output ./out
npx frontend-ai-starter-recipes --preset svelte-kit --output ./out
npx frontend-ai-starter-recipes --preset angular-material --output ./out

(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/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)

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.