NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
tanstack-devtools skill Helps AI agents configure the unified TanStack debugging panel for React. Useful when combining Query, Router, and AI devtools in a single view.
CX Codex +1
2,300installs
react-three-fiber-game
official skill Structures React-hosted 3D browser games and scenes using React Three Fiber and the pmndrs stack.
CX Codex GP ChatGPT
39installs
webgpu skill This skill guides WebGPU and WGSL work, from pipeline design to debugging and tuning. Use it for rendering, compute workloads, and GPU simulations.
CX Codex +1
842installs
design-mirror skill This skill reads a website’s visual language and applies it to an existing codebase. Use it when a UI needs to follow a reference site’s look.
CX Codex +1
340installs
rslib-best-practices skill Provides guidelines for building JavaScript and TypeScript libraries with Rslib. Useful when configuring outputs, declaration files, and dependency bundling.
CX Codex +1
1,000installs
sap-fiori-opa5-test-development skill Helps coding agents write and debug OPA5 integration tests for SAP Fiori Elements apps on OData V4 and V2.
CX Codex +1
551installs
mapbox-maplibre-migration skill Walks a project from MapLibre GL JS to Mapbox GL JS: package swap, imports, styles, token. Useful when self-hosted tiles or community support stop being enough.
CX Codex +1
1,400installs
mapbox-google-maps-migration skill A skill that walks an agent through porting a project from Google Maps Platform to Mapbox GL JS, with API equivalents and a migration order.
CX Codex +1
1,400installs
maplibre-cartography skill A skill of cartographic rules for MapLibre GL JS: label and icon colors, layer order, contrast. Useful when a style is new or labels vanish over imagery.
CX Codex +1
419installs
ui-refactor skill Applies systematic design guidelines to help coding agents clean up messy layouts, define spacing scales, and pick accessible color schemes.
CX Codex +1
494installs
vue-i18n-skilld skill A skill that steers your agent through vue-i18n code in Vue 3: message syntax, pluralization, date and number formats, v12 migration.
CX Codex +1
401installs
react-hook-form-zod skill A skill that walks your agent through React Hook Form with Zod validation. One schema covers the client and the server.
CX Codex +1
722installs
cloudflare-pages skill Deploys static sites and full-stack apps to Cloudflare Pages. Sets up preview builds and edge functions right from the terminal.
CX Codex +1
331installs
react-testing-library skill Guides coding agents to write user-centric component tests using accessible queries, user-event simulations, and async helpers.
CX Codex +1
1,400installs
vue-skilld skill Guides coding agents through Vue 3.6 development. Useful when creating composables, setting up Vapor Mode, or migrating code from Vue 3.4 and 3.5.
CX Codex +1
397installs
redux-toolkit skill Redux Toolkit best practices for React and Next.js applications using TypeScript. Helps structure feature slices, typed hooks, and RTK Query endpoints.
CX Codex +1
1,300installs
front-end-developer skill Turns your agent into a senior front-end developer: React, Next.js, TypeScript, Tailwind, accessibility. Useful when you want components written, not discussed.
CX Codex +1
1,300installs
tauri-development skill The skill provides guidelines for building desktop applications with Tauri. It sets coding standards across Rust and TypeScript.
CX Codex +1
1,300installs
nextjs-typescript-tailwindcss-supabase skill A skill that steers your agent toward Next.js 14, TypeScript, TailwindCSS and Supabase: server components, error handling, readable code.
CX Codex +1
1,300installs
electron-development skill A skill that gives the agent rules for building Electron desktop apps: process separation, IPC, window security.
CX Codex +1
1,300installs
alpine-js skill Guidelines for building reactive Alpine.js interfaces with minimal JavaScript. Helps generate UI components paired with Tailwind CSS, Livewire, and Ghost CMS.
CX Codex +1
1,300installs
mapkit skill A MapKit for SwiftUI reference covering maps, markers, annotations, camera state, and map features. Useful when an agent needs Apple API details.
CX Codex +1
458installs
uikit skill UIKit API reference for iOS and iPadOS development. Helps the agent query views, controllers, and Auto Layout without browsing the web.
CX Codex +1
455installs
mobile-first-design skill A skill that sets the order of UI work: design the phone screen first, then scale to tablet and desktop. Useful when layouts break on small devices.
CX Codex +1
857installs
figma-use
official skill This skill sets out how to use the Figma Plugin API through use_figma. It helps when an agent needs to change a Figma file or inspect its structure programmatically.
CX Codex GP ChatGPT
36installs
webflow-code-component:component-audit skill Reviews Webflow code components for architecture: what should be a prop, how state is wired, where slots are missing, and what breaks in Shadow DOM.
CX Codex +1
1,000installs
webflow-cli:designer-extension skill A skill that walks the agent through the whole Designer Extension loop in Webflow: pick a template, init the project, serve it locally, bundle it for upload.
CX Codex +1
1,000installs
webflow-cli:code-component skill Configures React projects and deploys custom React components to Webflow Designer using Webflow CLI. Useful when sharing code components with designers.
CX Codex +1
1,000installs
webflow-cli:troubleshooter skill Walks through Webflow CLI failures: install, auth, build and bundle errors. Useful when a command dies and the reason is unclear.
CX Codex +1
1,000installs
pwa-expert skill Turns a web app into an installable, offline-capable PWA: manifest, Service Worker, caching strategies and a custom install prompt.
CX Codex +1
544installs
webflow-code-component:component-scaffold skill Scaffolds a Webflow Code Component boilerplate with React 18+ and a .webflow.tsx definition file. Checks project dependencies before generating code.
CX Codex +1
997installs
webflow-cli:devlink skill Pulls Webflow Designer components into React and Next.js code, syncs later design edits, and shows what changed after each sync.
CX Codex +1
998installs
webflow-code-component:convert-component skill Turns an existing React component into a Webflow Code Component: reads the props, writes the .webflow.tsx definition and flags what has to change.
CX Codex +1
995installs
21st-ai skill A skill that runs the 21st AI loop from the terminal: sketch UI variants from a prompt, preview them in the browser, edit one in place, grab its code.
CX Codex +1
2,000installs
21st-cli-use skill Searches, retrieves, and installs React and shadcn components or SVG logos from the 21st.dev catalog using the 21st CLI. Activates when components.json is present.
CX Codex +1
2,000installs
ui-design-review skill Scores an interface across ten design dimensions: typography, color, spacing, hierarchy, consistency. Useful before design QA or a handoff to build.
CX Codex +1
1,100installs
appbuilder-e2e-testing skill Generates Playwright end-to-end tests for Adobe App Builder SPAs and AEM extensions. Useful when automating browser flows inside ExC Shell or setting up CI checks.
CX Codex +1
746installs
nielsen-usability-heuristics skill Audits UI components and interaction flows using Nielsen's usability heuristics. Helps spot missing feedback, confusing copy, and poor error handling.
CX Codex +1
976installs
performance-and-web-vitals skill This skill guides Lighthouse audits and Core Web Vitals fixes across LCP, CLS, and INP. It provides rules to optimize images, fonts, scripts, and layout shifts.
CX Codex +1
975installs
webflow-code-component:pre-deploy-check skill Validates Webflow Code Components before you publish: bundle size, dependencies, props, SSR and styling. Useful right before webflow library share.
CX Codex +1
988installs
1,761–1,800 of 2,909
