1. Always start in Plan mode. 
2. Start with the simple prompt below.
3. Fully plan out the application in a series of markdown files before you ever start coding. 
4. Review your plan using [[Simple Code Plan Review SKILL]] before you ever start coding.  
5. After you build (code) the app, have another AI review and critique it. If you built it in Claude code, have ChatGPT review it, and vice versa. 

# A good app plan

A good app plan should be made up of several markdown files in a folder covering:
1. **Numbered prompts** that will explain the spec and request the build. The prompts are numbered so that you can move through the building in logical phases, and you can save certain aspects for later. 
2. **Design system**. A document capturing all of your design choices. If you're starting from scratch, use a GitHub app like [Impeccable](https://github.com/pbakaus/impeccable) to build them. If you have an existing brand, then use [[Setting Your Design Preferences|Setting Your Design Preferences]] to extract the brand and save it to a file. 
3. **Technical documentation** capturing the app architecture so that if you ever decide to involve a developer, they can read the technical documentation and understand how the app was built without having to read the code from scratch. 
4. **User documentation** on how the app works. If you also have admin users with special privileges, then you'll need separate admin documentation. It's much easier to build out your user and technical documentation as you build the app. Every time you iterate, you ask the AI to update the documentation at the same time. 
5. **Context Log.** A log file containing a summary of the work the AI did in the most recent sessions and the next steps. The AI must always start each session for this project by reading the context log. 

# Start with this simple prompt

```
Design and architect a secure web app that solves (describe the problem) and results in (success criteria).

DO NOT start working yet. First, ask me clarifying questions so we can define the approach together. Only begin once we've aligned. 

Capture the spec for this app in a markdown file saved to this folder. If the app is sufficiently complicated that it needs to be broken into phases, then create numbered prompt markdown files aligned to each phase. 

Start by designing the user interfaces and asking me to approve them. Design them one at a time in this order:

1. Home (which manages the Workflow described below)
2. Admin Dashboard
3. Sample output report
4. Other Admin pages like User Roles, Sessions, API, etc.

Use design.md as the design system for the design.

Every time we iterate on this app, save a summary of the work we did in this session and the next steps to a file called context-log.md in this folder. always start each session for this project by reading the context log. 

DEVELOPMENT RULES TO FOLLOW
- I am not a developer — never assume technical familiarity
- Always explain what a command does before running it
- Present one clear recommendation, not a menu of options
- Auto-check Socket.dev before any npm package installs
- Prefer solutions that don't require me to maintain running processes or servers
- I hate copy-pasting into Terminal. I find navigating around folders in Terminal a pain. If you can get a CLI and post to the CLI with my approval, do that.
- Client apps must be hosted on Canadian servers (fly.io YYZ). 
- All HTML files, web pages, and email templates must be fully responsive and optimized for mobile (iPhone 14 portrait / 390px as the baseline). Use CSS media queries, fluid widths, and simplified mobile layouts — never fixed-width-only designs.
```

Later, you can move the Development Rules into your CLAUDE.md or AGENT.md (for Codex) file, so it's a part of the AI's persistent memory about you. 

# App Deployment:
Railway and Vercel are the most widely used but they are US based. Railway has a $5/mo hobby plan that I'm on. 
For apps that need Canadian hosting for privacy reasons, I use Fly.io and their Toronto YYZ data center. The pricing is similar to Railway and the AI manages the whole deployment through Github.