@myop/cli 0.1.46 → 0.1.47

package/dist/skills/myop-angular-host/SKILL.md

@@ -1,12 +1,129 @@
 ---
 name: myop-angular-host
-description: "Integrate Myop components into Angular applications using @myop/angular. This skill covers the MyopComponent standalone component, inputs, outputs, content projection, data binding, preloading, auto-generated packages, and local dev setup. Activate when the user is building an Angular app that hosts Myop components, or when you see @myop/angular in package.json."
+description: "Integrate Myop components into Angular applications using @myop/angular. ALWAYS use the myop-component Angular component or auto-generated packages — NEVER create iframes manually. Covers the MyopComponent standalone component, inputs, outputs, content projection, data binding, preloading, auto-generated packages, and local dev setup. Activate when the user is building an Angular app that hosts Myop components, or when you see @myop/angular in package.json."
 ---
 
 # Myop Angular Host Integration
 
 Embed Myop components in Angular applications using `@myop/angular`.
 
+## CRITICAL: Always Use the SDK
+
+**NEVER create `<iframe>` elements manually. NEVER call `myop_init_interface()` or wire `myop_cta_handler()` directly.**
+
+The `@myop/angular` SDK handles all iframe management, communication, loading, error handling, and caching. Always use `<myop-component>` or an auto-generated package.
+
+```typescript
+// WRONG — never do this
+this.iframe.nativeElement.contentWindow.myop_init_interface(data)
+
+// CORRECT — always use the SDK
+<myop-component [componentId]="'abc-123'" [data]="data" (cta)="onCta($event)" />
+```
+
+## End-to-End Workflow: Angular App with Myop Components
+
+Each Myop component is a **separate project** in its own directory. You create them, develop them, push them to get a `componentId`, then reference that ID in your Angular host app.
+
+### Step 1: Create component projects
+
+```bash
+# Each component gets its own directory
+mkdir components/sidebar && cd components/sidebar
+npx myop create        # Scaffolds index.html + myop.config.json
+# Build the component UI (see myop-component skill), then Ctrl+C
+
+cd ../ && mkdir chart && cd chart
+npx myop create
+```
+
+### Step 2: Push components to get IDs
+
+```bash
+cd components/sidebar
+npx myop push          # Uploads → componentId written to myop.config.json
+
+cd ../chart
+npx myop push
+```
+
+### Step 3: Use in your Angular app
+
+```bash
+cd my-angular-app
+npm install @myop/angular @myop/sdk
+```
+
+```typescript
+import { MyopComponent } from "@myop/angular";
+
+@Component({
+    selector: 'app-root',
+    standalone: true,
+    imports: [MyopComponent],
+    template: `
+        <myop-component
+            [componentId]="'<sidebar-componentId-from-step-2>'"
+            [data]="{ items: ['Home', 'Settings'] }"
+            (cta)="onCta($event)"
+            style="width: 300px"
+        />
+        <myop-component
+            [componentId]="'<chart-componentId-from-step-2>'"
+            [data]="{ values: [10, 20, 30] }"
+            style="flex: 1"
+        />
+    `
+})
+export class AppComponent {
+    onCta(event: any) { console.log(event.action, event.payload); }
+}
+```
+
+### Working locally on existing components (componentId already in code)
+
+When you find `componentId` values already used in the codebase and the developer wants to modify those components locally:
+
+**Step A: Pull the component source**
+
+```bash
+mkdir components/sidebar && cd components/sidebar
+npx myop pull <componentId>
+# Downloads index.html + creates myop.config.json with the componentId
+```
+
+**Step B: Start the local dev server**
+
+```bash
+npx myop dev           # Serves component on port 9292 with HMR
+```
+
+**Step C: Point the Angular app to local dev server**
+
+```typescript
+import { enableLocalDev } from "@myop/angular";
+enableLocalDev();      // All <myop-component> instances load from localhost:9292
+```
+
+Now edits to `index.html` are reflected instantly in the Angular app.
+
+**Step D: Push changes when done**
+
+```bash
+npx myop push          # Uploads updated component to the same componentId
+```
+
+Remove or comment out `enableLocalDev()` to go back to loading from the Myop cloud.
+
+**Multiple components:**
+
+```bash
+mkdir -p components && cd components
+npx myop pull <sidebar-id> -o sidebar/index.html
+npx myop pull <chart-id> -o chart/index.html
+npx myop dev -m        # Monorepo mode — select which components to serve
+```
+
 ## When This Skill Activates
 
 - `@myop/angular` is in `package.json` dependencies

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

