NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
turnstile-spin skill Sets up Cloudflare Turnstile bot verification across existing frontend and backend code, including widget embedding and server-side siteverify.
CX Codex +1
93,100installs
browser-qa skill Drives a live page through a browser MCP: console errors, Core Web Vitals, forms, screenshots at three widths and axe-core. Ends with a SHIP or DO NOT SHIP verdict.
CX Codex +1
4,900installs
nextjs-turbopack 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.
CX Codex +1
5,000installs
design-system 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.
CX Codex +1
5,000installs
next-partial-prefetching-optimizer skill Tunes Next.js 16.3+ client link prefetching under Partial Prefetching. Balances instant navigation against deferred data reads before the user clicks.
CX Codex +1
2,400installs
better-typography skill Reviews interface typography and applies fixes through the project’s styling system. Use it to check text hierarchy, wrapping, truncation and punctuation.
CX Codex +1
34,200installs
react-performance 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.
CX Codex +1
4,900installs
remotion-video-creation 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.
CX Codex +1
4,900installs
react-patterns 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.
CX Codex +1
4,900installs
stitch::code-to-design
official 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.
CX Codex +1
10,200installs
baseline-ui skill Cleans up AI-generated UI code by fixing layout issues, typography, spacing, and animations. Useful for a fast frontend polish pass before merging.
CX Codex +1
24,200installs
chrome-devtools
official 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.
15,258installs
build-mcp-app
official 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.
6,458installs
ui-demo 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.
CX Codex +1
4,700installs
react-testing 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.
CX Codex +1
4,800installs
vite-patterns skill This skill guides Vite configuration, plugins, HMR, environment variables, and builds. Use it when working with vite.config.ts or a Vite project.
CX Codex +1
4,800installs
frontend-a11y skill Accessibility patterns for React and Next.js covering forms, ARIA, keyboard input, and focus. Use it during implementation or code review.
CX Codex +1
4,800installs
brand-landingpage 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.
CX Codex
39,476installs
vite skill This skill covers Vite configuration, plugin development, SSR builds, and the Vite 8 move to Rolldown. Use it with vite.config.ts work.
CX Codex +1
39,900installs
stitch::upload-to-stitch
official skill Uploads local images, mockups, extracted HTML, and design markdown to a Stitch project over HTTP, bypassing MCP base64 token limits.
CX Codex +1
9,900installs
stitch::extract-static-html
official 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.
CX Codex +1
10,000installs
motion-advanced 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.
CX Codex +1
4,600installs
make-interfaces-feel-better 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.
CX Codex +1
4,700installs
dart-flutter-patterns skill Copy-paste Dart and Flutter patterns: null safety, state, navigation, networking. Useful when you write or review Flutter code.
CX Codex +1
4,700installs
documentation-lookup 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.
CX Codex +1
4,700installs
motion-foundations skill Defines motion tokens, spring presets, performance rules and prefers-reduced-motion support for motion/react. The foundation other motion skills inherit from.
CX Codex +1
4,700installs
motion-patterns 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.
CX Codex +1
4,700installs
better-colors 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.
CX Codex +1
32,600installs
angular-developer skill Scaffolds Angular code tailored to your project version, guides reactivity with Signals, and verifies builds with the CLI.
CX Codex +1
4,500installs
benchmark 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.
CX Codex +1
4,500installs
nuxt4-patterns skill A skill for Nuxt 4 work: hydration safety, route rules, lazy loading and SSR-safe data fetching with useFetch and useAsyncData.
CX Codex +1
4,600installs
swiftui-patterns 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.
CX Codex +1
4,600installs
compose-multiplatform-patterns skill Patterns for Compose Multiplatform and Jetpack Compose in KMP projects, covering state, navigation, theming, performance, and platform-specific UI.
CX Codex +1
4,600installs
feature-flags skill A skill for working with feature flags in the React repo: where flags live, how to gate tests, and why a channel-specific test fails.
CX Codex +1
1,200installs
verify skill Validates code changes against React repository requirements before committing. Runs Prettier, linter, Flow type checks, and tests.
CX Codex +1
1,200installs
web-design-reviewer
official 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.
13,957installs
better-layout 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.
CX Codex +1
30,800installs
fixing-accessibility skill This skill audits HTML accessibility and suggests focused fixes. Use it when building forms, dialogs, interactive controls, or checking WCAG issues.
CX Codex +1
21,800installs
better-interface skill Runs a cross-discipline interface review covering accessibility, layout, copy, typography, color, and UI polish into one ranked report.
CX Codex +1
30,000installs
vue 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.
CX Codex +1
35,800installs
121–160 of 2,909
