Skills
Instructions your agent can follow for layout, type, motion, forms and more.
269 skills
Results
Diagnosing Bugsby mattpocock
Systematic bug diagnosis through reproduce, minimize, hypothesize, instrument, and fix.
LayoutExternalGitHub stars: 306.5K
Domain Modelingby mattpocock
Builds and sharpens project domain models and terminology.
Design SystemsExternalGitHub stars: 306.5K
Explain Interfaceby jakubkrehel
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.
TasteExternalGitHub stars: 9.2K
Figma Code Connectby figma
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.
VisualExternalGitHub stars: 2.1K
Figma Create New Fileby figma
**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)
VisualExternalGitHub stars: 2.1K
Figma Design to Codeby figma
**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.
VisualExternalGitHub stars: 2.1K
Figma Generate Designby figma
Translate pages and multi-section layouts into Figma by discovering design system components, variables, and assembling screens section by section.
Design SystemsExternalGitHub stars: 2.1K
Figma Generate Diagramby figma
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.).
VisualExternalGitHub stars: 2.1K
Figma Generate Libraryby figma
Build or update a professional design system in Figma from a codebase, including tokens, variant sets, theming, and component libraries.
Design SystemsExternalGitHub stars: 2.1K
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 Animationsby emilkowalski
Survey a codebase's animation and motion code as a senior motion advisor, then produce prioritized audit and self-contained implementation plans. Read-only on source code - it plans improvements, it does not apply them. Use when the user asks to improve animations, audit motion, make an app feel better, or wants a roadmap of animation fixes rather than a review of a single diff.
MotionExternalGitHub stars: 51.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
Link Purposeby AccessLint
Compatibility listing for link-purpose installs from AccessLint's marketplace skill set.
AccessibilityExternalGitHub stars: 114
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
Next Cache Components Optimizerby vercel
Drive a Next.js route to instant navigation under Cache Components using a failing Playwright test and an agentic fix loop.
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
Oklch Skillby jakubkrehel
Practical OKLCH color workflow skill for building consistent, accessible, and tunable color systems in modern UIs.
VisualExternalGitHub stars: 273