New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Codegen HTML

by initializ in initializ/forge

Scaffold and iterate on standalone Preact + HTM applications with zero build dependencies

Apache-2.0Auto-check passedDevelopment

Install Codegen HTML

skills CLI
$ npx skills add initializ/forge --skill codegen-html -a claude-code

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

GitHub CLI
$ gh skill install initializ/forge codegen-html --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/initializ/forge.git skills-src && mkdir -p .claude/skills && cp -r skills-src/forge-skills/local/embedded/codegen-html .claude/skills/codegen-html && 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/

Facts

Skill name
codegen-html
GitHub stars
223
Token cost
~1.5k tokens
SKILL.md length
549 words
Files
4 (incl. scripts)
Skills in repo
15
Repo updated
First seen
Licence
Apache-2.0

At a glance

Scaffold and iterate on standalone Preact + HTM applications with zero build dependencies

  • Works in 5 steps: Use class (not className) — HTM maps… → Use Tailwind CSS utility classes for all… → Do NOT create blocks or .css` files —… → …
  • Tasks that involve Project scaffolding
  • SKILL.md covers Quick Start, CRITICAL: Scaffold Conventions…, Code Style Guide and Tailwind CSS Reference, plus 6 more sections
  • Runs Shell scripts from its folder

What it does

Codegen HTML is an agent skill from initializ/forge. Scaffold and iterate on standalone Preact + HTM applications with zero build dependencies

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including scripts (for example `scripts/codegen-html-read.sh`, `scripts/codegen-html-scaffold.sh` and `scripts/codegen-html-write.sh`).

It sits in Development, covering Project scaffolding. It works with Preact and Tailwind CSS. The repository describes itself as: Forge is the open-source runtime for Anthropic's Agent Skills standard — built for the agent that runs next to a service, in your environment, on infrastructure you already… The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Project scaffolding

Example prompts

  • “/codegen-html”

Requirements

  • Node.js
  • A Bash shell

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Use class (not className) — HTM maps directly to DOM attributes
  2. Use Tailwind CSS utility classes for all styling (loaded via CDN in index.html)
  3. Do NOT create blocks or .css` files — use Tailwind classes instead
  4. Keep Preact/HTM imports unchanged — do not change CDN URLs or versions
  5. Use named exports for components: export function ComponentName() {}

What it can do on your machine

Read from SKILL.md and the folder at commit 3c608d8. 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

    Ships 3 files in scripts/ (Shell), which the agent can run.

    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

Codegen HTML loads about 1.5k tokens when it runs. Until then it costs about 26 tokens; SKILL.md has 549 words of instructions outside code blocks.

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

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); the scripts in this folder are not scanned.

SKILL.md

The full file from initializ/forge at commit 3c608d8, republished under its Apache-2.0 licence (© initializ). 549 words, ~1,504 tokens.

Download SKILL.mdSave it as .claude/skills/codegen-html/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
codegen-html
description
Scaffold and iterate on standalone Preact + HTM applications with zero build dependencies
icon
🌐
category
developer
tags
code-generation, frontend, html, preact, ui, zero-dependency

Codegen HTML Skill

Scaffold and iteratively build standalone HTML applications using Preact + HTM via CDN. Zero local dependencies — no Node.js, no npm, no build step. Just open the HTML file in a browser.

Quick Start

bash
# Scaffold a single-file app
./scripts/codegen-html-scaffold.sh '{"project_name": "my-app", "output_dir": "/tmp/my-app", "mode": "single-file"}'

# Scaffold a multi-file app
./scripts/codegen-html-scaffold.sh '{"project_name": "my-app", "output_dir": "/tmp/my-app", "mode": "multi-file"}'

# Read a file or list the project
./scripts/codegen-html-read.sh '{"project_dir": "/tmp/my-app", "file_path": "."}'

# Write/update a file
./scripts/codegen-html-write.sh '{"project_dir": "/tmp/my-app", "file_path": "index.html", "content": "..."}'

CRITICAL: Scaffold Conventions (DO NOT VIOLATE)

These rules prevent runtime errors:

  1. Use class (not className) — HTM maps directly to DOM attributes
  2. Use Tailwind CSS utility classes for all styling (loaded via CDN in index.html)
  3. Do NOT create <style> blocks or .css files — use Tailwind classes instead
  4. Keep Preact/HTM imports unchanged — do not change CDN URLs or versions
  5. Use named exports for components: export function ComponentName() {}