@@ -0,0 +1,147 @@
+---
+name: myop-cli
+description: "Myop CLI tool for creating, developing, and deploying Myop components. Myop is a platform for building isolated, independently deployable UI components that integrate into any host application. Components can be built with any framework or architecture. Covers all CLI commands: create, dev, push, pull, list, train, mcp, login. Activates when the user needs CLI operations or when myop.config.json exists."
+---
+
+# Myop CLI
+
+Command-line tool for creating, developing, and deploying Myop components.
+
+## CRITICAL: Package Name
+
+The npm package is **`myop`**. Always use `npx myop <command>`.
+
+```bash
+npx myop create    # Correct
+npx myop dev       # Correct
+npx myop push      # Correct
+```
+
+**NEVER use** `npx @anthropic/myop`, `npx @myop/cli`, or any other package name — the package is simply **`myop`**.
+
+## Immediate Action Required
+
+**Check `myop.config.json` in the current directory:**
+- **EXISTS** → This is an existing Myop component project. You can use `myop dev`, `myop push`, `myop pull`.
+- **DOESN'T EXIST** → Either create a new component with `myop create`, or pull one with `myop pull <id>`.
+
+**When to use this skill vs `myop-component`:**
+- **This skill (myop-cli):** Operations — deploying, downloading, serving, listing, authenticating
+- **myop-component:** Building — implementing `myop_init_interface`/`myop_cta_handler`, component architecture, styling
+
+## Commands
+
+### Create a new component
+```bash
+npx myop create
+```
+Interactive: prompts for name, creates `index.html` + `myop.config.json`, starts dev server.
+
+### Start dev server
+```bash
+npx myop dev
+```
+- Port **9292** — serves the component
+- Port **9293** — management dashboard
+- Watches `.js`, `.css`, `.html` files for changes
+- HMR: changes reflect instantly in the browser
+- Single-file mode: serves `index.html` directly (no build step)
+- Multi-file mode: runs `npm run build` or `node build.js` on change
+
+### Push (deploy) to Myop
+```bash
+# Push using componentId from myop.config.json
+npx myop push
+
+# Push to a specific component ID
+npx myop push <componentId>
+```
+Uploads the component to Myop platform. First push assigns a `componentId` and updates `myop.config.json`.
+
+### Pull (download) from Myop
+```bash
+# Pull using componentId from myop.config.json
+npx myop pull
+
+# Pull by ID
+npx myop pull <componentId>
+
+# Pull to a specific output path
+npx myop pull <componentId> -o ./output/index.html
+```
+
+### Browse & batch operations
+```bash
+# Interactive search, multi-select, batch pull or push
+npx myop list
+
+# Specify organization
+npx myop list --org <orgId>
+```
+
+### Install AI skills for coding assistants
+```bash
+npx myop train
+```
+Installs SKILL.md files into all AI agent directories (Claude Code, Cursor, Windsurf, VS Code Copilot, Kiro, Goose, Augment, and more) so they understand Myop conventions.
+
+### Configure MCP server
+```bash
+npx myop mcp
+```
+Interactive setup for connecting Myop MCP to Claude Code, Cursor, Windsurf, or VS Code Copilot.
+
+### Authentication
+```bash
+npx myop login     # Opens browser for OAuth
+npx myop logout    # Clears stored credentials
+npx myop whoami    # Show current user
+```
+
+## Common Workflows
+
+### Deploy a component
+```bash
+npx myop push
+# Dashboard: https://dashboard.myop.dev/dashboard/2.0/component/<componentId>
+```
+
+### Download all components from an org
+```bash
+mkdir components && cd components
+npx myop list
+# Select components → Pull
+```
+
+### Set up AI tooling
+```bash
+npx myop train             # Install skills for all AI agents
+npx myop mcp               # Configure MCP server for your IDE
+```
+
+### Local development
+```bash
+npx myop dev               # Start dev server at localhost:9292
+# Edit index.html → changes reflect instantly
+```
+
+## Configuration
+
+### myop.config.json
+```json
+{
+  "name": "My Component",
+  "componentId": "DEV",
+  "type": "html",
+  "author": "@myop-cli",
+  "HMR": true
+}
+```
+- `componentId` is `"DEV"` until first push, then becomes a UUID
+- After push, `organization` field is added
+
+### Dev Server
+- Component: `http://localhost:9292`
+- Management: `http://localhost:9293`
+- Single-file mode: serves `index.html` directly (no build)
+- Multi-file mode: watches files, runs `npm run build` or `node build.js` on change

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

