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

Self-Contained HTML Pages

by SourceWeft in SourceWeft/SourceWeft

Builds and revises polished offline HTML reports, landing pages, infographics and interactive visualizations as a single file, with viewport QA before delivery.

Custom licenceAuto-check passedFrontend & Design

Install Self-Contained HTML Pages

skills CLI
$ npx skills add SourceWeft/SourceWeft --skill html -a claude-code

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

GitHub CLI
$ gh skill install SourceWeft/SourceWeft 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/SourceWeft/SourceWeft.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/builtin-skill-html .claude/skills/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
html
GitHub stars
158
Token cost
~817 tokens
SKILL.md length
389 words
Files
16 (incl. scripts, references)
Skills in repo
7
Repo updated
First seen
Licence
Custom licence

At a glance

Builds and revises polished offline HTML reports, landing pages, infographics and interactive visualizations as a single file, with viewport QA before delivery.

  • Works in 7 steps: Establish the audience, information… → Author a full UTF-8 document with an… → Confirm the provisioned… → …
  • Producing a polished report or landing page as one offline HTML file
  • Runs JavaScript and TypeScript scripts from its folder; calls node
  • Building a local interactive visualization with checked behavior

What it does

The output is one complete offline `index.html` with semantic markup, deliberate typography, responsive layout and browser-local interactions. The agent first settles the audience, information hierarchy and expected interactions and reads `references/page-design.md` and `references/quality.md`. It writes a UTF-8 document in normal flow, with no slide canvases or presentation rules; paginated presentations belong to the separate html-slides skill.

Tooling is checked up front: the provisioned `SOURCEWEFT_HTML_RUNTIME` and `SOURCEWEFT_HTML_FONTS` must exist, and a gap is reported instead of replaced with system fonts or CDN assets. `scripts/build.cjs` bundles assets and fonts into the file, then `scripts/qa.cjs` captures screenshots at 1440×900, 768×1024 and 390×844, and interactive pages supply an `interaction-checks.cjs` module written with Playwright. A visual review of the screenshots blocks delivery on major defects, missing content or failed interactions, and publishing needs the QA content digest.

When your agent uses it

  • Producing a polished report or landing page as one offline HTML file
  • Building a local interactive visualization with checked behavior
  • Revising an existing generated page and re-running responsive QA

Example prompts

  • “Create a one-page quarterly report as a self-contained HTML file with charts.”
  • “Build a landing page for our beta launch and check it at phone and tablet widths.”
  • “Revise the pricing infographic and rerun the QA screenshots.”

Requirements

  • SOURCEWEFT_HTML_RUNTIME and SOURCEWEFT_HTML_FONTS provisioned by the host environment
  • Node.js to run the build and QA scripts

Workflow steps

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

  1. Establish the audience, information hierarchy and expected interactions. Read references/page-design.md and references/quality.md.
  2. Author a full UTF-8 document with an early charset declaration and viewport meta. Use normal document flow. Keep source, images and local…
  3. Confirm the provisioned SOURCEWEFT_HTML_RUNTIME and SOURCEWEFT_HTML_FONTS exist. Missing tooling, fonts or required model configuration…
  4. Bundle the final document with node /skills/html/scripts/build.cjs /workspace/draft.html /workspace/index.html. Assets and selected fonts…
  5. Run node /skills/html/scripts/qa.cjs /workspace/index.html /workspace/qa. Default viewports are 1440×900, 768×1024 and 390×844; inspect…
  6. Run review_html_visuals against all generated viewport screenshots with task-specific criteria. Major visual defects, missing content…
  7. Publish with artifactType=html, the actual final source file and the QA expectedContentDigest. An optional preview image can come from…

What it can do on your machine

Read from SKILL.md and the folder at commit 8facc65. 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/ (JavaScript and TypeScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node

    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

Self-Contained HTML Pages loads about 817 tokens when it runs, and up to ~1.3k if it reads all its reference files. Until then it costs about 60 tokens; SKILL.md has 389 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~60
When it runs · the whole SKILL.md, loaded when a task matches
~817
With references · SKILL.md plus every file in references/, read only if the agent opens them
~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); the scripts in this folder are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 389 words (~817 tokens).

“Create a complete offline index.html with semantic HTML, intentional typography, responsive layout and browser-local interactions. Use the existing artifact workflow and skill selection; no new product entry or mode selector.”

— opening of SKILL.md by SourceWeft, Custom licence
name
html

Read the full SKILL.md on GitHub

Files

SKILL.md and 15 other files (scripts, references) in packages/builtin-skill-html of SourceWeft/SourceWeft.

  • SKILL.md
  • .tests/fixtures/landing-checks.cjs
  • .tests/fixtures/landing.html
  • .tests/fixtures/report.html
  • .tests/fixtures/visualization-checks.cjs
  • .tests/fixtures/visualization.html
  • .tests/skill.test.cjs
  • package.json
  • references/page-design.md
  • references/quality.md
  • scripts/build.cjs
  • scripts/qa.cjs
  • scripts/verify-pages.cjs
  • sourceweft.capability.json
  • src/index.ts
  • tsconfig.json

Open the folder on GitHubat commit 8facc65

Compare with similar skills

Self-Contained HTML Pages 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.

