Frontend and UI: skills, plugins, subagents, slash commands and mcp servers

vercel-optimize vercel-labs skill A skill that audits Vercel spend and speed: it gathers usage and route metrics first, then recommends code and config changes. Claude Code CX Codex Cursor +1 110,000installs frontend-ui-engineering addyosmani skill Enforces production standards for component architecture, WCAG 2.1 AA accessibility, and design systems. Stops AI models from defaulting to purple buttons, heavy shadows, and arbitrary spacing. Claude Code CX Codex Cursor +1 66,600installs performance-optimization addyosmani skill An agent skill that measures before it changes code: Core Web Vitals budgets, N+1 queries, missing indexes and slow endpoints. Claude Code CX Codex Cursor +1 64,500installs ai-sdk vercel 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. Claude Code CX Codex Cursor +1 66,000installs browser-testing-with-devtools addyosmani 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. Claude Code CX Codex Cursor +1 57,900installs mobile-native emilkowalski skill Strips the tells that give a web app away on a phone: sticky hover, tap highlight flash, the 100vh bug. Claude Code CX Codex Cursor +1 84,500installs next-dev-loop vercel 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. Claude Code CX Codex Cursor +1 22,000installs next-cache-components-adoption vercel skill This skill helps enable Cache Components in a Next.js app and work through route errors until the build passes. Use it when migrating an App Router project. Claude Code CX Codex Cursor +1 21,200installs next-cache-components-optimizer vercel skill Optimizes Next.js App Shell UI on hard and soft navigations. It sets up failing Playwright instant() checks and guides routes to green. Claude Code CX Codex Cursor +1 18,700installs break-ui emilkowalski 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. Claude Code CX Codex Cursor +1 63,300installs schema coreyhaines31 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. Claude Code CX Codex Cursor +1 77,800installs design-md official google-labs-code skill Extracts screens and styles from Google Stitch via MCP to synthesize a semantic design system into a DESIGN.md file. Claude Code CX Codex Cursor +1 64,700installs signup coreyhaines31 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. Claude Code CX Codex Cursor +1 71,300installs paywalls coreyhaines31 skill This skill helps plan in-app paywalls and prompts to upgrade. Use it when a product needs to explain paid features after users have experienced value. Claude Code CX Codex Cursor +1 70,100installs popups coreyhaines31 skill Guides the design and copy of modals, slide-ins, and banners focused on conversions without hurting user experience. Claude Code CX Codex Cursor +1 70,000installs enhance-prompt official google-labs-code skill Turns rough UI concepts into detailed, structured prompts for Google Stitch. Pulls tokens from DESIGN.md and formats colors, sections, and component keywords. Claude Code CX Codex Cursor +1 58,300installs stitch-loop official google-labs-code 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. Claude Code CX Codex Cursor +1 56,300installs remotion-render official Remotion skill Exports videos and static stills from Remotion projects using CLI commands. CX Codex GP ChatGPT 3installs remotion-create remotion-dev skill This skill creates a new Remotion project and prepares a video composition. Use it when an agent needs to build video with React markup. Claude Code CX Codex Cursor +1 208,800installs shadcn-ui official google-labs-code skill Helps discover, add, and customize shadcn/ui components in React projects. Useful when building interfaces with Tailwind CSS. Claude Code CX Codex Cursor +1 53,400installs remotion-captions remotion-dev skill A skill for captions in Remotion: transcribe video and audio, render and animate subtitles, import them from .srt. Claude Code CX Codex Cursor +1 206,600installs remotion-markup remotion-dev 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. Claude Code CX Codex Cursor +1 202,600installs remotion-interactivity remotion-dev skill Guides AI coding agents to structure Remotion markup for Remotion Studio editing. Useful when building video scenes with customizable text, styles, and timing. Claude Code CX Codex Cursor +1 197,900installs gsap-core greensock skill This skill helps write core GSAP animations for DOM and SVG. Use it for tweens, easing, stagger effects, and reduced-motion handling. Claude Code CX Codex Cursor +1 74,600installs stitch::react-components official google-labs-code skill Turns Stitch designs into modular Vite and React components. Can also sync existing components with updated Stitch designs. Claude Code CX Codex Cursor +1 50,400installs gsap-scrolltrigger greensock skill Teaches AI agents to build scroll-driven animations with GreenSock ScrollTrigger, including pinned sections and scrub timelines. Claude Code CX Codex Cursor +1 71,600installs remotion-upgrade remotion-dev skill Upgrades Remotion and related dependencies to the latest stable release. It keeps package versions synchronized and updates project skills automatically. Claude Code CX Codex Cursor +1 186,800installs gsap-performance greensock skill An official GSAP performance skill that tells your coding agent which properties to animate and which ones cause jank. Useful when animations stutter. Claude Code CX Codex Cursor +1 68,800installs gsap-timeline greensock skill This skill helps an agent build GSAP timelines, control timing, and manage playback. Use it for multi-step or parallel animation scenes. Claude Code CX Codex Cursor +1 68,500installs gsap-plugins greensock 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. Claude Code CX Codex Cursor +1 66,600installs gsap-react greensock skill This skill guides GSAP animation work in React and Next.js, including scoped selectors, cleanup, and client-only execution. Claude Code CX Codex Cursor +1 65,800installs remotion-studio remotion-dev 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. Claude Code CX Codex Cursor +1 172,100installs animation-performance emilkowalski skill A diagnostic skill that tracks down dropped frames in web animations and points to the cheaper property to animate instead. Claude Code CX Codex Cursor +1 34,700installs gsap-utils greensock skill This skill guides an agent through gsap.utils for ranges, random values, snapping, and collections. Use it when building GSAP animations. Claude Code CX Codex Cursor +1 64,700installs gsap-frameworks greensock 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. Claude Code CX Codex Cursor +1 62,000installs daisyui saadeghi skill This skill hands your coding agent the daisyUI 5 reference, so it writes markup with real component classes instead of inventing its own. Claude Code CX Codex Cursor +1 12,000installs next-partial-prefetching-adoption vercel 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. Claude Code CX Codex Cursor +1 9,200installs remotion official google-labs-code skill Turns Stitch project screens into a Remotion walkthrough with transitions, zoom effects, and text overlays. Useful for presenting an interface screen by screen. Claude Code CX Codex Cursor +1 41,300installs anatomy wheresryan22 skill Builds detailed interactive isometric SVG figures that explain technical ideas as physical machines. Useful for landing pages and docs. Claude Code CX Codex Cursor +1 21,100installs mcp-apps-builder mcp-use 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. Claude Code CX Codex Cursor +1 32,200installs