Dragoon0x

A/B test design, experiment setup, variant design, and statistical analysis for designers.

Advanced accessibility patterns including ARIA, screen reader optimization, cognitive accessibility, and motor impairment design.

WCAG compliance deep dive, screen reader patterns, keyboard navigation, and inclusive design.

Accordion and collapsible content patterns, FAQ layouts, and progressive disclosure.

Designing AI-powered features, managing user expectations, and AI transparency.

Using analytics tools for design decisions, behavioral analysis, and data-informed design.

Analytics and reporting interface design including data visualization, report builder, and metric dashboards.

Android design conventions, Material Design patterns, and Google platform-specific design.

Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, screen reader experience, and motion safety.

Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.

Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.

Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter.

Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.

Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.

Compare the current design against quality baselines. Shows where the design ranks relative to typical AI output, typical professional output, and exceptional output.

Amplify safe, boring designs. Increase contrast, enlarge key elements, add motion, intensify color, and push the aesthetic direction further.

Bring engineering, design, research, marketing, and sales onto the same page and keep them there. Covers alignment levels, RACI clarity, and continuous maintenance. Use when teams have different understandings of what's being built, cross-team dependencies are causing problems, or alignment keeps breaking down.

Get buy-in and drive alignment when you have no direct power over the people you need to move. Covers stakeholder framing, pre-wiring decisions, and building credibility over time. Use when pushing for a direction without exec authority, navigating disagreements, or when a proposal keeps getting blocked.

Build a productive relationship with leadership by communicating effectively, managing expectations, and knowing when to push back. Use when navigating executive relationships, seeking alignment on direction, or when leadership requests conflict with team capacity.

Partner with design to create better products, not just prettier ones. Covers when to involve design, how to give useful feedback, and respecting the design process. Use when PM-design handoffs feel clunky, design feedback conversations are unproductive, or design is brought in too late.

Partner with engineering as a collaborator, not a ticket-writer. Covers communication norms, technical empathy, scope negotiation, and building mutual trust. Use when PM-engineering relationships feel transactional, technical decisions are made without product input, or scope conversations become adversarial.

Partner with marketing, sales, and customer success to bring products to market effectively. Covers launch coordination, sales enablement, and feedback loops. Use when launches aren't driving adoption, sales can't articulate the value prop, or customer feedback isn't reaching the product team.

Ship updates people actually want to read. Structures release notes, changelog entries, and product updates with what-changed, why-it-matters, and what-to-do-next. Use when writing changelogs or release announcements.

Write headlines, CTAs, and value props that move people to act. Audits existing copy for weak verbs, vague claims, and missing specificity. Use when writing landing pages, hero sections, email subject lines, or any surface where words need to do real work.

Auto-fix detectable accessibility issues.

Full accessibility audit. Focus, semantic HTML, ARIA, contrast, touch targets, motion safety.

Verify visual alignment across sections. Check consistent left edges, centered elements, grid alignment.

Add purposeful motion. Page load reveals, hover states, scroll entries.

Audit ARIA attributes. Ensure proper usage without over-specification.

Comprehensive design quality report with specific findings per axis, line references, severity ratings, and fix instructions.

Amplify safe designs. Larger headlines, stronger accent, more shadow, one animation.

Generate responsive breakpoint tokens: sm through 2xl.

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 product personality.

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 performance budget.

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 vision, CVD, deuteranopia, protanopia, accessibility color, or color-only signal.

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, information architecture, microcopy, or editorial design.

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.

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.

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, progress bar, gauge, sparkline, or data display.

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 information density.

Full accessibility audit using your design system's color tokens. Checks contrast, focus styles, semantic HTML, touch targets, and motion safety.

Check the current codebase against your .forge.json design system. Finds raw hex values that should be tokens, spacing off your scale, fonts not in your system, and missing token references.

Amplify the design within your system's range. Use stronger palette shades, higher type scale steps, and more dramatic shadows.

Find every color in the codebase that isn't in your palette or token system. Lists orphan colors with suggested replacements.

Replace all orphan colors with the nearest token from your system. Converts raw hex values to var(--token) references.

Check WCAG contrast ratios across your entire token system. Tests every text token against every surface token.

Generate a dark mode variant of your design system. Creates dark-mode token overrides that preserve contrast ratios from the light theme.

Audit visual density and whitespace balance. Checks that spacing from your system creates appropriate rhythm between sections.

Build taste through volume of output, deliberate failure, and speed. Taste cannot be developed by watching. It's sharpened by making, failing, and making again. Use when designing practice routines, breaking through creative blocks, or helping someone move from analysis to execution.

Use taste as a competitive moat and business advantage. In the AI and vibe-coding era, execution is commoditized. Taste is the defensible edge. Use when advising founders on product differentiation, building product culture, evaluating why some products win despite fewer features, or understanding taste as a strategic asset.

