Skills
Instructions your agent can follow for layout, type, motion, forms and more.
120 skills
Results
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
Masked Revealby MengTo
Use when revealing content with masked motion, clipped transitions, or layered entrances.
MotionExternalGitHub stars: 7.1K
Morphing Iconsby raphaelsalaja
Build icon components that morph between SVG shapes with smooth, line-based transformation.
MotionExternalGitHub stars: 42
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
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
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
React Router Framework Modeby remix-run
React Router framework-mode patterns for loaders, actions, middleware, route modules, and full-stack rendering flows.
LayoutExternalGitHub stars: 134
Refine Liveby Jakubantalik
Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.
MotionExternalGitHub stars: 5.9K
Scroll Worldby oso95
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.
VisualExternalGitHub stars: 10.7K
Seoby addyosmani
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".
PerformanceExternalGitHub stars: 3K
Shadcnby shadcn-ui
Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns.
Design SystemsExternalGitHub stars: 126.9K
Siteplane Avatar Groupby UI Skillbook
A facepile: several avatars overlapped in a row with an optional count of the people not shown.
Siteplane UI
Siteplane Bubbleby UI Skillbook
The surface for a chat message's text, with variants for sender, assistant replies and errors.
Siteplane UI
Siteplane Cardby UI Skillbook
A surface that groups related content and actions, with header, panel, footer and framed-section parts.
Siteplane UI
Siteplane Frameby UI Skillbook
A muted surface that groups raised panels with an optional header, descriptions and footer.
Siteplane UI
Siteplane Separatorby UI Skillbook
A horizontal or vertical line that divides related sections or controls.
Siteplane UI
Siteplane Timelineby UI Skillbook
A vertical list of events in time order with coloured or icon markers and an optional now line.
Siteplane UI
Siteplane Truncateby UI Skillbook
Cuts text after one line or a set number of lines with an ellipsis and shows the full text in a tooltip.
Siteplane UI
Slidesby nextlevelbuilder
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
VisualExternalGitHub stars: 142.5K
Slidevby antfu
Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.
MotionExternalGitHub stars: 6K
Smooth Shadow Ringby flornkm
Style elevated surfaces with smooth shadow ring utilities instead of combining borders or rings with shadows and creating double edges.
VisualExternalGitHub stars: 149
Spacing That Doesn't Look AI-Generatedby UI Skillbook
Use a consistent spacing scale and grouping logic instead of arbitrary padding values.
Layout
Svg Animationby iart-ai
SVG animation techniques for stroke draw-on effects, path morphing, motion paths, animated icons, gradients, and filters.
MotionExternalGitHub stars: 64
Sync Figma Tokenby firebenders
Sync design tokens between code and Figma variables with drift reporting, approval gates, safe delta apply, and persisted reports.
Design SystemsExternalGitHub stars: 27
Tailwindcssby MengTo
Use when you are implementing UI with Tailwind and want reusable, practical utility-first patterns.
LayoutExternalGitHub stars: 7.1K
Taste Skill V1by Leonxlnx
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.
VisualExternalGitHub stars: 105.4K
Text to Lottieby diffusionstudio
Turn text prompts into polished Lottie animations for motion-heavy UI work.
MotionExternalGitHub stars: 5.6K
Threejsby MengTo
Use when building 3D scenes, interactions, or WebGL-backed interface moments in Three.js.
VisualExternalGitHub stars: 7.1K
Threejs Animationby cloudai-x
Three.js animation guidance for keyframes, skeletal animation, morph targets, and animation blending.
VisualExternalGitHub stars: 3.8K
Threejs Fundamentalsby cloudai-x
Three.js scene setup guidance for cameras, renderer configuration, object hierarchy, and transforms.
VisualExternalGitHub stars: 3.8K
Threejs Geometryby cloudai-x
Three.js geometry patterns for built-in shapes, BufferGeometry, custom meshes, and instancing.
VisualExternalGitHub stars: 3.8K
Threejs Interactionby cloudai-x
Three.js interaction patterns for raycasting, controls, pointer input, and object selection.
VisualExternalGitHub stars: 3.8K
Threejs Lightingby cloudai-x
Three.js lighting guidance for light types, shadows, environment lighting, and performance tuning.
VisualExternalGitHub stars: 3.8K
Threejs Materialsby cloudai-x
Three.js material guidance for PBR, classic materials, shader materials, and material optimization.
VisualExternalGitHub stars: 3.8K
Threejs Shadersby cloudai-x
Three.js shader guidance for GLSL, ShaderMaterial, uniforms, and custom vertex and fragment effects.
VisualExternalGitHub stars: 3.8K
Threejs Texturesby cloudai-x
Three.js texture workflows for maps, UV mapping, environment maps, and texture configuration.
VisualExternalGitHub stars: 3.8K
To Prdby mattpocock
Turns a conversation into a PRD and publishes it to the issue tracker.
Design SystemsExternalGitHub stars: 306.5K
Ui Stylingby nextlevelbuilder
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.
VisualExternalGitHub stars: 142.5K
Ui Ux Pro Maxby nextlevelbuilder
Comprehensive UI/UX design intelligence with 50+ styles, 97 palettes, and 9 technology stacks for building professional interfaces.
VisualExternalGitHub stars: 142.5K
Unocssby antfu
UnoCSS atomic CSS engine guidance for rules, shortcuts, and presets like Wind, Icons, and Attributify.
VisualExternalGitHub stars: 6K
Variantby jakubkrehel
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.
VisualExternalGitHub stars: 9.2K
Vercel React Best Practicesby vercel-labs
Vercel React best practices for rendering performance, bundle efficiency, and scalable component architecture.
LayoutExternalGitHub stars: 33.2K
Vue Pinia Best Practicesby vuejs-ai
Patterns for clean, scalable state management in Vue apps using Pinia stores.
Design SystemsExternalGitHub stars: 3.2K
Web Cloneby Jane-xiaoer
网站复刻 / 克隆方法论。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.
LayoutExternalGitHub stars: 1.1K
Web Design Guidelinesby vercel-labs
Review UI code for Web Interface Guidelines compliance. Audit design, accessibility, and UX against Vercel's best practices.
VisualExternalGitHub stars: 33.2K
Web Design Guidelinesby antfu
Review UI code for web interface guideline compliance, including accessibility and UX best practices.
VisualExternalGitHub stars: 6K
Webgl Componentsby flornkm
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.
VisualExternalGitHub stars: 115
Webgl Landing Steeringby MengTo
Use when steering a landing page around a WebGL centerpiece or hero experience.
VisualExternalGitHub stars: 7.1K
Write Swiftby emilkowalski
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.
LayoutExternalGitHub stars: 51.4K