dragoon0x

@dragoon0x source repo

690 skills
0 followers
14 hours ago last updated

▌
Quality Checklist · dragoon0x
Systematic design quality evaluation. Hierarchy, type, color, space, craft, system. Use when evaluating whether a design is ready to ship, running quality audits, or setting quality standards.

0
installs
▌
Tradeoff Assessment · dragoon0x
Name what was prioritized, what was sacrificed, and whether the tradeoff was right. Every design decision trades something. Use when evaluating design decisions, defending choices, or helping teams understand what they're giving up.

0
installs
▌
Daily Routines · dragoon0x
15-minute daily taste exercises. Monday through Friday. Compound effect over time. Use when building personal practice habits, training a team's design eye, or adding structure to professional development.

0
installs
▌
Teaching Taste · dragoon0x
Help other designers develop judgment without imposing your style. Use when mentoring designers, running design education, or building team-wide quality standards.

0
installs
▌
Design Rationale · dragoon0x
Defend a design decision to skeptical stakeholders with structure and evidence. Use when presenting design work, writing design documentation, or pushing back on requests to change something.

0
installs
▌
Written Critique · dragoon0x
Write a structured design review that someone can act on without follow-up questions. Use when giving async design feedback, writing portfolio case studies, or documenting design decisions.

0
installs
▌
Learning By Making · dragoon0x
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.

0
installs
▌
Detail Observation · dragoon0x
Micro-decision analysis. Catalog the border radii, spacing scales, type sizes, and state coverage that most people miss. Use when auditing design systems, evaluating craft quality, or training granular perception.

0
installs
▌
Screenshot Surgery · dragoon0x
Annotate and map the anatomy of any design. Identify visual hierarchy, spacing systems, color roles, and tension points through clinical analysis. Use when doing formal design audits, teaching design analysis, or building structured observation skills.

0
installs
▌
Craft Signals · dragoon0x
Consistent radii, pixel-perfect alignment, state coverage, and the details that signal design quality. Use when polishing designs, auditing quality, or evaluating whether a design is ready to ship.

0
installs
▌
System Deconstruction · dragoon0x
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.

0
installs
▌
Constraint Evaluation · dragoon0x
Understand the constraints a design was built under and evaluate quality within that context. Use when reviewing work that had limited time, budget, or team size, or when assessing whether constraints were handled well.

0
installs
▌
Cross Domain Seeing · dragoon0x
Pull design principles from architecture, fashion, film, industrial design, and physical spaces into screen-based design. Use when seeking inspiration beyond digital, expanding creative range, or building cross-disciplinary design vocabulary.

0
installs
▌
Spatial Rhythm · dragoon0x
Density, whitespace, rhythm, and how space communicates relationships between elements. Use when building layouts, evaluating spacing consistency, or diagnosing why a design feels cramped or empty.

0
installs
▌
Critique Vocabulary · dragoon0x
Precise language for design feedback. Ban vague words. Name what you actually see. Use when giving design feedback, running critiques, or training teams to communicate about quality.

0
installs
▌
Audience Translation · dragoon0x
Explain the same design observation to a designer, a developer, and a non-technical stakeholder. Same insight, three languages. Use when working cross-functionally or presenting design decisions to mixed audiences.

0
installs
▌
Consumption Discipline · dragoon0x
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.

0
installs
▌
Cross Pollination · dragoon0x
Draw from architecture, fashion, music, food, and industrial design to expand your design taste range. Use when seeking inspiration beyond digital, building diverse reference sets, or expanding creative vocabulary.

0
installs
▌
Principle Tagging · dragoon0x
Tag design references by principle, not aesthetic. Build a library you can actually search. Use when saving references, organizing inspiration, or building a design library that returns useful results.

0
installs
▌
Hierarchy Principles · dragoon0x
Visual weight, attention order, and the decisions that guide the eye. Use when building layouts, evaluating information architecture, or diagnosing why a design feels confusing.

0
installs
▌
Library Architecture · dragoon0x
Build a reference system that returns the right reference in under 60 seconds. Use when setting up a design reference library, reorganizing existing collections, or helping teams build shared reference systems.

0
installs
▌
Forge Fix · dragoon0x
Auto-fix design system violations. Replaces raw hex values with token references, snaps spacing to the scale, and normalizes font usage.

0
installs
▌
Forge A11Y · dragoon0x
Full accessibility audit using your design system's color tokens. Checks contrast, focus styles, semantic HTML, touch targets, and motion safety.

0
installs
▌
Forge Dark · dragoon0x
Generate a dark mode variant of your design system. Creates dark-mode token overrides that preserve contrast ratios from the light theme.

0
installs
▌
Forge Diff · dragoon0x
Show the difference between your .forge.json design system and what's actually in the code. Lists every value that drifts from the system.

0
installs
▌
Forge Grid · dragoon0x
Snap all spacing values in the codebase to your system's grid. Replaces arbitrary padding, margin, and gap values.

0
installs
▌
Forge Init · dragoon0x
Generate a complete design system from a brand color and project type. Creates .forge.json with palette, tokens, type scale, spacing, shadows, and radii. This is the starting command — everything else references what it generates.

0
installs
▌
Forge Pair · dragoon0x
Get contextual font pairing recommendations based on your project type. Never suggests banned fonts.

0
installs
▌
Forge Type · dragoon0x
Regenerate the type scale from your .forge.json ratio and base size. Outputs 8 steps with px values and CSS custom properties.

0
installs
▌
Forge Audit · dragoon0x
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.

0
installs
▌
Forge Focus · dragoon0x
Generate a focus ring system using your system's accent color. Creates consistent :focus-visible styles for all interactive elements.

0
installs
▌
Forge Score · dragoon0x
Score how well the codebase adheres to your design system. 0-100, where 100 means every value references a token and every pattern follows the system.

0
installs
▌
Forge Touch · dragoon0x
Verify all interactive elements meet 44×44px minimum touch target size. Suggests padding increases using your spacing scale.

0
installs
▌
Forge Bolder · dragoon0x
Amplify the design within your system's range. Use stronger palette shades, higher type scale steps, and more dramatic shadows.

0
installs
▌
Forge Design · dragoon0x
Design system generator and enforcer. Generates a complete, project-aware design foundation from a single brand color and project type. Produces color palettes, semantic tokens, mathematical type scales, spacing scales, shadow systems, and border radii. Every command operates on YOUR generated system, not generic rules. Use when building any frontend UI to ensure consistent, intentional design decisions from the first line of code.

0
installs
▌
Forge Harden · dragoon0x
Add error states, loading states, i18n safety, and edge case handling using your design system's tokens.

0
installs
▌
Forge Motion · dragoon0x
Check that all animations have prefers-reduced-motion fallbacks. Adds them if missing.

0
installs
▌
Forge Polish · dragoon0x
Final quality pass checking every value against your design system. The last command before shipping.

0
installs
▌
Forge Radius · dragoon0x
Regenerate the border radius scale based on project type. SaaS gets moderate, portfolio gets soft, e-commerce gets tight.

0
installs
▌
Forge Rhythm · dragoon0x
Enforce vertical rhythm using your system's baseline grid. Ensures heading margins, paragraph spacing, and section padding are multiples of the baseline.

0
installs
▌
Forge Shadow · dragoon0x
Regenerate the shadow elevation system tinted with your brand hue. Produces 5 levels from sm to 2xl.

0
installs
▌
Forge Update · dragoon0x
Regenerate the entire design system from a new brand color while preserving the project type. Updates .forge.json and shows what changed.

0
installs
▌
Forge Density · dragoon0x
Audit visual density and whitespace balance. Checks that spacing from your system creates appropriate rhythm between sections.

0
installs
▌
Forge Measure · dragoon0x
Forge Measure

0
installs
▌
Forge Palette · dragoon0x
Regenerate the 50-950 shade palette from the current brand color in .forge.json. Updates the palette section without changing other parts of the system.

0
installs
▌
Forge Quieter · dragoon0x
Tone down the design within your system's range. Use subtler shades, smaller type differences, and softer shadows.

0
installs
▌
Forge Spacing · dragoon0x
Regenerate the spacing scale from your system's base unit. Outputs 13 steps from 4px to 128px.

0
installs
▌
Forge Contrast · dragoon0x
Check WCAG contrast ratios across your entire token system. Tests every text token against every surface token.

0
installs
▌
Forge Semantic · dragoon0x
Rebuild the semantic token mapping from your palette. Maps surface, text, border, accent, and feedback tokens to specific palette shades based on project type.

0
installs
▌
Forge Type Fix · dragoon0x
Snap all font sizes to the nearest step in your type scale. Replaces arbitrary values with var(--type-step) references.

0
installs
▌
Forge Color Fix · dragoon0x
Replace all orphan colors with the nearest token from your system. Converts raw hex values to var(--token) references.

0
installs
▌
Forge Elevation · dragoon0x
Audit elevation consistency. Checks that shadow usage follows a logical hierarchy — cards < dropdowns < modals.

0
installs
▌
Forge Export Tw · dragoon0x
Export your design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and radii.

0
installs
▌
Forge Harmonize · dragoon0x
Add a complementary or analogous accent color to your system. Computes the harmonically ideal secondary color from your brand.

0
installs
▌
Forge Normalize · dragoon0x
Align every value in the codebase to the nearest system token. The nuclear option for system compliance.

0
installs
▌
Forge Export CSS · dragoon0x
Export your complete design system as CSS custom properties. Includes palette, tokens, type scale, spacing, shadows, and radii in a single :root block.

0
installs
▌
Forge Responsive · dragoon0x
Check responsive behavior using your system's spacing scale. Verifies that spacing reduces proportionally at smaller breakpoints.

0
installs
▌
Forge Type Audit · dragoon0x
Find every font-size in the codebase that doesn't match your type scale. Lists violations with suggested scale values.

0
installs
▌
Forge Color Audit · dragoon0x
Find every color in the codebase that isn't in your palette or token system. Lists orphan colors with suggested replacements.

0
installs
▌
Forge Export JSON · dragoon0x
Export your design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and token management tools.

0
installs
▌
Forge Export Scss · dragoon0x
Export your design system as SCSS variables and mixins. Includes palette map, type scale mixin, spacing function, and breakpoint mixin.

0
installs
▌
Forge Spacing Fix · dragoon0x
Auto-fix all off-scale spacing values. Snaps to nearest system value and replaces with token reference.

0
installs
▌
Forge Export Figma · dragoon0x
Export your design system in Figma Tokens format. Ready to import into Figma via the Tokens Studio plugin.

0
installs
▌
Forge Spacing Audit · dragoon0x
Find every spacing value in the codebase that doesn't match your scale. Lists violations by file and line.

0
installs
▌
Forge Surface Audit · dragoon0x
Check background color hierarchy. Verifies that surfaces, cards, and modals use the correct token from your system.

0
installs
▌
Canon Rtl · dragoon0x
Use when designing or implementing right-to-left (RTL) layout support for Arabic, Hebrew, Farsi, Urdu, and other RTL scripts. Covers logical properties, mirroring rules, bidirectional text, icon direction, and what should NOT flip. Trigger when the user mentions RTL, right-to-left, Arabic, Hebrew, bidi, or dir="rtl".

0
installs
▌
Canon SEO · dragoon0x
Use when auditing or implementing technical SEO — semantic HTML, meta tags, structured data, canonical URLs, sitemap, robots.txt, page speed as a ranking factor, and accessible content. Trigger when the user mentions SEO, search engine, meta tags, structured data, sitemap, or crawlability.

0
installs
▌
Canon I18N · dragoon0x
Use when designing or implementing internationalization — string externalization, locale-aware formatting, pluralization, text expansion, concatenation avoidance, and layout adaptation for multiple languages. Trigger when the user mentions i18n, internationalization, localization, translation, locale, or multi-language.

0
installs
▌
Canon Tabs · dragoon0x
Use when designing, auditing, or refactoring tabs, tab bars, tab panels, or any pattern switching between views without leaving the page. Covers when tabs are appropriate, active state, keyboard behavior (the roving tabindex WAI-ARIA pattern), mobile responsive behavior, overflow handling, and nested tabs. Trigger when the user mentions tabs, tab bar, tabbed interface, segmented control, or tab switcher.

0
installs
▌
Canon Cards · dragoon0x
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 the user mentions card, tile, item, product card, grid, or thumbnail.

0
installs
▌
Canon Color · dragoon0x
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 colors, palette, theme, dark mode, contrast, or accessibility of color.