Navigate the gap between what you can see and what you can make. The Ira Glass gap. Use when a designer is frustrated by the distance between their taste and their output, when mentoring someone through a creative plateau, or when someone is considering quitting because their work doesn't match their vision.

Structured exposure habits for building taste through relentless, intentional consumption. Not passive scrolling. Active intake across design, architecture, film, music, food, and culture. Use when building a taste practice, advising on professional development, or diagnosing why someone's design range feels narrow.

Notice what's deliberately missing from a design. Restraint is a taste signal. Use when studying minimalist products, evaluating design maturity, or understanding the power of removal.

Reverse-engineer why a design decision was made. Move from observation to inference. Use when studying products you admire, learning from competitors, or building analytical design thinking.

Break a design system into its constituent decisions and evaluate each one. Use when auditing design systems, evaluating consistency, or understanding how a product maintains quality at scale.

Study how products evolve over time using archived versions. The decisions that survive redesigns are the taste decisions. Use when understanding what's essential vs. cosmetic in a design, or learning from product evolution.

Generate optimal Claude Code configuration for any project. Creates CLAUDE.md, settings.json, skills, hooks, agents, and commands tailored to your stack. Run /forge to start.

File-level accessibility audit with concrete line locations for every finding. Eight rules: img-missing-alt, button-without-label, link-without-text, input-without-label, positive-tabindex, click-handler-on-non-interactive, autofocus, low-contrast-token-pair. Use when the user wants to audit a11y, find accessibility regressions, or gate a PR on a11y. Run as `node ~/.claude/skills/dragoon/skills/accessibility/scripts/accessibility.js [path]`.

Run /brief, /plan-eng, and /plan-design in one shot to bootstrap a complete sprint plan. All three documents land in .dragoon/plans/ pre-filled with codebase facts. Use when the user wants to spin up a full plan quickly. Defaults to dry-run; pass --apply to write all three files. Run as `node ~/.claude/skills/dragoon/skills/autoplan/scripts/autoplan.js "<idea>"`.

Snapshot codebase metrics (file count, total lines, /critique scores) for trend tracking. Subcommands capture/list/compare/show. Snapshots stored as JSON in .dragoon/benchmarks/. Use to track design quality and codebase growth over time. Run as `node ~/.claude/skills/dragoon/skills/benchmark/scripts/benchmark.js <subcommand>`.

Generate a structured product brief markdown from a one-line idea, pre-filled with codebase facts (stack, type system, palette, components count) from dragoon.json. Use when the user is starting a new feature, project, or initiative and wants to think through it before coding. Output goes to .dragoon/plans/brief-{slug}-{date}.md. Defaults to dry-run preview; pass --apply to write. Run as `node ~/.claude/skills/dragoon/skills/brief/scripts/brief.js "<idea>"`.

Generate a curl-based canary watcher script for a deployed URL. Validates URL is http/https, status code is 100-599, interval is 5-86400 seconds. The generated script supports one-shot (default) and --watch (continuous loop) modes. Wire into cron or a CI scheduled job. Run as `node ~/.claude/skills/dragoon/skills/canary/scripts/canary.js <url>`.

Write a checklist of destructive commands the user wants to think twice about (rm -rf, force push, hard reset, db drop, etc.) to .dragoon/CAREFUL.md. dragoon does NOT block commands at runtime - this is a discipline tool, a list the agent reads before risky operations. Use to set explicit guardrails for an AI agent or new contributor. Run as `node ~/.claude/skills/dragoon/skills/careful/scripts/careful.js`.

Generate a color palette token file (CSS variables, tailwind config, or JS module) from the palette detected by /scan. Uses inferred role names (foreground, background, accent, danger, etc.) where possible, numeric fallback otherwise. Use when the user wants to formalize color tokens, extract a palette from existing code, or scaffold a color system. Defaults to dry-run preview; pass --apply to write. Run as `node ~/.claude/skills/dragoon/skills/color/scripts/color.js`.

Audit a brand's full identity (logo, typography, color, voice, visual language) for consistency, distinctiveness, and gap. Use when the user asks for a brand audit, identity review, brand health check, or wants to evaluate how a brand shows up across surfaces.

Plan a content calendar tied to product, brand, or marketing goals. Use when the user asks for a content plan, editorial calendar, content strategy, posting schedule, or wants to map content to themes and audiences over a period of time.

Write a sequence of emails for onboarding, nurture, sales, lifecycle, or launch. Use when the user asks for a drip campaign, email sequence, welcome series, onboarding emails, sales cadence, or any multi-email flow tied to a goal.

Design an a/b test or experiment including hypothesis, metrics, sample size, and analysis plan. Use whenever the user mentions a/b test, experiment, split test, multivariate test, or needs to design a test that produces a decision-quality result.

