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

flow react skill Runs Flow type checking in a React project and reports errors with file locations. Useful when you edit code and don't want to look up the right renderer flag each time. Claude Code CX Codex Cursor +1 1,100installs penpot-uiux-design official github skill A skill for building interfaces in Penpot via MCP tools: web, mobile, dashboards, design systems. Works with Penpot API directly from your code editor. GitHub Copilot 12,782installs transitions-dev Jakubantalik skill Twelve standalone CSS transitions for modals, dropdowns, badges, and card resizes. Helps coding agents wire production-ready UI animations without external libraries. Claude Code CX Codex Cursor +1 1,900installs design-is thedotmack skill Audits an interface against Dieter Rams' ten design principles, collects evidence with subagents, and generates a /make-plan prompt. Claude Code CX Codex Cursor +1 4,200installs nextjs-app-router-patterns Seth Hobson skill This skill covers Next.js App Router patterns for rendering, routing, and data fetching. Use it when starting an App Router project or moving from Pages Router. Claude Code CX Codex Cursor 32,529installs fixing-metadata ibelick skill Audits page metadata and fixes what's broken: titles, descriptions, canonical URLs, Open Graph, Twitter cards, icons and JSON-LD. Claude Code CX Codex Cursor +1 18,200installs core-web-vitals web-quality-skills skill A skill that measures first, then fixes LCP, INP and CLS. Handy when a page loads slowly or the layout jumps around. Claude Code CX Codex Cursor +1 31,900installs react vercel-labs skill This skill turns json-render JSON specs into React component trees. Use it when building JSON-driven UIs or defining a component catalog for generated specs. Claude Code CX Codex Cursor +1 16,300installs vue-best-practices github.com/vuejs-ai skill Enforces Vue 3 guidelines using Composition API and TypeScript. Helpful for structuring SFCs, managing reactivity, and writing composables. Claude Code CX Codex Cursor +1 42,700installs chakra-ui-builder chakra-ui skill Build responsive, accessible interfaces with Chakra UI v3, add the library to a project, and shape its theme. Useful for components, pages, and layouts. Claude Code CX Codex Cursor +1 3,500installs modern-web-guidance GoogleChrome skill A skill that searches a catalog of modern web guides and feeds the matching one to your agent. Useful when the model's training data has stale HTML, CSS or client-side JS patterns. Claude Code CX Codex Cursor +1 34,900installs playwright-best-practices currents.dev skill A reference skill for Playwright test architecture, locator design, and Page Object Model. Helps debug flaky runs, mock network requests, and audit accessibility. Claude Code CX Codex Cursor +1 98,200installs core vercel-labs skill Defines the schema and component catalog for json-render and builds the system prompt that makes an AI emit JSON UI specs. Claude Code CX Codex Cursor +1 15,000installs winui-app official openai skill This skill helps create, configure, and review WinUI 3 apps built with C# and the Windows App SDK. Use it for new projects or XAML issues. Claude Code CX Codex Cursor +1 3,200installs ui-ux-designer Seth Hobson subagent This subagent creates interfaces, wireframes, and design systems. Use it for user flows, accessibility work, and consistent UI patterns. Claude Code CX Codex Cursor 27,069installs text-to-lottie diffusionstudio skill Generates, edits, and debugs Lottie JSON animations for the local Skia Skottie player. Helps create UI microinteractions, loaders, and animated charts. Claude Code CX Codex Cursor +1 10,600installs ai-elements vercel skill React component library for AI interfaces: messages, conversation history, prompt inputs, tool call displays. Built on shadcn/ui. Claude Code CX Codex Cursor +1 20,400installs shadcn-svelte huntabyte skill A skill for working with shadcn-svelte: adding components, building interfaces, fixing styles, and debugging projects. Use it if you're building UI with shadcn-svelte on Svelte or planning to start. Claude Code CX Codex Cursor +1 6,700installs motion-design LottieFiles skill This skill guides UI animation choices, from timing and easing to choreography. Use it when planning micro-interactions, loading states, or page transitions. Claude Code CX Codex Cursor +1 19,700installs a11y-debugging ChromeDevTools skill Audits web-page accessibility with Chrome DevTools MCP, covering semantics, ARIA, focus states, keyboard navigation, tap targets and contrast. Claude Code CX Codex Cursor +1 3,600installs extract-design-system arvindrk skill This skill extracts design primitives from a public website and generates starter tokens.json and tokens.css files for your project. Claude Code CX Codex Cursor +1 130,600installs figma-generate-design official openai skill Turns an app page or multi-section layout into a Figma screen built from your published design system, not hand-drawn boxes. Claude Code CX Codex Cursor +1 2,900installs figma-create-design-system-rules official openai skill Generates project-specific design system guidelines for AI coding agents handling Figma-to-code tasks. It inspects existing components and writes rules directly into your repository. Claude Code CX Codex Cursor +1 2,900installs shadcn-vue unovue skill Teaches coding agents shadcn-vue architecture, proper CLI runners, FieldGroup form composition, and strict Tailwind semantic token rules. Claude Code CX Codex Cursor +1 5,700installs mobile-android-design Seth Hobson skill This skill guides native Android UI work with Material Design 3 and Jetpack Compose. Use it for screens, navigation, adaptive layouts, and accessibility checks. Claude Code CX Codex Cursor 24,847installs debug-optimize-lcp ChromeDevTools skill Breaks Largest Contentful Paint into four sequential stages and shows exactly where the main content load is bottlenecked. Claude Code CX Codex Cursor +1 3,500installs next-intl-add-language official github skill Adds a language to a Next.js app using next-intl by translating en.json and updating locale setup. Use it when a new locale must appear in the UI. GitHub Copilot 9,349installs design-mobile-apps designed-by-ai skill Designs mobile screens via the Sleek REST API and translates them into React Native or HTML code. Claude Code CX Codex Cursor +1 1,000,000installs nuxt Anthony Fu skill This skill equips your AI agent with Nuxt 5 knowledge: server-side rendering, file-based routing, auto-imports, and Nitro v3 deployment. Use it when building Nuxt apps, server routes, useFetch calls, middleware, or hybrid rendering. Claude Code CX Codex Cursor +1 24,100installs mobile-ios-design Seth Hobson skill Guides native iOS interface work with Apple HIG and SwiftUI patterns. Use it when building views, navigation, or adaptive layouts. Claude Code CX Codex Cursor 23,659installs vscode-ext-commands official github skill This skill guides VS Code extension command work, covering naming, visibility, localization, icons, and related contribution details. GitHub Copilot 9,000installs fluentui-blazor official github skill This skill guides Blazor work with Microsoft Fluent UI components, service providers, forms, dialogs, and themes. Use it while building or debugging a Fluent UI app. GitHub Copilot 9,000installs chakra-ui-refactor chakra-ui skill Reviews components against Chakra UI v3 patterns and converts markup from HTML, Tailwind, or styled-components. Useful for UI refactoring and accessibility audits. Claude Code CX Codex Cursor +1 2,800installs vscode-ext-localization official github skill Use it to localize user-facing text in VS Code extensions. It fits when you add translations or update existing ones. GitHub Copilot 8,900installs figma-generate-library official openai skill A skill to sync your Figma design system with your codebase. Build or update variables, components, themes, and documentation in the right order—phases matter, and skipping steps breaks the system. Claude Code CX Codex Cursor +1 2,700installs power-apps-code-app-scaffold official github skill Scaffolds a Power Apps Code App using React and TypeScript. Use it to start a project with a Power Platform connector. GitHub Copilot 8,700installs mcp-create-adaptive-cards official github skill Adds Adaptive Card response templates to MCP API plugins for visual data display in Microsoft 365 Copilot. Use it when an API response should render as a card. GitHub Copilot 8,700installs pnpm Anthony Fu skill Skill for working with pnpm, a Node.js package manager with strict dependency resolution. Use it when your project relies on workspaces, version catalogs, patches, or dependency overrides. Claude Code CX Codex Cursor +1 22,300installs interface-review jakubkrehel skill Audits pull requests, branches, and uncommitted edits for layout, UI, accessibility, and typography regressions. Keeps focus on what changed rather than pre-existing debt. Claude Code CX Codex Cursor +1 18,100installs react-vite-dashboard official google-labs-code skill This skill converts Stitch designs into production React and Vite dashboards. It maps tokens from DESIGN.md and integrates async data fetching with TanStack Query. Claude Code CX Codex Cursor +1 5,400installs