docs(common): iteratively improved prompts (#1926)

* shopping list pattern + feedback

* feedback applied

* next round of shopping patterns and feedback

* improved docs based on last feedback

* third round + feedback

* updated docs based on feedback

* newest version of pattern

* use onct-change instead of onchange

* style should be object

* fix deno fmt complaints

* fix list item numbering

* fix formatting for shopping-list-categorized.tsx

* added id for the integration test

* need to grab index to pass it into key()

* Update docs/common/PATTERNS.md

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

* fix references to findIndex to pass index parameter

* made a seperate cell to track the category drop down, it was sharing with the first drop down

* remove OpaqueRef example in handler and dont use index for removing item in arrays

* fix mentions of onChange to onct-change for example code

* updated removeItem references to use item.equals() rather than index for arrays in doc

* fix css style into objects

* fix various mistakes that crept in

* fixed a bunch of wrong advice here -- noticing a lot of duplication but leaving it alone for now

* some minor edits

* remove extra files from generation process

---------

Co-authored-by: Ellyse <ellyse7777@gmail.com>
Co-authored-by: Ellyse <141240083+ellyxir@users.noreply.github.com>
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

Author: 3 people

.claude/commands/recipe-dev.md

@@ -46,6 +46,79 @@ Before working on recipes it is recommended to search for `COMPONENTS.md` and `R
 
 Read `HANDLERS.md` when confused about event handler errors.
 
+## Development Workflow Best Practices
+
+When developing and testing patterns iteratively, follow this workflow:
+
+### Step-by-Step Development Process
+
+1. **Check Syntax** (Optional - only if requested or deployment fails):
+   ```bash
+   ./dist/ct dev pattern.tsx --no-run
+   ```
+   This validates TypeScript/JSX syntax without executing the pattern.
+
+2. **Test Execution Locally** (Optional):
+   ```bash
+   ./dist/ct dev pattern.tsx
+   ```
+   This runs the pattern in a local test environment. Useful for catching runtime errors.
+
+3. **Deploy to Test Space**:
+   ```bash
+   ./dist/ct charm new --identity [keyfile] --api-url [api-url] --space [spacename] pattern.tsx
+   ```
+   Deployment will automatically compile and validate the recipe. Record the CHARM_ID returned.
+
+4. **Iterate with setsrc**:
+   ```bash
+   ./dist/ct charm setsrc --identity [keyfile] --api-url [api-url] --space [spacename] --charm [charm-id] pattern.tsx
+   ```
+   Update the charm without creating a new one. Much faster for iteration.
+
+5. **Inspect and Debug**:
+   ```bash
+   # View charm data and outputs
+   ./dist/ct charm inspect --identity [keyfile] --api-url [api-url] --space [spacename] --charm [charm-id]
+
+   # Get specific field values
+   ./dist/ct charm get --identity [keyfile] --api-url [api-url] --space [spacename] --charm [charm-id] items/0/name
+
+   # Set test data
+   echo '{"name": "Test Item"}' | ./dist/ct charm set --identity [keyfile] --api-url [api-url] --space [spacename] --charm [charm-id] testData
+   ```
+
+### Common Error Patterns and Solutions
+
+**Type Errors:**
+- Missing `OpaqueRef<T>` type on array map parameters
+- Using `Cell<Array<Cell<T>>>` instead of `Cell<T[]>` in handlers
+- Forgetting to import `ID` when using `[ID]`
+
+**Runtime Errors:**
+- Trying to use DOM access (`document.getElementById`)
+- Using conditionals (if/ternary) instead of `ifElse`
+- Calling `llm()` from within handlers or lift functions
+
+**Deployment Errors:**
+- Import path issues (use relative imports like `./file.tsx`)
+- Missing dependencies in the recipe
+- Syntax errors that weren't caught locally
+
+**Data Not Updating:**
+- Forgetting `$` prefix for bidirectional binding
+- Handler not being called (check event names match)
+- Cell not being passed to handler correctly
+
+### Tips for Efficient Development
+
+- **Don't pre-test syntax** unless deployment fails - the deployment process validates automatically
+- **Use `inspect` frequently** to understand current state
+- **Use `get/set` commands** to manually test data transformations
+- **Keep handler definitions at module level** for better reusability
+- **Start simple** then add complexity incrementally
+- **Check example patterns** in `packages/patterns/` for reference
+
 #### Workflow A: Modifying Existing Recipes
 
 **Get recipe source:**