Agent skill

Hlive Hhtml

Build HLive page markup with the hhtml package (github.com/SamHennessy/hlive/hhtml) — typed, autocompleting Go builders for HTML5 tags and attributes (Div, Button, A, Input, Class, Href, ...).

MITAuto-check passedBackend & APIs

Install Hlive Hhtml

skills CLI

$ npx skills add SamHennessy/hlive --skill hlive-hhtml -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install SamHennessy/hlive hlive-hhtml --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/SamHennessy/hlive.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugin/skills/hlive-hhtml .claude/skills/hlive-hhtml && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "hlive-hhtml" agent skill from https://github.com/SamHennessy/hlive/tree/main/plugin/skills/hlive-hhtml into .claude/skills/hlive-hhtml/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hlive-hhtml", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/SamHennessy/hlive/tree/main/plugin/skills/hlive-hhtml

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add SamHennessy/hlive --skill hlive-hhtml -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install SamHennessy/hlive hlive-hhtml --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/SamHennessy/hlive.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugin/skills/hlive-hhtml .agents/skills/hlive-hhtml && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "hlive-hhtml" agent skill from https://github.com/SamHennessy/hlive/tree/main/plugin/skills/hlive-hhtml into .agents/skills/hlive-hhtml/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hlive-hhtml", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add SamHennessy/hlive --skill hlive-hhtml -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install SamHennessy/hlive hlive-hhtml --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/SamHennessy/hlive.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugin/skills/hlive-hhtml .cursor/skills/hlive-hhtml && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "hlive-hhtml" agent skill from https://github.com/SamHennessy/hlive/tree/main/plugin/skills/hlive-hhtml into .cursor/skills/hlive-hhtml/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hlive-hhtml", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/SamHennessy/hlive.git --path plugin/skills/hlive-hhtml

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add SamHennessy/hlive --skill hlive-hhtml -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install SamHennessy/hlive hlive-hhtml --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/SamHennessy/hlive.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugin/skills/hlive-hhtml .gemini/skills/hlive-hhtml && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "hlive-hhtml" agent skill from https://github.com/SamHennessy/hlive/tree/main/plugin/skills/hlive-hhtml into .gemini/skills/hlive-hhtml/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hlive-hhtml", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install SamHennessy/hlive hlive-hhtml

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add SamHennessy/hlive --skill hlive-hhtml -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/SamHennessy/hlive.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugin/skills/hlive-hhtml .github/skills/hlive-hhtml && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "hlive-hhtml" agent skill from https://github.com/SamHennessy/hlive/tree/main/plugin/skills/hlive-hhtml into .github/skills/hlive-hhtml/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hlive-hhtml", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add SamHennessy/hlive --skill hlive-hhtml -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install SamHennessy/hlive hlive-hhtml --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/SamHennessy/hlive.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugin/skills/hlive-hhtml .opencode/skills/hlive-hhtml && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "hlive-hhtml" agent skill from https://github.com/SamHennessy/hlive/tree/main/plugin/skills/hlive-hhtml into .opencode/skills/hlive-hhtml/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hlive-hhtml", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: hlive-hhtml
GitHub stars: 101
Token cost: ~1.3k tokens
SKILL.md length: 411 words
Files: 1
Skills in repo: 5
Repo updated: Jul 2, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Build HLive page markup with the hhtml package (github.com/SamHennessy/hlive/hhtml) — typed, autocompleting Go builders for HTML5 tags and attributes (Div, Button, A, Input, Class, Href, ...).

Editing HLive page/component markup
SKILL.md covers Import idiom, Tag builders, Attribute functions and Behavior stays on the core l…, plus 3 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Hlive Hhtml is an agent skill from SamHennessy/hlive. Build HLive page markup with the hhtml package (github.com/SamHennessy/hlive/hhtml) — typed, autocompleting Go builders for HTML5 tags and attributes (Div, Button, A, Input, Class, Href, ...). Use when writing or editing HLive page/component markup, when you see the . "github.com/SamHennessy/hlive/hhtml" dot-import, or when choosing between hhtml builders and the raw l.T/l.C primitives.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Backend & APIs. It works with GitHub. The repository describes itself as: HLive is a server-side WebSocket based dynamic template-less view layer for Go. The licence is MIT.

