Agent skill

Openkb HTML Critic

A skill your agent uses to review a generated HTML deck or single-page artifact for visual quality and structural correctness.

Apache-2.0Auto-check passedDocuments & Office

Install Openkb HTML Critic

skills CLI

$ npx skills add VectifyAI/OpenKB --skill openkb-html-critic -a claude-code

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

GitHub CLI

$ gh skill install VectifyAI/OpenKB openkb-html-critic --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/VectifyAI/OpenKB.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/openkb-html-critic .claude/skills/openkb-html-critic && 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 "openkb-html-critic" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-html-critic into .claude/skills/openkb-html-critic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-html-critic", 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/VectifyAI/OpenKB/tree/main/skills/openkb-html-critic

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 VectifyAI/OpenKB --skill openkb-html-critic -a codex

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

GitHub CLI

$ gh skill install VectifyAI/OpenKB openkb-html-critic --agent codex

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

Manual copy

$ git clone --depth 1 https://github.com/VectifyAI/OpenKB.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/openkb-html-critic .agents/skills/openkb-html-critic && 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 "openkb-html-critic" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-html-critic into .agents/skills/openkb-html-critic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-html-critic", 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 VectifyAI/OpenKB --skill openkb-html-critic -a cursor

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

GitHub CLI

$ gh skill install VectifyAI/OpenKB openkb-html-critic --agent cursor

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

Manual copy

$ git clone --depth 1 https://github.com/VectifyAI/OpenKB.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/openkb-html-critic .cursor/skills/openkb-html-critic && 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 "openkb-html-critic" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-html-critic into .cursor/skills/openkb-html-critic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-html-critic", 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/VectifyAI/OpenKB.git --path skills/openkb-html-critic

--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 VectifyAI/OpenKB --skill openkb-html-critic -a gemini-cli

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

GitHub CLI

$ gh skill install VectifyAI/OpenKB openkb-html-critic --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/VectifyAI/OpenKB.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/openkb-html-critic .gemini/skills/openkb-html-critic && 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 "openkb-html-critic" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-html-critic into .gemini/skills/openkb-html-critic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-html-critic", 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 VectifyAI/OpenKB openkb-html-critic

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 VectifyAI/OpenKB --skill openkb-html-critic -a github-copilot

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

Manual copy

$ git clone --depth 1 https://github.com/VectifyAI/OpenKB.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/openkb-html-critic .github/skills/openkb-html-critic && 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 "openkb-html-critic" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-html-critic into .github/skills/openkb-html-critic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-html-critic", 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 VectifyAI/OpenKB --skill openkb-html-critic -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 VectifyAI/OpenKB openkb-html-critic --agent opencode

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

Manual copy

$ git clone --depth 1 https://github.com/VectifyAI/OpenKB.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/openkb-html-critic .opencode/skills/openkb-html-critic && 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 "openkb-html-critic" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-html-critic into .opencode/skills/openkb-html-critic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-html-critic", 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: openkb-html-critic
GitHub stars: 4.8k
Used in: 1 other repo
Token cost: ~1.4k tokens
SKILL.md length: 681 words
Files: 1
Skills in repo: 4
Repo updated: Jul 22, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

A skill your agent uses to review a generated HTML deck or single-page artifact for visual quality and structural correctness.

Works in 5 steps: CSS specificity — the #1 bug source → Navigation works → Slide structure invariants → …
Review a generated HTML deck
SKILL.md covers How this skill is invoked, Checklist (run in order,…, Working method and Hard rule: do NOT change the…
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Openkb HTML Critic is an agent skill from VectifyAI/OpenKB. Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every other. Also catches missing keyboard navigation, bullet-dump / wall-of-text failure modes, broken self-containment (external link/script/img). Patches the file in place; never changes the original…

Its SKILL.md is about 1.4k 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 Documents & Office, covering Slides and decks and Accessibility. The repository describes itself as: OpenKB: Open LLM Knowledge Base. The licence is Apache-2.0.

When your agent uses it

Review a generated HTML deck
Single-page artifact for visual quality and structural correctness

Example prompts

“/openkb-html-critic”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

CSS specificity — the #1 bug source
Navigation works
Slide structure invariants
Self-containment
Failure modes (touch only obvious cases)

What it can do on your machine

Read from SKILL.md and the folder at commit ff54396. 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 css).
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

Openkb HTML Critic loads about 1.4k tokens when it runs. Until then it costs about 153 tokens; SKILL.md has 681 words of instructions outside code blocks.

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

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 VectifyAI/OpenKB at commit ff54396, republished under its Apache-2.0 licence (© VectifyAI). 681 words, ~1,392 tokens.

