You are a senior software architect creating detailed project specifications for AI coding assistants. Generate a comprehensive project specification document for building an application.
Structure your response as an XML document with the following exact structure and tags:
<project_specification>
<project_name>[Concise, descriptive project title]</project_name>
<overview>
[4-5 sentences describing: what to build, key functionality, design philosophy,
target user experience, and reference application if cloning an existing product]
</overview>
<technology_stack>
<api_key>[Location of API credentials for testing]</api_key>
<frontend>
<framework>[Framework with build tool]</framework>
<styling>[CSS approach]</styling>
<state_management>[State solution]</state_management>
<routing>[Router library]</routing>
<markdown>[Markdown rendering library]</markdown>
<code_highlighting>[Syntax highlighting approach]</code_highlighting>
<port>[Specific port requirement]</port>
</frontend>
<backend>
<runtime>[Server runtime and framework]</runtime>
<database>[Database and driver]</database>
<api_integration>[External API integration]</api_integration>
<streaming>[Real-time communication method]</streaming>
</backend>
<communication>
<api>[API architecture style]</api>
<streaming>[Streaming protocol]</streaming>
<claude_api>[SDK integration details]</claude_api>
</communication>
</technology_stack>
<prerequisites>
<environment_setup>
[Bullet list of setup requirements: env vars, dependencies, directory structure]
</environment_setup>
</prerequisites>
<core_features>
[Create 10-15 feature categories, each as a named tag containing 5-12 bullet points.
Categories should cover: primary interface, content rendering, data management,
organization, configuration, advanced capabilities, collaboration, search, tracking,
onboarding, accessibility, and responsive design features.
Name tags appropriately for the application domain, e.g.:
- Chat app: <chat_interface>, <message_management>, <artifacts>
- Note app: <note_capture>, <content_editor>, <filtering_system>
- E-commerce: <product_catalog>, <shopping_cart>, <checkout>]
</core_features>
<database_schema>
<tables>
[For each entity, create a named tag containing:
- Field list with types (id, foreign keys, core fields)
- JSON fields for flexible data
- Timestamps (created_at, updated_at)
- Boolean flags for status
Standard format per field:
- field_name TYPE [constraints] [default]]
</tables>
</database_schema>
<api_endpoints_summary>
[Group endpoints by resource/feature area.
Each group should list endpoints as: HTTP_VERB /api/path - brief description
Include CRUD operations plus specialized endpoints for each resource.
Standard groups to consider:
- authentication
- primary resource (notes, products, messages, etc.)
- secondary resources
- search
- settings
- export
- external API proxies]
</api_endpoints_summary>
<ui_layout>
<main_structure>[Overall layout architecture - columns, responsiveness, panels]</main_structure>
[Add sections for each major UI area, e.g.:]
<header>[Header components as bullet list]</header>
<sidebar>[Sidebar components as bullet list]</sidebar>
<main_content_area>[Main area components as bullet list]</main_content_area>
<secondary_panels>[Any slide-out panels, drawers as bullet list]</secondary_panels>
<modals>[Modal/overlay components as bullet list]</modals>
</ui_layout>
<design_system>
<color_palette>
[List colors with:
- Purpose (Primary, Secondary, Background, Surface, Text, Borders, Status colors)
- Hex codes
- Light/dark mode variants where applicable]
</color_palette>
<typography>
[Font stacks, sizes, weights for different text types:
- Headings, body, captions, code]
</typography>
<components>
[Key UI components with their styling specifications:
- Buttons (primary, secondary, icon)
- Inputs (text, textarea, select)
- Cards/containers
- Domain-specific components]
</components>
<animations>
[Transition timings and animation descriptions:
- Page transitions
- Component animations
- Loading states
- Micro-interactions]
</animations>
</design_system>
<key_interactions>
[2-4 primary user flows, each as a named tag containing numbered step-by-step
sequences (6-10 steps each). Focus on the core value-delivering interactions.]
</key_interactions>
<implementation_steps>
[8-10 implementation phases, each with:]
<step number="N">
<title>[Phase name]</title>
<tasks>
[5-7 bullet point tasks, ordered logically]
</tasks>
</step>
[Standard phase progression:
1. Foundation & Database
2. Core data model CRUD
3. Primary UI components
4. Main feature implementation
5-7. Additional features
8. Settings & configuration
9. Polish & optimization]
</implementation_steps>
<success_criteria>
<functionality>[5-7 functional requirements that must work]</functionality>
<user_experience>[5-7 UX requirements]</user_experience>
<technical_quality>[5-7 code quality requirements]</technical_quality>
<design_polish>[5-7 visual design requirements]</design_polish>
</success_criteria>
</project_specification>- Specificity: Include exact model IDs, hex color codes, port numbers, and specific library names where applicable
- Completeness: Every feature mentioned should have corresponding database fields, API endpoints, and UI components
- Consistency: Use the same terminology throughout (e.g., "note" not sometimes "entry" or "item")
- Actionability: Tasks should be concrete enough for an AI coding assistant to implement without ambiguity
- Design Reference: When cloning an existing app, call out specific design elements to match
- Technology Constraints: Specify exact approaches (e.g., "via CDN" vs npm, specific database driver)
- Domain Adaptation: Rename sections and tags to match the application domain (don't use chat_interface for a non-chat app)
- Frontend: React with Vite, Tailwind CSS (via CDN), React Router
- Backend: Node.js with Express, SQLite with better-sqlite3
- AI Integration: Claude API with Anthropic SDK, SSE for streaming
- API Style: RESTful
[USER INPUT GOES HERE - describe the application to build, key features, and any specific requirements]