trae-starter 0.0.1

package/templates/proto/.trae/skills/ui-ux-pro-max/scripts/search.py

@@ -0,0 +1,114 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
+Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
+       python search.py "<query>" --design-system [-p "Project Name"]
+       python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
+
+Domains: style, prompt, color, chart, landing, product, ux, typography, google-fonts
+Stacks: html-tailwind, react, nextjs
+
+Persistence (Master + Overrides pattern):
+  --persist    Save design system to design-system/MASTER.md
+  --page       Also create a page-specific override file in design-system/pages/
+"""
+
+import argparse
+import sys
+import io
+from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
+from design_system import generate_design_system, persist_design_system
+
+# Force UTF-8 for stdout/stderr to handle emojis on Windows (cp1252 default)
+if sys.stdout.encoding and sys.stdout.encoding.lower() != 'utf-8':
+    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
+if sys.stderr.encoding and sys.stderr.encoding.lower() != 'utf-8':
+    sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8')
+
+
+def format_output(result):
+    """Format results for Claude consumption (token-optimized)"""
+    if "error" in result:
+        return f"Error: {result['error']}"
+
+    output = []
+    if result.get("stack"):
+        output.append(f"## UI Pro Max Stack Guidelines")
+        output.append(f"**Stack:** {result['stack']} | **Query:** {result['query']}")
+    else:
+        output.append(f"## UI Pro Max Search Results")
+        output.append(f"**Domain:** {result['domain']} | **Query:** {result['query']}")
+    output.append(f"**Source:** {result['file']} | **Found:** {result['count']} results\n")
+
+    for i, row in enumerate(result['results'], 1):
+        output.append(f"### Result {i}")
+        for key, value in row.items():
+            value_str = str(value)
+            if len(value_str) > 300:
+                value_str = value_str[:300] + "..."
+            output.append(f"- **{key}:** {value_str}")
+        output.append("")
+
+    return "\n".join(output)
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="UI Pro Max Search")
+    parser.add_argument("query", help="Search query")
+    parser.add_argument("--domain", "-d", choices=list(CSV_CONFIG.keys()), help="Search domain")
+    parser.add_argument("--stack", "-s", choices=AVAILABLE_STACKS, help="Stack-specific search (html-tailwind, react, nextjs)")
+    parser.add_argument("--max-results", "-n", type=int, default=MAX_RESULTS, help="Max results (default: 3)")
+    parser.add_argument("--json", action="store_true", help="Output as JSON")
+    # Design system generation
+    parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
+    parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
+    parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
+    # Persistence (Master + Overrides pattern)
+    parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
+    parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
+    parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
+
+    args = parser.parse_args()
+
+    # Design system takes priority
+    if args.design_system:
+        result = generate_design_system(
+            args.query, 
+            args.project_name, 
+            args.format,
+            persist=args.persist,
+            page=args.page,
+            output_dir=args.output_dir
+        )
+        print(result)
+        
+        # Print persistence confirmation
+        if args.persist:
+            project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
+            print("\n" + "=" * 60)
+            print(f"✅ Design system persisted to design-system/{project_slug}/")
+            print(f"   📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
+            if args.page:
+                page_filename = args.page.lower().replace(' ', '-')
+                print(f"   📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
+            print("")
+            print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
+            print(f"   If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
+            print("=" * 60)
+    # Stack search
+    elif args.stack:
+        result = search_stack(args.query, args.stack, args.max_results)
+        if args.json:
+            import json
+            print(json.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result))
+    # Domain search
+    else:
+        result = search(args.query, args.domain, args.max_results)
+        if args.json:
+            import json
+            print(json.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result))

package/templates/proto/README.md

@@ -0,0 +1,77 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+## Project Conventions
+
+- **Demo Directory**: The `Demo` page (`src/pages/Demo`) is an example directory for the project. **Do not delete or modify it** unless the intent explicitly states to add or modify a demo.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/templates/proto/agent.md

@@ -0,0 +1,361 @@
+# Project Overview
+
+This is a modern React web application built with Vite and TypeScript.
+
+## Technology Stack
+
+- **Framework**: React 19
+- **Routing**: React Router v7
+- **Language**: TypeScript (v5.9)
+- **Build Tool**: Vite (v8)
+- **Styling**: Tailwind CSS (v4) with PostCSS and Autoprefixer
+- **Linting**: ESLint (v9) with Flat Config (`eslint.config.js`)
+- **Package Manager**: pnpm
+
+## Project Structure
+
+- `/src` - Source code directory
+  - `/assets` - Static assets like images and SVGs
+  - `/components` - Global reusable UI components
+    - `/ui` - Atomic UI components (purely for rendering)
+      - `ComponentName/` - Component directory (PascalCase, e.g., `SampleButton/`)
+        - `componentName.tsx` - Component file (camelCase)
+        - `componentName.css` - Component specific styles
+    - `/features` - Functional UI components
+  - `/data` - Mock data and type definitions for demo purposes
+    - `types.ts` - TypeScript interfaces/types for the mock data
+    - `/mock` - JSON and CSV files containing the mock data
+  - `/pages` - Page components for routing
+    - `PageName/` - Directory for a specific page (e.g., `Home/`, `Demo/`)
+      - `index.tsx` - Main entry file for the page
+      - `components/` - Logical components specific to this page template
+  - `/utils` - Utility functions and helpers
+  - `App.tsx` - Main application component with routing setup
+  - `main.tsx` - Application entry point
+  - `index.css` - Global styles and Tailwind directives
+- `/public` - Static assets served directly (e.g., favicons)
+
+## Development Guidelines
+
+1. **Architecture & Layering**:
+   - The project strictly separates UI and logic.
+   - **UI Components**: Responsible only for rendering. Placed in `src/components/ui` (atomic) or `src/components/features` (functional).
+   - **Logical Components**: Specific to a page template, placed in `src/pages/[PageName]/components/`.
+   - **Pages**: A page is composed of multiple logical components. Layout components that combine them can be written directly within the page's `index.tsx`.
+2. **Naming Conventions**: Component directories must be PascalCase (e.g., `SampleButton`), and files inside them must be camelCase (e.g., `sampleButton.tsx`, `sampleButton.css`). Pages use `index.tsx` as their entry.
+3. **Data Management (Demo First)**:
+   - The project is primarily used for demo presentations.
+   - All mock data should be placed in the `src/data/mock/` directory (supports `.json` and `.csv` formats).
+   - Strict TypeScript types must be defined for all mock data in `src/data/types.ts` to ensure type safety across the application.
+4. **Styling**: Use Tailwind CSS utility classes for styling. For component-specific custom CSS, place it in the component's directory.
+5. **TypeScript**: Use strict typing. Avoid using `any` type; define interfaces or types for props and state.
+6. **Routing**: Use React Router v7 for any navigation or new pages. Place new page components in `src/pages/`.
+7. **State Management**: Use React built-in hooks (`useState`, `useReducer`, `useContext`) for state management.
+8. **Linting**: Ensure code passes ESLint rules defined in the project.
+9. **Demo Directory Convention**: The `Demo` page (`src/pages/Demo`) serves as an example directory for the project. **Do not delete or modify it** unless the intent explicitly states to add or modify a demo.
+
+<br />
+
+**React and TypeScript guidance**
+
+Your task is to generate a React single-page application (SPA) using TypeScript. Adhere strictly to the following guidelines:
+
+**TypeScript & Type Safety**
+
+- **Type Imports:**
+  - All `import` statements **MUST** be placed at the top level of the module (alongside other imports).
+  - **MUST NOT** use `import` inline within other type annotations or code structures.
+  - **MUST** use named import; do *not* use object destructuring.
+    - Correct Example: `import { BarChart } from 'recharts';`
+    - Incorrect Example: `const { BarChart } = Recharts;`
+  - **MUST NOT** use `import type` to import enum type and use its value; use `import {...}` instead.
+    - Correct Example
+    ```
+    // types.ts
+    export enum CarType {
+      SUV = 'SUV',
+      SEDAN = 'SEDAN',
+      TRUCK = 'TRUCK'
+    }
+    // car.ts
+    import {CarType} from './types'
+    const carType = CarType.SUV; // Can use the enum value because it is using `import` directly.
+    ```
+    - Incorrect Example
+    ```
+     // types.ts
+    export enum CarType {
+      SUV = 'SUV',
+      SEDAN = 'SEDAN',
+      TRUCK = 'TRUCK'
+    }
+    // car.ts
+    import type {CarType} from './types'
+    const carType = CarType.SUV; // Cannot use the enum value during runtime because it is using `import type`.
+    ```
+  - **CRITICAL:** When using any constants or types defined in the modules (e.g., `constants`, `types`), you **MUST** explicitly import them from their respective source module at the top of the file before using them. Do not assume they are globally available.
+- **Enums:**
+  - **MUST** use standard `enum` declarations (e.g., `enum MyEnum { Value1, Value2 }`).
+  - **MUST NOT** use `const enum`. Use standard `enum` instead to ensure the enum definition is preserved in the compiled output.
+
+**Styling**
+
+- **Method:** Use **Tailwind CSS ONLY**.
+- **Restrictions:** **DO NOT** use separate CSS files (`.css`, `.module.css`), CSS-in-JS libraries (styled-components, emotion, etc.), or inline `style` attributes.
+- **Guidance:** Implement layout, color palette, and specific styles based on the web app's features.
+
+**Responsive Design**
+
+- **Cross-Device Support:** Ensure the application provides an optimal and consistent user experience across a wide range of devices, including desktops, tablets, and mobile phones.
+- **Mobile-First Approach:** Adhere to Tailwind's mobile-first principle. Design and style for the smallest screen size by default, then use breakpoint prefixes (e.g., sm:, md:, lg:) to progressively enhance the layout for larger screens. This ensures a functional baseline experience on all devices and leads to cleaner, more maintainable code.
+  \*. **Persistent Call-to-Action:** Make primary controls sticky to ensure they are always readily accessible, regardless of scroll position.
+
+**React & TSX Syntax Rules**
+
+- **Rendering:** Use the `createRoot` API for rendering the application. **MUST NOT** use the legacy `ReactDOM.render`.
+  - **Correct** **`index.tsx`** **Example (React 18+):**
+    ```tsx
+    import React from 'react';
+    import ReactDOM from 'react-dom/client'; // <--- Use 'react-dom/client'
+    import App from './App'; // Assuming App is in App.tsx
+
+    const rootElement = document.getElementById('root');
+    if (!rootElement) {
+      throw new Error("Could not find root element to mount to");
+    }
+
+    const root = ReactDOM.createRoot(rootElement);
+    root.render(
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    );
+    ```
+- **TSX Expressions:** Use standard JavaScript expressions inside curly braces `{}`.
+- **Template Literals (Backticks)**: Must *not* escape the outer delimiting backticks; you must escape the inner literal backticks.
+  - Outer delimiting backticks: The backticks that start and end the template literal string must *not* be escaped. These define the template literal.
+    **Correct usage:**
+    ```
+    const simpleGreeting = `Hello, ${name}!`; // Outer backticks are NOT escaped
+
+    const multiLinePrompt = `
+    This is a multi-line prompt
+    for ${name}.
+    ---
+    Keep it simple.
+    ---
+    `; // Outer backticks are NOT escaped
+
+    alert(`got error ${error}`); // The outer backticks in a function argument are not escaped
+    ```
+    **Incorrect usage:**
+    ```
+    // INCORRECT - Escaping the outer backticks
+    const simpleGreeting = \`Hello, ${name}!\`;
+
+    // INCORRECT - Escaping the outer backticks in a function argument
+    alert(\`got error ${error}\`);
+
+    // INCORRECT - Escaping the outer backticks
+    const multiLinePrompt = \`
+    This is a multi-line prompt
+    ...
+    \`;
+    ```
+  - Inner literal backticks: When including a backtick character inside the string, you must escape the inner literal backtick.
+    **Correct usage**
+    ```
+    const commandInstruction = `To run the script, type \`npm start\` in your terminal.`; // Inner backticks are escaped
+    const markdownCodeBlock = `
+      Here's an example in JSON:
+      \`\`\`json
+      {
+        "key": "value"
+      }
+      \`\`\`
+      This is how you include a literal code block.
+      `; // Inner backticks are escaped
+    ```
+    **Incorrect usage:**
+    ```
+    // INCORRECT - If you want `npm start` to have literal backticks
+    const commandInstruction = `To run the script, type `npm start` in your terminal.`;
+    // This would likely cause a syntax error because the second ` would end the template literal prematurely.
+    ```
+- **Generics in Arrow Functions:** For generic arrow functions in TSX, a trailing comma **MUST** be added after the type parameter(s) to avoid parsing ambiguity. Only use Generics when the code is truly reusable.
+  - **Correct:** `const processData = <T,>(data: T): T => { ... };` (Note the comma after `T`)
+  - **Incorrect:** `const processData = <T>(data: T): T => { ... };`
+- **MUST NOT** use `<style jsx>` which doesn't work in standard React.
+- **React Router:** The app will run in an environment where it cannot update the URL path, except for the hash string. As such, do not generate any code that depends on manipulating the URL path, such as using React's `BrowserRouter`. But you may use React's `HashRouter`, as it only manipulates the hash string.
+- **MUST NOT** use `react-dropzone` for file upload; use a file input element instead, for example, `<input type="file">`.
+
+**Code Quality & Patterns**
+
+- **Components:** Use **Functional Components** and **React Hooks** (e.g., `useState`, `useEffect`, `useCallback`).
+- **Readability:** Prioritize clean, readable, and well-organized code.
+- **Performance:** Write performant code where applicable.
+- **Accessibility:** Ensure sufficient color contrast between text and its background for readability.
+
+**Libraries**
+
+- Use popular and existing libraries for improving functionality and visual appeal. Do not use mock or made-up libraries.
+- Use `d3` for data visualization.
+- Use `recharts` for charts.
+
+**React common pitfalls**
+
+You must avoid the common pitfalls below when generating the code.
+
+- **React Hook Infinite Loop:** When using `useEffect` and `useCallback` together, be cautious to avoid infinite re-render loops.
+  - **The Pitfall:** A common loop occurs when:
+    1. A `useEffect` hook includes a memoized function (from `useCallback`) in its dependency array.
+    2. The `useCallback` hook includes a state variable (e.g., `count`) in *its* dependency array.
+    3. The function *inside* `useCallback` updates that same state variable (`setCount`) based on its current value (`count + 1`).
+    - *Resulting Cycle:* `setCount` updates `count` -> Component re-renders -> `useCallback` sees new `count`, creates a *new* function instance -> `useEffect` sees the function changed, runs again -> Calls `setCount`... loop!
+    - When using `useEffect`, if you want to run only once when the component mounts (and clean up when it unmounts), an empty dependency array \[] is the correct pattern.
+  - **Incorrect Code Example:**
+  ```
+  const [count, setCount] = useState(0);
+  const [message, setMessage] = useState('Loading...');
+
+  // This function's identity changes whenever 'count' changes
+  const incrementAndLog = useCallback(() => {
+    console.log('incrementAndLog called, current count:', count);
+    const newCount = count + 1;
+    setMessage(`Loading count ${newCount}...`); // Simulate work
+    // Simulate async operation like fetching
+    setTimeout(() => {
+      console.log('Setting count to:', newCount);
+      setCount(newCount); // <-- This state update triggers the useCallback dependency change
+      setMessage(`Count is ${newCount}`);
+    }, 500);
+  }, [count]); // <-- Depends on 'count'
+
+  // This effect runs whenever 'incrementAndLog' changes identity
+  useEffect(() => {
+    console.log("Effect running because incrementAndLog changed");
+    incrementAndLog(); // Call the function
+  }, [incrementAndLog]); // <-- Depends on the function that depends on 'count'
+  ```
+  - **Correct Code Example:**
+  ```
+  const [count, setCount] = useState(0);
+  const [message, setMessage] = useState('Loading...');
+
+  const incrementAndLog = useCallback(() => {
+  // Use functional update to avoid direct dependency on 'count' in useCallback
+  // OR keep the dependency but fix the useEffect call
+    setCount(prevCount => {
+      console.log('incrementAndLog called, previous count:', prevCount);
+      const newCount = prevCount + 1;
+      setMessage(`Loading count ${newCount}...`);
+      // Simulate async operation
+      setTimeout(() => {
+        console.log('Setting count (functional update) to:', newCount);
+        setMessage(`Count is ${newCount}`);
+      }, 500);
+      return newCount; // Return the new count for the functional update
+    });
+  }, [count]);
+
+  // This effect runs ONLY ONCE on mount
+  useEffect(() => {
+    console.log("Effect running ONCE on mount to set initial state");
+    setMessage('Setting initial count...');
+    // Simulate initial load
+    setTimeout(() => {
+      setCount(1); // Set initial count
+      setMessage('Count is 1');
+    }, 500);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // <-- Empty array fixes the loop. Runs only once.
+  ```
+  - **Incorrect Code Example:**
+  ```
+   useEffect(() => {
+    fetchScenario();
+  }, [fetchScenario]); // Infinite initialize data.
+  ```
+  - **Correct Code Example:**
+  ```
+  useEffect(() => {
+    fetchScenario();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only initialize data once
+  ```
+  The correct code will very likely cause the `eslint-plugin-react-hooks` to raise a warning. Add `eslint-disable-next-line react-hooks/exhaustive-deps` to suppress the warning.
+- **Be Explicit About Component Scope:**
+  - Ensure helper components are defined outside the main component function body to prevent re-rendering issues.
+  - Define components outside parent components to avoid unnecessary unmounting and remounting, which can lead to loss of input state and focus.
+  - **Incorrect Code Example:**
+  ```
+  function ParentComponent() {
+    const [text, setText] = useState('');
+    // !! BAD: ChildInput is defined INSIDE ParentComponent !!
+    const ChildInput: React.FC = () => {
+      return (
+        <input
+          type="text"
+          value={text} // Gets value from parent state
+          onChange={(e) => setText(e.target.value)} // Updates parent state
+          placeholder="Type here..."
+          className="border p-2"
+        />
+      );
+    };
+
+    return (
+      <div className="p-4 border border-red-500">
+        <h2 className="text-lg font-bold mb-2">Bad Example</h2>
+        <p className="mb-2">Parent State: {text}</p>
+        <ChildInput /> {/* Rendering the locally defined component */}
+      </div>
+    );
+  }
+  export default ParentComponent;
+  ```
+  - **Correct Code Example:**
+  ```
+  interface ChildInputProps {
+    value: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  }
+
+  const ChildInput: React.FC<ChildInputProps> = ({ value, onChange }) => {
+    return (
+      <input
+        type="text"
+        value={value} // Gets value from props
+        onChange={onChange} // Uses handler from props
+        placeholder="Type here..."
+        className="border p-2"
+      />
+    );
+  };
+
+  function ParentComponent() {
+    const [text, setText] = useState('');
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setText(e.target.value);
+    };
+
+    return (
+      <div className="p-4 border border-green-500">
+        <h2 className="text-lg font-bold mb-2">Good Example</h2>
+        <p className="mb-2">Parent State: {text}</p>
+        {/* Pass state and handler down as props */}
+        <ChildInput value={text} onChange={handleInputChange} />
+      </div>
+    );
+  }
+
+  export default ParentComponent;
+  ```
+
+## Scripts
+
+- `pnpm dev` - Start the development server
+- `pnpm build` - Type check and build the application for production
+- `pnpm lint` - Run ESLint on the codebase
+- `pnpm preview` - Preview the production build locally
+

package/templates/proto/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/templates/proto/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>my-vue-app</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/proto/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "proto",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1",
+    "recharts": "^3.8.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.0",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^8.0.0"
+  }
+}