churin1116churin1116/html-chameleon/CLAUDE.md

html-chameleon

CLAUDE.md2 starsChanged 39 days agoMITView on GitHub

OSS theme contract for HTML artifacts (23 CSS variables + utility classes), distributed via GitHub Pages, consumed by a Skill (authoring) and a Chrome extension (viewing). Full interactive spec: docs/design.html. The extension activates on any one of: If you add / rename / remove a signal, update all of these files in the same commit: extension/content.js, extension/popup.js, extension/README.md, skill/SKILL.md, skill/prompts/generate.md, skill/prompts/convert.md. - No hex / rgb literals in code or markup. Allowed exceptions: - [data-theme="…"] blocks inside theme/v1/theme.css (defining a…

Commits and pushes

In this repositoryOne other file it gives its agents.
- chameleonSkill

The file

We split this CLAUDE.md into the rules it gives an agent

2 rules. About 0 are common, 1 is distinctive, and 1 is very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Very specific:
If you add / rename / remove a signal, update all of these files in the same commit: extension/content.js, extension/popup.js, …
line 25
Distinctive:
Don't put fixed top-right UI in examples, demos, or Skill-generated artifacts — it will collide.
line 37

≈ “Common” is an estimate: at least 1 in 5 of the 26,980 CLAUDE.md files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

CLAUDE.md

Chameleon — project notes

Architecture — three components, one contract

Path	Role
`theme/v1/`	The contract. `/v1/` paths are frozen forever; breaking changes bump to `/v2/`.
`skill/`	Claude Code Skill (`generate` / `convert` modes). Symlinked from `~/.claude/skills/chameleon` — edits propagate instantly.
`extension/`	Chrome MV3. Detects Chameleon and injects a floating theme palette into the top-right of the page.
`examples/`	Minimal demos consuming the contract via the hosted CSS.
`docs/design.html`	Interactive spec / playground.

The 3 detection signals (must stay coherent)

The extension activates on any one of:

<meta name="chameleon" content="v1"> — emitted by the Skill in both modes
<link rel="stylesheet" href="*html-chameleon*"> — implicit when consumers use the hosted CSS
<html data-chameleon="v1"> — set by theme.js at runtime

If you add / rename / remove a signal, update all of these files in the same commit: extension/content.js, extension/popup.js, extension/README.md, skill/SKILL.md, skill/prompts/generate.md, skill/prompts/convert.md.

Hard rules

No hex / rgb literals in code or markup. Allowed exceptions:
- [data-theme="…"] blocks inside theme/v1/theme.css (defining a preset)
- PRESETS array in extension/content.js and equivalent inline styles in extension/popup.html (swatch gradients must show fixed preset colors, independent of the page's current theme)
Top-right of detected pages belongs to the extension's floating palette. Don't put fixed top-right UI in examples, demos, or Skill-generated artifacts — it will collide. Install CTAs go in the page flow.
theme.js loads in <head> WITHOUT defer — synchronous eval prevents FOUC. The Skill prompts enforce this; don't "optimize" it.
skill/SKILL.md frontmatter name: chameleon is load-bearing — the global symlink (~/.claude/skills/chameleon) and slash invocation (/chameleon) both rely on it. Renaming requires re-creating the symlink.
.nojekyll at repo root must stay — bypasses Jekyll on GitHub Pages so binary assets and underscore-prefixed paths serve cleanly.

Local development

Action	How
Reload extension after editing `extension/*`	`chrome://extensions` → reload the Chameleon card
Push a `theme.css` edit to already-baked pages (via the extension)	commit `theme.css` → `node scripts/build-extension-theme.mjs` → reload the extension
Verify Pages change	`git push` to `main` → wait ~30–60s → curl the URL
Skill prompt edit	Save the file; propagates instantly via symlink
Regenerate icons	`python3` with Pillow on `extension/icons/source.png`; see commit `d548e95` for the rounded-corners script
Release the extension to the Web Store	commit everything → `node scripts/release-extension.mjs --bump minor` (`--dry-run` first; `--status` to follow review). Listing / Privacy tab changes are dashboard-only — see extension/README.md

Frozen Pages URLs (don't break)

https://churin1116.github.io/html-chameleon/
├── theme/v1/theme.css         ← consumers reference this in <link>
├── theme/v1/theme.js          ← consumers reference this in <script>
├── docs/design.html           ← spec + playground
├── examples/{basic,dashboard}.html
└── favicon.ico                ← rounded primary; *-square.* originals preserved

External users embed the theme/v1/* URLs in their HTML. Renaming or moving these breaks them silently — version up to /theme/v2/ instead.

Useful cross-references

User-facing docs: README.md
Extension specifics: extension/README.md
Generate-mode prompt: skill/prompts/generate.md
Convert-mode prompt: skill/prompts/convert.md
Open design questions: docs/design.html#open

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free