theme-builder

theme-builder is a skill for Claude Code from seite-sh/seite. It costs 49 tokens per session (3,227 once invoked), scanned A, original, MIT.

An interactive workflow for creating or customizing the base theme of a static website. It considers the site's purpose, audience, content, and visual direction before producing the template.

In plain words
What is it for?
Use it to create a site's main template with search, pagination, accessibility, SEO, and language-support requirements.
Why use it?
It helps avoid choosing a layout and styling approach before understanding what the site needs.

Skill for Claude Code

Written for Claude Code: installed under .claude/.

Good fit Use it to create a site's main template with search, pagination, accessibility, SEO, and language-support requirements.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/seite-sh/seite/theme-builder
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add seite-sh/seite --skill theme-builder
Clone the repo
git clone --depth 1 https://github.com/seite-sh/seite

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for theme-builder

README.md
[![agentmods](https://agentmods.dev/badge/skills/seite-sh/seite/theme-builder.svg)](https://agentmods.dev/skills/seite-sh/seite/theme-builder)
Your own site
<a href="https://agentmods.dev/skills/seite-sh/seite/theme-builder"><img src="https://agentmods.dev/badge/skills/seite-sh/seite/theme-builder.svg" alt="Measured on agentmods" height="20"></a>
Per session 49 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,227 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00049 $0.03227
Opus 5 $0.00024 $0.01614
Sonnet 5 $0.00010 $0.00645
Haiku 4.5 $0.00005 $0.00323

Measured 4d ago against content hash e1e0395947b4, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-07, from the pricing page.

Security

Grade A, and why

theme-builder scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

seite-sh/.claude/skills/theme-builder/SKILL.md · 213 lines

How it starts

The opening of the file, as written. The whole thing — 213 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Theme Builder

You are a web designer helping the user create or customize their seite static site theme. Your job is to understand what they're building and who it's for before writing any CSS. The output is templates/base.html — a complete, self-contained Tera template — but most of your value is in the conversation that shapes the design.

Before you start

  1. Read seite.toml to understand the site (title, description, collections, language, deploy target).
  2. Check if templates/base.html already exists. If it does, read it — you are improving, not starting over.
  3. Run seite theme list to see available bundled and installed themes.
  4. Check content/ to understand what collections have content — a docs-heavy site needs different layout from a blog.

Phase 1: Understand the Vision

Do not ask all of these at once. Have a conversation. Start with the first one or two, then follow up based on what you learn. Skip anything you can already infer from the site config or existing content.

Purpose and audience

  • What kind of site is this? Personal blog, company site, developer docs, portfolio, SaaS landing page, newsletter, open-source project, e-commerce storefront, agency site, nonprofit? The site type shapes everything: layout, information hierarchy, tone, and which collections matter most.
  • Who is the audience? Not a demographic — a situation. "Developers evaluating our API." "Design leads looking for inspiration." "Small business owners who don't know what a static site is." This affects density, typography, and how much personality is appropriate.

Visual direction

  • Mood / personality — What feeling should the site convey? (e.g., professional, playful, editorial, technical, bold, calm, luxurious, minimal)
  • Reference points — Any websites, brands, or design styles they admire? (e.g., "like Stripe's docs", "newspaper feel", "brutalist", "Apple-clean"). If they can share URLs or screenshots, even better — read them to understand layout, color, spacing, and typography choices.
  • Visual examples — If the user provides screenshots, mockups, or URLs of designs they like, study them carefully. Note: color palette (primary, secondary, background, text), typography (serif/sans/mono, weight, size scale), layout structure (columns, max-width, spacing), border treatment (rounded, sharp, none), shadow style, and overall density. Use these observations to drive the design — they're worth more than verbal descriptions.

Read the full file on GitHub · 213 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 213 lines · 49 tokens per session scan A e1e0395947b4

Subscribe to this mod's changes

theme-builder is a skill published in the GitHub repository seite-sh/seite (20 stars, last pushed 2d ago), licensed MIT. It adds 49 tokens to every session and 3,227 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

ui-polish

Four quality gate checklists for frontend: baseline visual, accessibility, metadata/SEO, and motion performance. Post-implementation quality gates. Trigger: When reviewing UI changes, before merging frontend PRs, during sdd-verify.

JNZader/repoforge · 50 tokens

frontend-design

Production-grade UI/UX guidance — not generic AI slop. Triggers on design, UI, frontend, component, styling, layout, make it look good.

AyushParkara/syntra · 36 tokens

ui-ux-pro-max

Guía integral de UI/UX para web y mobile. Sistemas de color, tipografía pareada, jerarquía visual, espaciado 8-pt, estados de interacción, dark mode, accesibilidad de contraste, y patrones por tipo de producto (landing, dashboard, e-commerce, SaaS, app móvil). Cargá esta skill al diseñar o implementar interfaz visible.

contactandrewchl-wq/turtle-mcp · 85 tokens

accessibility-wcag

Accesibilidad WCAG 2.2 nivel AA aplicada: semántica HTML, ARIA cuando hace falta, navegación por teclado, foco visible, contraste, textos alternativos, formularios accesibles. Cargá al crear o auditar UI.

contactandrewchl-wq/turtle-mcp · 58 tokens

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…

ronmkr/PromptBook · 77 tokens

claude-design

Design one-off HTML artifacts (landing, deck, prototype).

NousResearch/hermes-agent · 16 tokens