theme-factory

theme-factory is a skill for Claude Code, Codex from CodeInfinity1/Stram. It costs 27 tokens per session (422 once invoked), scanned A, original, MIT.

A guide for creating or applying a consistent visual theme across an interface.

In plain words
What is it for?
Use it to define design tokens, typography, light or dark modes, component styles, and accessible visual rules.
Why use it?
It helps keep colors, text, spacing, borders, and component states consistent while checking readability and contrast.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to define design tokens, typography, light or dark modes, component styles, and accessible visual rules.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/codeinfinity1/stram/theme-factory
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 CodeInfinity1/Stram --skill theme-factory
Clone the repo
git clone --depth 1 https://github.com/CodeInfinity1/Stram

Made for: Claude Code, Codex.

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-factory

README.md
[![agentmods](https://agentmods.dev/badge/skills/codeinfinity1/stram/theme-factory/github.svg)](https://agentmods.dev/skills/codeinfinity1/stram/theme-factory)
Your own site
<a href="https://agentmods.dev/skills/codeinfinity1/stram/theme-factory"><img src="https://agentmods.dev/badge/skills/codeinfinity1/stram/theme-factory/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for theme-factory

Your own site · 80×15
<a href="https://agentmods.dev/skills/codeinfinity1/stram/theme-factory"><img src="https://agentmods.dev/badge/skills/codeinfinity1/stram/theme-factory.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 27 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 422 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.
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.00027 $0.00422
Opus 5.5 $0.00011 $0.00169
Sonnet 5.5 $0.00005 $0.00084
Haiku 4.5 $0.00003 $0.00042

Measured 1mo ago against content hash 6918db711381, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

theme-factory 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 1mo 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.

skills/creative-design/theme-factory/SKILL.md · 70 lines

What it actually says

Theme Factory

Purpose

Design coherent themes that fit a product and remain usable. The assistant should avoid one-note palettes and decorative excess.

When To Use

Use for color/theme systems, dark/light modes, design tokens, typography, component styling, and visual refreshes.

Inputs And Evidence

  • Existing CSS/tokens, brand constraints, screenshots, accessibility needs, and target mood.
  • Browser verification artifacts.

Tool Map

  • read_file
  • search_workspace
  • theme_pack_create
  • theme_pack_inspect
  • frontend-design
  • browser_live_observe
  • browser_live_screenshot
  • web-data-extraction

Workflow

  1. Inspect current token/style structure.
  2. Use theme_pack_create to define palette, typography, spacing, radius, component states, contrast checks, and generated CSS variables.
  3. Avoid dominant single-hue themes unless brand requires it.
  4. Use theme_pack_inspect before applying the theme in existing styling architecture.
  5. Verify contrast, text fit, and layout.
  6. Document the theme rules when useful.

Native Implementation Boundaries

  • Use project-owned CSS/code.
  • Do not import Anthropic theme-factory code.
  • Do not add styling libraries without approval.
  • Theme-pack artifacts are local specs and CSS sidecars; they are not applied to app code until separate edits are made.

Safety And Approval

  • Preserve brand/legal requirements.
  • Avoid low contrast or motion-heavy themes.
  • Keep accessibility in scope.

Verification

  • Browser screenshots prove theme application.
  • Check major states and viewports.
  • Inspect theme-pack artifacts and CSS sidecars before applying.
  • Report contrast or responsive gaps.

Failure Modes

  • Pretty palette with unreadable text.
  • Inconsistent component states.
  • Theme changes leaking into unrelated surfaces.

References

  • Shortlist item: theme-factory.
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. 1mo ago First seen · 70 lines · 27 tokens per session scan A 6918db711381

Subscribe to this mod's changes

theme-factory is a skill published in the GitHub repository CodeInfinity1/Stram (11 stars, last pushed 2mo ago), licensed MIT. It adds 27 tokens to every session and 422 once invoked, about $0.0001 per session on Opus 5.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

design-critique

Use this skill to audit an interface that already exists and say precisely why it looks generated, templated, or unfinished — a scored rubric across composition, typography, color, states, accessibility and copy, ending in a ranked fix list. Triggers: user says "review the design", "critique this UI", "why does this…

WrongStack/WrongStack · 110 tokens

motion-interaction

Add purposeful interaction and motion to HTML designs, including state transitions, feedback, navigation, disclosure, and reduced-motion behavior.

juspay/xyne-spaces · 28 tokens

von-restorff-effect

Apply the Von Restorff Effect — the element that differs from its neighbours is the one remembered. Use when a single action must dominate. For overall ordering rather than single-element emphasis, use visual-hierarchy.

Owl-Listener/designer-skills · 49 tokens

handoff-spec

Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use design-qa-checklist; for reusable library components use component-spec (design-systems).

Owl-Listener/designer-skills · 57 tokens

animation-principles

Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.

Owl-Listener/designer-skills · 59 tokens

dark-mode-design

Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use color-system.

Owl-Listener/designer-skills · 48 tokens