When your agent uses it

Editing HLive page/component markup

Example prompts

“github.com/SamHennessy/hlive/hhtml”
“/hlive-hhtml”

What it can do on your machine

Read from SKILL.md and the folder at commit bc5f920. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are go).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Hlive Hhtml loads about 1.3k tokens when it runs. Until then it costs about 101 tokens; SKILL.md has 411 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~101
When it runs · the whole SKILL.md, loaded when a task matches: ~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from SamHennessy/hlive at commit bc5f920, republished under its MIT licence (© SamHennessy). 411 words, ~1,263 tokens.

Download SKILL.mdSave it as .claude/skills/hlive-hhtml/SKILL.md (or your agent's skills folder).

name: hlive-hhtml
description: Build HLive page markup with the hhtml package (github.com/SamHennessy/hlive/hhtml) — typed, autocompleting Go builders for HTML5 tags and attributes (Div, Button, A, Input, Class, Href, ...). Use when writing or editing HLive page/component markup, when you see the `. "github.com/SamHennessy/hlive/hhtml"` dot-import, or when choosing between hhtml builders and the raw l.T/l.C primitives.

Building markup with hhtml

hhtml is the preferred way to write HLive markup. Instead of passing tag and attribute names as strings to l.T/l.C, you call typed Go functions — Div(...), Button(...), Class("..."), Href("...") — so you get editor autocomplete, no string typos, and embedded docs for each tag.

Import idiom

hhtml is designed for a dot import, used alongside the core package:

import (
    l "github.com/SamHennessy/hlive"
    . "github.com/SamHennessy/hlive/hhtml"
)

The dot import lets you write Div(...) instead of hhtml.Div(...). Behavior (events, state, render control) still comes from the l package — hhtml is markup only.

Tag builders

Every HTML5 tag has a builder with the signature:

func TagName(elements ...any) hlive.Adder

Capitalized tag name → function: Html, Head, Body, Title, Meta, Link, Div, Span, P, H1–H6, A, Nav, Header, Footer, Aside, Main, Section, Article, Ul/Ol/Li, Form, Input, Button, Label, Select/Option, Textarea, Table/Thead/Tbody/Tr/Td/Th, Img, Script, Style, and ~100 more.

Div(Class("card"),
    H1("Hello"),
    P("Welcome to ", A(Href("/docs"), "the docs"), "."),
)

A builder returns the hlive.Adder interface (written l.Adder with the conventional l alias) — the same type l.T/l.C return — so hhtml tags drop straight into page.DOM().Body().Add(...) and mix freely with raw l.T/l.C calls.

Attribute functions

Every attribute has a function with the signature:

func AttrName(value string) *hlive.Attribute

e.g. Class, Id, Href, Src, Type, Value, Name, Placeholder, Rel, Charset, Content, For. Pass them as elements:

Input(Type("text"), Name("email"), Placeholder("you@example.com"), Id("email"))
Link(Rel("stylesheet"), Href("/assets/main.css"))

Collision rule — the `Attr` suffix

When a tag and an attribute share a name, the tag keeps the clean name and the attribute gets an Attr suffix:

Clean name (tag)	Attribute function
`Title(...)` → `<title>` element	`TitleAttr("...")` → `title="..."`
`Style(...)` → `<style>` element	`StyleAttr("...")` → `style="..."`
`Form(...)` → `<form>` element	`FormAttr("...")` → `form="..."`

Head(
    Meta(Charset("UTF-8")),
    Title("My App"),                         // the <title> element
    Link(Rel("stylesheet"), Href("/app.css")),
)

Span(TitleAttr("tooltip text"), "hover me")  // the title attribute

Show full SKILL.md (172 more words)Show less

Behavior stays on the core `l` package

hhtml does not export On or state helpers. Attach events and state with the core package. tagBuilder detects an event binding in the elements and automatically produces a Component (l.C) instead of a static Tag (l.T):

count := l.Box(0)

Button(
    Class("btn"),
    Id("counter"),
    l.On("click", func(_ context.Context, _ l.Event) {
        count.Lock(func(v int) int { return v + 1 })
    }),
    "Clicks: ", count,            // an l.Box renders its value
) // → becomes a Component because it contains an l.On binding

Use l.OnOnce for one-shot bindings. See the hlive-core skill for the event model, l.Box/l.NewLockBox state, and l.Render/l.RenderComponent.

Classes: setting vs toggling

Class("a b") (hhtml) just sets the class attribute string. To toggle classes on/off reactively, use the core class types:

Div(
    l.ClassBool{"active": isActive, "open": isOpen}, // toggle on/off
    l.Class("base ordered"),                         // ordered, additive
)
// remove a class with the l.ClassOff string type
btn.Add(l.ClassOff("active"))

Mixing with raw builders

hhtml and l.T/l.C interoperate (same hlive.Adder). Reach for raw l.T only when the tag name is dynamic, or for a one-off where you haven't dot-imported hhtml:

Div(Class("box"),
    l.T("custom-element", l.Attrs{"data-x": "1"}), // dynamic / non-standard tag
    P("standard tag via hhtml"),
)

Generated code — do not edit

hhtml/tags.go and hhtml/attrs.go are generated (hhtml/cmd/tags and hhtml/cmd/attrs) and carry a DO NOT EDIT header. To add/change tags or attributes, change the generators and regenerate — never hand-edit the output.

Reference

hhtml/tags.go, hhtml/attrs.go, hhtml/builder.go (the l.C-vs-l.T auto-selection). Real usage: hlive_docs/page/demo/clicker.go (dot import + hhtml layout + l.On handlers). For structuring a whole app see the hlive-project skill.

Files

Just SKILL.md in plugin/skills/hlive-hhtml of SamHennessy/hlive.

Open the folder on GitHubat commit bc5f920

Compare with similar skills

Hlive Hhtml next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Hlive Hhtml compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Hlive Hhtml this skillSamHennessy/hlive	101	—	~1.3k	Automated safety check: Pass	MIT	3 mo ago
Summarize Activityalpinejs/alpine	32k	—	~1.6k	Automated safety check: Notes	MIT	3 days ago
Plugin Release CheckVoidenHQ/voiden	2k	—	~857	Automated safety check: Pass	Apache-2.0	today
Repo2skillzhangyanxs/repo2skill	246	—	~3.6k	Automated safety check: Pass	None	7 mo ago
Ccb DiagnoseSeemSeam/claude_codex_bridge	3.6k	—	~2.1k	Automated safety check: Pass	Custom licence	yesterday
Cuga GitHub Issuescuga-project/cuga-agent	896	—	~1.2k	Automated safety check: Pass	Custom licence	today

Similar skills

Summarize Activity
alpinejs/alpine
Summarize recent GitHub activity — discussions, PRs, issues, events, traffic — into an actionable report so you can stay on top of the project without reading everything.
32k GitHub stars~1.6k tokensUpdated 3 days ago
Backend & APIsAuto-check: notes
Plugin Release Check
VoidenHQ/voiden
A skill your agent uses whenever a plugin under plugins/<name is updated/pushed, or whenever asked to write a changelog/release for the app or a plugin.
2k GitHub stars~857 tokensUpdated today
Backend & APIsAuto-check passed
Repo2skill
zhangyanxs/repo2skill
Convert GitHub/GitLab/Gitee repositories into comprehensive OpenCode Skills using embedded LLM calls with multiple mirrors and rate limit handling
246 GitHub stars~3.6k tokensUpdated 7 mo ago
Backend & APIsAuto-check passed
Ccb Diagnose
SeemSeam/claude_codex_bridge
Diagnose a named CCB agent by combining authoritative runtime and job lineage with deep read-only pane inspection, apply bounded recovery when evidence supports it, verify the result, and request…
3.6k GitHub stars~2.1k tokensUpdated yesterday
Backend & APIsAuto-check passed
Cuga GitHub Issues
cuga-project/cuga-agent
Create GitHub issues for cuga-agent (bugs, features, epics, designs, and related work) against origin using gh, with epic → feature → issue hierarchy and GraphQL sub-issue linking.
896 GitHub stars~1.2k tokensUpdated today
Backend & APIsAuto-check passed
Jwx Guide V4
lestrrat-go/jwx
Guide for developing Go applications with github.com/lestrrat-go/jwx v4 — parse/sign JWTs, work with JWS/JWE/JWK, pick algorithms, and avoid the common footguns.
2.4k GitHub stars~5.7k tokensUpdated today
Backend & APIsAuto-check passed

Questions about Hlive Hhtml

What does Hlive Hhtml do?

Build HLive page markup with the hhtml package (github.com/SamHennessy/hlive/hhtml) — typed, autocompleting Go builders for HTML5 tags and attributes (Div, Button, A, Input, Class, Href, ...). Hlive Hhtml is an agent skill from SamHennessy/hlive.).