Download SKILL.mdSave it as .claude/skills/openkb-html-critic/SKILL.md (or your agent's skills folder).

name: openkb-html-critic
description: Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every other. Also catches missing keyboard navigation, bullet-dump / wall-of-text failure modes, broken self-containment (external link/script/img). Patches the file in place; never changes the original content (slide text, numbers, named entities are the author's work, not yours).

HTML deck critic

You are a senior front-end designer reviewing an already-generated single-file HTML deck. You did NOT write the deck — someone else did, and your job is to patch it for visual correctness without rewriting the content.

How this skill is invoked

The user (CLI: openkb deck new --critique, chat: /critique <path>) points you at a single HTML file under output/. Read it, find issues from the checklist below, and write the corrected version back in one atomic write_file call (full file contents, never partial).

The path is in the user intent block above.

Checklist (run in order, report what you found)

1. CSS specificity — the #1 bug source

LLM-written deck CSS typically has:

css

.slide        { display: none; ... }
.slide.active { display: flex; }    /* or display: grid */

But then later defines slide-modifier classes:

css

.divider { display: flex; ... }    /* ← BUG */
.center  { display: flex; ... }    /* ← BUG */
.q       { display: flex; ... }    /* ← BUG */
.hero    { display: grid; ... }    /* ← BUG */

Because .divider and .slide have the same specificity but the modifier comes LATER in source order, .divider wins. Result: any slide with class="slide divider" always displays, regardless of the active class. Multiple slides stack on top of each other, the deck appears to "not paginate".

Fix: strip display: <foo>; from any single-class selector that matches a slide modifier (anything that appears in a <section class="slide X"> where X is the modifier name). The remaining declarations (flex-direction, gap, alignment, background) stay. After the patch, only .slide and .slide.active (or .active) control the display property.

Quick scan: list every <section class="slide ..."> and collect the extra class names. For each, find that class's CSS rule; if it has a display: declaration, that's the bug. Fix all of them in one pass.

There should be JS that:

Listens for ArrowLeft / ArrowRight (and PageUp / PageDown / Space if the deck supports them) and toggles .active.
Optionally reads URL hash (#3 or #slide-3) to deep-link.
Optionally listens for f / F (fullscreen) and p / P (print).

If keyboard nav is broken or missing, add the standard handler. Don't invent new keys — stick to the conventions above.

3. Slide structure invariants

≥ 1 cover-style slide (the first one).
≥ 1 closing-style slide (the last one).
Total count in a reasonable range (typically 6–20).
If the deck uses data-type attributes, no run of 3+ consecutive same-type slides (visual monotony failure).

4. Self-containment

No <link rel="stylesheet" href="http..."> — all CSS must be in inline <style> blocks.
No <script src="http..."> — all JS inline.
No <img src="http..."> — only data: URIs or inline <svg>. (Networked image references break offline use and air-gapped presentations.)

If any external reference is present, replace with a local equivalent if possible or remove the offending element.

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

5. Failure modes (touch only obvious cases)

These are the editorial discipline rules. Be conservative — if you're not sure a slide is "too dense", leave it alone. Only fix the unambiguous cases:

Bullet dump: any slide with more than 8 list items in a single list. Cut to the 5 strongest.
Wall of text: any slide body with more than 150 words. Trim or split into two slides.
Visual monotony: 3+ consecutive slides with the exact same layout class — break by inserting a divider or rebalancing.

Working method

Read the file at the path given in the user intent. Use the read_output_or_skill_file tool — it accepts a KB-relative path like output/decks/foo/index.html and returns the full text. (The wiki-scoped read_file tool only sees wiki/ — it cannot read output/. Use read_output_or_skill_file instead.)
Diagnose: walk each checklist item, accumulating a list of concrete patches.
Apply patches mentally: produce the corrected full HTML.
One atomic write: call write_file(path, corrected_html) once with the FULL corrected file. Don't write partial files.
Report: in your final message, say what you changed in 2-4 bullet points (e.g. "Stripped display:flex from .divider and .q — they were causing every slide to look the same"). Be specific and short.

Hard rule: do NOT change the content

The slide text, dollar figures, named products, quotes, attributions — all of that is the original author's work. You are a visual critic, not a content editor. Touch CSS, JS, and structural HTML; do NOT rewrite slide bodies.

If the content is bad in your view (generic, wrong, etc.), say so in your report but leave it. The user can decide whether to regenerate.

Begin.

Files

Just SKILL.md in skills/openkb-html-critic of VectifyAI/OpenKB.

Open the folder on GitHubat commit ff54396

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in VectifyAI/OpenKB, which our catalogue first saw on October 7, 2026.

yuezhiai/jonexReference/OpenKB/skills/openkb-html-critic

Compare with similar skills

Openkb HTML Critic 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.

Openkb HTML Critic compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Openkb HTML Critic this skillVectifyAI/OpenKB	4.8k	1 repos	~1.4k	Automated safety check: Pass	Apache-2.0	2 mo ago
Educational Presentationguia-matthieu/clawfu-skills	150	—	~4.3k	Automated safety check: Pass	MIT	8 days ago
UI DesignAnastasiyaW/codex-claude-code-config	154	—	~2.4k	Automated safety check: Pass	MIT	today
Powerpoint AccessibilityCommunity-Access/accessibility-agents	423	—	~1.6k	Automated safety check: Pass	MIT	15 days ago
Frontend Slideszarazhangrui/frontend-slides	30k	16 repos	~7k	Automated safety check: Pass	MIT	3 mo ago
Single-File HTML Slide Decksop7418/guizang-ppt-skill	27k	1 repos	~6.3k	Automated safety check: Pass	AGPL-3.0	2 mo ago

Similar skills

Educational Presentation
guia-matthieu/clawfu-skills
Transform Claude into an expert in evidence-based educational presentation design.
150 GitHub stars~4.3k tokensUpdated 8 days ago
Frontend & DesignAuto-check passed
UI Design
AnastasiyaW/codex-claude-code-config
Unify product UI design, frontend implementation, and verification.
154 GitHub stars~2.4k tokensUpdated today
Frontend & DesignAuto-check passed
Powerpoint Accessibility
Community-Access/accessibility-agents
Scan and fix .pptx files: slide titles, alt text and reading order.
423 GitHub stars~1.6k tokensUpdated 15 days ago
Documents & OfficeAuto-check passed
Frontend Slides
zarazhangrui/frontend-slides
Builds animated HTML slide decks that run in the browser with no dependencies, or converts PowerPoint files to the web, starting from visual style previews.
30k GitHub starsUsed in 16 repos~7k tokens
Documents & OfficeAuto-check passed
Single-File HTML Slide Decks
op7418/guizang-ppt-skill
Generates single-file HTML slide decks with horizontal paging, WebGL backgrounds and a presenter view, in an editorial-magazine style or a Swiss-style layout.
27k GitHub starsUsed in 1 repo~6.3k tokens
Documents & OfficeAuto-check passed
Build iPolloWork Templates
Devin-AXIS/iPolloWork
Builds a reusable iPolloWork template for Design, Slides or PPT, or HyperFrames Video through conversation, keeping a manifest, reusable variables and a validated package current.
6.8k GitHub stars~925 tokensUpdated yesterday
Documents & OfficeAuto-check passed

Questions about Openkb HTML Critic

What does Openkb HTML Critic do?

A skill your agent uses to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Openkb HTML Critic is an agent skill from VectifyAI/OpenKB. Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness.

When should I use Openkb HTML Critic?

Openkb HTML Critic fits situations like: review a generated HTML deck; single-page artifact for visual quality and structural correctness.

How do I install Openkb HTML Critic in Claude Code?

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

How do I install Openkb HTML Critic in Codex?

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

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

What does Openkb HTML Critic need to run?

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

Does Openkb HTML Critic 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 Openkb HTML Critic 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 Openkb HTML Critic use?

Openkb HTML Critic 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 Openkb HTML Critic use?

About 1.4k tokens (SKILL.md is roughly 5.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 Openkb HTML Critic?

Skills that share tags, products or a category with Openkb HTML Critic: Educational Presentation (guia-matthieu/clawfu-skills, 150 stars), UI Design (AnastasiyaW/codex-claude-code-config, 154 stars), Powerpoint Accessibility (Community-Access/accessibility-agents, 423 stars) and Frontend Slides (zarazhangrui/frontend-slides, 30k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Openkb HTML Critic?

VectifyAI (a GitHub organization) maintains it in VectifyAI/OpenKB, which has 4,767 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on July 22, 2026.

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

Install Openkb HTML Critic

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

HTML deck critic

How this skill is invoked

Checklist (run in order, report what you found)

1. CSS specificity — the #1 bug source

2. Navigation works

3. Slide structure invariants

4. Self-containment

5. Failure modes (touch only obvious cases)

Working method

Hard rule: do NOT change the content

Files

Used in 1 other repository

Compare with similar skills

Similar skills

More from VectifyAI/OpenKB

Related

Questions about Openkb HTML Critic