### Install Lavish AXI CLI and Setup Hooks

Source: https://github.com/kunchenguid/lavish-axi/blob/main/README.md

Installs the Lavish AXI CLI globally and sets up session hooks for enhanced agent integration. Remember to restart your agent session after running this.

```sh
npm install -g lavish-axi
lavish-axi setup hooks
```

--------------------------------

### Agent Skill Generation

Source: https://github.com/kunchenguid/lavish-axi/blob/main/AGENTS.md

Renders an installable Agent Skill from home output, rewriting command examples and including frontmatter metadata.

```javascript
src/skill.js
```

--------------------------------

### Install Heygen HyperFrames Skill

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/AGENTS.md

Install the Heygen HyperFrames skill using npx to leverage framework-specific patterns.

```bash
npx skills add heygen-com/hyperframes
```

--------------------------------

### GSAP Initial Element Setup

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Sets initial properties for elements like pointers and click rings before animations begin.

```javascript
gsap.set("#pointer-1", { x: 1240, y: 820, opacity: 0 }); gsap.set("#click-ring-1", { x: 0, y: 0, scale: 0.5 });
```

--------------------------------

### Build Lavish AXI from Source

Source: https://github.com/kunchenguid/lavish-axi/blob/main/README.md

Clones the Lavish AXI repository, installs dependencies, builds the project, and links it locally. This is for development or direct usage from source.

```sh
git clone https://github.com/kunchenguid/lavish-axi.git
cd lavish-axi
pnpm install --frozen-lockfile
pnpm run build
pnpm link
```

--------------------------------

### Use Lavish AXI CLI Directly

Source: https://github.com/kunchenguid/lavish-axi/blob/main/README.md

Execute the Lavish AXI CLI directly using npx without any prior installation.

```sh
Use `npx lavish-axi` to write a product or technical plan for what we discussed.
```

--------------------------------

### Install Lavish Skill with npx

Source: https://github.com/kunchenguid/lavish-axi/blob/main/README.md

Installs the Lavish skill for agent use. No additional npm installation is required.

```sh
npx skills add kunchenguid/lavish-axi --skill lavish
```

--------------------------------

### Preview and Build Commands

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/CLAUDE.md

Standard npm commands for previewing the project in a browser, running checks, rendering to MP4, and publishing.

```bash
npm run dev          # preview in browser (studio editor)
npm run check        # lint + validate + inspect
npm run render       # render to MP4
npm run publish      # publish and get a shareable link
```

--------------------------------

### Bundle Project with pnpm

Source: https://github.com/kunchenguid/lavish-axi/blob/main/CLAUDE.md

Bundle the CLI application and copy design assets. This is part of the build process.

```sh
pnpm run build
```

--------------------------------

### Build Script for Telemetry and Versioning

Source: https://github.com/kunchenguid/lavish-axi/blob/main/AGENTS.md

Build script that inlines telemetry host/website ID and package version into the bundle. Consumes environment variables for configuration.

```javascript
scripts/build.js
```

--------------------------------

### Initializing no-mistakes with Fork URL

Source: https://github.com/kunchenguid/lavish-axi/blob/main/CONTRIBUTING.md

Initialize or refresh the `no-mistakes` gate, specifying your personal fork as the push target. Replace `<you>` with your GitHub username.

```sh
no-mistakes init --fork-url git@github.com:<you>/lavish-axi.git
```

--------------------------------

### Run Development Verification Commands

Source: https://github.com/kunchenguid/lavish-axi/blob/main/README.md

Execute all verification commands for the project. This includes linting, type checking, and tests.

```sh
pnpm run check          # Run all verification commands
```

```sh
pnpm run build          # Bundle the publishable CLI, chrome, and design assets
```

```sh
pnpm run build:skill    # Regenerate the installable lavish skill
```

```sh
pnpm test               # Run node:test tests
```

```sh
pnpm run lint           # Run ESLint
```

```sh
pnpm run format:check   # Check Prettier formatting
```

```sh
pnpm run typecheck      # Run TypeScript checkJs validation
```

--------------------------------

### Regenerate Skill Documentation with pnpm

Source: https://github.com/kunchenguid/lavish-axi/blob/main/CLAUDE.md

Recreate the SKILL.md file from shared CLI guidance. This ensures consistency between the CLI and its documentation.

```sh
pnpm run build:skill
```

--------------------------------

### HyperFrames Project Commands

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/AGENTS.md

Common commands for developing, checking, rendering, and publishing HyperFrames compositions.