When should I use Hlive Hhtml?

Hlive Hhtml fits situations like: editing HLive page/component markup.

How do I install Hlive Hhtml in Claude Code?

Run `npx skills add SamHennessy/hlive --skill hlive-hhtml -a claude-code`. Or copy the skill folder (plugin/skills/hlive-hhtml in SamHennessy/hlive) into .claude/skills/hlive-hhtml in your project. Claude Code loads it when a task matches its description.

How do I install Hlive Hhtml in Codex?

Run `npx skills add SamHennessy/hlive --skill hlive-hhtml -a codex`. Or copy the skill folder (plugin/skills/hlive-hhtml in SamHennessy/hlive) into .agents/skills/hlive-hhtml in your project. Codex loads it when a task matches its description.

Can I use Hlive Hhtml in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add SamHennessy/hlive --skill hlive-hhtml -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hlive-hhtml, .gemini/skills/hlive-hhtml, .github/skills/hlive-hhtml and .opencode/skills/hlive-hhtml in your project.

What does Hlive Hhtml need to run?

SKILL.md names no scripts, command-line tools or credentials: Hlive Hhtml is instructions for the agent only.

Does Hlive Hhtml access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Hlive Hhtml safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Hlive Hhtml use?

Hlive Hhtml is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Hlive Hhtml use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Hlive Hhtml?

