Claude Skills by jeffreytse

Use when designing a customer, patient, or user experience with multiple sequential moments — a service journey, a medical procedure, a product onboarding flow, an event — to deliberately design the most intense moment and the final moment, because people's remembered evaluation of an entire experience is dominated by its peak and its ending, not by its average moment-to-moment quality or duration.

Use when auditing a product or component for accessibility compliance or when preparing for WCAG 2.1 AA certification

Use when structuring content, navigation, or feature hierarchies for a product so users can find information predictably and efficiently

Use when starting any user research study — to define the research question, select methods, write a participant screener, and set a timeline before recruiting begins.

Use when mapping end-to-end user experiences to identify pain points, emotional lows, and opportunity areas across a product or service touchpoint chain.

Use when distilling user research data into 2–4 archetypal user profiles to give the team a shared, evidence-grounded reference for design and product decisions.

Use when designing or evaluating information architecture — navigation structure, menu labels, content categorization — to align the organization with how users mentally group and label concepts.

Use when a product team needs to answer a critical design or business question through rapid prototyping and user testing in one week

Use when conducting a usability review of an interface to identify usability problems without running user tests, using Nielsen's 10 heuristics as the evaluation framework.

Use when planning or conducting usability tests to identify UI friction, task completion failures, or navigation problems with real users

Use when conducting one-on-one sessions with users to understand their goals, behaviors, mental models, and pain points — before designing a solution or after encountering an unexplained usage pattern.

Use when defining, naming, or documenting design tokens for a design system to ensure consistent visual decisions across platforms

Use when user research sessions are complete and raw notes need to be organized — to identify behavioral patterns and extract actionable insight statements the team can act on.

Use when building login, registration, or any authentication flow — to ensure users with cognitive disabilities can authenticate without being blocked by memory tests, cognitive puzzles, or disabled paste functionality.

Use when choosing colors for text, UI components, or data visualizations — to ensure sufficient contrast ratios and that color is never the sole means of conveying information.

Use when building any form — login, checkout, search, settings — to ensure all inputs are correctly labeled, errors are programmatically associated, and users can complete the form with a keyboard and screen reader.

Use when designing interactive elements — buttons, links, inputs, sliders, drag handles — to ensure visual appearance communicates the available action without requiring instructions or labels.

Use when adding dynamic content that changes without a user-triggered focus move — toast notifications, search results loading, form submission status, chat messages, or any async UI update — so screen reader users are informed of the change.

Use when building custom UI components that native HTML cannot represent — to give assistive technology the correct role, state, and property information for non-native interactive elements.

Use when adding audio or video with sound that plays automatically — to ensure users can pause, stop, or mute it without being unable to hear their screen reader or complete tasks in a noisy environment.

Use when building forms that submit legal, financial, or irreversible data — to ensure users can review, confirm, or reverse submissions, and are not asked to re-enter information they've already provided.

Use when designing interactive UI elements — buttons, links, menus, form controls — where target size, placement, and spacing affect the speed and accuracy of user interaction.

Use when building modals, drawers, route changes in SPAs, dynamic content insertion, or any interaction that moves or removes focus — to ensure keyboard focus moves predictably and is never lost.

Use when arranging UI elements to create visual hierarchy, grouping, and clarity using perceptual psychology principles

Use when simplifying navigation menus, option lists, decision points, or any interface where too many choices slow users down

Use when adding tooltips, popovers, or any content that appears on hover or focus — to ensure users can dismiss it, move their pointer over it, and that it doesn't disappear before they've read it.

Use when building interactive UI components — to ensure every action achievable with a mouse is also achievable with a keyboard alone, with no traps or dead ends.

Use when publishing video, audio, or any time-based media — to provide captions, transcripts, and audio descriptions for users who cannot hear or see the media content.

Use when designing for multiple screen sizes — to design under mobile constraints first, then progressively enhance for larger viewports, rather than adapting a desktop layout down to mobile.

Use when adding transitions, animations, or micro-interactions to a UI — to ensure every motion has a clear purpose, respects performance constraints, and does not cause harm to users with vestibular disorders.

Use when building any web page or SPA — to declare the language of the page and any inline content in a different language, so screen readers select the correct text-to-speech voice and language rules.

Use when building touch interfaces, drag-and-drop interactions, gesture-based controls, or any feature activated on mouse or touch events — to ensure users with motor disabilities can operate all functionality with a single pointer without complex gestures.

Use when building multi-page applications, SPAs with multiple routes, or any UI with repeated navigation elements — to ensure focus and input changes don't trigger unexpected page transitions, and navigation appears consistently across views.

Use when a feature, form, or settings panel has more complexity than most users need — to show only what the current step requires and reveal additional options on demand.

Use when adding animations, transitions, parallax effects, or auto-playing video to a UI — to respect users' motion sensitivity preferences and prevent content that could trigger seizures.

Use when styling text on any web page — to ensure content remains readable and functional when users resize text to 200%, zoom to 400%, or override text spacing with their own stylesheets.

Use when writing UI instructions or labels, and when building mobile or responsive interfaces — to ensure content is understandable without relying solely on shape, color, position, or orientation, and that display orientation is not unnecessarily locked.

Use when building any page with repeated header and navigation content — to let keyboard and screen reader users skip directly to the main content without tabbing through every navigation link.

Use when adding images, icons, SVGs, canvas elements, or any non-text content to a page — to ensure users who cannot see the content receive an equivalent text description.

Use when building carousels, auto-advancing slideshows, session management, or any content that moves, blinks, or updates automatically — to ensure users can pause, stop, or extend time-sensitive content.

Use when auditing or designing UI components to meet WCAG 2.2, Section 508, or ARIA accessibility requirements

Use when displaying tabular data — to make rows scannable, support sorting and filtering, handle bulk actions, and adapt to mobile breakpoints without destroying the data structure.

Use when designing screens that appear before content exists — first use, no-results, user-cleared state, or error — to orient users and guide the next action instead of showing a blank screen.

Use when designing system responses to user actions — form submission, data save, deletion, errors, and confirmations — to tell users what happened, what went wrong, and what to do next.

Use when designing data-entry forms — to arrange fields, labels, and actions so users complete them faster and with fewer errors, independent of accessibility requirements.

Use when organizing content, navigation, or features in a product so users can find what they need without confusion

Use when a UI action triggers a wait of 0.1 seconds or more — to communicate system progress, prevent duplicate submissions, and maintain perceived performance.

Use when choosing or designing primary navigation for a website or app — to select the right structural pattern (top nav, side nav, tabs, bottom nav) for the content depth and device context, and avoid the anti-patterns that account for the majority of navigation usability failures.

Use when designing or redesigning a user onboarding flow for a SaaS or digital product where activation rate, time-to-value, or early churn are problems.

Use when designing a search feature for a website or application — to structure the input, autocomplete, results list, and zero/no-results states so users find what they need with minimal friction.