Skip to main content

NeVibeCode · 75 items

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

Frontend and UI for Claude Code, Codex and Cursor: skills, plugins, subagents and slash commands, from popular to niche.

prototype Matt Pocock skill Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs webapp-testing official anthropics skill This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. Claude Code Claude.ai 186,758installs web-artifacts-builder official anthropics skill This skill builds complex claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui. Use it for interfaces with state or routing. Claude Code Claude.ai 112,122installs theme-factory official anthropics skill Applies preset color palettes and font pairs to slides, documents, and HTML pages. Use it when an artifact needs one consistent visual style. Claude Code Claude.ai 94,921installs algorithmic-art official anthropics skill Creates p5.js generative art with seeded randomness and adjustable parameters. Use it for flow fields, particle systems, and code-based visual experiments. Claude Code Claude.ai 89,081installs 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 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 tailwind-design-system Seth Hobson skill Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. Use it when a project needs shared UI patterns. Claude Code CX Codex Cursor 70,180installs 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 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 webapp-testing official github skill Tests local web apps with Playwright, covering UI behavior, forms and browser flows. Use it to investigate interface failures and capture screenshots during a test run. GitHub Copilot 12,447installs markdown-to-html official github skill This skill guides Markdown-to-HTML conversion and custom conversion scripts. Use it for HTML documentation, static sites, or rendering .md files for preview. GitHub Copilot 9,899installs 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 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 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 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 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 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 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 winui3-migration-guide official github skill This skill helps move UWP code to WinUI 3 and Windows App SDK. Use it to check API replacements, namespaces, and common Copilot mistakes. GitHub Copilot 5,700installs frontend-developer VoltAgent Community subagent This subagent builds frontend applications with React, Vue, and Angular while following the project’s existing patterns. Use it for larger UI tasks. Claude Code 40,905installs ui-ux-designer Seth Hobson subagent A subagent for interface design, wireframes, and design systems with user research and accessibility in mind. Use it for UX work in Claude Code, Codex, or Cursor. Claude Code CX Codex Cursor 27,069installs premium-frontend-ui official Utkarsh Patrikar skill Guides GitHub Copilot when building animated web interfaces. Use it for a visually distinctive landing page or interactive portfolio. GitHub Copilot 4,900installs 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 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 modern-javascript-patterns Seth Hobson skill This skill applies modern ES6+ syntax and functional patterns to JavaScript. Use it for legacy refactors, async code, and data transformation pipelines. Claude Code CX Codex Cursor 21,553installs responsive-design Seth Hobson skill Guides responsive UI work with mobile-first styles, container queries, and fluid values. Use it when pages or components need to adapt to available space. Claude Code CX Codex Cursor 20,956installs gsap-framer-scroll-animation official Utkarsh Patrikar skill This skill helps GitHub Copilot build scroll-driven motion with GSAP ScrollTrigger and Framer Motion. Use it for vanilla JS, React, or Next.js work. GitHub Copilot 3,900installs interaction-design Seth Hobson skill This skill helps design microinteractions, transitions, and feedback states. Use it when polishing a UI or building loading and gesture patterns. Claude Code CX Codex Cursor 16,146installs design-system-patterns Seth Hobson skill This skill covers design tokens, theme infrastructure, and component architecture. Use it when building UI libraries or a multi-brand design system. Claude Code CX Codex Cursor 15,953installs react-native-design Seth Hobson skill This skill guides React Native styling, navigation, and Reanimated animations. Use it when building cross-platform mobile apps or platform-specific screens. Claude Code CX Codex Cursor 15,522installs react-state-management Seth Hobson skill Helps choose and structure React state management for local, global, server, URL, and form data. Claude Code CX Codex Cursor 15,286installs react-native-architecture Seth Hobson skill A skill for Claude Code, Codex and Cursor that hands your agent project layout, navigation, native modules and offline sync patterns for React Native on Expo. Claude Code CX Codex Cursor 15,087installs accessibility-compliance Seth Hobson skill This skill guides accessibility audits and interface work involving keyboard navigation, screen readers, and forms. Use it when building against WCAG 2.2. Claude Code CX Codex Cursor 14,596installs ima-sdk-client-side official Google LLC skill This skill supports Google IMA SDK integrations for client-side video and audio ads requested through VAST or VMAP. Use it for websites, apps, and TV platforms. Claude Code Gemini CLI CX Codex 4,500installs visual-design-foundations Seth Hobson skill This skill helps define typography, color, spacing, and icon rules for a project. Use it when setting up design tokens or bringing an interface into visual consistency. Claude Code CX Codex Cursor 13,566installs web-component-design Seth Hobson skill This skill helps design reusable components for React, Vue, and Svelte. Use it for UI libraries, design systems, or legacy component refactors. Claude Code CX Codex Cursor 13,167installs ima-dai-sdk official Google LLC skill This skill guides Google IMA DAI SDK integration for loading HLS and DASH streams. Use it for livestreams or video on demand in apps and websites. Claude Code Gemini CLI CX Codex 4,300installs react-modernization Seth Hobson skill This skill upgrades React codebases, moves class components to hooks, and guides React 18 adoption. Use it when a legacy React app needs a structured migration. Claude Code CX Codex Cursor 12,625installs

1–40 of 75

Frontend is where agents most often produce code that looks fine and still ignores the project design system. Skills and rules in this topic pin down the stack (React, Next.js, Vue, Svelte, Tailwind), component conventions, accessibility and visual checks. Look at which framework version a skill targets and when it was last updated: instructions written for an old API do more harm than having none. To check the result in a real browser, pair them with a server from the browser MCP list.

More in NeVibeCode

Project sponsors

Companies that keep this analytics open

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor