DraftForge Brand & Theming Review

DraftForge's visual identity is "Neon Cyber Esports" — a violet/indigo primary palette with cyan accents, dark-mode first, Dota-style draft UI. The full visual language is canonical in docs/THEMING-GUIDE.md. This skill is the review entry point that enforces it on every UI change.

Canonical Sources (priority order)

1. docs/THEMING-GUIDE.md — single source of truth. Palette, brand button system (PrimaryButton/SecondaryButton/ConfirmButton/EditButton), bg-base-* scale, status colors, gradient utilities, glow effects, mandatory <UserAvatar> / <EntityBreadcrumb> components, button policy. Read first.
2. docs/theming-guide/ai/references/ — AI-targeted review references (hidden from MkDocs nav, mirrored into the canonical guide via pymdownx.snippets).
3. frontend/app/app.css — token SSOT (CSS variables for palette, oklch values, gradients).
4. frontend/app/components/ui/buttons/styles.ts — exported brand style constants (brandGradient, brandSecondary, brandErrorBg, brandSuccessBg, brandBg, buttonLift, etc.).
5. frontend/app/components/ui/buttons/README.md — folder convention (root for generic buttons, icons/ for icon-only, <domain>/ for domain-specific).

When To Use

Activate this skill whenever:

• A diff touches frontend/app/components/, frontend/app/routes/, frontend/app/features/, or frontend/app/app.css.
• Writing or editing a React component, page, dialog, or button anywhere in the frontend.
• A /review pass runs and the diff includes .tsx/.ts/.css files.
• Working on UI-adjacent skills (aesthetic, ui-styling, frontend-dev-guidelines) — those skills delegate to this one for brand specifics.

How To Run a Review

1. Identify scope. Read theming-guide/ai/references/scope.md (path: docs/theming-guide/ai/references/scope.md). Confirm the diff lives in an in-scope tree. Out-of-scope diffs (build tooling, generated bindings, e2e selectors, backend Python) are skipped.

2. Walk the checklist. Read theming-guide/ai/references/review-checklist.md. Every item is a question; emit a finding for every "no". Each item links back to the section of THEMING-GUIDE.md that explains why.

3. Use the substitution tables. For raw HTML / hand-rolled markup violations, look up the replacement in theming-guide/ai/references/component-substitutions.md. For inline-style / hardcoded-color violations, look up the fix in theming-guide/ai/references/inline-styles.md.

4. Use grep to find more. Once one violation is found, run the matching rg recipe from theming-guide/ai/references/grep-recipes.md to surface every instance — fixes should be batched per anti-pattern, not one-by-one.

5. Grade severity. block / warn / nit per theming-guide/ai/references/severity-rubric.md. Any block halts the merge. Format every finding as:

   brand: <severity> · <file>:<line> — <one-line summary>
     why: <THEMING-GUIDE.md section or component contract>
     fix: <concrete code change>
   

What This Skill Does NOT Do

• Does not replace aesthetic (design principles) or ui-styling (generic shadcn/Tailwind setup) — those are for greenfield design work. This one enforces the brand on existing/new draftforge code.
• Does not enforce TypeScript, lint, or test rules — those have their own tooling.
• Does not review Django, Channels, or backend code — frontend only.
• Does not review build tooling (vite.config.ts, tailwind.config.js).

References (loaded on demand)

All of the below live in docs/theming-guide/ai/references/ (hidden from the MkDocs nav, included into THEMING-GUIDE.md via pymdownx.snippets):

• scope.md — in-scope source trees and special cases.
• component-substitutions.md — raw <button> → <PrimaryButton> / <SecondaryButton> / <ConfirmButton> / <EditButton> table; <img> → <UserAvatar>; manual breadcrumbs → <EntityBreadcrumb>; bare shadcn <Select> → <BrandSelect> family; structural <Button> exceptions.
• inline-styles.md — style={{}}, raw violet/slate hex, bg-slate-* instead of bg-base-*, hardcoded gradients, missing cn(), space-x-*, w-N h-N.
• review-checklist.md — single ordered checklist; the spine of a review pass.
• grep-recipes.md — copy-paste rg recipes for each anti-pattern.
• severity-rubric.md — block / warn / nit definitions and output format.
• scrollbars-dialogs.md — <ScrollArea> inside <DialogContent> contract: overflow-hidden clipping rule, why Radix Viewport's size-full needs a definite parent height, and the -mx-6 px-6 padding-cancel trick.

Updating This Skill

Use the /brand-update slash command (defined at .claude/commands/brand-update.md). It edits the docs references and this skill in lockstep, verifies backlinks, line counts, and snippet integrity. Do NOT hand-edit one side without the other — they will drift.

Backlinks

• Canonical brand guide: docs/THEMING-GUIDE.md
• AI hub: docs/theming-guide/ai/index.md
• Update command: .claude/commands/brand-update.md
• Sibling skills that delegate here: .claude/skills/aesthetic/SKILL.md, .claude/skills/ui-styling/SKILL.md, .claude/skills/frontend-development/SKILL.md