Skip to content

Publish live demo and skills.sh install links #2

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.

Sign up for GitHub

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
rob163 merged 2 commits into from
Jun 8, 2026
Merged

Publish live demo and skills.sh install links #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3977814
Clarify skills CLI install steps in README.
rob163 Jun 8, 2026
b52703f
Publish live demo links in README
rob163 Jun 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 31 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,57 +3,68 @@
An agent skill for creating a static, copy-only HTML command panel from a
project's repeat-use CLI workflows.

<p align="center">
<a href="https://skills.sh/rob163/html-as-cli-panel-skill"><img alt="skills.sh" src="https://skills.sh/b/rob163/html-as-cli-panel-skill"></a>
<a href="https://github.com/rob163/html-as-cli-panel-skill/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/github/license/rob163/html-as-cli-panel-skill?style=flat-square"></a>
</p>

The generated `cli-panel.html` runs locally in the browser, stores edits in
`localStorage`, and helps users build copyable commands without adding runtime
dependencies to the target project.

<p align="center">
<a href="./docs/demo/cli-panel.html">
<a href="https://rob163.github.io/html-as-cli-panel-skill/demo/cli-panel.html">
<img src="./docs/images/cli-panel-preview.png" alt="CLI Panel template preview" width="100%">
</a>
</p>

<p align="center">
<a href="./docs/demo/cli-panel.html"><strong>Open the template HTML demo</strong></a>
<a href="https://rob163.github.io/html-as-cli-panel-skill/demo/cli-panel.html"><strong>Open the live template demo</strong></a>
</p>

## Install

Use the `skills` installer so the target agent receives the correct directory
layout. This avoids fragile file-placement mistakes.
[skills](https://skills.sh) is the CLI for the open agent skills ecosystem. It
downloads a skill from a GitHub repository and places it in the directory your
coding agent expects (for example `~/.cursor/skills/` or `.codex/skills/`). You
do not need to install it separately — `npx skills` runs it on demand.

Install with automatic agent detection:
Use the installer so the target agent receives the correct layout. This avoids
fragile file-placement mistakes.

Install into the current project (shared with the repo via git):

```bash
npx skills add rob163/html-as-cli-panel-skill
npx skills add rob163/html-as-cli-panel-skill --agent cursor
```

Install for Codex:
Install globally for one agent (available in every project on your machine):

```bash
npx skills add rob163/html-as-cli-panel-skill --agent codex
npx skills add rob163/html-as-cli-panel-skill --global --agent cursor
```

Install for Claude Code:
Replace `cursor` with your agent: `codex`, `claude-code`, and others are
supported. Omit `--agent` only if you want the CLI to auto-detect installed
agents or prompt you to choose.

Other examples:

```bash
npx skills add rob163/html-as-cli-panel-skill --agent claude-code
```
# Codex, project-local
npx skills add rob163/html-as-cli-panel-skill --agent codex

Install globally instead of project-local:
# Claude Code, global
npx skills add rob163/html-as-cli-panel-skill --global --agent claude-code

```bash
npx skills add rob163/html-as-cli-panel-skill --global
# Skip confirmation prompts (useful in scripts)
npx skills add rob163/html-as-cli-panel-skill --global --agent cursor --yes
```

Private repository installs require GitHub authentication in the environment
running `npx skills`.

Before the repository is published, test this local clone through the same
installer path:
Verify installation:

```bash
npx skills add . --agent codex
npx skills ls -g -a cursor
```

## Development
Expand Down
27 changes: 27 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="0; url=./demo/cli-panel.html">
<title>HTML as CLI Panel</title>
<style>
body {
display: grid;
min-height: 100vh;
place-items: center;
margin: 0;
background: #f7f8fb;
color: #18202f;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: #2563eb; }
</style>
</head>
<body>
<main>
<p>Opening <a href="./demo/cli-panel.html">HTML as CLI Panel</a>...</p>
</main>
</body>
</html>
Loading