NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
vercel-optimize skill A skill that audits Vercel spend and speed: it gathers usage and route metrics first, then recommends code and config changes.
CX Codex +1
111,200installs
frontend-ui-engineering skill This skill guides an agent through accessible, responsive UI work. Use it when building pages, components, layouts, or interface state.
CX Codex +1
67,400installs
performance-optimization skill An agent skill that measures before it changes code: Core Web Vitals budgets, N+1 queries, missing indexes and slow endpoints.
CX Codex +1
65,200installs
ai-sdk skill Teaches your coding agent to use the Vercel AI SDK accurately. It forces the model to read installed package docs instead of relying on memory.
CX Codex +1
66,100installs
browser-testing-with-devtools skill Connects your coding agent to Chrome via DevTools MCP. Helps inspect the live DOM, catch console errors, check network payloads, and visually verify UI fixes.
CX Codex +1
58,600installs
mobile-native skill Strips the tells that give a web app away on a phone: sticky hover, tap highlight flash, the 100vh bug.
CX Codex +1
86,600installs
next-dev-loop skill Checks that an edit to your Next.js app actually works in a running app, not just that it compiles. Built for the next dev loop.
CX Codex +1
22,200installs
next-cache-components-adoption skill Enables Cache Components in a Next.js app and works through blocking prerender errors. Use it when moving to cacheComponents: true.
CX Codex +1
21,300installs
next-cache-components-optimizer skill Optimizes Next.js App Shell UI on hard and soft navigations. It sets up failing Playwright instant() checks and guides routes to green.
CX Codex +1
18,800installs
break-ui skill This skill tests a UI with realistic edge-case data and reports what breaks. Use it to stress-test a component or screen during development.
CX Codex +1
65,400installs
schema skill This skill helps add or repair structured data on site pages. Use it to draft JSON-LD and check whether Google currently supports the rich result you want.
CX Codex +1
78,900installs
design-md
official skill Extracts screens and styles from Google Stitch via MCP to synthesize a semantic design system into a DESIGN.md file.
CX Codex +1
64,800installs
signup skill A CRO playbook for signup and trial activation. The agent audits your registration form field by field and hands back fixes in priority order.
CX Codex +1
72,300installs
popups skill Guides the design and copy of modals, slide-ins, and banners focused on conversions without hurting user experience.
CX Codex +1
70,900installs
enhance-prompt
official skill Turns rough UI concepts into detailed, structured prompts for Google Stitch. Pulls tokens from DESIGN.md and formats colors, sections, and component keywords.
CX Codex +1
58,300installs
stitch-loop
official skill Guides agents through iterative website creation with Stitch MCP. The agent reads the baton file, generates UI, integrates the page, and prepares tasks for the next run.
CX Codex +1
56,400installs
remotion-render
official skill Exports videos and static stills from Remotion projects using CLI commands.
CX Codex GP ChatGPT
3installs
remotion-create skill This skill scaffolds a Remotion project and writes the first React composition. Useful when you want video built from code instead of a timeline editor.
CX Codex +1
214,000installs
shadcn-ui
official skill Helps discover, add, and customize shadcn/ui components in React projects. Useful when building interfaces with Tailwind CSS.
CX Codex +1
53,400installs
remotion-captions skill A skill for captions in Remotion: transcribe video and audio, render and animate subtitles, import them from .srt.
CX Codex +1
211,800installs
remotion-markup skill A skill that tells your agent how to write Remotion React markup: frame-driven animation, media components, effects. Useful when you build video in code.
CX Codex +1
207,700installs
remotion-interactivity skill Guides AI coding agents to structure Remotion markup for Remotion Studio editing. Useful when building video scenes with customizable text, styles, and timing.
CX Codex +1
202,900installs
slidev skill A skill that helps the agent build technical Slidev decks: Markdown slides, highlighted code, animations, PDF export.
CX Codex +1
13,000installs
gsap-core skill This skill helps write core GSAP animations for DOM and SVG. Use it for tweens, easing, stagger effects, and reduced-motion handling.
CX Codex +1
75,800installs
stitch::react-components
official skill Turns Stitch designs into modular Vite and React components. Can also sync existing components with updated Stitch designs.
CX Codex +1
50,400installs
gsap-scrolltrigger skill Teaches AI agents to build scroll-driven animations with GreenSock ScrollTrigger, including pinned sections and scrub timelines.
CX Codex +1
72,800installs
remotion-upgrade skill Upgrades Remotion and related dependencies to the latest stable release. It keeps package versions synchronized and updates project skills automatically.
CX Codex +1
191,900installs
gsap-performance skill An official GSAP performance skill that tells your coding agent which properties to animate and which ones cause jank. Useful when animations stutter.
CX Codex +1
69,900installs
gsap-timeline skill This skill helps an agent build GSAP timelines, control timing, and manage playback. Use it for multi-step or parallel animation scenes.
CX Codex +1
69,700installs
gsap-plugins skill A skill that walks your agent through GSAP plugin registration and usage: ScrollTo, Flip, Draggable, SplitText and more. Handy when your animations already run on GSAP.
CX Codex +1
67,700installs
gsap-react skill This skill guides GSAP animation work in React and Next.js, including scoped selectors, cleanup, and client-only execution.
CX Codex +1
66,900installs
remotion-studio skill This skill starts Remotion Studio and opens a video preview. Use it to inspect a composition and follow changes while working on a video.
CX Codex +1
177,200installs
animation-performance skill A diagnostic skill that tracks down dropped frames in web animations and points to the cheaper property to animate instead.
CX Codex +1
36,800installs
gsap-utils skill This skill guides an agent through gsap.utils for ranges, random values, snapping, and collections. Use it when building GSAP animations.
CX Codex +1
65,700installs
gsap-frameworks skill Official GSAP skill for Vue, Nuxt, Svelte and SvelteKit. Tells the agent where to create animations and how to clean them up on unmount.
CX Codex +1
63,000installs
daisyui skill This skill hands your coding agent the daisyUI 5 reference, so it writes markup with real component classes instead of inventing its own.
CX Codex +1
12,100installs
next-partial-prefetching-adoption skill Adopts Partial Prefetching in a Next.js app and checks whether prefetched UI survives the change. Use it when moving routes to the new prefetch model.
CX Codex +1
9,200installs
remotion
official skill Turns Stitch project screens into a Remotion walkthrough with transitions, zoom effects, and text overlays. Useful for presenting an interface screen by screen.
CX Codex +1
41,400installs
anatomy skill Builds detailed interactive isometric SVG figures that explain technical ideas as physical machines. Useful for landing pages and docs.
CX Codex +1
21,800installs
mcp-apps-builder skill Build, modify, debug, migrate, review, and verify TypeScript MCP servers and MCP Apps with mcp-use. Use it for tools, Views, OAuth, and Skills over MCP.
CX Codex +1
32,200installs
41–80 of 2,909
