Multi-Framework Support

// src/prompts/framework-selector.ts
export const FRAMEWORK_SELECTOR_PROMPT = `
You are a framework selection expert.

Selection Guidelines:
- If user explicitly mentions a framework, choose that
- If ambiguous, default to **nextjs** (most versatile)
- Enterprise/complex = Angular
- Performance emphasis = Svelte
- Material Design = Angular or Vue
- Vercel/Linear aesthetic = Next.js
`;

{
  "next": "15.3.3",
  "react": "19",
  "react-dom": "19",
  "tailwindcss": "^4.0.0",
  "typescript": "^5.0.0",
  "@radix-ui/*": "latest",  // Shadcn UI primitives
  "lucide-react": "latest"  // Icons
}

// All Shadcn components pre-installed
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Dialog } from "@/components/ui/dialog"
// ... and 47 more

// src/prompts/nextjs.ts
Critical Rules:
1. Add "use client" to TOP of app/page.tsx and any files using React hooks
2. ALL Shadcn components are pre-installed - just import and use
3. Import utility: import { cn } from "@/lib/utils"
4. Before using a Shadcn component, use readFiles to inspect its API
5. Build all surfaces with Shadcn primitives
6. Compose UIs: Tailwind on top of Shadcn, no bare HTML elements

app/
├── page.tsx              # Main entry (requires "use client")
├── layout.tsx            # Root layout
└── globals.css           # Tailwind directives

components/
├── ui/                   # Shadcn UI (pre-installed)
│   ├── button.tsx
│   ├── card.tsx
│   └── ... (50+ components)
└── custom/               # Your components

lib/
└── utils.ts              # cn() utility

{
  "@angular/core": "19",
  "@angular/material": "19",
  "@angular/cdk": "19",
  "tailwindcss": "latest",
  "rxjs": "~7.8.0",
  "typescript": "~5.3.0"
}

// Import Material modules
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';

// src/prompts/angular.ts
Angular Specific Rules:
- Use standalone components (standalone: true)
- Import CommonModule for *ngIf, *ngFor directives
- Import ReactiveFormsModule or FormsModule for forms
- Use Angular Material components from '@angular/material/*'
- Use signals for reactive state management where appropriate
- Use RxJS operators for async operations

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule, MatButtonModule],
  template: `
    <div class="p-4">
      <mat-button color="primary">Click Me</mat-button>
    </div>
  `,
  styles: `/* Tailwind classes or custom CSS */`
})
export class DashboardComponent {
  // Use signals for reactive state
  count = signal(0);
  
  increment() {
    this.count.update(c => c + 1);
  }
}

src/
├── app/
│   ├── app.component.ts       # Main component
│   ├── app.config.ts          # App configuration
│   └── components/            # Feature components
├── services/                  # Injectable services
├── models/                    # TypeScript interfaces
└── styles.scss                # Global styles + Tailwind

{
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "@chakra-ui/react": "latest",
  "@emotion/react": "latest",
  "@emotion/styled": "latest",
  "framer-motion": "latest",  // Chakra dependency
  "tailwindcss": "latest"
}

import { Button, Box, Card, Heading } from '@chakra-ui/react';

function App() {
  return (
    <Box p={4}>
      <Card p={6}>
        <Heading>Hello Chakra</Heading>
        <Button colorScheme="blue">Click Me</Button>
      </Card>
    </Box>
  );
}

// src/prompts/react.ts
React Specific Rules:
- Use functional components with hooks
- Import React hooks from 'react' (useState, useEffect, etc.)
- Use Chakra UI components from '@chakra-ui/react'
- Use Chakra's built-in styling props (bg, p, m, etc.)
- Leverage Chakra's theming system

src/
├── App.tsx                # Main component
├── main.tsx               # Entry point (ChakraProvider)
├── components/            # Reusable components
├── hooks/                 # Custom hooks
├── utils/                 # Helper functions
└── types/                 # TypeScript definitions

{
  "vue": "^3.4.0",
  "vuetify": "^3.5.0",
  "@mdi/font": "latest",     // Material Design Icons
  "tailwindcss": "latest"
}

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-card>
          <v-card-title>Hello Vuetify</v-card-title>
          <v-card-text>
            <v-btn color="primary">Click Me</v-btn>
          </v-card-text>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

// src/prompts/vue.ts
Vue Specific Rules:
- Use Composition API with <script setup> syntax
- Import Vue reactivity from 'vue' (ref, computed, watch, etc.)
- Use Vuetify components from 'vuetify/components'
- Use proper v-bind, v-on, v-model directives
- Implement proper component lifecycle hooks

<script setup lang="ts">
import { ref, computed } from 'vue';
import { VBtn, VCard } from 'vuetify/components';

interface Props {
  title: string;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  click: [id: string]
}>();

const count = ref(0);
const doubled = computed(() => count.value * 2);
</script>

<template>
  <v-card>
    <v-card-title>{{ title }}</v-card-title>
    <v-card-text>Count: {{ doubled }}</v-card-text>
    <v-btn @click="count++">Increment</v-btn>
  </v-card>
</template>

<style scoped>
/* Scoped styles or Tailwind classes */
</style>

src/
├── App.vue                # Main component
├── main.ts                # Entry (createVuetify)
├── components/            # .vue components
├── composables/           # useFeature.ts
├── utils/                 # Helpers
└── types/                 # TypeScript types

{
  "svelte": "^4.0.0",
  "@sveltejs/kit": "^2.0.0",
  "daisyui": "latest",        // Tailwind component library
  "tailwindcss": "latest"
}

<script lang="ts">
  let count = 0;
  $: doubled = count * 2;  // Reactive declaration
</script>

<div class="card bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Counter</h2>
    <p>Count: {doubled}</p>
    <div class="card-actions">
      <button class="btn btn-primary" on:click={() => count++}>
        Increment
      </button>
    </div>
  </div>
</div>

// src/prompts/svelte.ts
Svelte Specific Rules:
- Use Svelte's reactive declarations with $:
- Use DaisyUI classes directly in markup (btn, card, modal, etc.)
- Use SvelteKit's load functions for data fetching
- Implement proper lifecycle (onMount, onDestroy)
- Use Svelte stores for global state

<script lang="ts">
  import { onMount } from 'svelte';
  import { writable } from 'svelte/store';
  
  // Props
  export let title: string;
  export let count = 0;
  
  // Reactive declarations
  $: doubled = count * 2;
  $: greeting = `Count is ${count}`;
  
  // Functions
  function handleClick() {
    count++;
  }
  
  // Lifecycle
  onMount(() => {
    console.log('Component mounted');
  });
</script>

<div class="card">
  <h1 class="text-2xl font-bold">{title}</h1>
  <p>{greeting}</p>
  <p>Doubled: {doubled}</p>
  <button class="btn" on:click={handleClick}>Click</button>
</div>

<style>
  /* Component-scoped styles */
</style>

src/
├── routes/
│   ├── +page.svelte       # Home page
│   ├── +layout.svelte     # Root layout
│   └── about/
│       └── +page.svelte   # /about route
├── lib/
│   ├── components/        # Reusable .svelte
│   ├── stores/            # Svelte stores
│   ├── utils/             # Helpers
│   └── types/             # TypeScript

User: "Convert this to Angular"
AI: *Regenerates using Angular template with Material Design*

User: "Rebuild with Svelte for performance"
AI: *Recreates using SvelteKit with DaisyUI*