dragoon0x
- 690 skills
- 0 followers
- 20 hours ago last updated
- ▌ Canon Pagination · dragoon0xUse when designing, auditing, or refactoring pagination, page numbers, prev/next controls, infinite scroll, load-more buttons, or any pattern for traversing long lists. Covers pagination vs infinite scroll vs virtualization, when each wins, page-number layout, URL behavior, keyboard navigation, and the "where was I" problem. Trigger when the user mentions pagination, paginate, page number, prev/next, infinite scroll, load more, or virtualized list.
- ▌ Canon Responsive · dragoon0xUse when designing or auditing responsive behavior, breakpoints, fluid type, container queries, mobile-first CSS, or layouts that adapt to viewport sizes. Trigger when the user mentions mobile, tablet, desktop, breakpoint, fluid, responsive, viewport, or asks how something should behave at different sizes.
- ▌ Canon Typography · dragoon0xUse when designing or auditing typography in any web interface. Covers font selection, modular type scales, line-height ratios, letter-spacing, line length, OpenType features, font loading, and the specific anti-patterns that make AI-generated UIs feel generic. Trigger when the user mentions fonts, headings, body text, type scale, font pairing, or asks to fix or improve typography.
- ▌ Canon UX Writing · dragoon0xUse when writing or auditing interface copy, button labels, error messages, empty states, onboarding, microcopy, tooltips, or any text inside an interface. Covers tone, voice, button-label patterns, error-message construction, empty state copy, and the most common UX writing anti-patterns. Trigger when the user mentions copy, microcopy, button text, error message, empty state, onboarding, tone, or voice.
- ▌ Canon Brand Voice · dragoon0xUse 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.
- ▌ Canon Bundle Size · dragoon0xUse 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.
- ▌ Canon Interaction · dragoon0xUse when designing or auditing interactive states (hover, focus, active, disabled, loading), focus management, keyboard navigation, click targets, drag-and-drop, or any user input handling. Trigger when the user mentions states, focus, hover, keyboard, interaction, click, tap, or fixing how something responds.
- ▌ Canon Performance · dragoon0xUse when designing or auditing front-end performance, Core Web Vitals (LCP, INP, CLS), bundle size, image optimization, font loading, lazy loading, or perceived speed. Trigger when the user mentions performance, slow, fast, bundle, Core Web Vitals, LCP, INP, CLS, lazy load, or perceived speed.
- ▌ Canon Accessibility · dragoon0xUse 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.
- ▌ Canon Fonts Loading · dragoon0xUse when selecting, loading, or optimizing web fonts — font-display strategy, preloading, subsetting, variable fonts, FOUT/FOIT handling, and limiting font file count. Trigger when the user mentions web fonts, font loading, font-display, @font-face, Google Fonts, preload fonts, FOUT, or FOIT.
- ▌ Canon Illustrations · dragoon0xUse when designing or selecting illustrations for empty states, onboarding, error pages, marketing, or feature explanations. Covers illustration vs icon, style consistency, sizing, accessibility, and when illustrations help vs clutter. Trigger when the user mentions illustration, spot illustration, hero image, empty state art, or decorative graphic.
- ▌ Canon Screen Reader · dragoon0xUse when designing or auditing for screen reader compatibility — semantic HTML, ARIA roles and states, live regions, announcements, reading order, and hidden content. Trigger when the user mentions screen reader, VoiceOver, NVDA, JAWS, accessibility tree, ARIA, or assistive technology.
- ▌ Canon Error Handling · dragoon0xUse when designing error states, error messages, recovery flows, fallback UIs, error boundaries, retry logic, or offline handling. Covers the three-part error message anatomy, inline vs toast vs page errors, error boundaries in React, optimistic-UI rollback, and the retry with backoff pattern. Trigger when the user mentions error, error handling, error state, fallback, retry, offline, or error boundary.
- ▌ Canon Color Blindness · dragoon0xUse 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.
- ▌ Canon Content Strategy · dragoon0xUse 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.
- ▌ Canon Micro Interactions · dragoon0xUse when designing small, functional animations tied to user actions — toggle switches, like buttons, checkbox ticks, pull-to-refresh, swipe-to-dismiss. Covers the trigger-feedback loop, animation budgets, spring physics, and when micro-interactions become distractions. Trigger when the user mentions micro-interaction, toggle animation, feedback animation, or interaction detail.
- ▌ Canon Information Architecture · dragoon0xUse when organizing site structure, navigation hierarchy, page grouping, URL schemas, or user flow maps. Covers card sorting results, tree testing, flat vs deep hierarchy, and labeling conventions. Trigger when the user mentions IA, information architecture, sitemap, page structure, navigation planning, or URL structure.
- ▌
- ▌ M Layout Audit · dragoon0xMap all layout patterns. Identify grid/flex, spacing, nesting depth, responsive breakpoints.
- ▌
- ▌ M Screen Reader · dragoon0xSimulate screen reader traversal. Identify reading order and announcement issues.
- ▌ Meridian Design · dragoon0xDesign DNA engine that learns your codebase before making recommendations. Maps 8 design axes (typography, color, layout, motion, accessibility, tokens, hierarchy, personality), builds a project-aware profile in .meridian.json, and enforces your established aesthetic. 62 commands across 5 tiers. Every command respects what you've already built. Use on any frontend project to prevent AI slop while preserving design intent.
- ▌
- ▌ M A11Y · dragoon0xFull accessibility audit. Focus, semantic HTML, ARIA, contrast, touch targets, motion safety.
- ▌
- ▌ M Dark · dragoon0xGenerate dark mode from the existing palette. Not inversion — proper surface remapping.
- ▌ M Flow · dragoon0xAnalyze reading order and content flow. Verify logical DOM order matches visual order.
- ▌ M Grid · dragoon0xSnap all spacing values to the 4px base grid. Replaces arbitrary values with the nearest scale token.
- ▌ M Scan · dragoon0xRead the entire codebase and build a design profile in .meridian.json. Discovers fonts, colors, spacing patterns, type scale, and design tendencies. This is the starting command — everything else references what it discovers.
- ▌ M Align · dragoon0xVerify visual alignment across sections. Check consistent left edges, centered elements, grid alignment.
- ▌ M Audit · dragoon0xComprehensive design quality report with specific findings per axis, line references, severity ratings, and fix instructions.
- ▌
- ▌
- ▌ M Radii · dragoon0xGenerate a border radius scale. 6 steps from sm to full, calibrated to project context.
- ▌ M Score · dragoon0xRun the full 8-axis DNA analysis. Produces a radar chart profile with Typography, Color, Layout, Motion, Accessibility, Tokens, Hierarchy, and Personality scores.
- ▌
- ▌
- ▌ M Bolder · dragoon0xAmplify safe designs. Larger headlines, stronger accent, more shadow, one animation.
- ▌
- ▌ M Polish · dragoon0xFinal quality pass. Alignment, spacing, hover states, focus, loading states, consistency.
- ▌
- ▌ M Rhythm · dragoon0xEnforce vertical spacing rhythm using a baseline grid derived from body line-height.
- ▌ M Tokens · dragoon0xGenerate a complete design token set from the current codebase. Extracts colors, type, spacing, shadows, radii and outputs as CSS variables, Tailwind, SCSS, or JSON.
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ M Palette · dragoon0xGenerate a full 50-950 shade palette from a single hex color. 11 perceptually uniform shades via HSL interpolation.
- ▌ M Profile · dragoon0xView the current .meridian.json design profile. Shows all 8 axis scores, detected patterns, and DNA hash.
- ▌ M Quieter · dragoon0xTone down aggressive designs. Softer colors, smaller contrasts, more whitespace.
- ▌ M Shadows · dragoon0xGenerate a brand-tinted shadow elevation system. 5 levels from sm to 2xl using the brand hue.
- ▌ M Spacing · dragoon0xGenerate a spacing scale from a base unit. 15 steps from 2px to 128px on a 4px grid.
- ▌
- ▌
- ▌
- ▌
- ▌ M Type Fix · dragoon0xAuto-fix typography issues. Replace banned fonts, normalize scale, add line-height.
- ▌ M Type Set · dragoon0xApply a complete typography system in one command. Scale, pairing, line-heights, letter-spacing.
- ▌
- ▌
- ▌
- ▌ M Hierarchy · dragoon0xAudit visual depth. Count distinct heading levels, weight differentiation, size ratios.
- ▌ M Normalize · dragoon0xAlign every value in the codebase to the nearest system token from the profile.
- ▌ M Overdrive · dragoon0xPush past conventional limits. WebGL, spring physics, GPU effects. Maximum one per page.
- ▌
- ▌ M Type Pair · dragoon0xFont pairing recommendations. Display + body + mono. Never suggests banned fonts.
- ▌ M Export CSS · dragoon0xExport the design profile as CSS custom properties with dark mode overrides.
- ▌
- ▌ M Responsive · dragoon0xCheck responsive behavior at key breakpoints. Verify layout, text measure, touch targets, spacing.
- ▌ M Transition · dragoon0xAudit and improve CSS transition declarations. Replace generic easing with intentional curves.
- ▌ M Type Audit · dragoon0xAudit all font-family, font-size, font-weight, line-height, letter-spacing across the codebase.
- ▌ M Type Scale · dragoon0xGenerate a mathematical type scale from a base size and ratio. Outputs 8 steps with px values, rem equivalents, and CSS custom properties.
- ▌
- ▌
- ▌
- ▌ Value Metrics · dragoon0xMeasure what matters, ignore what doesn't. Defines core metrics by product type, dashboards that surface real signals, and analytics events that tell the full story. Use when setting up analytics, building dashboards, or defining KPIs.
- ▌ Positioning · dragoon0xArticulate why a product exists, who it serves, and what it replaces. Generates positioning statements, competitive angles, and category definitions. Use when launching something new, entering a crowded market, or when nobody can explain what the product does in one sentence.
- ▌ Zero To One · dragoon0xFirst principles decisions for products that don't exist yet. Helps reason about market gaps, user needs, MVP scope, and what to build first. Use when starting from scratch, scoping an MVP, or when the agent needs to think before it builds.
- ▌ Cta Patterns · dragoon0xDesign calls-to-action that people actually click. Covers button copy, placement logic, urgency without manipulation, and progressive commitment. Use when reviewing pages for conversion potential or when CTA copy feels generic.
- ▌ Launch Checklist · dragoon0xEverything that needs to be true before real people see this. Pre-launch audit covering copy, meta tags, error states, mobile, performance, analytics, and the things everyone forgets. Use before any launch or public release.
- ▌ Trust Signals · dragoon0xBuild credibility through evidence, not claims. Patterns for social proof, testimonials, logo walls, case studies, and security badges. Use when conversion is low despite good traffic or when the product is new and unknown.
- ▌ Jobs To Be Done · dragoon0xUnderstand what people actually hire your product to do. Maps functional, emotional, and social jobs. Surfaces real competition and generates interview frameworks. Use when product direction feels unclear or when features aren't landing.
- ▌ Persona Mapping · dragoon0xBuild user models that actually inform decisions. Maps motivations, friction points, and decision triggers beyond demographic templates. Use when building for multiple user types or when the agent needs to reason about different users.
- ▌ User Psychology · dragoon0xApply motivation, friction, and trust patterns to product decisions. Maps cognitive biases and behavioral triggers to specific UI and copy choices. Use when reviewing flows for drop-off points or when something feels right but doesn't convert.
- ▌ Error Recovery · dragoon0xWhen things break, guide people forward instead of leaving them stranded. Error message copy, retry patterns, graceful degradation, and recovery flows. Use when building error handling or failed state UIs.
- ▌ Referral Mechanics · dragoon0xBuild sharing into the product without it feeling forced. Viral loops, invite flows, referral incentives, and the moments where asking users to share feels natural. Use when building invite systems or when organic growth needs structure.
- ▌ Onboarding Flow · dragoon0xDesign first-run experiences that create the aha moment fast. Reduces time-to-value by sequencing actions, progressive disclosure, and contextual guidance. Use when building signup flows, product tours, or empty states.
- ▌ UX Intuition · dragoon0xDevelop the instinct for what makes a product feel right, beyond what data can tell you. Covers quality evaluation, interaction judgment, and knowing when something is off even if you can't articulate why. Use when evaluating designs, reviewing prototypes, or when metrics say it's fine but something feels wrong.
- ▌ Market Validation · dragoon0xTest assumptions before committing resources. Generates lean validation plans, fake door tests, and interview scripts. Use before building anything expensive or when there's no evidence anyone wants what's being built.
- ▌ Feedback Synthesis · dragoon0xTurn raw user feedback into actionable product decisions. Categorization frameworks, signal vs noise filtering, and severity scoring. Use when processing interviews, support tickets, or reviews into product direction.
- ▌ Form Optimization · dragoon0xReduce abandonment in every form, signup, and checkout flow. Multi-step logic, field reduction, inline validation, and completion micro-copy. Use when building signup flows, checkout pages, or any multi-field input.
- ▌ Landing Structure · dragoon0xInformation architecture that guides visitors from curiosity to commitment. Enforces section order, content hierarchy, and scroll-depth logic. Use when building landing pages, product pages, or any conversion surface.
- ▌ Prd Writing · dragoon0xWrite product requirement documents that engineers want to read and can actually build from. Covers structure, scope discipline, and the balance between clarity and over-specification. Use when writing PRDs, reviewing spec quality, or when engineering keeps asking clarifying questions.
- ▌ Competitive Framing · dragoon0xPosition against alternatives without being negative. Maps competitive landscape, identifies differentiation axes, and generates comparison frameworks. Use when building comparison pages, handling objections, or differentiating from existing solutions.
- ▌ Changelog Voice · dragoon0xShip 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.