Self-Contained HTML Pages compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Self-Contained HTML Pages this skillSourceWeft/SourceWeft158—~817Automated safety check: PassCustom licence
Product Showcasejezweb/claude-skills1.1k—~5kAutomated safety check: PassMIT
Static Web Artifacts BuilderMathews-Tom/armory327—~1.8kAutomated safety check: PassApache-2.0
Visual ExplainerNeverSight/learn-skills.dev2161 repos~5.5kAutomated safety check: PassMIT
Web Designxiaopu-ai/web-design783—~3kAutomated safety check: PassMIT
Paper2htmlQuZhan51496/paper2anything468—~3.3kAutomated safety check: NotesApache-2.0

Similar skills

  • Product Showcase

    jezweb/claude-skills

    Generate a comprehensive marketing website for a web app — multi-page with real screenshots, animated GIF walkthroughs, feature deep-dives, and workflow demonstrations.

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

  • Static Web Artifacts Builder

    Mathews-Tom/armory

    Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics.

    327 GitHub stars~1.8k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Visual Explainer

    NeverSight/learn-skills.dev

    Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data.

    216 GitHub starsUsed in 1 repo~5.5k tokens
    Frontend & DesignAuto-check passed

  • Web Design

    xiaopu-ai/web-design

    Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…

    783 GitHub stars~3k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Paper2html

    QuZhan51496/paper2anything

    Convert an academic paper PDF into a publish-ready, self-contained single-page project homepage (a self-contained index.html) — the kind of paper landing page researchers host on GitHub Pages.

    468 GitHub stars~3.3k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check: notes

  • HTML

    plannotator/effective-html

    Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject.

    3.6k GitHub stars~1.6k tokensUpdated 23 days ago
    Frontend & DesignAuto-check passed

More from SourceWeft/SourceWeft

  • PowerPoint Deck Generator

    SourceWeft/SourceWeft

    Creates, edits and reads PowerPoint decks: new decks with PptxGenJS, existing PPTX or POTX files through XML edits, and text extraction with markitdown.

    158 GitHub stars~3.8k tokensUpdated 5 days ago
    Auto-check passed

  • HTML Slides with Reveal

    SourceWeft/SourceWeft

    Builds offline, single-file HTML presentations on Reveal with themes, layouts, animations and visual effects, then checks the result with an automated QA pass.

    158 GitHub stars~1.1k tokensUpdated 5 days ago
    Auto-check passed

  • Feynman

    SourceWeft/SourceWeft

    Use the Feynman technique to deeply learn a concept by explaining it simply, identifying gaps, filling them, and refining the explanation.

    158 GitHub stars~750 tokensUpdated 5 days ago
    Auto-check passed

  • Video Presentation Studio

    SourceWeft/SourceWeft

    Acts as a studio agent that drafts, validates, renders and publishes a trusted MP4 presentation for SourceWeft, and never reports success before publication.

    158 GitHub stars~2k tokensUpdated 5 days ago
    Auto-check passed

  • Image Generate

    SourceWeft/SourceWeft

    Generate persisted image artifacts from text prompts. An agent skill from SourceWeft/SourceWeft.

    158 GitHub stars~363 tokensUpdated 5 days ago
    Auto-check passed

  • Meeting Summary

    SourceWeft/SourceWeft

    A skill your agent uses when summarizing meeting notes, extracting decisions, and preparing action items.

    158 GitHub stars~197 tokensUpdated 5 days ago
    Auto-check passed

Works with

Categories

Questions about Self-Contained HTML Pages

What does Self-Contained HTML Pages do?

Builds and revises polished offline HTML reports, landing pages, infographics and interactive visualizations as a single file, with viewport QA before delivery. html` with semantic markup, deliberate typography, responsive layout and browser-local interactions.md`.

When should I use Self-Contained HTML Pages?

Self-Contained HTML Pages fits situations like: producing a polished report or landing page as one offline HTML file; building a local interactive visualization with checked behavior; revising an existing generated page and re-running responsive QA.

How do I install Self-Contained HTML Pages in Claude Code?

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

How do I install Self-Contained HTML Pages in Codex?

Run `npx skills add SourceWeft/SourceWeft --skill html -a codex`. Or copy the skill folder (packages/builtin-skill-html in SourceWeft/SourceWeft) into .agents/skills/html in your project. Codex loads it when a task matches its description.

Can I use Self-Contained HTML Pages 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 SourceWeft/SourceWeft --skill 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/html, .gemini/skills/html, .github/skills/html and .opencode/skills/html in your project.

What does Self-Contained HTML Pages need to run?

Going by SKILL.md and its folder, Self-Contained HTML Pages needs JavaScript and TypeScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: SOURCEWEFT_HTML_RUNTIME and SOURCEWEFT_HTML_FONTS provisioned by the host environment; Node.js to run the build and QA scripts.

Does Self-Contained HTML Pages 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 Self-Contained HTML Pages 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 Self-Contained HTML Pages use?

Self-Contained HTML Pages has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Self-Contained HTML Pages use?

About 817 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 460 tokens, read only when the agent opens those files.

What are the alternatives to Self-Contained HTML Pages?

Skills that share tags, products or a category with Self-Contained HTML Pages: Product Showcase (jezweb/claude-skills, 1.1k stars), Static Web Artifacts Builder (Mathews-Tom/armory, 327 stars), Visual Explainer (NeverSight/learn-skills.dev, 216 stars) and Web Design (xiaopu-ai/web-design, 783 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Self-Contained HTML Pages?

SourceWeft (a GitHub organization) maintains it in SourceWeft/SourceWeft, which has 158 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 2, 2026.

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