awel 0.1.2 → 0.2.0

package/dist/cli/agent.d.ts

@@ -2,5 +2,6 @@ import { Hono } from 'hono';
 /**
  * Creates the agent API routes with SSE streaming.
  * @param projectCwd - The user's project directory (where they ran `awel dev`)
+ * @param isFresh - Getter for whether the project is in creation mode
  */
-export declare function createAgentRoute(projectCwd: string, targetPort: number): Hono<import("hono/types").BlankEnv, import("hono/types").BlankSchema, "/">;
+export declare function createAgentRoute(projectCwd: string, targetPort: number, isFresh?: () => boolean): Hono<import("hono/types").BlankEnv, import("hono/types").BlankSchema, "/">;

package/dist/cli/agent.js

@@ -95,8 +95,9 @@ function setSSEHeaders(c) {
 /**
  * Creates the agent API routes with SSE streaming.
  * @param projectCwd - The user's project directory (where they ran `awel dev`)
+ * @param isFresh - Getter for whether the project is in creation mode
  */
-export function createAgentRoute(projectCwd, targetPort) {
+export function createAgentRoute(projectCwd, targetPort, isFresh) {
     const agent = new Hono();
     // ─── Model Catalog ───────────────────────────────────────
     agent.get('/api/models', (c) => {
@@ -158,7 +159,7 @@ export function createAgentRoute(projectCwd, targetPort) {
             // Appending eagerly would leave orphan user messages in the session when
             // the stream is aborted or paused for user input, causing consecutive
             // user messages that trigger API 400 errors (especially with Anthropic).
-            provider.streamResponse(adapter, messages, { projectCwd, targetPort, signal })
+            provider.streamResponse(adapter, messages, { projectCwd, targetPort, signal, creationMode: isFresh?.() })
                 .then((responseMessages) => {
                 if (responseMessages.length > 0) {
                     appendUserMessage(userContent);

package/dist/cli/awel-config.d.ts

@@ -1,6 +1,10 @@
 export interface AwelConfig {
     babelPlugin?: boolean;
     onboarded?: boolean;
+    fresh?: boolean;
+    createdAt?: string;
 }
 export declare function readAwelConfig(projectCwd: string): AwelConfig;
 export declare function writeAwelConfig(projectCwd: string, config: AwelConfig): void;
+export declare function isProjectFresh(projectCwd: string): boolean;
+export declare function markProjectReady(projectCwd: string): void;

package/dist/cli/awel-config.js

@@ -18,3 +18,11 @@ export function writeAwelConfig(projectCwd, config) {
     }
     writeFileSync(join(dir, 'config.json'), JSON.stringify(config, null, 2) + '\n', 'utf-8');
 }
+export function isProjectFresh(projectCwd) {
+    return readAwelConfig(projectCwd).fresh === true;
+}
+export function markProjectReady(projectCwd) {
+    const config = readAwelConfig(projectCwd);
+    config.fresh = false;
+    writeAwelConfig(projectCwd, config);
+}

package/dist/cli/create.d.ts

@@ -0,0 +1 @@
+export declare function runCreate(projectNameArg?: string): Promise<void>;

package/dist/cli/create.js

@@ -0,0 +1,136 @@
+import { existsSync, cpSync, readdirSync } from 'fs';
+import { join, dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+import * as p from '@clack/prompts';
+import { writeAwelConfig } from './awel-config.js';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEMPLATES = [
+    { value: 'blank', label: 'Blank', hint: 'Empty Next.js app with AGENT.md' },
+    { value: 'landing', label: 'Landing Page', hint: 'Hero, features, and CTA sections' },
+    { value: 'dashboard', label: 'Dashboard', hint: 'Sidebar layout with stats cards' },
+    { value: 'blog', label: 'Blog', hint: 'Blog listing with dynamic post pages' },
+    { value: 'portfolio', label: 'Portfolio', hint: 'Project showcase with cards' },
+    { value: 'saas', label: 'SaaS', hint: 'Landing, pricing, and dashboard pages' },
+];
+function detectPackageManager() {
+    const agent = process.env.npm_config_user_agent;
+    if (agent) {
+        if (agent.startsWith('pnpm'))
+            return 'pnpm';
+        if (agent.startsWith('yarn'))
+            return 'yarn';
+        if (agent.startsWith('bun'))
+            return 'bun';
+    }
+    return 'npm';
+}
+function getTemplatesDir() {
+    return join(__dirname, 'templates');
+}
+export async function runCreate(projectNameArg) {
+    p.intro('Create a new Awel project');
+    // 1. Project name
+    let projectName;
+    if (projectNameArg) {
+        projectName = projectNameArg;
+        p.log.info(`Project name: ${projectName}`);
+    }
+    else {
+        const result = await p.text({
+            message: 'What is your project name?',
+            placeholder: 'my-app',
+            validate(value) {
+                if (!value || !value.trim())
+                    return 'Project name is required';
+                if (!/^[a-zA-Z0-9_-]+$/.test(value.trim()))
+                    return 'Project name can only contain letters, numbers, hyphens, and underscores';
+            },
+        });
+        if (p.isCancel(result)) {
+            p.cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        projectName = result;
+    }
+    const projectDir = resolve(process.cwd(), projectName);
+    // Check if directory already exists
+    if (existsSync(projectDir)) {
+        p.cancel(`Directory "${projectName}" already exists.`);
+        process.exit(1);
+    }
+    // 2. Template selection
+    const template = await p.select({
+        message: 'Which template would you like to use?',
+        options: TEMPLATES,
+    });
+    if (p.isCancel(template)) {
+        p.cancel('Operation cancelled.');
+        process.exit(0);
+    }
+    // 3. Package manager
+    const detected = detectPackageManager();
+    const packageManager = await p.select({
+        message: 'Which package manager do you want to use?',
+        options: [
+            { value: 'npm', label: 'npm', hint: detected === 'npm' ? 'detected' : undefined },
+            { value: 'pnpm', label: 'pnpm', hint: detected === 'pnpm' ? 'detected' : undefined },
+            { value: 'yarn', label: 'yarn', hint: detected === 'yarn' ? 'detected' : undefined },
+            { value: 'bun', label: 'bun', hint: detected === 'bun' ? 'detected' : undefined },
+        ],
+        initialValue: detected,
+    });
+    if (p.isCancel(packageManager)) {
+        p.cancel('Operation cancelled.');
+        process.exit(0);
+    }
+    const pm = packageManager;
+    const templateName = template;
+    // 4. Scaffold with create-next-app
+    const s = p.spinner();
+    s.start('Creating Next.js app...');
+    const useFlag = pm === 'npm' ? '--use-npm' : pm === 'pnpm' ? '--use-pnpm' : pm === 'yarn' ? '--use-yarn' : '--use-bun';
+    const cnaArgs = [
+        'create-next-app@latest',
+        projectDir,
+        '--ts',
+        '--tailwind',
+        '--eslint',
+        '--app',
+        '--src-dir',
+        '--import-alias', '@/*',
+        useFlag,
+    ];
+    try {
+        execSync(`npx ${cnaArgs.map(a => `"${a}"`).join(' ')}`, {
+            stdio: 'inherit',
+            timeout: 120000,
+        });
+    }
+    catch (err) {
+        s.stop('Failed to create Next.js app.');
+        const message = err instanceof Error ? err.message : String(err);
+        p.log.error(message);
+        process.exit(1);
+    }
+    s.stop('Next.js app created.');
+    // 5. Copy template overlay files
+    s.start('Applying template...');
+    const templateDir = join(getTemplatesDir(), templateName);
+    if (existsSync(templateDir) && readdirSync(templateDir).length > 0) {
+        cpSync(templateDir, projectDir, { recursive: true, force: true });
+    }
+    s.stop('Template applied.');
+    // 6. Write Awel config
+    writeAwelConfig(projectDir, {
+        template: templateName,
+        packageManager: pm,
+        createdAt: new Date().toISOString(),
+    });
+    // 7. Done
+    p.log.success(`Project "${projectName}" created with the "${templateName}" template.`);
+    p.log.info('Next steps:');
+    p.log.step(`  cd ${projectName}`);
+    p.log.step('  npx awel dev');
+    p.outro('Happy building!');
+}

package/dist/cli/index.js

@@ -6,6 +6,8 @@ import { ensureBabelPlugin } from './babel-setup.js';
 import { ensureProvider } from './onboarding.js';
 import { awel } from './logger.js';
 import { spawnDevServer } from './subprocess.js';
+import { writeAwelConfig, isProjectFresh } from './awel-config.js';
+import { resolve } from 'path';
 program
     .name('awel')
     .description('AI-powered development overlay for Next.js')
@@ -19,18 +21,70 @@ program
     const targetPort = parseInt(options.port, 10);
     if (options.verbose)
         setVerbose(true);
+    const fresh = isProjectFresh(process.cwd());
     await ensureProvider(process.cwd());
-    await ensureBabelPlugin(process.cwd());
+    if (!fresh)
+        await ensureBabelPlugin(process.cwd());
     awel.log('🌟 Starting Awel...');
+    if (fresh)
+        awel.log('   Mode: Creation (new project)');
     awel.log(`   Target app port: ${targetPort}`);
     awel.log(`   Awel control server: http://localhost:${AWEL_PORT}`);
     awel.log('');
     // Start the Awel control server (proxy + dashboard)
-    await startServer({ awelPort: AWEL_PORT, targetPort, projectCwd: process.cwd() });
+    await startServer({ awelPort: AWEL_PORT, targetPort, projectCwd: process.cwd(), fresh });
     // Start the user's Next.js app via subprocess manager (handles auto-restart)
     await spawnDevServer({ port: targetPort, cwd: process.cwd() });
     awel.log('');
-    awel.log(`✨ Awel is ready! Open http://localhost:${AWEL_PORT}`);
-    awel.log('   Look for the floating button in the bottom-right corner.');
+    if (fresh) {
+        awel.log(`✨ Awel is ready! Open http://localhost:${AWEL_PORT}`);
+        awel.log('   Describe what you want to build and Awel will create it for you.');
+    }
+    else {
+        awel.log(`✨ Awel is ready! Open http://localhost:${AWEL_PORT}`);
+        awel.log('   Look for the floating button in the bottom-right corner.');
+    }
+});
+program
+    .command('create')
+    .description('Create a new Next.js project with Awel')
+    .action(async () => {
+    const p = await import('@clack/prompts');
+    const { execa } = await import('execa');
+    p.intro('Create a new project with Awel');
+    const name = await p.text({
+        message: 'Project name',
+        placeholder: 'my-app',
+        validate: (value) => {
+            if (!value)
+                return 'Project name is required';
+            if (!/^[a-z0-9._-]+$/i.test(value))
+                return 'Project name must only contain letters, numbers, dashes, dots, and underscores';
+        },
+    });
+    if (p.isCancel(name)) {
+        p.cancel('Cancelled');
+        process.exit(0);
+    }
+    const s = p.spinner();
+    s.start('Creating Next.js project...');
+    try {
+        await execa('npx', [
+            'create-next-app@latest', name,
+            '--yes',
+            '--typescript', '--tailwind', '--eslint',
+            '--app', '--use-npm',
+        ], { cwd: process.cwd(), stdin: 'ignore', stdout: 'pipe', stderr: 'pipe' });
+    }
+    catch (err) {
+        s.stop('Failed to create project');
+        const stderr = err.stderr || err.message || String(err);
+        p.log.error(stderr);
+        process.exit(1);
+    }
+    s.stop('Project created');
+    const projectDir = resolve(process.cwd(), name);
+    writeAwelConfig(projectDir, { fresh: true, createdAt: new Date().toISOString() });
+    p.outro(`Done! Now run:\n\n  cd ${name}\n  npx awel dev`);
 });
 program.parse();

package/dist/cli/onboarding.js

@@ -1,4 +1,4 @@
-import { readAwelConfig } from './awel-config.js';
+import { readAwelConfig, writeAwelConfig } from './awel-config.js';
 import { getAvailableProviders, PROVIDER_ENV_KEYS, PROVIDER_LABELS } from './providers/registry.js';
 import { awel } from './logger.js';
 function printSetupInstructions() {
@@ -37,8 +37,8 @@ export async function ensureProvider(projectCwd) {
             awel.log(`  \u25CF ${p.label}`);
         }
         awel.log('');
-        printSetupInstructions();
-        process.exit(1);
+        writeAwelConfig(projectCwd, { ...config, onboarded: true });
+        return;
     }
     if (isFirstRun && available.length === 0) {
         // First run with NO providers — show welcome + instructions, exit

package/dist/cli/providers/types.d.ts

@@ -6,6 +6,8 @@ export interface ProviderConfig {
     targetPort: number;
     /** When aborted, the provider should stop the LLM stream and exit early. */
     signal?: AbortSignal;
+    /** When true, the agent uses a creation-mode system prompt for building new apps. */
+    creationMode?: boolean;
 }
 export interface StreamProvider {
     streamResponse(stream: SSEStreamingApi, messages: ModelMessage[], config: ProviderConfig): Promise<ResponseMessage[]>;

package/dist/cli/providers/vercel.js

@@ -67,6 +67,48 @@ Inspector Context:
 
 Language:
 - IMPORTANT: Always respond in the same language the user writes in. If the user writes in Chinese, respond in Chinese. If the user writes in English, respond in English. Match the user's language throughout the conversation.`;
+const CREATION_SYSTEM_PROMPT = `You are Awel in creation mode. The user has just created a fresh Next.js project and wants to build something new.
+
+You have access to the same tools as in normal mode:
+- Read: Read file contents
+- Write: Create or overwrite files (creates parent directories automatically)
+- Edit: Find-and-replace edits in files
+- Bash: Execute shell commands
+- Glob: Find files by glob pattern
+- Ls: List directory contents
+- AskUser: Ask the user clarifying questions with selectable options
+- Grep: Search file contents for a regex pattern
+- MultiEdit: Apply multiple find-and-replace edits to a single file in one call
+- WebSearch: Search the web for real-time information
+- WebFetch: Fetch content from a URL
+- CodeSearch: Search the web for code examples
+- TodoRead: Read the current task list
+- TodoWrite: Create or update the task list
+- RestartDevServer: Restart the dev server
+
+Your workflow:
+
+1. UNDERSTAND: If the user's request is vague or could go multiple directions, use AskUser to ask 1-3 clarifying questions about the app type, key features, and design preferences. Keep questions focused and provide concrete options.
+
+2. GENERATE: Create a complete, working Next.js app using:
+   - App Router with TypeScript
+   - Tailwind CSS for all styling
+   - Clean component structure in the app/ directory
+   - Modern, responsive design with good typography and spacing
+   - Proper error handling and loading states
+   - No placeholder code or TODOs — everything should work
+
+3. VERIFY: After generating all files, check that the dev server is running without errors. If there are build errors, fix them.
+
+Clarifying Questions:
+- When a user's request is ambiguous or has multiple valid approaches, use the AskUser tool to ask clarifying questions before proceeding.
+- Present 1-4 questions, each with 2-4 concrete options. Use multiSelect when choices are not mutually exclusive.
+- Keep header labels short (max 12 chars). Put the recommended option first with "(Recommended)" in the label.
+- CRITICAL: All fields in the AskUser tool must be plain text. Do NOT use markdown formatting.
+- After calling AskUser, STOP and wait for the user's answers before continuing.
+
+Language:
+- IMPORTANT: Always respond in the same language the user writes in. If the user writes in Chinese, respond in Chinese. If the user writes in English, respond in English.`;
 /** Detects files Claude Code uses for plan output (.claude/plans/*.md, plan.md) */
 function isPlanFile(filePath) {
     const normalized = filePath.replace(/\\/g, '/');
@@ -184,9 +226,10 @@ export function createVercelProvider(modelId, providerType) {
             try {
                 // Self-contained providers handle their own system prompt and tools internally.
                 // All other providers get our system prompt + tools.
+                const basePrompt = config.creationMode ? CREATION_SYSTEM_PROMPT : SYSTEM_PROMPT;
                 const systemPrompt = isSelfContained
                     ? undefined
-                    : `${SYSTEM_PROMPT}\n\nThe user's project directory is: ${config.projectCwd}`;
+                    : `${basePrompt}\n\nThe user's project directory is: ${config.projectCwd}`;
                 const streamTextArgs = {
                     model,
                     ...(systemPrompt && { system: systemPrompt }),

package/dist/cli/proxy.d.ts

@@ -2,4 +2,4 @@
  * Creates proxy middleware that forwards requests to the target app
  * and injects the Awel host script into HTML responses.
  */
-export declare function createProxyMiddleware(targetPort: number, projectCwd?: string): (c: any, _next: () => Promise<void>) => Promise<any>;
+export declare function createProxyMiddleware(targetPort: number, projectCwd?: string, isFresh?: () => boolean): (c: any, _next: () => Promise<void>) => Promise<any>;

package/dist/cli/proxy.js

@@ -1,10 +1,48 @@
+import { readFileSync, existsSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+/**
+ * Reads the dashboard index.html and injects the creation mode flag.
+ * Returns the modified HTML or null if the file doesn't exist.
+ */
+function getCreationModeHtml() {
+    const indexPath = join(__dirname, '../dashboard/index.html');
+    if (!existsSync(indexPath))
+        return null;
+    let html = readFileSync(indexPath, 'utf-8');
+    const creationScript = `<script>window.__AWEL_CREATION_MODE__=true</script>`;
+    if (html.includes('</head>')) {
+        html = html.replace('</head>', `${creationScript}</head>`);
+    }
+    else {
+        html = creationScript + html;
+    }
+    return html;
+}
 /**
  * Creates proxy middleware that forwards requests to the target app
  * and injects the Awel host script into HTML responses.
  */
-export function createProxyMiddleware(targetPort, projectCwd) {
+export function createProxyMiddleware(targetPort, projectCwd, isFresh) {
     return async (c, _next) => {
         const url = new URL(c.req.url);
+        // In creation mode, serve the dashboard at all HTML navigation requests.
+        // Non-HTML requests (JS, CSS, HMR) still proxy through to the dev server.
+        if (isFresh?.()) {
+            const accept = c.req.header('accept') || '';
+            const isNavigation = accept.includes('text/html');
+            if (isNavigation) {
+                const html = getCreationModeHtml();
+                if (html) {
+                    return new Response(html, {
+                        status: 200,
+                        headers: { 'Content-Type': 'text/html; charset=utf-8' },
+                    });
+                }
+            }
+        }
         const targetUrl = `http://localhost:${targetPort}${url.pathname}${url.search}`;
         try {
             // Clone headers and remove Accept-Encoding to get uncompressed response
@@ -18,7 +56,7 @@ export function createProxyMiddleware(targetPort, projectCwd) {
                     : undefined,
             });
             const contentType = response.headers.get('content-type') || '';
-            // If it's HTML, inject our script
+            // If it's HTML, inject the Awel host script
             if (contentType.includes('text/html')) {
                 let html = await response.text();
                 // Inject project CWD (for source-map resolution) and the host script
@@ -26,12 +64,8 @@ export function createProxyMiddleware(targetPort, projectCwd) {
                     ? `<script>window.__AWEL_PROJECT_CWD__=${JSON.stringify(projectCwd)}</script>`
                     : '';
                 // Constrain Next.js error overlay stacking context below Awel's UI.
-                // Covers both legacy and modern Next.js error overlay custom elements.
                 const awelOverlayStyle = `<style id="awel-overlay-fix">nextjs-portal, nextjs-portal-root, next-error-overlay, nextjs-dev-tools { position: relative !important; z-index: 999997 !important; }</style>`;
                 const scriptTag = `${awelOverlayStyle}${cwdScript}<script src="/_awel/host.js"></script>`;
-                // Inject into <head> so the script loads early — even on error pages
-                // where the body might be minimal or replaced by Next.js error recovery.
-                // Fall back to </body> then </html> if <head> isn't found.
                 if (html.includes('</head>')) {
                     html = html.replace('</head>', `${scriptTag}</head>`);
                 }
@@ -56,7 +90,6 @@ export function createProxyMiddleware(targetPort, projectCwd) {
             // For non-HTML responses, pass through as-is but clean up encoding headers
             const body = await response.arrayBuffer();
             const responseHeaders = new Headers(response.headers);
-            // Remove content-encoding since we've already decoded the response
             responseHeaders.delete('content-encoding');
             responseHeaders.delete('content-length');
             return new Response(body, {

package/dist/cli/server.d.ts

@@ -2,6 +2,7 @@ interface ServerOptions {
     awelPort: number;
     targetPort: number;
     projectCwd: string;
+    fresh?: boolean;
 }
-export declare function startServer({ awelPort, targetPort, projectCwd }: ServerOptions): Promise<void>;
+export declare function startServer({ awelPort, targetPort, projectCwd, fresh }: ServerOptions): Promise<void>;
 export {};

package/dist/cli/server.js

@@ -8,6 +8,7 @@ import { createInspectorRoute } from './inspector.js';
 import { createCommentPopupRoute } from './comment-popup.js';
 import { trackProxySocket } from './devserver.js';
 import { getMimeType } from './config.js';
+import { markProjectReady } from './awel-config.js';
 import { awel } from './logger.js';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
@@ -37,8 +38,9 @@ function serveDashboardIndex() {
         return null;
     return readFileSync(indexPath, 'utf-8');
 }
-export async function startServer({ awelPort, targetPort, projectCwd }) {
+export async function startServer({ awelPort, targetPort, projectCwd, fresh }) {
     const app = new Hono();
+    let isFresh = fresh ?? false;
     // Create a proxy for WebSocket connections
     const wsProxy = httpProxy.createProxyServer({
         target: `http://localhost:${targetPort}`,
@@ -52,13 +54,22 @@ export async function startServer({ awelPort, targetPort, projectCwd }) {
         trackProxySocket(proxySocket);
     });
     // Mount agent API routes
-    app.route('/', createAgentRoute(projectCwd, targetPort));
+    app.route('/', createAgentRoute(projectCwd, targetPort, () => isFresh));
     // Mount undo API routes
     app.route('/', createUndoRoute(projectCwd));
     // Mount inspector relay routes
     app.route('/', createInspectorRoute(projectCwd));
     // Serve the comment popup page (loaded in an iframe by the host script)
     app.route('/', createCommentPopupRoute());
+    // ─── Project Status Endpoints ─────────────────────────────
+    app.get('/api/project/status', (c) => {
+        return c.json({ fresh: isFresh });
+    });
+    app.post('/api/project/mark-ready', (c) => {
+        markProjectReady(projectCwd);
+        isFresh = false;
+        return c.json({ success: true });
+    });
     // Serve the host script
     app.get('/_awel/host.js', async (c) => {
         const hostDistPath = join(__dirname, '../host/host.js');
@@ -89,7 +100,7 @@ export async function startServer({ awelPort, targetPort, projectCwd }) {
         return c.text('Not found', 404);
     });
     // Proxy all other requests to the target app
-    app.all('*', createProxyMiddleware(targetPort, projectCwd));
+    app.all('*', createProxyMiddleware(targetPort, projectCwd, () => isFresh));
     // Create the HTTP server with Hono
     const server = serve({
         fetch: app.fetch,

package/dist/cli/templates/blank/AGENT.md

@@ -0,0 +1,24 @@
+# Project Guide
+
+## Overview
+
+This is a blank Next.js project created with Awel. It uses the App Router, TypeScript, and Tailwind CSS.
+
+## Structure
+
+- `src/app/page.tsx` — Home page
+- `src/app/layout.tsx` — Root layout with metadata and fonts
+- `src/app/globals.css` — Global styles and Tailwind imports
+
+## Conventions
+
+- Use server components by default; add `'use client'` only when needed
+- Style with Tailwind CSS utility classes
+- Keep components in `src/components/`
+- Use TypeScript for all files
+
+## Example Prompts
+
+- "Add a navigation bar with links to Home and About pages"
+- "Create an About page at /about with a brief bio section"
+- "Add a dark mode toggle using Tailwind's dark: variant"

package/dist/cli/templates/blank/src/app/page.tsx

@@ -0,0 +1,10 @@
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-8">
+      <h1 className="text-4xl font-bold tracking-tight">Welcome to your new project</h1>
+      <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
+        Open the Awel overlay to start building with AI.
+      </p>
+    </main>
+  );
+}

package/dist/cli/templates/blog/AGENT.md

@@ -0,0 +1,26 @@
+# Project Guide
+
+## Overview
+
+A blog application built with Next.js, TypeScript, and Tailwind CSS. Features a post listing page and dynamic post pages.
+
+## Structure
+
+- `src/app/page.tsx` — Blog listing page showing all posts
+- `src/app/blog/[slug]/page.tsx` — Dynamic blog post page
+- `src/lib/posts.ts` — Post data and utility functions
+
+## Conventions
+
+- Use server components by default; add `'use client'` only when needed
+- Style with Tailwind CSS utility classes
+- Keep components in `src/components/`
+- Use TypeScript for all files
+- Posts are stored as data in `src/lib/posts.ts` (replace with a CMS or MDX later)
+
+## Example Prompts
+
+- "Add a new blog post about getting started with Next.js"
+- "Add tags to posts and create a filter by tag"
+- "Add a search bar to filter posts by title"
+- "Create an RSS feed at /feed.xml"

package/dist/cli/templates/blog/src/app/blog/[slug]/page.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { getPostBySlug, getAllPosts } from '@/lib/posts';
+
+export function generateStaticParams() {
+  return getAllPosts().map((post) => ({ slug: post.slug }));
+}
+
+export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = getPostBySlug(slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <main className="mx-auto max-w-3xl px-6 py-16">
+      <Link
+        href="/"
+        className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+      >
+        &larr; Back to blog
+      </Link>
+      <article className="mt-8">
+        <time className="text-sm text-gray-500 dark:text-gray-400">
+          {post.date}
+        </time>
+        <h1 className="mt-2 text-4xl font-bold tracking-tight">
+          {post.title}
+        </h1>
+        <div className="prose prose-gray mt-8 dark:prose-invert">
+          <p>{post.content}</p>
+        </div>
+      </article>
+    </main>
+  );
+}

package/dist/cli/templates/blog/src/app/page.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import { getAllPosts } from '@/lib/posts';
+
+export default function BlogHome() {
+  const posts = getAllPosts();
+
+  return (
+    <main className="mx-auto max-w-3xl px-6 py-16">
+      <h1 className="text-4xl font-bold tracking-tight">Blog</h1>
+      <p className="mt-4 text-gray-600 dark:text-gray-400">
+        Thoughts, ideas, and tutorials.
+      </p>
+      <div className="mt-12 space-y-10">
+        {posts.map((post) => (
+          <article key={post.slug}>
+            <time className="text-sm text-gray-500 dark:text-gray-400">
+              {post.date}
+            </time>
+            <h2 className="mt-1 text-xl font-semibold">
+              <Link
+                href={`/blog/${post.slug}`}
+                className="hover:underline"
+              >
+                {post.title}
+              </Link>
+            </h2>
+            <p className="mt-2 text-gray-600 dark:text-gray-400">
+              {post.excerpt}
+            </p>
+          </article>
+        ))}
+      </div>
+    </main>
+  );
+}