Code Style Guide

  • Use Preact with HTM (tagged template literals instead of JSX)
  • Use class (not className) — HTM maps directly to DOM attributes
  • Template literal syntax: html`<div class="app">${content}</div>`
  • Use useState, useEffect, useRef from Preact hooks
  • Components are plain functions returning html`...` template literals
  • All imports via CDN (esm.sh), pinned to specific versions
  • Use Tailwind CSS utility classes — the CDN is pre-loaded in index.html
  • Forge dark theme colors: bg-zinc-950 (bg), bg-zinc-900 (cards), border-zinc-800 (borders), text-zinc-200 (text), text-zinc-400 (muted), bg-indigo-500 (accent)

Tailwind CSS Reference

Tailwind is loaded via CDN. Use utility classes directly in class attributes:

  • Layout: flex, grid, gap-4, max-w-4xl, mx-auto, px-6, py-12
  • Colors: bg-zinc-950, bg-zinc-900, text-zinc-200, text-zinc-400, bg-indigo-500
  • Borders: border, border-zinc-800, rounded-lg, shadow-lg
  • Typography: text-3xl, font-bold, text-center, font-mono
  • Interactive: hover:bg-indigo-400, transition-colors, cursor-pointer

Do NOT write custom CSS when Tailwind utilities exist.

Safety Constraints

  • Output directory must be under $HOME or /tmp
  • Non-empty directories require force: true to overwrite
  • Path traversal (.., absolute paths) is rejected in read/write operations
  • No local tooling required — files can be opened directly in a browser

Iteration Workflow

  1. Scaffold the project with codegen_html_scaffold
  2. Read files to understand current state with codegen_html_read
  3. Write updated files with codegen_html_write
  4. Repeat steps 2-3 to iterate on the UI

After scaffolding, the user can simply open index.html in a browser. No install or build step needed.

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

When to Use

Use codegen-html when the user wants:

  • A quick UI prototype with no setup
  • A single HTML file they can share or open directly
  • Zero-dependency frontend (no Node.js required)
  • Simple interactive apps, dashboards, or demos

For full React apps with build tooling and npm packages, use codegen-react instead.

Tool: codegen_html_scaffold

Create a new Preact + HTM project with Forge-themed dark UI.

Input:

ParameterTypeRequiredDescription
project_namestringyesName for the project
output_dirstringyesAbsolute path for the project directory
titlestringnoPage title. Default: project_name
modestringnosingle-file (one index.html) or multi-file (separate JS/CSS). Default: single-file
forcebooleannoOverwrite non-empty directory. Default: false

Output: JSON object with status, output_dir, mode, and list of files created.

Response Format
json
{
  "status": "created",
  "output_dir": "/tmp/my-app",
  "project_name": "my-app",
  "mode": "single-file",
  "files": ["index.html"]
}

Tool: codegen_html_read

Read a file or list the project directory.

Input:

ParameterTypeRequiredDescription
project_dirstringyesAbsolute path to the project directory
file_pathstringyesRelative path to read, or "." for directory listing

Output: JSON object with path, content (or listing), size, and modified timestamp.

Response Format (file)
json
{
  "path": "index.html",
  "content": "<!DOCTYPE html>...",
  "size": 2048,
  "modified": "2025-01-15T10:30:00Z"
}
Response Format (directory listing)
json
{
  "path": ".",
  "type": "directory",
  "files": ["index.html", "app.js", "styles.css"]
}

Tool: codegen_html_write

Write or update a file in the project.

Input:

ParameterTypeRequiredDescription
project_dirstringyesAbsolute path to the project directory
file_pathstringyesRelative path to write
contentstringyesComplete file content

Output: JSON object with path, action (created/updated), and size.

Response Format
json
{
  "path": "index.html",
  "action": "updated",
  "size": 2150
}

© initializ, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (scripts) in forge-skills/local/embedded/codegen-html of initializ/forge.

  • SKILL.md
  • scripts/codegen-html-read.sh
  • scripts/codegen-html-scaffold.sh
  • scripts/codegen-html-write.sh

Open the folder on GitHubat commit 3c608d8

Compare with similar skills

Codegen HTML 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.

Codegen HTML compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Codegen HTML this skillinitializ/forge223—~1.5kAutomated safety check: PassApache-2.0
Rtdfany-tdf/any-tdf779—~1.1kAutomated safety check: PassMIT
Stdfany-tdf/any-tdf779—~1.1kAutomated safety check: PassMIT
Vtdfany-tdf/any-tdf779—~1.1kAutomated safety check: PassMIT
Add Componentindielayer/ui222—~293Automated safety check: PassMIT
SaaS Scaffolderalirezarezvani/claude-skills28k1 repos~2.6kAutomated safety check: PassMIT