```bash
npm run dev          # preview in browser (studio editor)
npm run check        # lint + validate + inspect
npm run render       # render to MP4
npm run publish      # publish and get a shareable link
npx hyperframes docs <topic> # reference docs in terminal
```

--------------------------------

### Lint Project Files with pnpm

Source: https://github.com/kunchenguid/lavish-axi/blob/main/CLAUDE.md

Run ESLint over the bin, src, and test scripts to enforce code style and catch potential errors.

```sh
pnpm run lint
```

--------------------------------

### Check Formatting with pnpm

Source: https://github.com/kunchenguid/lavish-axi/blob/main/CLAUDE.md

Verify that all code adheres to the project's formatting standards using Prettier.

```sh
pnpm run format:check
```

--------------------------------

### Running Repository Checks

Source: https://github.com/kunchenguid/lavish-axi/blob/main/CONTRIBUTING.md

Execute this command to run all pre-push checks, including linting and type validation, to ensure your code adheres to project standards.

```sh
pnpm run check
```

--------------------------------

### Run Tests with pnpm

Source: https://github.com/kunchenguid/lavish-axi/blob/main/CLAUDE.md

Execute all tests in the project using the node:test runner. Ensure all tests pass before committing.

```sh
pnpm test
```

--------------------------------

### HyperFrames CLI Linting Options

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/CLAUDE.md

Command-line options for the hyperframes CLI to control linting verbosity and output format.

```bash
npx hyperframes lint --verbose  # include info-level findings
npx hyperframes lint --json     # machine-readable output for CI
```

--------------------------------

### HyperFrames CLI Documentation Command

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/CLAUDE.md

Command to access local documentation for specific topics within the HyperFrames framework.

```bash
npx hyperframes docs <topic> # reference docs in terminal
```

--------------------------------

### Run Full Check After Changes

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/AGENTS.md

Execute the full check command after creating or editing composition files to ensure linting and validation.

```bash
npm run check
```

--------------------------------

### Run a Single Test File

Source: https://github.com/kunchenguid/lavish-axi/blob/main/CLAUDE.md

Execute a specific test file using the Node.js test runner. Useful for debugging.

```sh
node --test test/server.test.js
```

--------------------------------

### CLI Command for Sharing HTML

Source: https://github.com/kunchenguid/lavish-axi/blob/main/AGENTS.md

Command-line interface for sharing HTML files. Allows specifying an optional password and token for the share.

```bash
lavish-axi share <html-file> [--password <pw>] [--token <t>]
```

--------------------------------

### Pushing Changes with no-mistakes

Source: https://github.com/kunchenguid/lavish-axi/blob/main/CONTRIBUTING.md

Use this command to push your changes through the `no-mistakes` gate for automated review and testing before submitting a pull request.

```sh
git push no-mistakes
```

--------------------------------

### Publish HTML to ht-ml.app

Source: https://github.com/kunchenguid/lavish-axi/blob/main/AGENTS.md

Publishes local HTML content to ht-ml.app, returning a shareable URL. Supports optional password protection. No account or API key is required for publishing.

```javascript
src/html-app.js (publishToHtmlApp)
```

--------------------------------

### Register GSAP Timelines

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/AGENTS.md

Register GSAP timelines with `window.__timelines` and ensure they are paused. This is crucial for managing animations within compositions.

```javascript
window.__timelines = window.__timelines || {};
window.__timelines["composition-id"] = gsap.timeline({ paused: true });
```

--------------------------------

### GSAP Pointer and Click Ring Advanced Interaction

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Animates the pointer and click ring to simulate interaction with elements at different locations.

```javascript
tl.to("#pointer-1", { x: 1410, y: 760, duration: 0.5, ease: "power2.inOut" }, 16.12);
```

```javascript
tl.set("#click-ring-1", { x: 1410, y: 760, scale: 0.55 }, 16.62);
```

```javascript
tl.to("#click-ring-1", { opacity: 1, scale: 1, duration: 0.18, ease: "power2.out" }, 16.62);
```

```javascript
tl.to("#click-ring-1", { opacity: 0, scale: 1.45, duration: 0.28, ease: "sine.out" }, 16.8);
```

```javascript
tl.to(".editor-window-1", { scale: 1, x: 0, y: 0, duration: 0.74, ease: "power2.inOut" }, 16.96);
```

```javascript
tl.to("#pointer-1", { x: 1480, y: 807, duration: 0.68, ease: "power2.inOut" }, 17.06);
```

--------------------------------

### GSAP Enter Key and Prompt Line Interaction Animation

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Animates the 'Enter' key and prompt line to simulate user interaction, including color and scale changes.

```javascript
tl.to(".enter-key", { opacity: 1, duration: 0.3, ease: "sine.out" }, 3.85);
```

```javascript
tl.to( ".enter-key", { scale: 0.88, backgroundColor: "#f4c95d", borderColor: "#f4c95d", color: "#17130a", duration: 0.12, ease: "power1.in", }, 4.6, );
```

```javascript
tl.to(".enter-key", { scale: 1, duration: 0.18, ease: "power2.out" }, 4.72);
```

```javascript
tl.to(".prompt-line", { borderColor: "#f4c95d", duration: 0.15, ease: "sine.out" }, 4.62);
```

```javascript
tl.to(".prompt-line", { borderColor: "#303745", duration: 0.3, ease: "sine.out" }, 5.05);
```

```javascript
tl.to(".enter-key", { opacity: 0, duration: 0.3, ease: "sine.out" }, 5.1);
```

--------------------------------

### Normalize Bare Arguments in CLI

Source: https://github.com/kunchenguid/lavish-axi/blob/main/AGENTS.md

Normalizes bare arguments for the CLI, ensuring reserved commands are passed through to the SDK.

```javascript
normalizeArgv must let the SDK's RESERVED_COMMANDS (such as the built-in update self-updater) pass through untouched; otherwise the bare-arg rewrite turns lavish-axi update into ["open", "update"] and the inherited reserved command never reaches runAxiCli.
```

--------------------------------

### Scene Transition Animation

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Animates the transition between two scenes, fading out the source and fading in the destination with blur effects.

```javascript
function focusPull(fromScene, toScene, at) { tl.set(toScene, { opacity: 0, filter: "blur(18px)", zIndex: 5 }, at); tl.set(fromScene, { zIndex: 4 }, at); tl.to(fromScene, { opacity: 0, filter: "blur(22px)", duration: 0.72, ease: "sine.inOut" }, at); tl.to(toScene, { opacity: 1, filter: "blur(0px)", duration: 0.72, ease: "sine.inOut" }, at + 0.08); }
```

--------------------------------

### GSAP Final Pointer and Click Ring Animation

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Animates the pointer and click ring to their final positions, simulating a last interaction.

```javascript
tl.to("#pointer-1", { x: 1028, y: 628, duration: 0.72, ease: "power2.inOut" }, 18.42);
```

```javascript
tl.set("#click-ring-1", { x: 1028, y: 628, scale: 0.55 }, 19.34);
```

--------------------------------

### GSAP Pointer and Click Ring Interaction Animation

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Animates a pointer and click ring to highlight specific UI elements within the editor scene.

```javascript
tl.to("#pointer-1", { opacity: 1, duration: 0.24, ease: "power1.out" }, 11.48);
```

```javascript
tl.to(".editor-window-1", { scale: 1.75, x: 914, y: -232, duration: 0.9, ease: "power2.inOut" }, 11.62);
```

```javascript
tl.to("#pointer-1", { x: 899, y: 612, duration: 0.85, ease: "power2.inOut" }, 11.78);
```

```javascript
tl.to("#scene-editor .outline-target", { opacity: 1, duration: 0.22, ease: "sine.out" }, 12.75);
```

```javascript
tl.set("#click-ring-1", { x: 899, y: 612 }, 12.9);
```

```javascript
tl.to("#click-ring-1", { opacity: 1, scale: 1, duration: 0.22, ease: "power2.out" }, 12.9);
```

```javascript
tl.to("#click-ring-1", { opacity: 0, scale: 1.5, duration: 0.34, ease: "sine.out" }, 13.13);
```

--------------------------------

### Typecheck Project with pnpm

Source: https://github.com/kunchenguid/lavish-axi/blob/main/CLAUDE.md

Perform a type check using TypeScript in checkJs mode without emitting any JavaScript files. This validates the JSDoc annotations.

```sh
pnpm run typecheck
```

--------------------------------

### Filter Tests by Name

Source: https://github.com/kunchenguid/lavish-axi/blob/main/CLAUDE.md

Run specific tests within a file by filtering them using a name pattern. This helps isolate failing tests.

```sh
node --test --test-name-pattern "createOpenOutput" test/cli-output.test.js
```

--------------------------------

### Initialize GSAP Timeline and Split Text Function

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Initializes a paused GSAP timeline and defines a utility function to split text for animations. This is typically used for advanced text effects.

```javascript
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({
  paused: true
});

function splitText(selector, text) {
  const el = document.querySelector(selector);

```

--------------------------------

### GSAP Log Entry Animation

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Animates the appearance of log entries, making them visible and moving them into place.

```javascript
tl.to("#log-1", { opacity: 1, y: 0, duration: 0.5, ease: "power1.out" }, 5.45);
```

```javascript
tl.to("#log-2", { opacity: 1, y: 0, duration: 0.5, ease: "power1.out" }, 6.25);
```

```javascript
tl.to("#log-3", { opacity: 1, y: 0, duration: 0.5, ease: "power1.out" }, 7.15);
```

```javascript
tl.to("#log-4", { opacity: 1, y: 0, duration: 0.5, ease: "power1.out" }, 7.95);
```

--------------------------------

### Main Animation Timeline

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

This GSAP timeline orchestrates a series of animations for the marketing page. It controls elements like rings, pointers, text areas, and chat bubbles to simulate user interaction and feature highlights.

```javascript
tl.to("#click-ring-1", { opacity: 1, scale: 1, duration: 0.2, ease: "power2.out" }, 19.34);
tl.to("#click-ring-1", { opacity: 0, scale: 1.45, duration: 0.3, ease: "sine.out" }, 19.54);
tl.to( ".option-sqlite", { borderColor: "#f4c95d", backgroundColor: "#fff0bf", duration: 0.26, ease: "power2.out" }, 19.56, );
tl.to(".pill-two", { opacity: 1, y: -2, duration: 0.32, ease: "power2.out" }, 20.0);
tl.to("#pointer-1", { x: 1640, y: 901, duration: 0.68, ease: "power2.inOut" }, 21.82);
tl.set("#click-ring-1", { x: 1640, y: 901, scale: 0.55 }, 22.36);
tl.to("#click-ring-1", { opacity: 1, scale: 1, duration: 0.18, ease: "power2.out" }, 22.36);
tl.to("#click-ring-1", { opacity: 0, scale: 1.45, duration: 0.28, ease: "sine.out" }, 22.54);
tl.to(".textarea", { borderColor: "#f4c95d", duration: 0.18, ease: "sine.out" }, 22.4);
tl.to(".textarea .placeholder", { opacity: 0, duration: 0.16, ease: "sine.out" }, 22.48);
tl.from("#chat-text span", { opacity: 0, duration: 0.018, stagger: 0.052, ease: "none" }, 22.56);
tl.to("#pointer-1", { x: 1767, y: 999, duration: 0.5, ease: "power2.inOut" }, 24.0);
tl.set("#click-ring-1", { x: 1767, y: 999, scale: 0.55 }, 24.5);
tl.to("#click-ring-1", { opacity: 1, scale: 0.92, duration: 0.14, ease: "power2.out" }, 24.5);
tl.to(".send-split", { scale: 0.93, y: 2, duration: 0.1, ease: "power1.in" }, 24.5);
tl.to(".send-button, .send-caret", { backgroundColor: "#ffd877", duration: 0.1, ease: "power1.in" }, 24.5);
tl.to(".send-split", { scale: 1, y: 0, duration: 0.16, ease: "power2.out" }, 24.62);
tl.to(".send-button, .send-caret", { backgroundColor: "#f4c95d", duration: 0.16, ease: "power2.out" }, 24.62);
tl.to("#click-ring-1", { opacity: 0, scale: 1.5, duration: 0.28, ease: "sine.out" }, 24.64);
tl.to(".pill", { opacity: 0, y: 5, duration: 0.22, ease: "sine.out" }, 24.72);
tl.to(".chat-line", { opacity: 0, duration: 0.18, ease: "sine.out" }, 24.72);
tl.to(".textarea .placeholder", { opacity: 1, duration: 0.18, ease: "sine.out" }, 24.82);
tl.to(".textarea", { borderColor: "#303745", duration: 0.18, ease: "sine.out" }, 24.82);
tl.to(".user-bubble", { opacity: 1, y: -4, duration: 0.32, ease: "power2.out" }, 25.0);
tl.to(".working", { opacity: 1, y: -4, duration: 0.3, ease: "sine.out" }, 25.34);
tl.to(".spinner", { rotation: 360, duration: 0.8, repeat: 3, ease: "none" }, 25.34);
tl.to("#pointer-1", { opacity: 0, duration: 0.28, ease: "sine.out" }, 25.3);
tl.to(".chart-before", { opacity: 0, duration: 0.28, ease: "sine.out" }, 26.04);
tl.to(".chart-after", { opacity: 1, duration: 0.42, ease: "power1.out" }, 26.18);
tl.from("#scene-editor .diagram-node.updated", { scale: 0.92, duration: 0.46, ease: "power3.out" }, 26.18);
tl.to( "#scene-editor .option-button:not(.option-sqlite)", { opacity: 0.45, duration: 0.3, ease: "sine.out" }, 26.26, );
tl.to( "#scene-editor .failure-item", { opacity: 1, y: -2, duration: 0.34, stagger: 0.08, ease: "power2.out" }, 26.34, );
tl.to(".working", { opacity: 0, y: 4, duration: 0.24, ease: "sine.out" }, 27.34);
tl.to(".done-bubble", { opacity: 1, y: -4, duration: 0.34, ease: "power2.out" }, 27.5);
focusPull("#scene-editor", "#scene-outro", 29.7);
tl.from("#scene-outro .outro-brand", { y: 36, opacity: 0, duration: 0.74, ease: "power3.out" }, 30.08);
tl.from("#scene-outro p", { y: 22, opacity: 0, duration: 0.48, ease: "sine.out" }, 30.48);
tl.from("#scene-outro code", { y: 18, opacity: 0, scale: 0.98, duration: 0.44, ease: "power2.out" }, 30.72);
window."	__timelines["main"] = tl;
```

--------------------------------

### Text Splitting and Animation

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Splits text into individual characters and animates their appearance. Useful for creating typing effects.

```javascript
el.innerHTML = ""; for (const char of text) { const span = document.createElement("span"); span.textContent = char === " " ? " " : char; el.appendChild(span); } }
```

```javascript
splitText("#typed-prompt", "/lavish a technical plan for what we discussed"); splitText("#annotation-text", "use websocket instead of long-poll"); splitText("#chat-text", "what are the failure modes here?");
```

--------------------------------

### GSAP Editor Scene Entry Animation

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Animates the entry of the editor scene, including windows, browser bars, and UI elements.

```javascript
tl.from(".editor-window-1", { y: 42, scale: 0.985, duration: 0.72, ease: "power3.out" }, 9.24);
```

```javascript
tl.from("#scene-editor .browser-bar", { y: -18, opacity: 0, duration: 0.42, ease: "power2.out" }, 9.38);
```

```javascript
tl.from( "#scene-editor .topbar > *", { y: -12, opacity: 0, duration: 0.36, stagger: 0.045, ease: "sine.out" }, 9.52, );
```

```javascript
tl.from("#scene-editor .report-header", { y: 28, opacity: 0, duration: 0.58, ease: "expo.out" }, 9.72);
```

```javascript
tl.from( "#scene-editor .chart-card", { y: 28, opacity: 0, duration: 0.56, stagger: 0.1, ease: "power3.out" }, 10.0, );
```

```javascript
tl.from("#scene-editor .chat-panel", { x: 34, opacity: 0, duration: 0.52, ease: "power2.out" }, 10.42);
```

```javascript
tl.from( "#scene-editor .bubble.agent:first-child", { x: 18, opacity: 0, duration: 0.38, ease: "sine.out" }, 10.78, );
```

```javascript
tl.from("#scene-editor .composer", { y: 24, opacity: 0, duration: 0.46, ease: "power1.out" }, 10.92);
```

--------------------------------

### Invoke Lavish Skill in Agent

Source: https://github.com/kunchenguid/lavish-axi/blob/main/README.md

Directly invoke the Lavish skill within an agent that supports slash commands.

```sh
/lavish let's discuss our plan here
```

--------------------------------

### GSAP Pill-One Element Animation

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Animates the 'pill-one' element to appear with a slight upward movement.

```javascript
tl.to(".pill-one", { opacity: 1, y: -2, duration: 0.32, ease: "power2.out" }, 17.52);
```

--------------------------------

### GSAP Terminal Entry Animation

Source: https://github.com/kunchenguid/lavish-axi/blob/main/lavish-editor-marketing/index.html

Animates the appearance of the terminal shell, turns, and prompt lines, including text input.

```javascript
tl.set("#scene-cover", { opacity: 0 }, 0.1);
```

```javascript
tl.fromTo( ".terminal-shell", { y: 46, opacity: 0, scale: 0.985 }, { y: 0, opacity: 1, scale: 1, duration: 0.76, ease: "power3.out" }, 0.18, );
```

```javascript
tl.from(".terminal-turn", { y: 18, opacity: 0, duration: 0.4, stagger: 0.16, ease: "power2.out" }, 0.72);
```

```javascript
tl.from(".prompt-line", { y: 18, opacity: 0, duration: 0.44, ease: "power3.out" }, 1.48);
```

```javascript
tl.from("#typed-prompt span", { opacity: 0, duration: 0.018, stagger: 0.036, ease: "none" }, 1.82);
```