Run any Skill in Manus with one click

use-html-theme

Stars0

Forks0

UpdatedJuly 18, 2026 at 06:32

Whenever the user asks Claude to generate or restyle HTML — a page, artifact, mockup, dashboard, doc, status page, landing page, release-notes page, HTML email, or styled snippet — offer a small catalog of visual themes and apply the chosen one to all subsequent HTML in the session. v1 catalog: birchline (warm editorial), technical-minimal (docs-site neutral), high-contrast-dark (dashboard/terminal). Each theme is a self-contained folder of tokens, components, anti-patterns, and a worked example; only the chosen theme's files are read (progressive disclosure). The choice persists in session memory and can be saved per-project to `.claude/use-html-theme.local.md`. Overrides via natural language and `[theme: <name>]` / `[notheme]` inline flags; ask to preview or compare the themes to get a side-by-side catalog page. Do NOT activate for markdown, JSON, prose, or non-HTML code, or when the user said `[notheme]` or asked for no theme.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

smorinlabs

smorinlabs/smorinlabs-harness

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

25 files

SKILL.md

readonly

name	use-html-theme
description	Whenever the user asks Claude to generate or restyle HTML — a page, artifact, mockup, dashboard, doc, status page, landing page, release-notes page, HTML email, or styled snippet — offer a small catalog of visual themes and apply the chosen one to all subsequent HTML in the session. v1 catalog: birchline (warm editorial), technical-minimal (docs-site neutral), high-contrast-dark (dashboard/terminal). Each theme is a self-contained folder of tokens, components, anti-patterns, and a worked example; only the chosen theme's files are read (progressive disclosure). The choice persists in session memory and can be saved per-project to `.claude/use-html-theme.local.md`. Overrides via natural language and `[theme: <name>]` / `[notheme]` inline flags; ask to preview or compare the themes to get a side-by-side catalog page. Do NOT activate for markdown, JSON, prose, or non-HTML code, or when the user said `[notheme]` or asked for no theme.
allowed-tools	Read Write Edit Glob AskUserQuestion

When this skill applies

Activate whenever the next response will produce HTML. This is the load-bearing trigger — the catalog ask happens on the HTML request, not on any earlier "can we talk about a page" conversation.

✓ "Make me a status page in HTML" ✓ "Build an HTML landing page for my app" ✓ "Convert this changelog into a single-file HTML page" ✗ "Explain how flexbox works" (no HTML output) ✗ "Write me a README" (markdown, not HTML)

Process

Follow these steps in order. The state machine lives in references/activation-flow.md; read it once on first activation per session.

Detect HTML-generation intent. The user asked for HTML output.
Check session state. If a theme was already chosen in this conversation, apply it silently. Skip to step 6.
Check .claude/use-html-theme.local.md. If the file exists in the cwd and contains a valid theme name under the theme: frontmatter key, adopt it as the session choice and skip to step 6.
Ask the user. Use AskUserQuestion if available; otherwise print a numbered list in chat. Options:
- Birchline — warm editorial, ivory paper / coral accent / serif hero
- Technical minimal — neutral grays, blue accent, system sans, docs-site
- High-contrast dark — near-black surface, off-white text, single accent
- No theme — plain HTML for this session
Record choice in session memory. If a theme was picked, ask once: "Remember this theme for the project?" If yes, write .claude/use-html-theme.local.md (see references/persistence.md for the file format).
Load only the chosen theme's reference files — read references/themes/<name>/tokens.md always; read components.md if the task needs interactive or semantic elements; read illustrations.md only if an illustration would replace a paragraph of prose (Birchline only). Files from non-chosen themes are never read.
Generate the HTML using those tokens and components.

Overrides

Two mechanisms — see references/override-grammar.md for full grammar and precedence. Quick reference:

Mechanism	Example	Scope
Inline flag	`[theme: dark]`, `[notheme]`	This request only
Natural language	"switch to dark", "no theme this time", "clear the theme", "list the themes", "remember this theme"	Session or request

Precedence (highest first): inline flag → natural-language override → session memory → persistence file → ask. (Full ordering in references/override-grammar.md.)

Hard rules (cross-theme)

Tokens only. Every color, font, spacing, radius, and shadow comes from the chosen theme's tokens.md. Never invent values.
Color-scheme declared. Light themes emit <meta name="color-scheme" content="light"> in <head> AND color-scheme: light; in :root. The dark theme emits the dark equivalents. Without these, iOS Safari auto-darkens light pages.
Never mix tokens from two themes. If a request seems to want both, ask which theme to use.
Vocabulary not structure. This skill does not impose page rhythm, required sections, or document format. The user composes; the skill supplies the tokens.
Vanilla HTML/CSS only. Single self-contained .html with embedded <style>. No build step, no React, no Tailwind, no external CSS files. Google Fonts allowed.
Each theme has its own anti-patterns. Read the chosen theme's anti-patterns.md before finalizing.

Quick smoke test

Before delivering any themed artifact, ask:

Is the right color-scheme meta tag in <head>?
Are all colors sourced from CSS variables (not hex literals inline)?
Did I check the chosen theme's anti-patterns.md?

Gotchas

