the canonical design language for AI coding harnesses. 52 skills, 19 commands, 89 detector rules, 15 harnesses.
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
Use 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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
Use 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…
Skill Claude CodeCodex
Use 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.
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
Use 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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
Use 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"…
Skill Claude CodeCodex
Use 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.
Skill Claude CodeCodex
Use 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.
Skill Claude CodeCodex
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".
Skill Claude CodeCodex
Use 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.
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: