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

nextjs-turbopack affaan-m skill This skill covers Turbopack in Next.js 16+, when webpack may be needed, and the middleware.ts to proxy.ts change. Use it while debugging development builds or checking a version upgrade. Claude Code CX Codex Cursor +1 4,900installs design-system affaan-m skill Builds a design system out of the styles already in your repo, or audits them: tokens, a ten-point UI score, and a check for generic AI styling. Claude Code CX Codex Cursor +1 4,900installs next-partial-prefetching-optimizer vercel skill Tunes Next.js 16.3+ client link prefetching under Partial Prefetching. Balances instant navigation against deferred data reads before the user clicks. Claude Code CX Codex Cursor +1 2,300installs better-typography jakubkrehel skill Reviews interface typography and applies fixes through the project’s styling system. Use it to check text hierarchy, wrapping, truncation and punctuation. Claude Code CX Codex Cursor +1 33,800installs react-performance affaan-m skill A performance optimization skill for React 18/19 and Next.js. It helps coding agents spot network waterfalls, trim client bundle sizes, and tune Server Components during code review. Claude Code CX Codex Cursor +1 4,800installs remotion-video-creation affaan-m skill This skill gives coding agents Remotion guidance for React video work, from animation and audio to captions, charts, and transitions. Use it while building or editing a Remotion project. Claude Code CX Codex Cursor +1 4,800installs react-patterns affaan-m skill A skill for Claude and other AI editors that steers the agent toward idiomatic React 18/19: hooks discipline, server/client boundaries, forms, data fetching. Claude Code CX Codex Cursor +1 4,800installs stitch::code-to-design official google-labs-code skill Moves an existing frontend into Stitch by extracting standalone HTML and a design system, then uploading both to a project. Useful when bringing pages or components into Stitch for further work. Claude Code CX Codex Cursor +1 10,100installs baseline-ui ibelick skill Cleans up AI-generated UI code by fixing layout issues, typography, spacing, and animations. Useful for a fast frontend polish pass before merging. Claude Code CX Codex Cursor +1 24,100installs chrome-devtools official github skill Controls a live Chrome browser through Chrome DevTools MCP for page actions, debugging, and performance traces. Use it when an agent needs to inspect a web interface. GitHub Copilot 15,258installs build-mcp-app official Anthropic skill Learn to add interactive forms, pickers and visual widgets to an MCP server. Use it when text or JSON alone is not enough for the task. Claude Code 6,458installs ui-demo affaan-m skill Records demo videos of a web app with Playwright: visible cursor, steady pacing, a story-shaped flow. Handy for onboarding clips and stakeholder walkthroughs. Claude Code CX Codex Cursor +1 4,700installs react-testing affaan-m skill A skill for writing React component, hook and page tests with React Testing Library, Vitest or Jest, MSW network mocks and axe accessibility assertions. Claude Code CX Codex Cursor +1 4,700installs vite-patterns affaan-m skill This skill guides Vite configuration, plugins, HMR, environment variables, and builds. Use it when working with vite.config.ts or a Vite project. Claude Code CX Codex Cursor +1 4,700installs frontend-a11y affaan-m skill Accessibility patterns for React and Next.js covering forms, ARIA, keyboard input, and focus. Use it during implementation or code review. Claude Code CX Codex Cursor +1 4,700installs brand-landingpage Travis D. Elliott skill This skill interviews you about the product and its visual direction, then builds a landing page through Stitch. Use it when there’s no established design yet. Claude Code CX Codex Cursor 39,476installs vite Anthony Fu skill This skill covers Vite configuration, plugin development, SSR builds, and the Vite 8 move to Rolldown. Use it with vite.config.ts work. Claude Code CX Codex Cursor +1 39,800installs stitch::upload-to-stitch official google-labs-code skill Uploads local images, mockups, extracted HTML, and design markdown to a Stitch project over HTTP, bypassing MCP base64 token limits. Claude Code CX Codex Cursor +1 9,900installs stitch::extract-static-html official google-labs-code skill This skill saves a rendered app page as a standalone HTML file with CSS and images embedded. Use it to share a static view or prepare a page for Stitch. Claude Code CX Codex Cursor +1 9,900installs motion-advanced jeff skill Advanced gesture and animation patterns for React and Next.js. Guides your coding agent through drag-and-drop, SVG drawing, and imperative useAnimate sequences. Claude Code CX Codex Cursor +1 4,600installs make-interfaces-feel-better affaan-m skill This skill helps review and refine interface details such as spacing, typography, interaction states, and motion. Use it when a component feels unfinished or visually off. Claude Code CX Codex Cursor +1 4,600installs dart-flutter-patterns affaan-m skill Copy-paste Dart and Flutter patterns: null safety, state, navigation, networking. Useful when you write or review Flutter code. Claude Code CX Codex Cursor +1 4,600installs documentation-lookup affaan-m skill Fetches live library and framework documentation via the Context7 MCP server instead of stale training data. Helps get accurate API methods and configuration examples. Claude Code CX Codex Cursor +1 4,600installs motion-foundations jeff skill Defines motion tokens, spring presets, performance rules and prefers-reduced-motion support for motion/react. The foundation other motion skills inherit from. Claude Code CX Codex Cursor +1 4,600installs motion-patterns jeff skill A skill with reusable animation patterns for React and Next.js. Use it for buttons, modals, toast notifications, page transitions, scroll reveals, and layout changes. Claude Code CX Codex Cursor +1 4,600installs better-colors jakubkrehel skill Audits color systems, generates ramps, and maps semantic tokens to roles. Use it when hardcoded hex values pile up or text contrast needs verifiable measurement. Claude Code CX Codex Cursor +1 32,200installs angular-developer affaan-m skill Scaffolds Angular code tailored to your project version, guides reactivity with Signals, and verifies builds with the CLI. Claude Code CX Codex Cursor +1 4,500installs benchmark affaan-m skill This skill measures page, API, and build performance, then compares results before and after a change. Use it to check a release or investigate reports that a page feels slow. Claude Code CX Codex Cursor +1 4,500installs nuxt4-patterns affaan-m skill A skill for Nuxt 4 work: hydration safety, route rules, lazy loading and SSR-safe data fetching with useFetch and useAsyncData. Claude Code CX Codex Cursor +1 4,500installs swiftui-patterns affaan-m skill Guides AI agents on modern SwiftUI architecture: @Observable state, type-safe navigation, and view performance. Useful when building or reviewing iOS and macOS UI. Claude Code CX Codex Cursor +1 4,500installs compose-multiplatform-patterns affaan-m skill Patterns for Compose Multiplatform and Jetpack Compose in KMP projects, covering state, navigation, theming, performance, and platform-specific UI. Claude Code CX Codex Cursor +1 4,500installs verify react skill Validates code changes against React repository requirements before committing. Runs Prettier, linter, Flow type checks, and tests. Claude Code CX Codex Cursor +1 1,200installs web-design-reviewer official github skill This skill inspects a running website, spots layout, responsive, and accessibility issues, and can fix them in the source code. Use it when a UI review should lead to verified code changes. GitHub Copilot 13,957installs better-layout jakubkrehel skill A skill that sets grouping, alignment, reading order and responsive structure, then stress-tests the result by resizing, translating and mirroring it for RTL. Claude Code CX Codex Cursor +1 30,400installs better-interface jakubkrehel skill Runs a cross-discipline interface review covering accessibility, layout, copy, typography, color, and UI polish into one ranked report. Claude Code CX Codex Cursor +1 29,700installs vue Anthony Fu skill This skill guides agents through Vue 3 Composition API, script setup, and reactivity. Use it when writing Vue SFCs or built-in component flows. Claude Code CX Codex Cursor +1 35,800installs better-accessibility jakubkrehel skill Reviews an interface against WCAG 2.2 and fixes issues in the project’s styling system. Use it to check keyboard navigation and screen-reader behavior. Claude Code CX Codex Cursor +1 29,200installs better-writing jakubkrehel skill Writes and reviews UI copy, from button labels to errors and empty states. It keeps product vocabulary consistent and guides users to the next step. Claude Code CX Codex Cursor +1 28,700installs game-engine official github skill Guides GitHub Copilot when building browser games and game engines with HTML5 and JavaScript. Use it for 2D or 3D rendering, physics, collisions, and controls. GitHub Copilot 13,140installs flags react skill This skill runs React's feature-flag command and explains the results. Use it to compare release channels when a feature behaves differently between them. Claude Code CX Codex Cursor +1 1,100installs