-
Notifications
You must be signed in to change notification settings - Fork 2
feat(lavish): add lavish-axi HTML artifact review skill plugin #227
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| --- | ||
| name: lavish | ||
| description: Turn complex or visual agent responses into rich, reviewable HTML artifacts the user can annotate and send feedback on, using the lavish-axi CLI. Use when about to give a plan, comparison, diagram, table, code diff, report, or anything easier to grasp visually than as prose. | ||
| argument-hint: <what the artifact should show> | ||
| author: Kun Chen (kunchenguid) | ||
| metadata: | ||
| hermes: | ||
| tags: [html, review, artifacts, visualization] | ||
| category: productivity | ||
| --- | ||
|
|
||
| # Lavish Editor | ||
|
|
||
| Lavish Editor helps agents turn rich HTML artifacts into collaborative human review surfaces. Whenever you are about to give user a complex response that will be easier to understand via a rich / interactive page, consider using Lavish Editor. First generate an interactive HTML artifact according to user request, then run `npx -y lavish-axi <html-file>` so the user can visually review it, annotate elements or selected text, queue prompts, and send feedback back through `npx -y lavish-axi poll`. | ||
|
|
||
| You do not need lavish-axi installed globally - invoke it with `npx -y lavish-axi <html-file>`. | ||
| If lavish-axi output shows a follow-up command starting with `lavish-axi`, run it as `npx -y lavish-axi ...` instead. | ||
|
|
||
| ## Request | ||
|
|
||
| $ARGUMENTS | ||
|
|
||
| If the request above is non-empty, the user invoked `/lavish` explicitly - build an HTML artifact for that request now, following the workflow below. | ||
| If it is empty, infer what to visualize from the conversation. | ||
|
|
||
| ## When to use | ||
|
|
||
| Use lavish-axi when the user asks for a visual artifact, HTML explainer, interactive prototype, review surface, product or technical plan, comparison, report, or browser-based feedback loop | ||
|
|
||
| ## Workflow | ||
|
|
||
| 1. Create the HTML artifact (default location `.lavish/<name>.html` in the working directory). | ||
| 2. Run `npx -y lavish-axi <html-file>` to open or resume a review session in the browser. | ||
| 3. Run `npx -y lavish-axi poll <html-file>` to long-poll for the user's annotations, queued prompts, and browser-reported `layout_warnings`. | ||
| The poll stays silent until the user acts or the real browser reports fresh layout warnings - leave it running, never kill it. | ||
| If your harness limits how long a foreground command may run, run the poll as a background task; if it gets killed or times out anyway, just re-run it - queued feedback is never lost. | ||
| 4. If poll returns `layout_warnings`, fix overflow, clipped text, or overlapping unreadable content and re-check before involving the human. | ||
| 5. Apply human feedback, then poll again with `--agent-reply "<message>"` to reply in the browser and keep the loop going. | ||
| 6. Run `npx -y lavish-axi end <html-file>` when the review is finished. | ||
|
|
||
| ## Visual guidance | ||
|
|
||
| - Use visual hierarchy to make the most important decisions, risks, tradeoffs, and next actions obvious at a glance | ||
| - Use visual structure such as sections, cards, tables, diagrams, annotated snippets, and side-by-side comparisons instead of long prose | ||
| - Choose typography, spacing, color, and layout deliberately so the artifact has a clear point of view | ||
| - Prevent horizontal overflow at every nesting level: nested grid/flex children also need minmax(0, 1fr) tracks and min-width: 0, especially when badges, labels, or status text use wide pixel or monospace fonts; wrap, truncate, or contain long unbreakable text deliberately | ||
|
|
||
| ## Playbooks | ||
|
|
||
| Run `npx -y lavish-axi playbook <id>` for focused, detailed guidance on any of these. | ||
| One artifact often combines several playbooks (for example a plan that includes a comparison and a diagram), so read every playbook relevant to your artifact, not just one, for the best quality: | ||
|
|
||
| - `diagram` - Map relationships, flows, state, and architecture | ||
| - `table` - Turn dense records into scan-friendly review surfaces | ||
| - `comparison` - Show options, tradeoffs, and current vs target behavior | ||
| - `plan` - Explain a product or technical plan before implementation | ||
| - `code` - Render source code, code files, patches, PR diffs, and before/after code inside Lavish artifacts | ||
| - `input` - Must be used when the agent needs to collect user input on decisions, choices, preferences, triage, scope, or other structured feedback from within the artifact | ||
| - `slides` - Create a deliberate presentation when slides are requested | ||
|
|
||
| ## Commands & rules | ||
|
|
||
| - Run `npx -y lavish-axi <html-file>` to open or resume a Lavish Editor session | ||
| - Unless the user specifies another location, create HTML artifacts in the current working directory under `.lavish/` | ||
| - Lavish serves the html file through a local express.js server. If your html needs to reference other filesystem assets such as images, CSS, fonts, and local scripts, copy them into the same directory as the HTML file, then reference them with relative paths from that directory. Never prepend `/` to those asset paths - root paths won't work | ||
| - Run `npx -y lavish-axi poll <html-file>` to wait for user feedback or browser-reported layout_warnings. It long-polls and stays silent until the user sends feedback, ends the session, or the real browser reports fresh layout_warnings, so leave it running - never kill it. Fix layout_warnings before involving the human. If your harness limits how long a foreground command may run, run the poll as a background task; if it gets killed or times out anyway, just re-run it - queued feedback is never lost | ||
| - Run `npx -y lavish-axi end <html-file>` to end a session | ||
| - Run `npx -y lavish-axi stop` to shut down the background server (it also self-stops when idle or after the last session ends with nothing connected) | ||
| - Run `npx -y lavish-axi playbook <playbook_id>` for focused artifact guidance. One artifact often combines several playbooks (for example a plan that includes a comparison and a diagram), so read every playbook relevant to the artifact, not just one, for the best quality | ||
| - Lavish does not auto-inject any design system - artifacts stay portable so they render identically when opened directly without lavish-axi running. Before writing any HTML, decide the design direction in this strict priority order, and only move to the next step when the current one truly yields nothing: (1) if the user asked for a specific look or named design system, use that; (2) otherwise you must first inspect the project the artifact is about - the subject or product whose content or UI it represents, which may differ from your current working directory - and match that project's design system: Tailwind or theme config, shared CSS variables or design tokens, component library, brand assets, or existing styled pages. If the artifact previews, proposes, or mocks a specific app's UI, render it in that app's own design system so it faithfully shows the product, even when you are running in a different repo; (3) only when both steps come up empty, use the Lavish-recommended Tailwind CSS browser runtime v4 + DaisyUI v5, available via CDN - run `npx -y lavish-axi design` for a copy-pasteable CDN snippet plus component reference, and prefer that CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user. When you deliver the artifact, state which of the three design sources you used and why. | ||
| - Use lavish-axi when the user asks for a visual artifact, HTML explainer, interactive prototype, review surface, product or technical plan, comparison, report, or browser-based feedback loop |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| { | ||
| "name": "lavish", | ||
| "version": "1.0.0", | ||
| "description": "Turn complex or visual agent responses into rich, reviewable HTML artifacts the user can annotate and send feedback on, using the lavish-axi CLI. Use when about to give a plan, comparison, diagram, table, code diff, report, or anything easier to grasp visually than as prose.", | ||
| "author": { | ||
| "name": "Kun Chen", | ||
| "url": "https://github.com/kunchenguid" | ||
| }, | ||
| "homepage": "https://github.com/kunchenguid/lavish-axi", | ||
| "repository": "https://github.com/kunchenguid/lavish-axi", | ||
| "license": "MIT", | ||
| "keywords": ["lavish", "html", "artifacts", "review", "visualization"], | ||
| "skills": "./.agents/skills/" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| { | ||
| "name": "lavish", | ||
| "version": "1.0.0", | ||
| "description": "Turn complex or visual agent responses into rich, reviewable HTML artifacts the user can annotate and send feedback on, using the lavish-axi CLI. Use when about to give a plan, comparison, diagram, table, code diff, report, or anything easier to grasp visually than as prose.", | ||
| "author": { | ||
| "name": "Kun Chen", | ||
| "url": "https://github.com/kunchenguid" | ||
| }, | ||
| "interface": { | ||
| "displayName": "Lavish", | ||
| "shortDescription": "Turn complex or visual agent responses into rich, reviewable HTML artifacts the user can annotate and send feedback on, using the lavish-axi CLI", | ||
| "longDescription": "Turn complex or visual agent responses into rich, reviewable HTML artifacts the user can annotate and send feedback on, using the lavish-axi CLI. Use when about to give a plan, comparison, diagram, table, code diff, report, or anything easier to grasp visually than as prose.", | ||
| "developerName": "Kun Chen", | ||
| "category": "Tooling", | ||
| "capabilities": [ | ||
| "Skill" | ||
| ], | ||
| "defaultPrompt": [ | ||
| "Help me use Lavish for my current task." | ||
| ], | ||
| "websiteURL": "https://github.com/kunchenguid/lavish-axi" | ||
| }, | ||
| "homepage": "https://github.com/kunchenguid/lavish-axi", | ||
| "repository": "https://github.com/kunchenguid/lavish-axi", | ||
| "license": "MIT", | ||
| "keywords": [ | ||
| "lavish", | ||
| "html", | ||
| "artifacts", | ||
| "review", | ||
| "visualization" | ||
| ] | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| { | ||
| "name": "lavish", | ||
| "version": "1.0.0", | ||
| "description": "Turn complex or visual agent responses into rich, reviewable HTML artifacts the user can annotate and send feedback on, using the lavish-axi CLI. Use when about to give a plan, comparison, diagram, table, code diff, report, or anything easier to grasp visually than as prose.", | ||
| "author": { | ||
| "name": "Kun Chen", | ||
| "url": "https://github.com/kunchenguid" | ||
| }, | ||
| "homepage": "https://github.com/kunchenguid/lavish-axi", | ||
| "repository": "https://github.com/kunchenguid/lavish-axi", | ||
| "license": "MIT", | ||
| "keywords": [ | ||
| "lavish", | ||
| "html", | ||
| "artifacts", | ||
| "review", | ||
| "visualization" | ||
| ] | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "version": 1, | ||
| "skills": { | ||
| "lavish": { | ||
| "source": "kunchenguid/lavish-axi", | ||
| "sourceType": "github", | ||
| "skillPath": "skills/lavish/SKILL.md", | ||
| "computedHash": "32bc766ecb6cbaa1c049fa3543166210eb12510c6784ebac939bd0c0916e7797" | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.