@myop/cli 0.1.53 → 0.1.55

package/dist/skills/myop-cli/SKILL.md

@@ -127,6 +127,71 @@ npx myop dev               # Start dev server at localhost:9292
 # Edit index.html → changes reflect instantly
 ```
 
+## AI Local Development Workflow
+
+When developing or refactoring components with an AI assistant, use the **local dev loop** — not MCP uploads. This gives you instant feedback without cloud round-trips, extensions, or publishing.
+
+### The loop
+
+```
+Edit index.html → myop dev serves it (HMR) → Host app loads from localhost:9292 → Test in browser
+```
+
+### How to set it up
+
+1. **Start the dev server** in the component directory:
+   ```bash
+   npx myop dev          # Single component
+   npx myop dev -m       # Multiple components (monorepo)
+   ```
+
+2. **Point the host app to localhost** (one line in the app's init code):
+   ```tsx
+   import { enableLocalDev } from "@myop/react"; // or @myop/vue, @myop/angular
+   enableLocalDev();
+   ```
+   This redirects all component fetches from `cloud.myop.dev` to `localhost:9292`. Components registered on the dev server are served locally; everything else is proxied to cloud.
+
+3. **Edit the component HTML file directly** — `myop dev` picks up changes via file watching and HMR. The host app reflects updates instantly. No upload needed.
+
+4. **If Chrome MCP is available**, navigate to the host app on localhost to visually test the component. Take screenshots to verify layout, then iterate.
+
+5. **Push only when done**:
+   ```bash
+   npx myop push
+   ```
+
+### Adding a new component to local dev (monorepo)
+
+When you need to use a component locally that isn't already in the dev directory (e.g. after pulling a new component, or when integrating a remote component into a host app), you must register it so `myop dev -m` can serve it:
+
+1. **Pull into its own subdirectory** — never pull to the root of the components directory:
+   ```bash
+   mkdir <component-name>
+   cd <component-name>
+   npx myop pull <componentId>
+   ```
+   This creates `index.html` and `myop.config.json` inside the subdirectory.
+
+2. **Add to `.myop-monorepo.json`** — the monorepo config at the root of the components directory lists which components the dev server should serve. Add the new component's directory name to `selectedComponents`:
+   ```json
+   {
+     "selectedComponents": [
+       "existingComponent",
+       "<component-name>"
+     ]
+   }
+   ```
+   The directory name must match the subdirectory you created. If `.myop-monorepo.json` doesn't exist yet, create it.
+
+3. **Restart `myop dev -m`** if it's already running — the dev server picks up the new component on startup.
+
+**Important:** The components directory path varies per project — there is no fixed location. Look for the directory that contains `.myop-monorepo.json` or multiple subdirectories with `myop.config.json` files.
+
+### Key rule
+
+**Do NOT use MCP `upload_component` during local development.** Edit the HTML file on disk and let `myop dev` serve it. MCP upload is for deploying the finished component — not for the edit/test loop.
+
 ## Myop MCP Tools (Fallback)
 
 If the Myop MCP server is configured in your IDE, you also have access to MCP tools:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myop/cli",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "description": "Myop cli",
   "type": "module",
   "repository": {