Similar skills

  • Rtdf

    any-tdf/any-tdf

    Build, review, and troubleshoot RTDF React applications using exact component APIs, themes, icons, localization, and scaffolding.

    779 GitHub stars~1.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Stdf

    any-tdf/any-tdf

    Build, review, and troubleshoot STDF Svelte 5 applications using exact component APIs, themes, icons, localization, and scaffolding.

    779 GitHub stars~1.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Vtdf

    any-tdf/any-tdf

    Build, review, and troubleshoot VTDF Vue 3 applications using exact component APIs, themes, icons, localization, and scaffolding.

    779 GitHub stars~1.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Add Component

    indielayer/ui

    Add a new Vue component to @indielayer/ui with themes, tests, docs, and registry exports.

    222 GitHub stars~293 tokensUpdated 4 days ago
    DevelopmentAuto-check passed

  • SaaS Scaffolder

    alirezarezvani/claude-skills

    Generates complete, production-ready SaaS project boilerplate including authentication, database schemas, billing integration, API routes, and a working dashboard using Next.js 14+ App Router…

    28k GitHub starsUsed in 1 repo~2.6k tokens
    DatabasesAuto-check passed

  • Bug Finder for daisyUI

    saadeghi/daisyui

    Investigates suspected bugs in the daisyUI monorepo through read-only analysis, then writes a decision-ready fix plan in tmp/bugs without changing any product code.

    43k GitHub stars~2.3k tokensUpdated 7 days ago
    DevelopmentAuto-check passed

More from initializ/forge

All 15 skills in this repo

  • Code Plan

    initializ/forge

    Turn a task description and repository into a structured implementation plan (files to create, files to modify, tests to add, risks).

    223 GitHub stars~1.9k tokensUpdated 6 days ago
    Auto-check passed

  • Code Review

    initializ/forge

    AI-powered code review for diffs and individual files using LLM analysis

    223 GitHub stars~3k tokensUpdated 6 days ago
    Auto-check passed

  • Code Agent

    initializ/forge

    General-purpose coding agent that reads, writes, and edits code, and searches codebases.

    223 GitHub stars~2.5k tokensUpdated 6 days ago
    Auto-check: warnings

  • Codegen React

    initializ/forge

    Scaffold and iterate on Vite + React applications. An agent skill from initializ/forge.

    223 GitHub stars~1.8k tokensUpdated 6 days ago
    Auto-check passed

  • K8s Cost Visibility

    initializ/forge

    Estimate Kubernetes infrastructure costs by querying cluster node, pod, PVC/PV, and LoadBalancer data, applying cloud pricing models, and producing cost attribution reports with storage and…

    223 GitHub stars~2.7k tokensUpdated 6 days ago
    Auto-check passed

  • K8s Pod Rightsizer

    initializ/forge

    Analyze Kubernetes workload metrics and produce policy-constrained CPU/memory rightsizing recommendations with optional patch generation and rollback-safe apply.

    223 GitHub stars~4.3k tokensUpdated 6 days ago
    Auto-check passed

Works with

Categories

Questions about Codegen HTML

What does Codegen HTML do?

Scaffold and iterate on standalone Preact + HTM applications with zero build dependencies. Codegen HTML is an agent skill from initializ/forge.

When should I use Codegen HTML?

Codegen HTML fits situations like: tasks that involve Project scaffolding.

How do I install Codegen HTML in Claude Code?

Run `npx skills add initializ/forge --skill codegen-html -a claude-code`. Or copy the skill folder (forge-skills/local/embedded/codegen-html in initializ/forge) into .claude/skills/codegen-html in your project. Claude Code loads it when a task matches its description.

How do I install Codegen HTML in Codex?

Run `npx skills add initializ/forge --skill codegen-html -a codex`. Or copy the skill folder (forge-skills/local/embedded/codegen-html in initializ/forge) into .agents/skills/codegen-html in your project. Codex loads it when a task matches its description.

Can I use Codegen HTML 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 initializ/forge --skill codegen-html -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/codegen-html, .gemini/skills/codegen-html, .github/skills/codegen-html and .opencode/skills/codegen-html in your project.

What does Codegen HTML need to run?

Going by SKILL.md and its folder, Codegen HTML needs a shell for the scripts in its folder. Our summary lists: Node.js; A Bash shell.

Does Codegen HTML 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 Codegen HTML 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Codegen HTML use?

Codegen HTML is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Codegen HTML use?

About 1.5k tokens (SKILL.md is roughly 6k 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 Codegen HTML?

Skills that share tags, products or a category with Codegen HTML: Rtdf (any-tdf/any-tdf, 779 stars), Stdf (any-tdf/any-tdf, 779 stars), Vtdf (any-tdf/any-tdf, 779 stars) and Add Component (indielayer/ui, 222 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Codegen HTML?

initializ (a GitHub organization) maintains it in initializ/forge, which has 223 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on October 1, 2026.

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