UI/UX & Design

Use this skill when implementing web accessibility, adding ARIA attributes, ensuring keyboard navigation, or auditing WCAG compliance. Triggers on accessibility, a11y, ARIA roles, screen readers, keyboard navigation, focus management, color contrast, alt text, semantic HTML, and any task requiring WCAG 2.2 compliance or inclusive design.

Use this skill when choosing color palettes, ensuring contrast compliance, implementing dark mode, or defining semantic color tokens. Triggers on color palette, contrast ratio, WCAG color, dark mode, color tokens, HSL, OKLCH, brand colors, color harmony, and any task requiring color system design or implementation.

Use this skill when building design systems, creating component libraries, defining design tokens, implementing theming, or setting up Storybook. Triggers on design tokens, component library, Storybook, theming, CSS variables, style dictionary, variant props, compound components, and any task requiring systematic UI component architecture.

Use this skill when translating Figma designs to code, interpreting design specs, matching visual fidelity, or bridging designer-developer handoff. Triggers on Figma implementation, design-to-code, pixel-perfect, design handoff, auto layout to flexbox, Figma tokens, component variants to props, and any task requiring faithful implementation of design mockups.

Use this skill when implementing animations, transitions, micro-interactions, or motion design in web applications. Triggers on CSS animations, Framer Motion, GSAP, keyframes, transitions, spring animations, scroll-driven animations, page transitions, loading states, and any task requiring motion or animation implementation.

Use this skill when creating pixel art sprites, animating sprite sheets, building tilesets for 2D games, or managing indexed color palettes. Triggers on pixel art, sprite sheet, sprite animation, tileset, tile map, pixel palette, indexed color, dithering, sub-pixel animation, NES palette, walk cycle sprite, and any task involving low-resolution raster art for games or retro aesthetics.

Use this skill when designing presentations, slide decks, or pitch materials. Triggers on "create a presentation", "design slides", "build a deck", "structure my talk", "make a pitch deck", "data visualization for slides", or any request involving slide layout, storytelling frameworks (Pyramid Principle, Hero's Journey, Problem-Solution-Benefit), narrative arc, speaker notes, or chart selection for presentations. Covers slide structure, visual hierarchy, data-driven storytelling, and deck architecture from executive summaries to conference keynotes.

Use this skill when building responsive layouts, implementing fluid typography, using container queries, or defining breakpoint strategies. Triggers on responsive design, mobile-first, media queries, container queries, fluid typography, clamp(), viewport units, grid layout, flexbox patterns, and any task requiring adaptive or responsive web design.

Use this skill when planning user research, conducting usability tests, creating journey maps, or designing A/B experiments. Triggers on user interviews, usability testing, user journey maps, A/B test design, survey design, persona creation, card sorting, tree testing, and any task requiring user experience research methodology or analysis.