d8e54d9a10
<!-- This is an auto-generated description by cubic. -->
## Summary by cubic
Parameterized the system prompt and tokenized it in e2e dumps to make
snapshots smaller and stable. No runtime behavior changes; future prompt
edits won’t churn tests.
- **Refactors**
- Exported BUILD_SYSTEM_PREFIX and BUILD_SYSTEM_POSTFIX from
system_prompt.ts.
- Updated test_helper to replace the full prompt with
${BUILD_SYSTEM_PREFIX}/${BUILD_SYSTEM_POSTFIX} tokens in message dumps.
- Regenerated e2e snapshots to use tokens, reducing ~270 lines per
snapshot.
<!-- End of auto-generated description by cubic. -->
185 lines
4.0 KiB
Plaintext
185 lines
4.0 KiB
Plaintext
===
|
|
role: system
|
|
message:
|
|
${BUILD_SYSTEM_PREFIX}
|
|
|
|
# Tech Stack
|
|
- You are building a React application.
|
|
- Use TypeScript.
|
|
- Use React Router. KEEP the routes in src/App.tsx
|
|
- Always put source code in the src folder.
|
|
- Put pages into src/pages/
|
|
- Put components into src/components/
|
|
- The main page (default page) is src/pages/Index.tsx
|
|
- UPDATE the main page to include the new components. OTHERWISE, the user can NOT see any components!
|
|
- ALWAYS try to use the shadcn/ui library.
|
|
- Tailwind CSS: always use Tailwind CSS for styling components. Utilize Tailwind classes extensively for layout, spacing, colors, and other design aspects.
|
|
|
|
Available packages and libraries:
|
|
- The lucide-react package is installed for icons.
|
|
- You ALREADY have ALL the shadcn/ui components and their dependencies installed. So you don't need to install them again.
|
|
- You have ALL the necessary Radix UI components installed.
|
|
- Use prebuilt components from the shadcn/ui library after importing them. Note that these files shouldn't be edited, so make new components if you need to change them.
|
|
|
|
|
|
${BUILD_SYSTEM_POSTFIX}
|
|
|
|
|
|
If the user wants to use supabase or do something that requires auth, database or server-side functions (e.g. loading API keys, secrets),
|
|
tell them that they need to add supabase to their app.
|
|
|
|
The following response will show a button that allows the user to add supabase to their app.
|
|
|
|
<dyad-add-integration provider="supabase"></dyad-add-integration>
|
|
|
|
# Examples
|
|
|
|
## Example 1: User wants to use Supabase
|
|
|
|
### User prompt
|
|
|
|
I want to use supabase in my app.
|
|
|
|
### Assistant response
|
|
|
|
You need to first add Supabase to your app.
|
|
|
|
<dyad-add-integration provider="supabase"></dyad-add-integration>
|
|
|
|
## Example 2: User wants to add auth to their app
|
|
|
|
### User prompt
|
|
|
|
I want to add auth to my app.
|
|
|
|
### Assistant response
|
|
|
|
You need to first add Supabase to your app and then we can add auth.
|
|
|
|
<dyad-add-integration provider="supabase"></dyad-add-integration>
|
|
|
|
|
|
===
|
|
role: user
|
|
message: This is my codebase. <dyad-file path=".gitignore">
|
|
# Logs
|
|
logs
|
|
*.log
|
|
npm-debug.log*
|
|
yarn-debug.log*
|
|
yarn-error.log*
|
|
pnpm-debug.log*
|
|
lerna-debug.log*
|
|
|
|
node_modules
|
|
dist
|
|
dist-ssr
|
|
*.local
|
|
|
|
# Editor directories and files
|
|
.vscode/*
|
|
!.vscode/extensions.json
|
|
.idea
|
|
.DS_Store
|
|
*.suo
|
|
*.ntvs*
|
|
*.njsproj
|
|
*.sln
|
|
*.sw?
|
|
|
|
</dyad-file>
|
|
|
|
<dyad-file path="file1.txt">
|
|
// File contents excluded from context
|
|
</dyad-file>
|
|
|
|
<dyad-file path="index.html">
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>dyad-generated-app</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|
|
|
|
</dyad-file>
|
|
|
|
<dyad-file path="src/App.tsx">
|
|
const App = () => <div>Minimal imported app</div>;
|
|
|
|
export default App;
|
|
|
|
</dyad-file>
|
|
|
|
<dyad-file path="src/main.tsx">
|
|
import { createRoot } from "react-dom/client";
|
|
import App from "./App.tsx";
|
|
|
|
createRoot(document.getElementById("root")!).render(<App />);
|
|
|
|
</dyad-file>
|
|
|
|
<dyad-file path="src/vite-env.d.ts">
|
|
/// <reference types="vite/client" />
|
|
|
|
</dyad-file>
|
|
|
|
<dyad-file path="tsconfig.app.json">
|
|
// File contents excluded from context
|
|
</dyad-file>
|
|
|
|
<dyad-file path="tsconfig.json">
|
|
// File contents excluded from context
|
|
</dyad-file>
|
|
|
|
<dyad-file path="tsconfig.node.json">
|
|
// File contents excluded from context
|
|
</dyad-file>
|
|
|
|
<dyad-file path="vite.config.ts">
|
|
import { defineConfig } from "vite";
|
|
import react from "@vitejs/plugin-react-swc";
|
|
import path from "path";
|
|
|
|
export default defineConfig(() => ({
|
|
server: {
|
|
host: "::",
|
|
port: 8080,
|
|
},
|
|
plugins: [react()],
|
|
resolve: {
|
|
alias: {
|
|
"@": path.resolve(__dirname, "./src"),
|
|
},
|
|
},
|
|
}));
|
|
|
|
</dyad-file>
|
|
|
|
|
|
|
|
===
|
|
role: assistant
|
|
message: OK, got it. I'm ready to help
|
|
|
|
===
|
|
role: user
|
|
message: Generate an AI_RULES.md file for this app. Describe the tech stack in 5-10 bullet points and describe clear rules about what libraries to use for what.
|
|
|
|
===
|
|
role: assistant
|
|
message: <dyad-write path="file1.txt">
|
|
A file (2)
|
|
</dyad-write>
|
|
More
|
|
EOM
|
|
|
|
===
|
|
role: user
|
|
message: [dump] hi |