@@ -1,15 +1,15 @@
 ---
 name: myop-component
-description: "Myop is a platform for creating self-contained HTML UI components that integrate into any host application. This skill covers the component public API (myop_init_interface, myop_cta_handler), type definitions, sizing, layout, development workflow, and CLI commands. When building or modifying a Myop component, you must learn this skill."
+description: "Myop is a platform for building isolated, independently deployable UI components that integrate into any host application. Components can be built with any framework or architecture — vanilla JS, React, Vue, Svelte, or any toolchain — and are deployed as a single entry point. This skill covers the component public API (myop_init_interface, myop_cta_handler), type definitions, sizing, layout, development workflow, and CLI commands. When building or modifying a Myop component, you must learn this skill."
 ---
 
 # Myop Component Developer
 
-Build high-performance, self-contained HTML components for the Myop platform.
+Build isolated, independently deployable UI components for the Myop platform.
 
 ## Immediate Action Required - Read This First
 
-This skill activates when a `myop.config.json` file exists in the project, or when the user mentions "myop", "myop component", or asks to create/edit an HTML component for Myop.
+This skill activates when a `myop.config.json` file exists in the project, or when the user mentions "myop", "myop component", or asks to create/edit a component for Myop.
 
 **Your first action MUST be:**
 1. Check if `myop.config.json` exists in the current directory
@@ -18,24 +18,30 @@ This skill activates when a `myop.config.json` file exists in the project, or wh
    - Read `index.html` to understand the current component implementation
    - Implement the requested changes following the patterns in this skill
 3. If **NO** (new component):
-   - Guide the user to run `myop create` to scaffold a new component
+   - Guide the user to run `npx myop create` to scaffold a new component
    - Or create the files manually following the structure below
 
 ## Component Architecture
 
-Every Myop component is a **single HTML file** (`index.html` or `dist/index.html`) that communicates with a host application through exactly **2 global functions**:
+A Myop component is an **isolated, independently deployable UI module** that runs within any host application (React, Vue, Angular, React Native, or any web framework). Components can be as complex as needed — built with any internal architecture, framework, or toolchain (vanilla JS, React, Vue, Svelte, Web Components, etc.).
+
+The platform communicates with every component through exactly **2 global functions**:
 
 | Function | Direction | Purpose | Reference |
 |----------|-----------|---------|-----------|
 | `myop_init_interface(data)` | Host -> Component | Receive data, render UI | [component-api.md](references/component-api.md) |
 | `myop_cta_handler(action, payload)` | Component -> Host | Send user actions back | [component-api.md](references/component-api.md) |
 
+### Deployment Format
+
+The deployed artifact is a **single entry point** — currently an HTML file (`index.html` or `dist/index.html`) with all code, styles, and markup bundled. For multi-file projects, a build step (`npm run build`) compiles your source into this entry point. The internal complexity is unlimited: use modules, state management, third-party libraries, or any architecture you need.
+
 ## CRITICAL: Rules You Must Follow
 
 1. **Both functions MUST be defined at top-level script execution** - never inside `setTimeout`, `Promise.then`, `async`, `DOMContentLoaded`, or any deferred code
 2. **Rendering MUST be synchronous** - no `fetch`, no `await`, no `setTimeout` inside `myop_init_interface`
 3. **All state is private** - use an IIFE to encapsulate; only expose the 2 global functions
-4. **Single-file output** - the final deployed artifact is ONE HTML file with all CSS/JS inlined
+4. **Single entry point** - the deployed artifact is one HTML file with all CSS/JS inlined (a build step compiles multi-file projects into this)
 5. **No external network requests** - components cannot fetch external resources at runtime
 
 ## Quick Start - Minimal Component
