Skip to content

PROJECT_STARTER.md

Latest commit

 

History

History
520 lines (349 loc) · 16.6 KB

PROJECT_STARTER.md

File metadata and controls

520 lines (349 loc) · 16.6 KB

Project Starter Template

Instructions: Fill out this template to define your project. The /project-planner command will analyze this document to create a comprehensive project plan.

Project Information

Project Name

North Coast AI

Project Description

North Coast AI is a web application that is on the cutting edge of AI technology. Specializing in Generative AI, across multiple domains, inlcuding blockchain, finance, manufaturing, marketing, and more, North Coast AI provides AI-powered tools for businesses and individuals to improve their digital operations through secure, efficient, and innovational AI solutions.

Project Type

web-app

Goals & Objectives

Primary Goal

The primary goal of this project is to create a web application that provides AI-powered tools for businesses and individuals to improve their digital operations through secure, efficient, and innovational AI solutions.

Right now, the project is the website for North Coast AI. We need to create a website that is modern, responsive, and easy to navigate. It should also be easy to update and maintain. It will be built with Astro 5, modern CSS,Vanilla JS and deployed to Cloudflare Workers.

Primary goals include:

  • Create a website for North Coast AI that is modern, responsive, and easy to navigate. It should also be easy to update and maintain. It will be built with Astro 5, modern CSS,Vanilla JS and deployed to Cloudflare Workers. We will focus on the following features:
    • Modern, responsive design
    • Easy to navigate
    • Easy to update and maintain
    • Built with Astro 5, modern CSS,Vanilla JS and deployed to Cloudflare Workers.

Success Criteria

  • The website is unique and stands out from competitors
  • The website is easy to navigate and use for users including accessibility. We need to be WCAG 2.1 Level AA compliant.
  • We will use Cloudflare D1 for the CMS, Hono for the API, and Cloudflare Workers for the server.
  • The website is built with Astro 5, Modern CSS (Flexbox, Grid, Custom Properties, nested selectors, scoped styles, layers, etc),Vanilla JS and deployed to Cloudflare Workers.

Non-Goals

Requirements (EARS Notation)

EARS Format: Use structured requirements for clarity and testability.

  • Ubiquitous: "THE SYSTEM SHALL [action]"
  • Event-driven: "WHEN [event] THE SYSTEM SHALL [response]"
  • State-driven: "WHILE [state] THE SYSTEM SHALL [behavior]"
  • Optional: "WHERE [feature enabled] THE SYSTEM SHALL [action]"
  • Unwanted: "IF [condition] THEN THE SYSTEM SHALL [prevent/handle]"

Functional Requirements

  1. The website should be easy to navigate and use for users including accessibility. We need to be WCAG 2.1 Level AA compliant. The site should be built with Astro 5, modern CSS (Flexbox, Grid, Custom Properties, nested selectors, scoped styles, layers, etc),Vanilla JS and deployed to Cloudflare Workers and function on mobile devices.
  2. The website requires a backend API to handle user authentication and authorization. The API will be built with Hono and deployed to Cloudflare Workers. The backend will allow for the creation of new pages, support friendly urls, and allow users to update the SEO data for each page. This includes schema.org data for search engines, JSON-LD data for search engines, and Open Graph data for social media. We will have the essential meta tags such as title, description, keywords, author, and canonical url.
  3. We will use Resource hints to improve performance. This includes DNS prefetching, preloading, and preconnecting.
  4. Modern HTML standards will be used to ensure the website is future proof and compatible with all modern browsers.This includes popovers, tooltips, and other modern features.

Non-Functional Requirements

  1. Performance: The website should be fast and responsive. Make use of Astro 5's features to improve performance.
  2. Accessibility: The website should be WCAG 2.1 Level AA compliant.
  3. Security: The website should be secure and protected against common security threats.

Technical Requirements

Target Platform

This will run in the browser but also be a PWA

Technology Preferences

Use:

  • Semantic HTML
  • Modern CSS (Grid, Flexbox, custom properties)
  • Progressive enhancement

Avoid:

  • Utility-first CSS frameworks (unless explicitly needed)
  • Heavy JavaScript frameworks (unless complexity warrants)

Browser/Environment Support

Anything before 2015 does not require support. Fallbacks for older browsers will be provided.

Performance Requirements

Vite will be used to improve performance. Vite+ is being considered for the frontend.

Features

Core Features (Must Have)

Secondary Features (Should Have)

Nice to Have (Could Have)

Architecture

High-Level Architecture

Key Components

Data Flow

External Dependencies

Constraints

Timeline

Budget/Resources

Technical Constraints

Questions

Quick Start Configuration

Choose a preset that matches your project type for instant setup

Project Preset

Select the option that best matches your project. This automatically configures MCP servers, hooks, and code rules.

  • Static Website - Semantic HTML, Modern CSS, Vanilla JavaScript
  • Astro Site - Astro 5, Modern CSS, Islands Architecture
  • React App - React, TypeScript, Vite, TanStack
  • Next.js App - Next.js 15, App Router, TypeScript
  • Vue/Nuxt - Vue 3, Nuxt, Composition API
  • SvelteKit - Svelte 5, SvelteKit, Runes
  • Full Stack - Complete backend + frontend + database stack
  • Custom - Manual configuration (complete sections below)

Master Toggles

Control entire feature categories. When FALSE, the entire section is skipped.

  • MCP Servers: TRUE
  • Development Hooks: TRUE
  • Code Quality Rules: TRUE
  • AI Agents: TRUE

