All authors
Claude Skills by jeffreytse
github.com/jeffreytse1,315 skills19 installs2,185 views
- Apply Peak End Experience DesignUse 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.Votes: 0GitHub stars: 4
- Audit AccessibilityUse when auditing a product or component for accessibility compliance or when preparing for WCAG 2.1 AA certificationVotes: 0GitHub stars: 4
- Design Information Architecture ProductUse when structuring content, navigation, or feature hierarchies for a product so users can find information predictably and efficientlyVotes: 0GitHub stars: 4
- Design Research PlanUse when starting any user research study — to define the research question, select methods, write a participant screener, and set a timeline before recruiting begins.Votes: 0GitHub stars: 4
- Design User Journey MapUse when mapping end-to-end user experiences to identify pain points, emotional lows, and opportunity areas across a product or service touchpoint chain.Votes: 0GitHub stars: 4
- Design User PersonaUse 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.Votes: 0GitHub stars: 4
- Run Card SortingUse when designing or evaluating information architecture — navigation structure, menu labels, content categorization — to align the organization with how users mentally group and label concepts.Votes: 0GitHub stars: 4
- Run Design SprintUse when a product team needs to answer a critical design or business question through rapid prototyping and user testing in one weekVotes: 0GitHub stars: 4
- Run Heuristic EvaluationUse 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.Votes: 0GitHub stars: 4
- Run Usability TestingUse when planning or conducting usability tests to identify UI friction, task completion failures, or navigation problems with real usersVotes: 0GitHub stars: 4
- Run User InterviewUse 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.Votes: 0GitHub stars: 4
- Write Design System TokenUse when defining, naming, or documenting design tokens for a design system to ensure consistent visual decisions across platformsVotes: 0GitHub stars: 4
- Write Research SynthesisUse 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.Votes: 0GitHub stars: 4
- Apply Accessible AuthenticationUse 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.Votes: 0GitHub stars: 4
- Apply Accessible ColorUse 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.Votes: 0GitHub stars: 4
- Apply Accessible FormsUse 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.Votes: 0GitHub stars: 4
- Apply AffordancesUse when designing interactive elements — buttons, links, inputs, sliders, drag handles — to ensure visual appearance communicates the available action without requiring instructions or labels.Votes: 0GitHub stars: 4
- Apply Aria Live RegionsUse 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.Votes: 0GitHub stars: 4
- Apply Aria RolesUse 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.Votes: 0GitHub stars: 4
- Apply Audio ControlsUse 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.Votes: 0GitHub stars: 4
- Apply Error PreventionUse 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.Votes: 0GitHub stars: 4
- Apply Fitts LawUse when designing interactive UI elements — buttons, links, menus, form controls — where target size, placement, and spacing affect the speed and accuracy of user interaction.Votes: 0GitHub stars: 4
- Apply Focus ManagementUse 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.Votes: 0GitHub stars: 4
- Apply Gestalt PrinciplesUse when arranging UI elements to create visual hierarchy, grouping, and clarity using perceptual psychology principlesVotes: 0GitHub stars: 4
- Apply Hicks LawUse when simplifying navigation menus, option lists, decision points, or any interface where too many choices slow users downVotes: 0GitHub stars: 4
- Apply Hover ContentUse 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.Votes: 0GitHub stars: 4
- Apply Keyboard AccessibilityUse 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.Votes: 0GitHub stars: 4
- Apply Media CaptionsUse 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.Votes: 0GitHub stars: 4
- Apply Mobile First DesignUse 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.Votes: 0GitHub stars: 4
- Apply Motion DesignUse 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.Votes: 0GitHub stars: 4
- Apply Page LanguageUse 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.Votes: 0GitHub stars: 4
- Apply Pointer AccessibilityUse 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.Votes: 0GitHub stars: 4
- Apply Predictable NavigationUse 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.Votes: 0GitHub stars: 4
- Apply Progressive DisclosureUse 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.Votes: 0GitHub stars: 4
- Apply Reduced MotionUse 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.Votes: 0GitHub stars: 4
- Apply Responsive TextUse 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.Votes: 0GitHub stars: 4
- Apply Sensory IndependenceUse 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.Votes: 0GitHub stars: 4
- Apply Skip NavigationUse 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.Votes: 0GitHub stars: 4
- Apply Text AlternativesUse 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.Votes: 0GitHub stars: 4
- Apply Timed Content ControlsUse 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.Votes: 0GitHub stars: 4
- Design Accessibility StandardsUse when auditing or designing UI components to meet WCAG 2.2, Section 508, or ARIA accessibility requirementsVotes: 0GitHub stars: 4
- Design Data TablesUse 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.Votes: 0GitHub stars: 4
- Design Empty StatesUse 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.Votes: 0GitHub stars: 4
- Design Feedback PatternsUse 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.Votes: 0GitHub stars: 4
- Design Form LayoutUse when designing data-entry forms — to arrange fields, labels, and actions so users complete them faster and with fewer errors, independent of accessibility requirements.Votes: 0GitHub stars: 4
- Design Information ArchitectureUse when organizing content, navigation, or features in a product so users can find what they need without confusionVotes: 0GitHub stars: 4
- Design Loading StatesUse when a UI action triggers a wait of 0.1 seconds or more — to communicate system progress, prevent duplicate submissions, and maintain perceived performance.Votes: 0GitHub stars: 4
- Design Navigation PatternsUse 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.Votes: 0GitHub stars: 4
- Design Onboarding FlowUse 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.Votes: 0GitHub stars: 4
- Design Search UxUse 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.Votes: 0GitHub stars: 4