Skills that share tags, products or a category with Hlive Hhtml: Summarize Activity (alpinejs/alpine, 32k stars), Plugin Release Check (VoidenHQ/voiden, 2k stars), Repo2skill (zhangyanxs/repo2skill, 246 stars) and Ccb Diagnose (SeemSeam/claude_codex_bridge, 3.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Hlive Hhtml?

SamHennessy (a GitHub user) maintains it in SamHennessy/hlive, which has 101 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on July 2, 2026.

Source: SamHennessy/hlive on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Hlive Hhtml

Install Hlive Hhtml

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Building markup with hhtml

Import idiom

Tag builders

Attribute functions

Collision rule — the `Attr` suffix

Behavior stays on the core `l` package

Classes: setting vs toggling

Mixing with raw builders

Generated code — do not edit

Reference

Files

Compare with similar skills

Similar skills

Summarize Activity

Plugin Release Check

Repo2skill

Ccb Diagnose

Cuga GitHub Issues

Jwx Guide V4

More from SamHennessy/hlive

Hlive Core

Hlive Project

Hlive Testing

Hlivekit

Questions about Hlive Hhtml

Install Hlive Hhtml

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Building markup with hhtml

Import idiom

Tag builders

Attribute functions

Collision rule — the Attr suffix

Behavior stays on the core l package

Classes: setting vs toggling

Mixing with raw builders

Generated code — do not edit

Reference

Files

Compare with similar skills

Similar skills

More from SamHennessy/hlive

Related

Questions about Hlive Hhtml

Collision rule — the `Attr` suffix

Behavior stays on the core `l` package