Skills
Practical instructions for better interface work.
12-principles-of-animationExternal
Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.
accessible-focus-states
Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.
adaptExternal
Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.
emilkowalski-animateExternal
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.
pbakaus-animateExternal
Enhance UX with purposeful animation and micro-interactions that support usability and delight.
animate-expoExternal
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
animation-on-scrollExternal
Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.
apple-designExternal
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
ask-sonnerExternal
Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters. Use when working with Sonner or troubleshooting it — toasts that don't appear, appear twice, lose their styles, ignore Tailwind classes, sit behind a modal, or don't follow dark mode.
better-accessibilityExternal
Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.
better-uiExternal
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.
bolderExternal
Increase visual impact and personality for interfaces that feel too safe, bland, or generic.
broExternal
Re-explain the previous assistant message in a much simpler, plain-language version when the last answer was too dense.
build-primitiveExternal
Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.
canvas-designExternal
Create original visual designs and art on digital canvases using design philosophy, focusing on form, space, and color.
clarifyExternal
Improve labels, microcopy, and UX messaging so interface text is clearer and easier to act on.
delightExternal
Add personality and memorable moments through thoughtful interaction details and emotional UX touches.
design-labExternal
Interactive design exploration workflow: conduct interviews, generate variants, and refine UI designs through feedback.
distillExternal
Simplify noisy interfaces by removing non-essential complexity and restoring clear visual focus.
find-animation-opportunitiesExternal
Find high-conviction opportunities for useful interface motion while rejecting animation that adds noise or slows users down.
form-field-validation-timing
Validate at the right moment — not on every keystroke, not only on submit.
generating-sounds-with-aiExternal
Audit Web Audio API code for procedural sound synthesis quality, UX decisions, and parameter best practices.
gsapExternal
Use when implementing motion with GSAP and you want practical animation structure and sequencing guidance.
gsap-coreExternal
Official GSAP core API guidance for gsap.to(), from(), easing, stagger, matchMedia, and responsive or reduced-motion animation patterns.
gsap-pluginsExternal
Official GSAP plugin guidance for Flip, Draggable, ScrollSmoother, SplitText, SVG tools, CustomEase, and gsap.registerPlugin() usage.
gsap-scrolltriggerExternal
Official ScrollTrigger guidance for scroll-linked animation, pinning, scrub, batch triggers, and horizontal containerAnimation patterns.
gsap-scrolltrigger-storytellingExternal
Use when building scroll-based storytelling sections with GSAP ScrollTrigger.
gsap-webExternal
GSAP guidance for code-driven web motion, including timelines, ScrollTrigger, SplitText, Flip, and smooth-scroll synchronization.
brutalist-skillExternal
Raw, mechanical interface direction mixing Swiss print structure with terminal-inspired brutalist aesthetics.
interaction-designExternal
Design and implement microinteractions, motion design, transitions, and user feedback patterns for delightful user experiences.
interface-designExternal
Specialized skill for interface design: dashboards, admin panels, and SaaS apps. Focused on craft and consistency.
landing-pageExternal
Use when designing or implementing a landing page with strong hierarchy, conversion flow, and visual pacing.
landing-page-designExternal
Build high-converting landing pages with intake questions, page structure, conversion copy, SEO, and a disciplined visual system.
link-purposeExternal
Compatibility listing for link-purpose installs from AccessLint's marketplace skill set.
make-interfaces-feel-betterExternal
Design engineering principles for making interfaces feel polished, with focus on micro-interactions, typography, and visual details.
marquee-loopExternal
Use when building looping marquees that need steady rhythm, spacing, and performance awareness.
mastering-animate-presenceExternal
Audit Motion and Framer Motion exit/presence patterns with practical fixes for AnimatePresence usage.
matterjsExternal
Use when building physics-driven interactions and layout behaviors with Matter.js.
micro-interactionExternal
UI motion guidance for hover and press feedback, toggles, toasts, drawers, modals, list transitions, and shared-element interactions.
page-transition-animationExternal
Page and route transition patterns using the View Transitions API and Framer Motion, including reliable Next.js App Router exits.
pressed-button-feedback
Give every interactive control an immediate, physical-feeling response to a press.
pricing-pageExternal
Use when building a pricing page with clear plan comparison, emphasis, and conversion-oriented layout.
mattpocock-prototypeExternal
Builds throwaway prototypes to answer design or logic questions quickly.
emilkowalski-prototypeExternal
Build multiple genuinely different UI variants behind a visual picker so the strongest direction can be evaluated and promoted.
ramsExternal
Real-time design feedback skill focused on accessibility, spacing, typography, contrast, and component quality.
react-router-framework-modeExternal
React Router framework-mode patterns for loaders, actions, middleware, route modules, and full-stack rendering flows.
redesign-skillExternal
Audit and upgrade existing interfaces to premium visual quality while preserving product functionality.
refine-liveExternal
Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.
review-animationsExternal
Review animation quality, timing, and motion consistency with a production-critical eye.
scroll-worldExternal
Build an immersive scroll-scrubbed 3D world landing page for any brand with Higgsfield-generated scenes, seamless camera clips, and a portable scroll-scrub engine.
shapeExternal
Plan feature UX before coding via a structured design interview that produces an actionable design brief.
sounds-on-the-webExternal
Audit interface sound feedback for UX quality, accessibility, and practical implementation patterns.
swiftui-ui-patternsExternal
Best practices and example-driven guidance for building SwiftUI views and components. Includes tab architecture and screen composition.
threejs-fundamentalsExternal
Three.js scene setup guidance for cameras, renderer configuration, object hierarchy, and transforms.
threejs-interactionExternal
Three.js interaction patterns for raycasting, controls, pointer input, and object selection.
transitions-devExternal
Production-ready CSS transition patterns for web apps, with drop-in snippets for cards, modals, dropdowns, panels, and page transitions.
variantExternal
Answers which of these rather than is this right. Builds several genuinely different versions of one piece of UI behind a picker in the real page, so you can flip between them and promote the one that wins.
vueExternal
Vue 3 Composition API and reactivity guidance for SFCs, script setup macros, and built-in components.
vuejs-ai-vue-router-best-practicesExternal
Routing architecture and navigation patterns for maintainable Vue Router applications.
antfu-vue-router-best-practicesExternal
Vue Router 4 patterns covering navigation guards, route params, and route lifecycle interactions.