Building Accessible React Components

Introduction

My AI workflow is evolving with every project. I will try to keep this document up to date with the current workflow that I'm using.

Initial Project Setup

I still find that I need to setup the initial project using something like npx create-next-app@latest or starting with v0.dev. During this process I will get the project running on my local machine, connected to my GitHub repository, connected to Supabase, and deployed to Vercel with a custom domain. At this point all auth functionality should be working both locally and on my custom domain.

Configuring the Project AI files

1. Add AI files (claude.md, etc.)

1. Setup automated testing (Vitest, Playwright)
2. Create manual requirements.md file
3. Tell AI to ask questions to refine file.
4. Convert file in prd.json file
5. Use /ralph-once script or prompt
6. Occasionally clean up e2e tests to improve efficiency
7. Adding/modifying features overtime with the /refine-prd prompt