Skills
Instructions your agent can follow for layout, type, motion, forms and more.
203 skills
Results
Figma Implement Motionby figma
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`.
MotionExternalGitHub stars: 2.1K
Figma Swiftuiby figma
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.
VisualExternalGitHub stars: 2.1K
Figma Useby figma
Mandatory prerequisite before every use_figma call — plugin API rules for creating, editing, and inspecting Figma files through MCP.
Design SystemsExternalGitHub stars: 2.1K
Figma Use Figjamby figma
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.
VisualExternalGitHub stars: 2.1K
Figma Use Motionby figma
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.
MotionExternalGitHub stars: 2.1K
Figma Use Slidesby figma
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.
VisualExternalGitHub stars: 2.1K
Fixing Accessibilityby ibelick
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.
AccessibilityExternalGitHub stars: 10.4K
Fixing Metadataby ibelick
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.
Design SystemsExternalGitHub stars: 10.4K
Fixing Motion Performanceby ibelick
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.
MotionExternalGitHub stars: 10.4K
Frontend Designby anthropics
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics.
VisualExternalGitHub stars: 184.8K
Frontend Slidesby zarazhangrui
Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.
MotionExternalGitHub stars: 31.6K
Frontend Ui Engineeringby addyosmani
Frontend UI engineering guidance covering component architecture, responsive design, accessibility, and maintainable implementation patterns.
LayoutExternalGitHub stars: 111.7K
Full Output Enforcementby Leonxlnx
Enforces complete, non-truncated code output and blocks placeholder or half-finished responses.
LayoutExternalGitHub stars: 105.4K
Generate Project Planby figma
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.
LayoutExternalGitHub stars: 2.1K
Generating Sounds with Aiby raphaelsalaja
Audit Web Audio API code for procedural sound synthesis quality, UX decisions, and parameter best practices.
InteractionExternalGitHub stars: 42
Glassmorphismby iart-ai
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.
MotionExternalGitHub stars: 64
Gpt Tasteby Leonxlnx
High-agency UX/UI skill with strict layout variance, typography, and GSAP motion engineering constraints.
TasteExternalGitHub stars: 105.4K
Gsapby MengTo
Use when implementing motion with GSAP and you want practical animation structure and sequencing guidance.
MotionExternalGitHub stars: 7.1K
Gsap Coreby greensock
Official GSAP core API guidance for gsap.to(), from(), easing, stagger, matchMedia, and responsive or reduced-motion animation patterns.
MotionExternalGitHub stars: 17.5K
Gsap Frameworksby greensock
Official GSAP guidance for Vue, Nuxt, Svelte, and SvelteKit lifecycle setup, scoped selectors, and cleanup on unmount.
MotionExternalGitHub stars: 17.5K
Gsap Performanceby greensock
Official GSAP performance guidance for compositor-friendly transforms, quickTo, stagger batching, and smooth 60fps animation.
MotionExternalGitHub stars: 17.5K
Gsap Pluginsby greensock
Official GSAP plugin guidance for Flip, Draggable, ScrollSmoother, SplitText, SVG tools, CustomEase, and gsap.registerPlugin() usage.
MotionExternalGitHub stars: 17.5K
Gsap Reactby greensock
Official GSAP guidance for React and Next.js with useGSAP, refs, gsap.context(), contextSafe callbacks, and SSR-safe cleanup.
MotionExternalGitHub stars: 17.5K
Gsap Scrolltriggerby greensock
Official ScrollTrigger guidance for scroll-linked animation, pinning, scrub, batch triggers, and horizontal containerAnimation patterns.
MotionExternalGitHub stars: 17.5K
Gsap Scrolltrigger Storytellingby MengTo
Use when building scroll-based storytelling sections with GSAP ScrollTrigger.
MotionExternalGitHub stars: 7.1K
Gsap Timelineby greensock
Official GSAP timeline guidance for sequencing, position parameters, labels, nesting, and playback control with gsap.timeline().
MotionExternalGitHub stars: 17.5K
Gsap Utilsby greensock
Official gsap.utils guidance for clamp, mapRange, snap, distribute, selector scoping, and other animation math helpers.
MotionExternalGitHub stars: 17.5K
Gsap Webby iart-ai
GSAP guidance for code-driven web motion, including timelines, ScrollTrigger, SplitText, Flip, and smooth-scroll synchronization.
MotionExternalGitHub stars: 64
Hardenby pbakaus
Make interfaces production-ready with robust empty states, edge cases, errors, onboarding, and i18n resilience.
Design SystemsExternalGitHub stars: 95.1K
Human Reviewby petergyang
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.
TasteExternalGitHub stars: 1.4K
Image to Code Skillby Leonxlnx
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.
VisualExternalGitHub stars: 105.4K
Imagegen Frontend Mobileby Leonxlnx
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.
VisualExternalGitHub stars: 105.4K
Imagegen Frontend Webby Leonxlnx
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.
VisualExternalGitHub stars: 105.4K
Improve Reactby millionco
Survey a React codebase using React Doctor's findings, then produce prioritized audits and self-contained implementation plans without modifying source code.
PerformanceExternalGitHub stars: 15.1K
Improve Uiby ibelick
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.
VisualExternalGitHub stars: 10.4K
Landing Pageby MengTo
Use when designing or implementing a landing page with strong hierarchy, conversion flow, and visual pacing.
VisualExternalGitHub stars: 7.1K
Landing Page Designby elayadesign
Build high-converting landing pages with intake questions, page structure, conversion copy, SEO, and a disciplined visual system.
VisualExternalGitHub stars: 12K
Lottie Animationby iart-ai
Lottie and dotLottie integration guidance for playback control, interactivity, runtime theming, and cross-platform export workflows.
MotionExternalGitHub stars: 64
Marquee Loopby MengTo
Use when building looping marquees that need steady rhythm, spacing, and performance awareness.
MotionExternalGitHub stars: 7.1K
Masked Revealby MengTo
Use when revealing content with masked motion, clipped transitions, or layered entrances.
MotionExternalGitHub stars: 7.1K
Mastering Animate Presenceby raphaelsalaja
Audit Motion and Framer Motion exit/presence patterns with practical fixes for AnimatePresence usage.
MotionExternalGitHub stars: 42
Matterjsby MengTo
Use when building physics-driven interactions and layout behaviors with Matter.js.
MotionExternalGitHub stars: 7.1K
Micro Interactionby iart-ai
UI motion guidance for hover and press feedback, toggles, toasts, drawers, modals, list transitions, and shared-element interactions.
InteractionExternalGitHub stars: 64
Morphing Iconsby raphaelsalaja
Build icon components that morph between SVG shapes with smooth, line-based transformation.
MotionExternalGitHub stars: 42
Next Cache Componentsby vercel
Enable Cache Components in a Next.js app and resolve blocking routes surfaced during adoption.
PerformanceExternalGitHub stars: 143.2K
Nitroby antfu
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.
LayoutExternalGitHub stars: 6K
Nuxtby antfu
Nuxt full-stack Vue framework guidance for SSR, auto-imports, file-based routing, and server routes.
LayoutExternalGitHub stars: 6K
Optimizeby pbakaus
Diagnose and improve interface performance across rendering, motion smoothness, assets, and load speed.
PerformanceExternalGitHub stars: 95.1K
Page Transition Animationby iart-ai
Page and route transition patterns using the View Transitions API and Framer Motion, including reliable Next.js App Router exits.
MotionExternalGitHub stars: 64
Performanceby addyosmani
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".
PerformanceExternalGitHub stars: 3K
Pick Ui Libraryby emilkowalski
Choose an opinionated, trusted library for common frontend tasks including components, motion, charts, interaction, state, and styling.
LayoutExternalGitHub stars: 51.4K
Piniaby antfu
Pinia state management best practices for type-safe Vue stores, getters, and actions.
Design SystemsExternalGitHub stars: 6K
Playwright Cliby microsoft
Official Playwright CLI skill for browser automation, test generation, tracing, and session-driven end-to-end testing workflows.
LayoutExternalGitHub stars: 14.8K
Pnpmby antfu
pnpm package manager guidance for strict dependency resolution, workspaces, catalogs, patches, and overrides.
LayoutExternalGitHub stars: 6K
Prefer Container Queriesby flornkm
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.
LayoutExternalGitHub stars: 115
Pricing Pageby MengTo
Use when building a pricing page with clear plan comparison, emphasis, and conversion-oriented layout.
VisualExternalGitHub stars: 7.1K
Progressive Blurby MengTo
Use when applying blur transitions or layered depth effects that need to feel smooth and controlled.
VisualExternalGitHub stars: 7.1K
Prototypeby mattpocock
Builds throwaway prototypes to answer design or logic questions quickly.
LayoutExternalGitHub stars: 306.5K
Prototypeby emilkowalski
Build multiple genuinely different UI variants behind a visual picker so the strongest direction can be evaluated and promoted.
LayoutExternalGitHub stars: 51.4K
Pseudo Elementsby raphaelsalaja
Audit CSS pseudo-elements and View Transitions usage for hover effects, decorative layers, and transitions.
MotionExternalGitHub stars: 42