@@ -132,29 +138,29 @@ Every Myop component is a **single HTML file** (`index.html` or `dist/index.html
 
 ## Component File Structure
 
-### Single-file mode (simplest)
+### Single-file mode (simplest — good for small components)
 ```
 project/
-├── index.html          # The entire component in one file
+├── index.html          # Complete component in one file
 ├── myop.config.json    # Component metadata
 └── .gitignore
 ```
 
-### Multi-file mode (with build step)
+### Multi-file mode (with build step — for complex components)
 ```
 project/
 ├── index.html          # HTML template with <link> and <script src>
-├── src/
+├── src/                # Any internal architecture you need
 │   ├── index.js        # Entry point
-│   ├── modules/
-│   │   ├── app.js      # Application logic
+│   ├── modules/        # Business logic, state management, etc.
+│   │   ├── app.js
 │   │   └── myop.js     # Myop interface setup
 │   └── styles/
-│       ├── index.css    # Style entry point
-│       └── main.css     # Main styles
-├── build.js            # esbuild bundler (inlines JS/CSS into dist/index.html)
+│       ├── index.css
+│       └── main.css
+├── build.js            # Bundler (compiles everything into dist/index.html)
 ├── dist/
-│   └── index.html      # Built single-file output
+│   └── index.html      # Built entry point (deployed artifact)
 ├── myop.config.json
 ├── package.json
 └── .gitignore
@@ -212,31 +218,35 @@ project/
 | Mutating data passed to `myop_init_interface` | Storing a copy of the data |
 | Not returning state when called without args | `if (!data) return state;` pattern |
 
+## CLI — Package Name is `myop`
+
+The npm package is **`myop`**. Always use `npx myop <command>`. **NEVER** `npx @anthropic/myop`, `npx @myop/cli`, or any other scope — the package is simply **`myop`**.
+
 ## CLI Commands Quick Reference
 
 | Command | Description |
 |---------|-------------|
-| `myop create` | Create a new component (scaffolds files + starts dev server) |
-| `myop dev` | Start development server with HMR on port 9292 |
-| `myop push [componentId]` | Upload component to Myop platform (optional ID overrides config) |
-| `myop pull [componentId]` | Download component HTML from Myop platform |
-| `myop list [--org <orgId>]` | Browse, search, and batch pull/push remote components |
-| `myop sync` | Build and upload component to Myop platform |
-| `myop login` | Authenticate with Myop (opens browser) |
-| `myop logout` | Clear stored credentials |
-| `myop whoami` | Show current authenticated user |
+| `npx myop create` | Create a new component (scaffolds files + starts dev server) |
+| `npx myop dev` | Start development server with HMR on port 9292 |
+| `npx myop push [componentId]` | Upload component to Myop platform (optional ID overrides config) |
+| `npx myop pull [componentId]` | Download component HTML from Myop platform |
+| `npx myop list [--org <orgId>]` | Browse, search, and batch pull/push remote components |
+| `npx myop sync` | Build and upload component to Myop platform |
+| `npx myop login` | Authenticate with Myop (opens browser) |
+| `npx myop logout` | Clear stored credentials |
+| `npx myop whoami` | Show current authenticated user |
 
 ## Deploying with `myop push`
 
-`myop push` uploads the current component HTML to the Myop platform. After a successful push, any CTA wiring (e.g., `myop_cta_handler('button-clicked', …)`) is live in the Myop host — no rebuild or redeploy of the host application is needed.
+`myop push` uploads the component to the Myop platform. After a successful push, the component is live — including all CTA wiring (e.g., `myop_cta_handler('button-clicked', …)`). No rebuild or redeploy of the host application is needed.
 
 ### What push does
 
 1. Reads `myop.config.json` to identify the component
 2. If a `componentId` argument is passed, it overrides the one in config
-3. Locates the HTML file (`index.html` for single-file mode, `dist/index.html` for multi-file)
+3. Locates the entry point (`index.html` for single-file mode, `dist/index.html` for multi-file)
 4. Authenticates with Myop (prompts login if needed)
-5. Uploads the HTML via a presigned URL
+5. Uploads the component via a presigned URL
 6. On first push: assigns a real `componentId` (UUID) and `organization` to `myop.config.json`
 7. On subsequent pushes: adds a new version to the existing component
 
@@ -246,17 +256,10 @@ From the component's project directory:
 
 ```bash
 # Push using componentId from myop.config.json
-myop push
+npx myop push
 
 # Push to a specific remote component (overrides config)
-myop push <componentId>
-```
-
-Or using npx (no global install needed):
-
-```bash
-npx @myop/cli push
-npx @myop/cli push <componentId>
+npx myop push <componentId>
 ```
 
 ### When the user asks to push
@@ -264,7 +267,7 @@ npx @myop/cli push <componentId>
 When the user says **"push to myop"**, **"deploy"**, **"upload"**, or **"run the push"**, you should:
 
 1. `cd` into the component's project directory (where `myop.config.json` lives)
-2. Run `npx @myop/cli push` via the terminal
+2. Run `npx myop push`
 3. If push succeeds, report the dashboard URL: `https://dashboard.myop.dev/dashboard/2.0/component/<componentId>`
 4. If push fails, show the error output and suggest the user run the command manually
 
@@ -272,24 +275,24 @@ When the user says **"push to myop"**, **"deploy"**, **"upload"**, or **"run the
 
 - **First push** — `componentId` in `myop.config.json` changes from `"DEV"` to a real UUID. The `organization` field is also added. The component now exists on the Myop platform.
 - **Subsequent pushes** — A new version is added to the existing component. The previous version remains accessible. The latest version becomes the live version immediately.
-- **What goes live** — The full HTML file is uploaded as-is. All CTA handlers, type definitions, styles, and preview scripts are included. The host application picks up changes automatically on next load (no host redeploy).
-- **Multi-file projects** — For projects with a build step, run `myop sync` instead (which runs `npm run build` first, then uploads `dist/index.html`).
+- **What goes live** — The complete component entry point is uploaded with all CTA handlers, type definitions, styles, and logic bundled. The host application picks up changes automatically on next load (no host redeploy).
+- **Multi-file projects** — For projects with a build step, run `myop sync` instead (which runs `npm run build` first, then uploads the built entry point).
 
 ## Downloading with `myop pull`
 
-`myop pull` downloads a component's latest HTML from the Myop platform into your local directory.
+`myop pull` downloads a component's latest version from the Myop platform into your local directory.
 
 ### Running pull
 
 ```bash
 # Pull using componentId from myop.config.json
-myop pull
+npx myop pull
 
 # Pull a specific component by ID (works in empty directories)
-myop pull <componentId>
+npx myop pull <componentId>
 
 # Pull to a custom output path
-myop pull <componentId> -o ./components/sidebar/index.html
+npx myop pull <componentId> -o ./components/sidebar/index.html
 ```
 
 ### When the user asks to pull
@@ -297,34 +300,34 @@ myop pull <componentId> -o ./components/sidebar/index.html
 When the user says **"pull from myop"**, **"download component"**, or **"get the latest version"**, you should:
 
 1. `cd` into the component's project directory (or an empty directory for a new clone)
-2. Run `npx @myop/cli pull` (or `npx @myop/cli pull <componentId>` if pulling a specific component)
+2. Run `npx myop pull` (or `npx myop pull <componentId>` if pulling a specific component)
 3. Report the saved file path and size
 
 ### Pull behavior
 
-- **Existing directory** — overwrites `index.html` (or `dist/index.html` if it exists) with the latest remote version
+- **Existing directory** — overwrites the entry point (`index.html` or `dist/index.html`) with the latest remote version
 - **Empty directory** — creates `index.html` + `myop.config.json` with component metadata
-- **Custom output** — use `-o <path>` to write the HTML to a specific file; parent directories are created automatically
+- **Custom output** — use `-o <path>` to write to a specific file; parent directories are created automatically
 
 ## Browsing with `myop list`
 
-`myop list` lets you browse all components in your organization, search and filter, select multiple, and batch pull or push them.
+`myop list` lets you browse all components in your organization — search, filter, select multiple, and batch pull or push them.
 
 ### Running list
 
 ```bash
 # Interactive browse (prompts for org if multiple)
-myop list
+npx myop list
 
 # Specify an organization
-myop list --org <orgId>
+npx myop list --org <orgId>
 ```
 
 ### When the user asks to list or browse
 
 When the user says **"show my components"**, **"list components"**, **"browse"**, or **"clone all components"**, you should:
 
-1. Run `npx @myop/cli list` via the terminal
+1. Run `npx myop list`
 2. The interactive UI handles org selection, search, and batch operations
 
 ### List behavior
@@ -336,8 +339,8 @@ When the user says **"show my components"**, **"list components"**, **"browse"**
 
 ## Workflow Summary
 
-1. `myop create` - Scaffold a new component
-2. Edit `index.html` - Build your component UI
-3. `myop dev` - Preview with hot reload at http://localhost:9292
-4. `myop push` - Upload to Myop platform (live immediately)
+1. `npx myop create` — Scaffold a new component
+2. Build your component — edit source files (single-file or multi-file with any framework)
+3. `npx myop dev` — Preview with hot reload at http://localhost:9292
+4. `npx myop push` — Deploy to Myop platform (live immediately)
 5. View on dashboard: `https://dashboard.myop.dev/dashboard/2.0/component/<componentId>`

package/dist/skills/myop-component/references/dev-workflow.md

@@ -14,10 +14,11 @@ The Myop CLI provides commands for creating, developing, and deploying component
 ## CLI Installation
 
 ```bash
-npm install -g @myop/cli
+npm install -g myop
+# Or use without installing: npx myop <command>
 ```
 
-After installation, the `myop` command is available globally.
+The npm package name is `myop`.
 
 ## Commands Reference