0
installs
▌
Canon Depth · dragoon0x
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, border, divider, or visual hierarchy via depth.

0
installs
▌
Canon Focus · dragoon0x
Use when designing or auditing focus indicators — visible focus rings, focus-visible vs focus, custom focus styles, contrast requirements, and focus management during route changes. Trigger when the user mentions focus ring, focus indicator, focus-visible, outline, focus style, or focus management.

0
installs
▌
Canon Forms · dragoon0x
Use when designing or auditing forms, inputs, validation, error messages, labels, submit flows, or any data entry interface. Covers field structure, label placement, validation timing, error UX, autocomplete, multi-step flows, and the most common form anti-patterns. Trigger when the user mentions form, input, label, validation, error, submit, signup, login, or checkout.

0
installs
▌
Canon Grids · dragoon0x
Use when designing or implementing CSS Grid or Flexbox layouts, choosing between the two, building responsive grids, dashboard layouts, or card grids. Covers the 1D vs 2D decision, grid template areas, auto-fill vs auto-fit, subgrid, and alignment. Trigger when the user mentions grid, CSS grid, flexbox, layout grid, columns, or responsive grid.

0
installs
▌
Canon Icons · dragoon0x
Use when designing, auditing, or refactoring iconography, icon libraries, emoji usage, or icon-only buttons. Covers icon sizing, stroke weight, grid alignment, meaning ambiguity, accessibility, when to pair icons with labels, and the rules for using SVG vs font vs emoji. Trigger when the user mentions icon, glyph, emoji, SVG, pictogram, or icon button.

0
installs
▌
Canon Menus · dragoon0x
Use when designing, auditing, or refactoring menus, dropdowns, select menus, combobox, context menus, kebab menus, action menus, or any list of actions triggered by a button. Covers the WAI-ARIA menu pattern, when to use menu vs listbox vs combobox, keyboard behavior, positioning, nesting, and the most common menu-as-navigation anti-pattern. Trigger when the user mentions menu, dropdown, action menu, kebab, overflow menu, select, combobox, or context menu.

0
installs
▌
Canon Badges · dragoon0x
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 difference between badges, chips, and tags. Trigger when the user mentions badge, pill, chip, tag, label, status pill, count, or notification dot.

0
installs
▌
Canon Charts · dragoon0x
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 chart, graph, visualization, dashboard, bar chart, line chart, pie chart, or sparkline.

0
installs
▌
Canon Images · dragoon0x
Use when optimizing images for the web — format selection (AVIF, WebP, PNG, SVG), responsive images with srcset, lazy loading, aspect ratio preservation, LCP image optimization, and image CDN usage. Trigger when the user mentions image optimization, srcset, lazy loading images, AVIF, WebP, image format, or responsive images.

0
installs
▌
Canon Modals · dragoon0x
Use when designing, auditing, or refactoring modal dialogs, alert dialogs, confirmation dialogs, drawers, popovers, sheets, or any overlay pattern. Covers when to use a modal vs page vs inline, focus trap, escape behavior, scroll locking, sizing, the dialog element, and modal stacking. Trigger when the user mentions modal, dialog, popup, drawer, sheet, overlay, or confirm.

0
installs
▌
Canon Motion · dragoon0x
Use when designing or auditing animation, transitions, micro-interactions, or motion in any interface. Covers easing curves, duration ranges, staggering, choreography rules, prefers-reduced-motion handling, performance, and motion anti-patterns. Trigger when the user mentions animation, transition, motion, easing, hover effect, page transition, or asks to add or fix animation.

0
installs
▌
Canon Search · dragoon0x
Use when designing, auditing, or refactoring search input fields, search bars, search results pages, autocomplete, typeahead, or command palette UI. Covers input styling, placeholder rules, debouncing, result presentation, keyboard navigation of results, empty states, and the combobox ARIA pattern for search-with-suggestions. Trigger when the user mentions search, search bar, autocomplete, typeahead, command palette, or find.

0
installs
▌
Canon States · dragoon0x
Use when designing or auditing empty states, loading states, error states, success states, skeleton screens, zero-data states, or any UI state that isn't the happy path. Trigger when the user mentions empty state, loading state, error state, skeleton, no data, zero state, or asks what to show when something isn't there yet.

0
installs
▌
Canon Tables · dragoon0x
Use when designing, auditing, or refactoring data tables, grids, lists of tabular data, sortable columns, or any structured-data display. Covers the table vs card decision, density, row height, alignment, sorting, pagination, sticky headers, zebra striping, responsive behavior, and empty states. Trigger when the user mentions table, data grid, rows, columns, spreadsheet, list view, or data table.

0
installs
▌
Canon Toasts · dragoon0x
Use when designing, auditing, or refactoring toast notifications, snackbars, banners, inline alerts, or any transient feedback. Covers when to use a toast vs modal vs banner, duration, positioning, stacking, the Undo pattern, accessibility (live regions), and the most common toast-as-catchall anti-pattern. Trigger when the user mentions toast, snackbar, notification, alert, banner, or feedback message.

0
installs
▌
Canon Avatars · dragoon0x
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" state. Trigger when the user mentions avatar, profile image, user picture, initials, profile photo, or avatar stack.

0
installs
▌
Canon Buttons · dragoon0x
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, or primary/secondary/tertiary.

0
installs
▌
Canon Cursors · dragoon0x
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.

0
installs
▌
Canon Density · dragoon0x
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.

0
installs
▌
Canon Meta Og · dragoon0x
Use when implementing Open Graph tags, Twitter Card tags, and social sharing metadata — the tags that control how URLs appear when shared on social media, messaging apps, and link previews. Trigger when the user mentions OG tags, Open Graph, Twitter card, social sharing, link preview, or og:image.

0
installs
▌
Canon Spatial · dragoon0x
Use when designing or auditing spacing, layout, grids, padding, margins, or visual rhythm in any web interface. Covers the 4px and 8px grid systems, spacing scales, container widths, gutters, density modes, and the most common spacing anti-patterns. Trigger when the user mentions spacing, padding, margin, layout, grid, alignment, density, or visual rhythm.

0
installs
▌
Canon Data Viz · dragoon0x
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.

0
installs
▌
Canon Favicons · dragoon0x
Use when implementing favicons, touch icons, web app icons, or browser tab icons — the full set of sizes and formats needed for modern browsers, iOS home screen, Android, and PWA manifests. Trigger when the user mentions favicon, icon, apple-touch-icon, manifest icons, or browser tab icon.

0
installs
▌
Canon Keyboard · dragoon0x
Use when designing or auditing keyboard navigation, focus management, shortcut keys, or keyboard-only workflows. Covers tab order, arrow keys within composite widgets, skip links, shortcut conventions, and ensuring every interaction works without a mouse. Trigger when the user mentions keyboard, tab order, shortcuts, hotkeys, focus order, or keyboard navigation.

0
installs
▌
Canon Tooltips · dragoon0x
Use when designing, auditing, or refactoring tooltips, hover hints, help text, or any supplementary info surfaced on hover/focus. Covers when a tooltip is appropriate vs a label vs a popover, delay timing, positioning, keyboard access, mobile behavior, and the rules that keep tooltips from becoming accessibility traps. Trigger when the user mentions tooltip, hover hint, help text, title attribute, or popover hint.

0
installs
▌
Canon Accordion · dragoon0x
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 (`<details>` vs ARIA), animation, and accessibility. Trigger when the user mentions accordion, collapsible, expandable, disclosure, FAQ, or expand/collapse.

0
installs
▌
Canon Dark Mode · dragoon0x
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.

0
installs
▌
Canon Navigation · dragoon0x
Use when designing, auditing, or refactoring navigation — top bars, sidebars, breadcrumbs, footer nav, mobile menus, tab bars, or any way-finding element. Covers information architecture, active state, keyboard navigation, skip links, mobile patterns, and the sidebar vs top-bar decision. Trigger when the user mentions nav, navbar, sidebar, menu, breadcrumb, hamburger, or header.

0
installs
▌
Canon Onboarding · dragoon0x
Use when designing first-run experiences, product tours, coachmarks, progressive onboarding, or empty-state-as-onboarding. Covers the principles of gradual engagement, contextual hints over upfront tutorials, and when to use tours vs inline guidance vs empty states. Trigger when the user mentions onboarding, first-run, product tour, coachmark, walkthrough, or getting started.

0
installs

690 published skills · page 2 of 7