Dragoon0x

Dragoon0x/canon

Command

Compose a page or component layout using CANON spatial and responsive rules.

Dragoon0x/canon

Command

Normalize the codebase to the CANON token system. Extract scattered values into design tokens for color, type, spacing, radius, shadow, z-index, motion. Replace ad-hoc values with references. Use when the codebase has drifted into magic numbers.

Dragoon0x/canon

Command

Performance pass using CANON performance rules. LCP, INP, CLS, bundle size.

Dragoon0x/canon

Command

Apply finishing moves to an interface that's 80% there. Tighten type, refine spacing, sharpen interactions, add the small details that separate good from designed. Use when the design works but feels rough.

Dragoon0x/canon

Command

Reduce visual noise. Remove decoration, tighten hierarchy, trust whitespace.

Dragoon0x/canon

Command

Explain a CANON rule or decision in plain language with before/after examples.

Dragoon0x/canon

Command

Typography pass on a page or component using CANON type rules.

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing or auditing accessibility, ARIA, semantic HTML, screen reader support, keyboard navigation, color contrast, motion preferences, or WCAG compliance. Trigger when the user mentions a11y, accessibility, ARIA, screen reader, WCAG, keyboard, focus, or asks to make something accessible.

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing, auditing, or refactoring accordion components, collapsible sections, disclosure widgets, FAQ sections, or expand/collapse patterns. Covers when accordions help versus hurt comprehension, single vs multi-expand behavior, icon conventions, keyboard behavior, semantic markup ( vs ARIA), animation, and…

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing, auditing, or refactoring avatars, profile images, user pictures, avatar stacks, initials fallbacks, or any user-identifying image. Covers sizing, shape (circle vs square), initials logic, fallback color assignment, alt text, placement conventions, stacked avatar overflow, and the "anonymous user"…

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing, auditing, or refactoring badges, pills, chips, tags, status indicators, count badges, notification dots, or any small piece of UI metadata. Covers when a badge is appropriate, sizing, color coding for status, count formatting, the "dot vs number" decision, accessibility for notifications, and the…

Dragoon0x/canon

Skill Claude CodeCodex

Use when defining or auditing a product's written voice — the consistent personality across all UI copy. Covers voice vs tone, voice attribute definition, do/don't tables, and how to keep AI-generated copy on-brand. Trigger when the user mentions brand voice, tone of voice, writing style guide, copy guidelines, or…

Dragoon0x/canon

Skill Claude CodeCodex

Use when auditing or reducing JavaScript and CSS bundle sizes, setting performance budgets, choosing lighter alternatives to heavy libraries, configuring tree shaking, code splitting, and lazy loading. Trigger when the user mentions bundle size, JavaScript size, tree shaking, code splitting, lazy loading, or…

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing, auditing, or refactoring buttons, CTAs, icon buttons, split buttons, or any clickable action affordance. Covers hierarchy, sizing, states, disabled-state handling, loading behavior, keyboard behavior, and button vs link distinction. Trigger when the user mentions button, CTA, action, click, submit…

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing, auditing, or refactoring card components, card grids, item tiles, product cards, or any bounded content container. Covers when a card is appropriate, internal layout, padding, shadows vs borders, interactive cards, hover states, image ratios, content hierarchy, and card grid spacing. Trigger when…

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing, auditing, or refactoring charts, graphs, data visualizations, dashboards, sparklines, or any visual representation of data. Covers chart-type selection, color, axes, labels, tooltips, accessibility, animation, and anti-patterns like 3D pies and dual-axis charts. Trigger when the user mentions…

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing or auditing for color vision deficiency — ensuring that color is never the only visual signal, checking charts and status indicators, picking colorblind-safe palettes, and testing against deuteranopia, protanopia, and tritanopia simulations. Trigger when the user mentions color blindness, color…

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing or auditing color, contrast, theming, or dark mode in any interface. Covers OKLCH color space, semantic tokens, tinted neutrals, WCAG contrast requirements, accessible color pairing, dark mode construction, and the specific color anti-patterns AI agents fall into. Trigger when the user mentions…

Dragoon0x/canon

Skill Claude CodeCodex

Use when planning content hierarchy, information density, content-first design, microcopy systems, or editorial patterns. Covers the content-before-design principle, content inventory, progressive disclosure, scannability, and content governance. Trigger when the user mentions content strategy, content hierarchy…

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing or auditing cursor behavior — matching cursor shape to affordance, custom cursors, drag cursors, resize cursors, and the hover+cursor pairing rule. Trigger when the user mentions cursor, pointer, mouse cursor, drag cursor, or resize handle.

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing, auditing, or implementing dark mode. Covers lightness inversion (not hue shift), elevation via lightness not shadow, surface stacking, contrast rechecking, and the prefers-color-scheme media query. Trigger when the user mentions dark mode, dark theme, night mode, theme toggle, or color scheme.

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing dashboards, metrics displays, KPI widgets, sparklines, progress indicators, or any data-dense UI that isn't a standard chart. Covers the big-number pattern, sparklines, progress bars, gauges, metric comparison, and dashboard composition. Trigger when the user mentions dashboard, KPI, metric…

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing or implementing density modes (compact, default, comfortable), adjusting spacing without changing font sizes, supporting power users who need denser UIs, or adapting layouts for data-heavy vs content-heavy contexts. Trigger when the user mentions density, compact mode, comfortable spacing, or…

Dragoon0x/canon

Skill Claude CodeCodex

Use when designing or auditing shadows, elevation, layering, z-index, borders, dividers, or any visual depth in an interface. Covers shadow construction, elevation systems, when to use shadows vs borders, and the most common depth anti-patterns. Trigger when the user mentions shadow, elevation, depth, layer, z-index…