with one click
brand
// DraftForge brand/theming review. Flags raw <button> over PrimaryButton/SecondaryButton, hardcoded violet/slate over brand tokens, inline styles, missing UserAvatar/EntityBreadcrumb.
// DraftForge brand/theming review. Flags raw <button> over PrimaryButton/SecondaryButton, hardcoded violet/slate over brand tokens, inline styles, missing UserAvatar/EntityBreadcrumb.
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | brand |
| description | DraftForge brand/theming review. Flags raw <button> over PrimaryButton/SecondaryButton, hardcoded violet/slate over brand tokens, inline styles, missing UserAvatar/EntityBreadcrumb. |
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.
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.docs/theming-guide/ai/references/ โ AI-targeted review references (hidden from MkDocs nav, mirrored into the canonical guide via pymdownx.snippets).frontend/app/app.css โ token SSOT (CSS variables for palette, oklch values, gradients).frontend/app/components/ui/buttons/styles.ts โ exported brand style constants (brandGradient, brandSecondary, brandErrorBg, brandSuccessBg, brandBg, button3DBase, etc.).frontend/app/components/ui/buttons/README.md โ folder convention (root for generic buttons, icons/ for icon-only, <domain>/ for domain-specific).Activate this skill whenever:
frontend/app/components/, frontend/app/routes/, frontend/app/features/, or frontend/app/app.css./review pass runs and the diff includes .tsx/.ts/.css files.aesthetic, ui-styling, frontend-dev-guidelines) โ those skills delegate to this one for brand specifics.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.
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.
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.
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.
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>
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.vite.config.ts, tailwind.config.js).All of the below live in docs/theming-guide/ai/references/ (hidden from the MkDocs nav, included into THEMING-GUIDE.md via pymdownx.snippets):
<button> โ <PrimaryButton> / <SecondaryButton> / <ConfirmButton> / <EditButton> table; <img> โ <UserAvatar>; manual breadcrumbs โ <EntityBreadcrumb>; structural <Button> exceptions.style={{}}, raw violet/slate hex, bg-slate-* instead of bg-base-*, hardcoded gradients, missing cn(), space-x-*, w-N h-N.rg recipes for each anti-pattern.block / warn / nit definitions and output format.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.
docs/THEMING-GUIDE.mddocs/theming-guide/ai/index.md.claude/commands/brand-update.md.claude/skills/aesthetic/SKILL.md, .claude/skills/ui-styling/SKILL.md, .claude/skills/frontend-development/SKILL.md