Skills
Practical instructions for better interface work.
60fps-animationExternal
Web animation performance guidance for avoiding layout thrashing and reaching smooth 60/120fps motion with compositor-friendly techniques.
accessibilityExternal
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
accessibility-diffExternal
Regression check that diffs a live page's accessibility violations against a baseline from uncommitted changes or a branch.
accessibility-scanExternal
Run the AccessLint rule engine against a live page and return a worklist of WCAG 2.2 violations grounded to DOM selectors and source locations.
accessible-animationExternal
Tiered reduced-motion patterns for CSS, GSAP, Framer Motion, Lenis, and other web animation systems.
adaptExternal
Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.
agent-browserExternal
Browser automation CLI for AI agents for navigation, form actions, extraction, screenshots, QA, and app testing.
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.
animation-systemsExternal
Use when building a coherent animation system instead of one-off motion tweaks.
antfuExternal
Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects.
antfu-designExternal
antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.
apply-design-systemExternal
Reconnect an existing Figma design to published design system components instead of detached layers, local wrappers, or one-off assets.
ascii-animationExternal
This skill should be used when the user asks to "make an ASCII animation", "build a terminal/CLI intro or loader", "convert an image or video to ASCII art", "add an ASCII shader/post-effect to a canvas or Three.js scene", "create retro/hacker text-character motion", or "animate text characters with a brightness ramp". Covers generative ASCII fields, image/video/3D-to-ASCII, and animated character art for both web and terminal.
ask-mattExternal
Router that picks the right Matt Pocock engineering flow for the current task.
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.
audit-and-fixExternal
Accessibility auditing and remediation workflow that combines detection, prioritization, and practical fixes for WCAG issues.
audit-design-systemExternal
Audit a Figma screen or component for design-system drift, including missing shared components, local overrides, and unbound tokens.
balise-ux-writingExternal
Reviews, rewrites, creates, harmonizes, and implements user-centered interface copy across design files, screenshots, product specifications, source code, localization catalogs, prototypes, and rendered applications. Use for buttons, navigation, forms, errors, empty states, onboarding, confirmations, settings, consent, notifications, help, and system feedback while preserving product behavior, terminology, voice, accessibility, localization, legal meaning, component structure, and implementation constraints.
banner-designExternal
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
beautiful-shadowsExternal
Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.
bencium-innovative-ux-designerExternal
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
best-practicesExternal
Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".
better-layoutExternal
Improve interface structure through grouping, alignment, reading order, progressive disclosure, and adaptive responsive layouts.
better-writingExternal
Improve UX writing for interface labels, errors, empty states, settings, notifications, and product voice consistency.
bragExternal
Turn a finished project into a short shareable launch video with motion, music, and copy.
brandExternal
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
brandkitExternal
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
breakExternal
Answers "does this survive?" for one component. Renders it on a page in every state real use can put it in, and hands that page over as a visual report of what broke.
budgeExternal
Use when making single-property CSS or Tailwind visual changes in Next.js App Router projects. Presents a floating control widget for live tuning before persisting.
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.
cc-figma-componentExternal
Generate variable-bound Figma component sets from component-contract definitions after the token collections exist.
cc-figma-tokensExternal
Build or update Figma Primitive and Semantic variable collections from component-contracts token files.
clarifyExternal
Improve labels, microcopy, and UX messaging so interface text is clearer and easier to act on.
cobejsExternal
Use when building lightweight animated globe or orb visuals with Cobe.
compact-landingExternal
Build compact premium landing pages with clear CTA hierarchy, quiet typography, and minimal visual noise.
company-logosExternal
Use when laying out logos, trust rows, or brand collections in a clean and balanced way.
container-linesExternal
Use when using borders and container structure as part of the visual system.
core-web-vitalsExternal
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".
create-adaptable-composableExternal
Create library-grade Vue composables that support plain values, refs, and getters with predictable reactivity.
create-anatomyExternal
Generate a visual anatomy annotation in Figma showing numbered markers on a component instance with an attribute table. Use when the user mentions anatomy, anatomy annotation, component anatomy, create anatomy, or wants to annotate a component's structural elements.
create-voiceExternal
Generate VoiceOver, TalkBack, and ARIA screen reader specs in Figma with focus order, property tables, and announcements by component state.
daisyuiExternal
Official daisyUI component library skill, providing docs, class names, examples and code examples to generate better daisyUI code.
dashboard-information-density
Fit more real information on screen without it reading as cluttered, by controlling hierarchy instead of shrinking everything uniformly.
data-table-scannability
Structure table rows and columns so the eye can scan down and across without losing its place.
designExternal
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
design-first-ui-promptingExternal
Use when you want to turn a product goal into a design-first UI prompt with clear layout, type, color, and constraint choices.
design-systemExternal
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
taste-skillExternal
Senior UI/UX frontend skill that enforces anti-slop design decisions, motion quality, and architecture discipline.
diagnosing-bugsExternal
Systematic bug diagnosis through reproduce, minimize, hypothesize, instrument, and fix.
domain-modelingExternal
Builds and sharpens project domain models and terminology.
explain-interfaceExternal
Answers how was this built about an interface. Give it a URL and name the thing you're curious about, and it reads the layers that produce the effect. Reads the whole frontend instead when you don't name a thing. From a screenshot it reconstructs rather than reads and says so.
figma-code-connectExternal
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
figma-create-new-fileExternal
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling `use_figma`. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard, /figma-create-new-file slides Q3 Review)
figma-design-to-codeExternal
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.
figma-generate-designExternal
Translate pages and multi-section layouts into Figma by discovering design system components, variables, and assembling screens section by section.
figma-generate-diagramExternal
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).
figma-generate-libraryExternal
Build or update a professional design system in Figma from a codebase, including tokens, variant sets, theming, and component libraries.
figma-implement-motionExternal
Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.
figma-swiftuiExternal
SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.
figma-useExternal
Mandatory prerequisite before every use_figma call — plugin API rules for creating, editing, and inspecting Figma files through MCP.
figma-use-figjamExternal
This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
figma-use-motionExternal
Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.
figma-use-slidesExternal
This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
fixing-accessibilityExternal
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
fixing-metadataExternal
Audit and fix page metadata including titles, meta descriptions, Open Graph, Twitter cards, canonical URLs, and JSON-LD structured data. Use when shipping new pages or fixing SEO and social preview issues.
fixing-motion-performanceExternal
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
frontend-designExternal
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics.
frontend-slidesExternal
Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.
frontend-ui-engineeringExternal
Frontend UI engineering guidance covering component architecture, responsive design, accessibility, and maintainable implementation patterns.
output-skillExternal
Enforces complete, non-truncated code output and blocks placeholder or half-finished responses.
generate-project-planExternal
Generate a FigJam project plan board from a PRD plus codebase context. Interactive flow: research → propose sections → per-section deep research → per-section content + block-shape proposal → create FigJam → skeleton → fill → diagrams → wrap. Each content block (section, nested section, intro callout, table, multi-column text, sticky column, diagram section, metadata strip) has its own subskill reference file. Use when the user asks for 'project plan in FigJam', 'interactive project plan', '/generate-project-plan', or provides a PRD and wants per-section confirmation on content + rendering.
generating-sounds-with-aiExternal
Audit Web Audio API code for procedural sound synthesis quality, UX decisions, and parameter best practices.
glassmorphismExternal
This skill should be used when the user asks to "add a glassmorphism effect", "frosted glass UI", "Apple liquid glass style", "frosted blur card", "translucent glass panel animation", "make a frosted nav bar", "build a glass modal/dialog", "animate a glass card on hover", or "add a refracting liquid-glass hero". Covers frosted translucent panels with backdrop-filter blur, edge/specular highlights, SVG liquid-glass refraction, motion on hover/scroll/enter, and accessible reduced-transparency fallbacks.
gpt-tasteskillExternal
High-agency UX/UI skill with strict layout variance, typography, and GSAP motion engineering constraints.
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-frameworksExternal
Official GSAP guidance for Vue, Nuxt, Svelte, and SvelteKit lifecycle setup, scoped selectors, and cleanup on unmount.
gsap-performanceExternal
Official GSAP performance guidance for compositor-friendly transforms, quickTo, stagger batching, and smooth 60fps animation.
gsap-pluginsExternal
Official GSAP plugin guidance for Flip, Draggable, ScrollSmoother, SplitText, SVG tools, CustomEase, and gsap.registerPlugin() usage.
gsap-reactExternal
Official GSAP guidance for React and Next.js with useGSAP, refs, gsap.context(), contextSafe callbacks, and SSR-safe cleanup.
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-timelineExternal
Official GSAP timeline guidance for sequencing, position parameters, labels, nesting, and playback control with gsap.timeline().
gsap-utilsExternal
Official gsap.utils guidance for clamp, mapRange, snap, distribute, selector scoping, and other animation math helpers.
gsap-webExternal
GSAP guidance for code-driven web motion, including timelines, ScrollTrigger, SplitText, Flip, and smooth-scroll synchronization.
hardenExternal
Make interfaces production-ready with robust empty states, edge cases, errors, onboarding, and i18n resilience.
human-reviewExternal
Open HTML, Markdown, or localhost pages in the browser so the user can edit text directly, leave anchored comments, and send all feedback back in one batch.
image-to-code-skillExternal
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
imagegen-frontend-mobileExternal
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
imagegen-frontend-webExternal
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
improve-reactExternal
Survey a React codebase using React Doctor's findings, then produce prioritized audits and self-contained implementation plans without modifying source code.
improve-uiExternal
Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent without modifying product source.
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.
lottie-animationExternal
Lottie and dotLottie integration guidance for playback control, interactivity, runtime theming, and cross-platform export workflows.
marquee-loopExternal
Use when building looping marquees that need steady rhythm, spacing, and performance awareness.
masked-revealExternal
Use when revealing content with masked motion, clipped transitions, or layered entrances.
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.
morphing-iconsExternal
Build icon components that morph between SVG shapes with smooth, line-based transformation.
next-cache-componentsExternal
Enable Cache Components in a Next.js app and resolve blocking routes surfaced during adoption.
nitroExternal
Nitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere. Use when working with nitro.config, server routes/event handlers, route rules, caching, storage, tasks, websockets, or deploying to Node/Bun/Deno/Cloudflare/Vercel.
nuxtExternal
Nuxt full-stack Vue framework guidance for SSR, auto-imports, file-based routing, and server routes.
optimizeExternal
Diagnose and improve interface performance across rendering, motion smoothness, assets, and load speed.
page-transition-animationExternal
Page and route transition patterns using the View Transitions API and Framer Motion, including reliable Next.js App Router exits.
performanceExternal
Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".
pick-ui-libraryExternal
Choose an opinionated, trusted library for common frontend tasks including components, motion, charts, interaction, state, and styling.
piniaExternal
Pinia state management best practices for type-safe Vue stores, getters, and actions.
playwright-cliExternal
Official Playwright CLI skill for browser automation, test generation, tracing, and session-driven end-to-end testing workflows.
pnpmExternal
pnpm package manager guidance for strict dependency resolution, workspaces, catalogs, patches, and overrides.
prefer-container-queriesExternal
Enforce Tailwind container queries over viewport breakpoints for responsive components. Use when writing or reviewing responsive Tailwind code, when a component needs to adapt to its available space (cards, sidebars, lists, panels, anything reused in different layouts), or when migrating sm:/md:/lg: classes to @container variants.
pricing-pageExternal
Use when building a pricing page with clear plan comparison, emphasis, and conversion-oriented layout.
progressive-blurExternal
Use when applying blur transitions or layered depth effects that need to feel smooth and controlled.
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.
pseudo-elementsExternal
Audit CSS pseudo-elements and View Transitions usage for hover effects, decorative layers, and transitions.
react-doctorExternal
Run React Doctor to detect regressions in security, performance, correctness, and architecture, with score-based quality checks.
react-native-best-practicesExternal
React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.
react-router-framework-modeExternal
React Router framework-mode patterns for loaders, actions, middleware, route modules, and full-stack rendering flows.
refactorExternal
Compatibility listing for refactor installs from AccessLint's marketplace skill set.
refine-liveExternal
Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.
responsive-breakpoint-strategy
Choose breakpoints based on where your content actually breaks, not a fixed device-width list.
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.
iannuttall-seoExternal
Use for SEO audits, rankings, keyword research, indexing, metadata, Search Console, GA4, and AI search visibility. Routes to evidence-backed reports through the local SEO CLI and MCP server.
addyosmani-seoExternal
Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization".
shadcnExternal
Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns.
slidesExternal
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
slidevExternal
Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.
smooth-shadow-ringExternal
Style elevated surfaces with smooth shadow ring utilities instead of combining borders or rings with shadows and creating double edges.
sounds-on-the-webExternal
Audit interface sound feedback for UX quality, accessibility, and practical implementation patterns.
spacing-rhythm
Use a consistent spacing scale and grouping logic instead of arbitrary padding values.
svelte-code-writerExternal
Official Svelte code-writing skill focused on modern Svelte patterns, component composition, and production-ready implementations.
svg-animationExternal
SVG animation techniques for stroke draw-on effects, path morphing, motion paths, animated icons, gradients, and filters.
sync-figma-tokenExternal
Sync design tokens between code and Figma variables with drift reporting, approval gates, safe delta apply, and persisted reports.
tailwindcssExternal
Use when you are implementing UI with Tailwind and want reusable, practical utility-first patterns.
taste-skill-v1External
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
tddExternal
Red-green-refactor workflow for building features and fixes one slice at a time.
text-to-lottieExternal
Turn text prompts into polished Lottie animations for motion-heavy UI work.
threejsExternal
Use when building 3D scenes, interactions, or WebGL-backed interface moments in Three.js.
threejs-animationExternal
Three.js animation guidance for keyframes, skeletal animation, morph targets, and animation blending.
threejs-fundamentalsExternal
Three.js scene setup guidance for cameras, renderer configuration, object hierarchy, and transforms.
threejs-geometryExternal
Three.js geometry patterns for built-in shapes, BufferGeometry, custom meshes, and instancing.
threejs-interactionExternal
Three.js interaction patterns for raycasting, controls, pointer input, and object selection.
threejs-lightingExternal
Three.js lighting guidance for light types, shadows, environment lighting, and performance tuning.
threejs-materialsExternal
Three.js material guidance for PBR, classic materials, shader materials, and material optimization.
threejs-shadersExternal
Three.js shader guidance for GLSL, ShaderMaterial, uniforms, and custom vertex and fragment effects.
threejs-texturesExternal
Three.js texture workflows for maps, UV mapping, environment maps, and texture configuration.
to-prdExternal
Turns a conversation into a PRD and publishes it to the issue tracker.
to-spring-or-not-to-springExternal
Audit animation timing choices to decide when springs versus easing curves produce better motion.
transitions-devExternal
Production-ready CSS transition patterns for web apps, with drop-in snippets for cards, modals, dropdowns, panels, and page transitions.
tsdownExternal
Bundle TypeScript and JavaScript libraries with tsdown, including declarations and multi-format builds.
turborepoExternal
Turborepo monorepo build system guidance for pipelines, caching, filtering, CI, and package boundaries.
ui-stylingExternal
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
ui-ux-pro-maxExternal
Comprehensive UI/UX design intelligence with 50+ styles, 97 palettes, and 9 technology stacks for building professional interfaces.
unocssExternal
UnoCSS atomic CSS engine guidance for rules, shortcuts, and presets like Wind, Icons, and Attributify.
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.
react-best-practicesExternal
Vercel React best practices for rendering performance, bundle efficiency, and scalable component architecture.
video-interaction-mapperExternal
Analyze a UI screen recording and map interaction states into an annotated Figma Design storyboard with extracted before/after frames.
viteExternal
Vite configuration and plugin guidance, including SSR and Vite 8 Rolldown migration patterns.
vitepressExternal
VitePress documentation site guidance for configuration, theming, and Markdown plus Vue content.
vitestExternal
Vitest testing best practices for unit tests, mocking, coverage, fixtures, and test filtering.
vueExternal
Vue 3 Composition API and reactivity guidance for SFCs, script setup macros, and built-in components.
vuejs-ai-vue-best-practicesExternal
Core Vue development best practices for component architecture, reactivity, and maintainable code.
antfu-vue-best-practicesExternal
Vue.js best practices emphasizing Composition API with script setup and TypeScript.
vue-jsx-best-practicesExternal
Guidance for writing robust, type-safe, and readable Vue components using JSX.
vue-options-api-best-practicesExternal
Best practices for structuring and scaling Vue applications built with the Options API.
vue-pinia-best-practicesExternal
Patterns for clean, scalable state management in Vue apps using Pinia stores.
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.
vuejs-ai-vue-testing-best-practicesExternal
Testing strategies for Vue applications, including component tests, integration tests, and reliability patterns.
antfu-vue-testing-best-practicesExternal
Vue testing guidance using Vitest, Vue Test Utils, component testing, mocking, and Playwright E2E.
vueuse-functionsExternal
Apply VueUse composables to build concise, maintainable Vue and Nuxt features.
wcag-audit-patternsExternal
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.
web-cloneExternal
网站复刻 / 克隆方法论。Use when the user says to clone, reproduce, or recreate a website or WebGL/Canvas/Three.js effect. Covers source-first reconstruction, repo scaffolding, reverse engineering, implementation paths, and verification for static sites, content sites, and heavy front-end experiences.
vercel-labs-web-design-guidelinesExternal
Review UI code for Web Interface Guidelines compliance. Audit design, accessibility, and UX against Vercel's best practices.
antfu-web-design-guidelinesExternal
Review UI code for web interface guideline compliance, including accessibility and UX best practices.
webgl-componentsExternal
Build small, always-on WebGL visuals (identity avatars, ambient orbs, glass and iridescent surfaces, animated textures) that ship inside a normal web app UI without wrecking performance, accessibility, SSR, or layout. Use whenever a shader-, GLSL-, or canvas-driven decorative element is added to a product UI, especially one rendered many times per page or per list; when reviewing or optimizing one; or when debugging one that renders blurry, aliased, all-black, or paints over the surrounding UI on machines without hardware acceleration.
webgl-landing-steeringExternal
Use when steering a landing page around a WebGL centerpiece or hero experience.
write-swiftExternal
How to write modern Swift well — modeling with value types, Swift 6 data-race safety and approachable concurrency (@concurrent, main-actor-by-default, actors, task groups), protocols and generics (some vs any), API design, performance and ARC, Swift Testing, macros, and the modern language features agents don't know about yet. Use when writing, reviewing, or migrating Swift, or when a concurrency error, a hang, a data race, a retain cycle, or a performance problem needs fixing.