メニュー
DraftForge brand/theming review. Flags raw <button> over PrimaryButton/SecondaryButton, hardcoded violet/slate over brand tokens, inline styles, missing UserAvatar/EntityBreadcrumb.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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>; bare shadcn <Select> → <BrandSelect> family; 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.<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.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.mdStructured logging conventions for DraftForge backend (Django/Celery/Daphne) and frontend (React). This skill should be used when adding log statements, creating new modules, debugging with logs, or reviewing logging patterns. Covers structlog usage, system/subsystem taxonomy, required fields, log levels, and Grafana query patterns.
DraftForge test infrastructure for writing backend unit tests, Playwright E2E tests, and managing test data population. This skill should be used when writing new tests, adding test fixtures, creating populate functions for new features, adding Playwright E2E specs, using login/auth fixtures, creating test users/orgs/leagues/tournaments, or understanding the test data architecture. Covers backend Django tests via Docker, Playwright config (projects, workers, sharding), test auth endpoints that expose backend login to frontend, and feature-isolated test data patterns.
DraftForge PR lifecycle workflow. Use when the user runs /pr, opens or pushes a pull request, or asks to monitor CI checks and Copilot review on a branch. Creates the PR (or reuses an existing one), polls GitHub Actions and Copilot up to ~15 min, then analyses CI failures and Copilot comments and reports findings grouped by file and skill.
Django Redis caching with django-cacheops. This skill should be used when implementing caching, adding cache invalidation, optimizing API performance, modifying models that affect cached data, or debugging cache-related issues in the Django backend.
Python Invoke task automation for DTX website. This skill should be used when running repo commands, backend tests via Docker, database migrations, updating invoke tasks, Docker operations, or workflow automation. Supports dev/test/prod environments with run, exec, up, down commands. References docs/development/invoke-tasks.md for complete command reference.
Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.