Note: If you selected a preset above and all master toggles are TRUE, skip to Additional Context. The preset will configure everything for you.

Code Rules Configuration

Optional: Only configure this if you selected "Custom" above or want to override preset rules.

Language Standards

  • Modern JavaScript: TRUE
  • TypeScript: FALSE
  • Node.js: FALSE
  • Python: FALSE

Framework Standards

  • Astro: TRUE
  • React: FALSE
  • Next.js: FALSE
  • Vue/Nuxt: FALSE
  • Svelte/SvelteKit: FALSE

CSS & Styling

  • Modern CSS: TRUE
  • Tailwind CSS: FALSE
  • Sass/SCSS: FALSE

Backend & API

  • Hono: TRUE
  • Express/Fastify: FALSE
  • REST API: FALSE
  • GraphQL: FALSE

Quality & Testing

  • WCAG AA Accessibility: TRUE
  • SEO Optimization: TRUE
  • Performance: TRUE
  • Security: TRUE
  • Testing Standards: FALSE

Platform Standards

  • Cloudflare Workers: TRUE
  • Vercel: FALSE
  • PWA: TRUE

MCP Configuration

Optional: Only configure this if you selected "Custom" above or want additional MCPs beyond your preset. Model Context Protocol (MCP) Servers extend Claude Code's capabilities by providing access to databases, APIs, and external services.

Database & Storage

  • Neon Database: TRUE
  • Supabase: FALSE
  • Turso: FALSE
  • Pinecone: FALSE

Cloud & Infrastructure

  • Cloudflare: TRUE
  • AWS: FALSE
  • Vercel: FALSE
  • Railway: FALSE

Development Tools

  • GitHub: TRUE
  • GitLab: FALSE
  • Linear: FALSE
  • Sentry: TRUE

Communication

  • Slack: FALSE
  • Discord: FALSE
  • Email: FALSE

Analytics & Monitoring

  • Google Analytics 4: TRUE
  • PostHog: FALSE
  • Axiom: FALSE
  • Datadog: FALSE

Payments & Commerce

  • Stripe: TRUE
  • PayPal: FALSE
  • Shopify: FALSE

AI & ML Services

  • OpenAI: FALSE
  • Anthropic: FALSE
  • Hugging Face: FALSE
  • Replicate: FALSE

Development Services

  • Chrome DevTools: FALSE
  • Playwright: FALSE
  • Puppeteer: FALSE

Content & Media

  • Contentful: FALSE
  • Sanity: FALSE
  • Cloudinary: FALSE
  • Uploadcare: FALSE

Search & Discovery

  • Algolia: FALSE
  • Meilisearch: FALSE
  • Typesense: FALSE

Custom MCPs

Context7: FALSE Serena: FALSE

MCP Configuration Notes

Required Environment Variables:

  • NEON_API_KEY (Required for Neon Database)
  • CLOUDFLARE_API_TOKEN (Required for Cloudflare)
  • GITHUB_TOKEN (Required for GitHub)
  • SENTRY_AUTH_TOKEN (Required for Sentry)
  • STRIPE_SECRET_KEY (Required for Stripe)
  • GA4_MEASUREMENT_ID (Required for Google Analytics 4)

Setup Instructions:

  1. Run /mcp-setup after filling out this section to generate configuration
  2. Add required API keys to your .env file
  3. Restart Claude Code to load MCP servers

Hooks Configuration

Optional: Only configure this if you selected "Custom" above or want to override preset hooks. Hooks are automated actions triggered by events in your development workflow.

Git Hooks

  • Pre-Commit Validation: TRUE
  • Pre-Push Validation: FALSE
  • Commit Message Validation: TRUE
  • Branch Name Validation: FALSE

File Hooks

  • Auto Format on Save: TRUE
  • Auto Import Sort: TRUE
  • Auto Documentation: FALSE
  • Unused Code Detection: FALSE

Build & Test Hooks

  • Pre-Build Validation: FALSE
  • Post-Build Actions: FALSE
  • Test on File Change: FALSE
  • Coverage Reporting: FALSE

Deployment Hooks

  • Pre-Deploy Checks: FALSE
  • Post-Deploy Verification: FALSE
  • Deployment Notifications: FALSE
  • Rollback on Failure: FALSE

Code Quality Hooks

  • Complexity Analysis: FALSE
  • Security Scanning: FALSE
  • Dependency Audit: FALSE
  • Performance Profiling: FALSE

Documentation Hooks

  • README Sync: TRUE
  • API Doc Generation: FALSE
  • Changelog Update: FALSE
  • Type Documentation: FALSE

Collaboration Hooks

  • PR Template Creation: FALSE
  • Issue Linking: FALSE
  • Code Review Requests: FALSE
  • Status Updates: FALSE

Agent Hooks

  • Task Completion Notifications: TRUE
  • Agent Error Handling: TRUE
  • Agent Performance Tracking: FALSE
  • Agent Context Saving: FALSE

Custom Hooks

Database Migration Check: FALSE

**Environment Sync**: `FALSE`

Hooks Configuration Notes

Hook Execution Order:

  1. Pre-commit hooks run first
  2. File hooks run on save
  3. Build hooks run during build process
  4. Deploy hooks run during deployment

Setup Instructions:

  1. Run /hooks-setup after filling out this section to generate hook configurations
  2. Hooks are automatically installed in your project
  3. Configure hook settings in .claude/hooks/config.json

Additional Context

Reference Projects

Existing Assets

Next Steps: After completing this template, run /project-planner to generate your project plan.