NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
mapbox-web-integration-patterns skill Official Mapbox GL JS integration patterns for React, Vue, Svelte, Angular and vanilla JavaScript. Useful when a map leaks memory or refuses to initialize in the right hook.
CX Codex +1
2,600installs
svg-animation skill A skill for SVG animation: stroke draw-on, path morphing, motion along a path, animated gradients and filters. Ships a single self-contained HTML file with the vector motion inside.
CX Codex +1
2,500installs
60fps-animation skill Replaces layout-triggering CSS properties with compositor transforms and opacity for 60fps. Fixes stuttering, layout thrashing, and height: auto animations.
CX Codex +1
2,600installs
accessible-animation skill A skill that teaches your agent to honor prefers-reduced-motion: strip the motion that causes nausea, keep the fades and cues that help.
CX Codex +1
2,600installs
static-import skill Walks through ES2015 import syntax and helps you decide which modules belong in the initial bundle and which should load on demand.
CX Codex +1
1,400installs
prpl skill Teaches your coding agent the PRPL pattern to speed up initial page loads and PWA performance on slow networks.
CX Codex +1
1,400installs
tree-shaking skill A skill that teaches the agent tree shaking for JavaScript bundles, so unused exports stop shipping to users. Handy when your build pulls in code nobody calls.
CX Codex +1
1,400installs
route-based skill Tells the agent how to split a single-page app by route so only the code for the current page is fetched. Useful when routes are many and the first load drags.
CX Codex +1
1,400installs
virtual-lists skill Teaches your coding agent list virtualization and windowing techniques for React. Solves scroll stutter and reduces initial rendering time for heavy datasets.
CX Codex +1
1,500installs
third-party skill Walks you through cutting the performance cost of third-party scripts without dropping analytics, ads or widgets.
CX Codex +1
1,500installs
import-on-visibility skill A skill that teaches the agent to defer components and images until the user scrolls them into view. Useful when your first paint is dragging.
CX Codex +1
1,500installs
awwwards-animations skill A React animation skill for Awwwards and FWA-grade work: scroll effects, custom cursors, page transitions, generative art. Useful when you need smooth 60fps motion.
CX Codex +1
2,900installs
imagen skill This skill turns a text prompt into a PNG using Google Gemini, saving the file straight into your project. Handy for icons, placeholders and docs illustrations.
CX Codex +1
626installs
senior-fullstack skill Generates production-ready project templates for Next.js, FastAPI, MERN, or Django, and runs static quality audits on existing codebases.
CX Codex +1
311installs
maplibre-pmtiles-patterns skill Guides your agent on serving serverless vector and raster PMTiles in MapLibre GL JS. Useful when hosting maps on static storage like S3, Cloudflare R2, or GitHub Pages.
CX Codex +1
762installs
ui-design skill Picks a visual direction, writes the interface code, and audits what shipped for user-facing defects. Useful when you need a landing page or a dark mode pass.
CX Codex +1
1,400installs
slide-deck skill Builds React/Next.js slide decks: draft from a brief, edit an existing deck, convert PPTX, export to HTML, PDF or a Vercel URL.
CX Codex +1
342installs
mapbox-web-performance-patterns skill Mapbox GL JS performance skill that eliminates initialization waterfalls, shrinks style bundles, and replaces sluggish DOM markers with GPU layers.
CX Codex +1
2,500installs
cloud skill Wires AssistantCloud into an assistant-ui app for cross-session thread history, message feedback and file uploads.
CX Codex +1
5,000installs
gsap-web skill Helps AI coding assistants write GSAP animations, from sequenced timelines and ScrollTrigger effects to SplitText, Flip, and Lenis smooth scroll.
CX Codex +1
2,500installs
micro-interaction skill A skill for small UI motion: hover and press feedback, toggles, toasts, drawers, list reordering. Useful when an interface needs to feel responsive.
CX Codex +1
2,500installs
react skill Guidance for building and reviewing React 19 components and hooks with React Compiler in mind. Use it for compiler setup, state and Effects decisions, or component tests.
CX Codex +1
448installs
atomic-design-fundamentals skill Lays out UI components across the six Atomic Design levels, from tokens up to pages. Useful once a codebase has enough components that placement gets arbitrary.
CX Codex +1
766installs
tailwindcss skill Guides coding agents through Tailwind CSS v4 component styling using project tokens, explicit utility classes, and accessible layouts.
CX Codex +1
447installs
gpt-taste skill Forces coding agents to generate layout images, analyze their typography and spacing, and only then write frontend code.
CX Codex +1
398installs
design-taste skill This skill guides interface design and review, from visual direction to typography, layout, motion, and component states. Use it when building or polishing a web UI.
CX Codex +1
720installs
screenshot-to-code skill Turns a screenshot, mockup or Figma export into working front-end code, then renders it and compares the result against the image. Handy when the design exists but the markup does not.
CX Codex +1
1,300installs
tanstack-pacer skill A skill that tells your agent how to wire up TanStack Pacer: debouncing, throttling, rate limiting, queues and batching in one package.
CX Codex +1
3,900installs
tanstack-start skill Guides agents through building full-stack React apps with TanStack Start, streaming SSR, and type-safe server functions.
CX Codex +1
3,900installs
responsive-testing skill A skill that loads your app in Cursor's browser at five viewport widths, screenshots each one and flags broken layout.
CX Codex +1
561installs
langsmith-custom-apps skill Walks you through the LangSmith Custom App lifecycle: scaffolding, local dev, push, and handing the source to someone outside your org.
CX Codex +1
398installs
quick-game skill Scaffolds and implements a playable game prototype using Phaser or Three.js. Built for rapid gameplay testing without assets, audio, or visual polish.
CX Codex +1
866installs
meticulous-cli skill Guides AI assistants through running the Meticulous CLI to record user sessions, replay flows, and catch visual UI regressions.
CX Codex +1
8,600installs
monetize-game skill Registers your web game on Play.fun, integrates the browser SDK for rewards and leaderboards, and generates a ready-to-share play.fun URL.
CX Codex +1
862installs
typescript skill A skill with 44 rules on types, tsconfig and async code. Useful when your agent edits compiler config or untangles heavy generics.
CX Codex +1
520installs
page-transition-animation skill A skill for animating page transitions in Next.js App Router and fixing Framer Motion AnimatePresence exit animations that never fire on navigation.
CX Codex +1
2,300installs
glassmorphism skill A skill that teaches your coding agent to build frosted glass panels: blurred backdrops, lit edges, layered shadows and SVG refraction.
CX Codex +1
2,400installs
meticulous-use-session-data skill Downloads recorded Meticulous session data and network mocks covering your branch changes. Use it to inspect user interactions and retrieve API mocks for tests.
CX Codex +1
8,500installs
meticulous-test skill Runs a Meticulous test run after a frontend change, then hands the result to meticulous-review so each visual diff gets classified.
CX Codex +1
8,500installs
meticulous-iterative-dev skill Runs a frontend change step by step and replays recorded Meticulous sessions after each one, so a visual regression shows up where it started.
CX Codex +1
8,500installs
1,521–1,560 of 2,909