Don't carry the theme across sessions silently unless .claude/use-html-theme.local.md says so. Session memory is the default.
Don't apply a theme to non-HTML output. Markdown, JSON, prose — leave alone.
Don't extend the catalog ad-hoc. Themes are bundled; adding a fourth means a new folder under references/themes/ and a new entry in the picker. Don't invent a theme inline.

Composing with html-codesign

If the request is an interactive pick-and-export decision page (codesign), the sibling html-codesign skill owns the structure, stable IDs, and exports — this skill still supplies the visual theme (its themes/<name>/codesign.md overlay when present). Don't reimplement toggles or export bars here.

Previewing the catalog

If the user asks to preview, compare, or "see the options" for the themes (e.g. "show me the theme choices", "preview the themes", "what do they look like?"), render assets/preview-template.html — a single self-contained page showing all three themes side-by-side as sample cards — and share it. This is the catalog showcase; it does not change the session theme.

More from this repository

same repository

html-codesign

smorinlabs/smorinlabs-harness

Build an interactive "codesign" decision page as one self-contained HTML file: the reader toggles choices (pick-one or pick-any), adds notes, and exports the decision as Markdown and JSON with stable IDs (sec-01, ch-01-a) so picks can be quoted in chat — "keep ch-01-a, swap ch-02-b" yields a diffable v2. Use when the user wants to choose between options and capture the decision: design directions, plan A vs B, prioritization, async option pages for a stakeholder. Triggers: codesign, co-design, decision page, pick from these, which should we, compare the options, prioritize these. ALWAYS confirms before generating — lists the UNANSWERED questions found in recent context, each with its ID and a recommendation, then waits for a yes; the gate fires even on explicit invocation with an argument. Answered questions are out of scope; if context is mostly settled material it offers html-explain instead. Styled by use-html-theme. NOT for signing macOS/iOS binaries (Apple's codesign).

2026-07-270

html-explain

smorinlabs/smorinlabs-harness

Build a read-only "explainer" page as one self-contained HTML file — a rich explanation of settled material, where diagrams, annotated figures, charts, and small interactive widgets do work prose cannot. Authoring maps which parts are intrinsically hardest, budgets the page around them, then enriches ONLY where comprehension actually breaks. Use when an explanation should be a shareable PAGE not inline chat: "explain the design we just landed", "write up what the tests showed", "make an explainer for this spec", "deep dive on X as a page", explainer, walkthrough page, "explain this visually". Reads recent context and ALWAYS confirms the target before generating, even on explicit invocation with an argument. If context is mostly UNANSWERED questions it offers html-codesign instead (that answers questions; this explains — including a deep dive on one already resolved). Inline chat explanations are the `explain` skill; charts defer to dataviz when present. Pairs with use-html-theme.

2026-07-270

explain

smorinlabs/smorinlabs-harness

Explain anything in a concrete-anchored style — succinct, just-enough context, always grounded in a real example. Use when the user invokes /explain, or asks in their own words: "explain X", "give me a before and after", "add more context on <finding/step/option>", "show examples of the options so I can decide", "what does this change get us", "what's the bigger picture here", "give me step by step instructions". A bare "explain" right after an explanation means "not enough to act on yet": diagnose the gap (bigger picture, clearer language, or a sharper example) and usually rewrite, not append; an argument steers the focus; a dissimilar target restarts fresh. Modes (inferred from the target; explicit argument wins): default, options (example per option + recommendation), deeper, steps (operator instructions). Not for manual testing steps (manual-test-guide) or whole-session recaps.

2026-07-250

question-walkthrough

smorinlabs/smorinlabs-harness

Walk a pile of open questions or undecided to-dos one at a time via the AskUserQuestion tool — smartest question first, just-enough context per item, and after EVERY answer re-evaluate the remaining pile (drop what became moot, reorder what changed, surface implied follow-ups). Sources it handles — mine open questions from the current conversation, read them from a document the user points at (PRD, design doc, notes), take a list given inline, or pull undecided items from task systems (tasks, PROJECTS.md). Decisions are recorded back at their source. Use when the user says "go through these one by one", "walk me through the open questions", "there's a bunch of to-dos, help me decide", "triage these decisions with me", or a doc/plan is blocked on several unanswered questions. Not for scoping a project idea (project-refine), not for batch shareable decision pages (html-codesign — offer it if they'd rather review async), and context style defers to the explain skill's anatomy.

2026-07-230

repo-finder

smorinlabs/smorinlabs-harness

Resolve a repo name to its local path(s) and identity facts — origin, default branch, checkout-vs-worktree kind, branch, dirty state, build tooling — with one fast config-bounded command instead of exploring the filesystem. Fire whenever a repo is referenced by bare name and its location isn't already established in this session — BEFORE running ls/find/glob over home or code directories to locate a repo, BEFORE gh repo view/list to identify an origin or enumerate org repos, and for "where is <repo>", "what repos do I have", "which org owns X", "is this a worktree", "what's the exact name to clone". Covers local multi-root scan plus a gh REST-first remote org fallback from user config. Not for searching file contents inside an already-located repo, and not for cloning or mutating anything — it only finds and describes.

2026-07-210

pr-merge-flow

smorinlabs/smorinlabs-harness

Drive an open GitHub PR to merge by resolving every review thread. Waits (bounded) for AI reviewer bots (Claude, Codex, Greptile, Copilot) to comment, then triages each thread — validate the claim, verify by running code where possible, fix valid findings and push, refute invalid ones with a reasoned reply — every thread resolved either way. Cycles as fixes trigger new reviews, checks the PR title against repo conventions (CLAUDE.md, else Conventional Commits), then ends per mode: --auto (merge, no questions), --confirm (final gate; default), --ready (prep only); --deep adds an opt-in deep review. Quota-safe polling throughout (rate-limit preflight, 20s+ floor, bounded monitors). Use when the user says "merge this PR", "get PR #N merged", "resolve the PR comments", "address review feedback and merge", "close out this PR", "babysit the PR". Never closes a PR without merging; does not write the initial review (/code-review does) or fix failing CI (that is ci-audit).

2026-07-210

name	use-html-theme
description	Whenever the user asks Claude to generate or restyle HTML — a page, artifact, mockup, dashboard, doc, status page, landing page, release-notes page, HTML email, or styled snippet — offer a small catalog of visual themes and apply the chosen one to all subsequent HTML in the session. v1 catalog: birchline (warm editorial), technical-minimal (docs-site neutral), high-contrast-dark (dashboard/terminal). Each theme is a self-contained folder of tokens, components, anti-patterns, and a worked example; only the chosen theme's files are read (progressive disclosure). The choice persists in session memory and can be saved per-project to `.claude/use-html-theme.local.md`. Overrides via natural language and `[theme: <name>]` / `[notheme]` inline flags; ask to preview or compare the themes to get a side-by-side catalog page. Do NOT activate for markdown, JSON, prose, or non-HTML code, or when the user said `[notheme]` or asked for no theme.
allowed-tools	Read Write Edit Glob AskUserQuestion

When this skill applies

Activate whenever the next response will produce HTML. This is the load-bearing trigger — the catalog ask happens on the HTML request, not on any earlier "can we talk about a page" conversation.

Process

Follow these steps in order. The state machine lives in references/activation-flow.md; read it once on first activation per session.

Detect HTML-generation intent. The user asked for HTML output.
Check session state. If a theme was already chosen in this conversation, apply it silently. Skip to step 6.
Check .claude/use-html-theme.local.md. If the file exists in the cwd and contains a valid theme name under the theme: frontmatter key, adopt it as the session choice and skip to step 6.
Ask the user. Use AskUserQuestion if available; otherwise print a numbered list in chat. Options:
- Birchline — warm editorial, ivory paper / coral accent / serif hero
- Technical minimal — neutral grays, blue accent, system sans, docs-site
- High-contrast dark — near-black surface, off-white text, single accent
- No theme — plain HTML for this session
Record choice in session memory. If a theme was picked, ask once: "Remember this theme for the project?" If yes, write .claude/use-html-theme.local.md (see references/persistence.md for the file format).
Load only the chosen theme's reference files — read references/themes/<name>/tokens.md always; read components.md if the task needs interactive or semantic elements; read illustrations.md only if an illustration would replace a paragraph of prose (Birchline only). Files from non-chosen themes are never read.
Generate the HTML using those tokens and components.

Overrides

Two mechanisms — see references/override-grammar.md for full grammar and precedence. Quick reference:

Mechanism	Example	Scope
Inline flag	`[theme: dark]`, `[notheme]`	This request only
Natural language	"switch to dark", "no theme this time", "clear the theme", "list the themes", "remember this theme"	Session or request

Precedence (highest first): inline flag → natural-language override → session memory → persistence file → ask. (Full ordering in references/override-grammar.md.)

Hard rules (cross-theme)

Tokens only. Every color, font, spacing, radius, and shadow comes from the chosen theme's tokens.md. Never invent values.
Color-scheme declared. Light themes emit <meta name="color-scheme" content="light"> in <head> AND color-scheme: light; in :root. The dark theme emits the dark equivalents. Without these, iOS Safari auto-darkens light pages.
Never mix tokens from two themes. If a request seems to want both, ask which theme to use.
Vocabulary not structure. This skill does not impose page rhythm, required sections, or document format. The user composes; the skill supplies the tokens.
Vanilla HTML/CSS only. Single self-contained .html with embedded <style>. No build step, no React, no Tailwind, no external CSS files. Google Fonts allowed.
Each theme has its own anti-patterns. Read the chosen theme's anti-patterns.md before finalizing.

Quick smoke test

Before delivering any themed artifact, ask:

Is the right color-scheme meta tag in <head>?
Are all colors sourced from CSS variables (not hex literals inline)?
Did I check the chosen theme's anti-patterns.md?

Gotchas

Don't carry the theme across sessions silently unless .claude/use-html-theme.local.md says so. Session memory is the default.
Don't apply a theme to non-HTML output. Markdown, JSON, prose — leave alone.
Don't extend the catalog ad-hoc. Themes are bundled; adding a fourth means a new folder under references/themes/ and a new entry in the picker. Don't invent a theme inline.