Audit a design or component for WCAG accessibility compliance. Use whenever the user mentions a11y, accessibility audit, WCAG check, contrast issues, keyboard navigation, screen reader support, focus order, or asks if a design is accessible.

Extract a brand voice guide from existing copy samples. Use whenever the user shares past copy and asks to define a voice, document a voice, create voice guidelines, or wants to make their existing voice teachable and repeatable.

Write a customer case study or success story that proves a claim with specific evidence. Use whenever the user mentions case study, customer story, success story, customer outcome, or wants to turn a customer's experience into proof for marketing or sales.

Analyze competitors including direct and adjacent products, positioning, pricing, and feature gaps. Use whenever the user mentions competitive analysis, competitor research, market positioning, competitive landscape, or needs to understand who else is in their space.

Run a full review of a design through all eight forces (clarity, continuity, constraint, consequence, context, cost, confidence, correctability) and produce a balanced scorecard with weakest-force identification. Use this whenever the user asks for a "full review," "complete audit," "review everything," wants a comprehensive design review, says "find what's wrong," or pastes a design without specifying which lens to use. Also the right starting skill when the user is new to mindit. Produces a scorecard with one score per force and a recommendation for where to focus.

Analyze a design or screen for clarity — whether a stranger can read the intent in five seconds. Use this whenever the user asks about hierarchy, what stands out, what gets noticed first, whether a CTA is obvious, whether labels make sense, why users miss something on a screen, or why a layout feels cluttered or confusing. Also trigger when the user pastes a screenshot or URL and asks "what's wrong with this" or "is this clear" without specifying which force. Produces a structured decision artifact with score, criteria, and anti-pattern matches.

Analyze the evidence standing behind a design decision — research, data, intuition, or assumption. Use this whenever the user asks "how do we know this is right," wants a research review, asks about user research, A/B test results, or interviews. Also trigger when the user says "I think users want X" or "we believe Y" — the skill surfaces what the team actually knows vs. what they're assuming. Produces a structured decision artifact with score, criteria, and anti-pattern matches.

Analyze what a design forecloses and what it opens — second-order effects, irreversible actions, path foreclosure, data implications, future-design lock-in. Use this whenever the user asks about side effects, what happens after a user clicks, what gets stored or exposed, whether an action is reversible, what this prevents the team from doing later, or knock-on effects on other features. Also trigger when the user is about to ship a destructive flow (deletion, payment, account changes) and asks for a review. Produces a structured decision artifact with score, criteria, and anti-pattern matches.

Analyze which hard limits a design honors — technical, accessibility, brand, legal, time, and platform. Use this whenever the user asks about feasibility, accessibility, WCAG, screen readers, contrast, performance budgets, platform guidelines (iOS HIG, Material), legal requirements (GDPR, CCPA, accessibility law), brand restrictions, or engineering capacity. Also trigger when a user says "can we ship this," "is this realistic," or "what are we forgetting." Produces a structured decision artifact with score, criteria, and anti-pattern matches.

Analyze who a design is for, when they use it, where, on what device, and in what state. Use this whenever the user asks about audience fit, mobile responsiveness, breakpoints, loading states, error states, empty states, offline behavior, onboarding context, returning users, edge cases, or "what happens when X." Also trigger when the user mentions a specific user segment, persona, or use environment (driving, dark mode, slow network, etc.). Produces a structured decision artifact with score, criteria, and anti-pattern matches.

Analyze whether a new design fits the system that already exists — conventions, components, vocabulary, and visual rules of the product it lives in. Use this whenever the user asks about consistency, whether something "feels off," whether a new screen matches the rest of the product, whether to fork or reuse a component, whether terminology lines up, or whether a feature feels like a different product was glued on. Also trigger when the user is adding a feature to an existing product and asks for a review. Produces a structured decision artifact with score, criteria, and anti-pattern matches.

Analyze how reversible a design is if it turns out to be wrong — both user-side undo and system-side rollback. Use this whenever the user asks about launch risk, rollout plan, A/B tests, feature flags, telemetry, monitoring, kill switches, "what if we're wrong," or "how do we know when to roll this back." Also trigger when the user is about to ship a broad-impact change (default change, pricing, schema migration, brand refresh). Produces a structured decision artifact with score, criteria, and anti-pattern matches.

WCAG 2.1 AA compliance audit

Color palette quality and consistency analysis

Visual hierarchy and information architecture analysis

Basic responsive design checks

Spacing consistency and grid adherence analysis

Typography quality and scale analysis

Comprehensive presentation design skill for Claude Code. Projection-aware design, audience-adaptive layouts, narrative architecture, perceptual data visualization, anti-AI-slop detection, rehearsal intelligence, and multi-format export. Complements Anthropic's built-in PPTX skill.