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
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
Structured taste breakdowns of real products. The format for making taste observations legible and shareable. Use when analyzing products, writing case studies, documenting design observations, or teaching through example.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
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: