#433 Theme authoring guide and chatpane-theme agent skill

[Anonymous]

Originally created by: kristofferR

Goal

Make writing a Chatpane theme easy for people and for coding agents: a guide in the catalog folder, and an agent skill in the repo that can build, port, test and ship a theme end to end.

Learned from fMess's fmess-theme skill (https://github.com/toanbku/fmess/tree/0cc6ecf/.claude/skills/fmess-theme, MIT): one place holds everything the maintainer would otherwise explain again for every theme.

Guide: themes/README.md

• The header (/* Chatpane theme, name, author, five preview colours, optional mode) and the rules (2 MB, no @import, only data: URLs).
• The palette tokens (--chatpane-wash, --chatpane-page, …) for recolor themes.
• Submitting: a PR adding themes/<id>.css, its previews and an index.json entry (#426).
• Linked from the README and from "Add theme file…".

Agent skill: .claude/skills/chatpane-theme/

• SKILL.md: the workflow. What look, from where (a live web app the user is signed in to, or screenshots alone), for whom; a mapping table from the target's parts to Chatpane's hooks; build; test; ship to themes/ with a version bump; licensing and credit.
• hooks.md: Chatpane's hook reference (#424, [#425]), Messenger's CSS variables and DOM landmarks, and the selector rule "mark first, never a translated label alone".
• porting.md: turning an fMess theme into a Chatpane one: the hook rename map, and what to strip (rails, fake title bars and panels, controls that do nothing, brand logos and wordmarks, quick reactions, window buttons, infinite animations).
• testing.md: the debug build through tauri-mcp: apply a theme file live without saving it, dark mode without touching the user's setting, a non-English Facebook, states that must be undone (reply bar, viewer, menus), scroll fps, and always restoring the user's app. Uses the chat check (#436).
• screenshots.md: working from screenshots only; measuring a live web app only with the user's consent and without sending anything.
• House rules every theme must meet: light and dark unless mode says otherwise; nothing on screen that does nothing; no brand logos; no infinite animations; no shadows or filters on bubbles; whole-chat pictures on a ::before layer; :has() never left of a combinator or inside another :has(); Facebook's light/dark islands (tooltips, toasts) keep readable text.

Part of [#434].