NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
recording-browser-flow-as-test skill Walks through browser interactions step by step via MCP and outputs a clean Playwright test based on accessibility tree selectors.
CX Codex +1
406installs
three-webgl-game
official skill Scaffolds browser 3D games with plain Three.js, TypeScript, and Vite, adding Rapier physics and direct render loop control without React.
CX Codex GP ChatGPT
48installs
create-component skill Generates complete AEM components with HTL markup, Sling Models, dialogs, and tests. Extends Core Components and converts Figma designs into code.
CX Codex +1
1,000installs
isometric-animation skill A skill for isometric and 2.5D animation: stacked layers, extruded blocks, exploded diagrams and gentle camera drift. Ships as one HTML file, no build step.
CX Codex +1
1,400installs
whiteboard-animation skill Guides agents in generating VideoScribe-style whiteboard explainers with animated SVG strokes and a marker hand following the pen tip.
CX Codex +1
1,400installs
diagram-animation skill A coding-agent skill that turns a static diagram or chart into a step-by-step reveal: nodes, edges, labels, growing bars.
CX Codex +1
1,500installs
godot-ui skill Gives the agent working knowledge of Godot Control nodes, themes and common screens. Useful when building menus, HUDs or inventories.
CX Codex +1
2,700installs
screenshotting-changelog skill Builds a visual changelog for a pull request: captures pages before and after your UI edits and drops the image pairs into the PR body.
CX Codex +1
401installs
react-server-components skill A skill that teaches React Server Components: which components belong on the server and where 'use client' goes. Useful in Next.js App Router.
CX Codex +1
954installs
ui-design skill Makes the agent output a design specification — palette, fonts, layout — before it writes any interface code.
CX Codex +1
1,800installs
web-development skill A skill for implementing, debugging and shipping a web frontend once the product direction is settled. React, Vue, Vite, routing, browser checks.
CX Codex +1
1,800installs
progressive-hydration skill A skill that tells the agent how to split hydration of a server-rendered React app and defer JavaScript for non-critical sections.
CX Codex +1
952installs
updating-npm-package skill Updates npm dependencies safely by checking npmjs.com and adapting to the version jump. It runs tests on minor updates and finds migration guides for major ones.
CX Codex +1
398installs
react-native-patterns skill This skill guides an agent building React Native and Expo apps, covering navigation, platform-specific code, styling, lists, and native modules.
CX Codex +1
399installs
use-user-controlled-wallets skill A skill for building non-custodial wallets on Circle's SDK, with Google, Apple, Facebook, email OTP or PIN login and keys the user keeps.
CX Codex +1
949installs
react-selective-hydration skill Guides your coding agent in setting up selective hydration and streaming SSR in React 18+. It makes interactive parts responsive before the entire JavaScript bundle downloads.
CX Codex +1
943installs
nitro-fetch skill A skill that points AI assistants at the real react-native-nitro-fetch APIs instead of invented ones: fetch, WebSocket, TextDecoder, prefetching.
CX Codex +1
616installs
md-document skill Turns long markdown — specs, RFCs, reports, plans — into a single HTML file with a sticky table of contents, search and code-copy buttons.
49installs
frontend-design-review skill This skill reviews and creates frontend interfaces with checks for design quality, accessibility, and design-system use. Use it for UI reviews, PRs, and responsive layouts.
237installs
server-side-rendering skill A skill that walks your agent through server-side rendering in React and tells you when SSR pays off and when static or client rendering is the better call.
CX Codex +1
942installs
particle-system skill A coding-agent skill for building particle systems: confetti, snow, smoke, sparks, connected-dot backgrounds and GPU particles with Three.js Points.
CX Codex +1
1,400installs
threejs-animation skill A coding-agent skill for Three.js and React Three Fiber motion: scenes, GLTF clips, scroll-linked cameras, instancing and GPU cleanup.
CX Codex +1
1,400installs
aceternity-ui skill This skill gives your agent the Aceternity UI playbook: 100+ animated React components for Next.js with Tailwind. Useful for hero sections, parallax and 3D effects.
CX Codex +1
1,500installs
converting-css-modules-to-tailwind skill Moves one component off CSS Modules and onto Tailwind utility classes, then removes the module file and its import.
CX Codex +1
392installs
responsive-web-design skill A skill that steers your coding agent toward mobile-first CSS with Flexbox, Grid and media queries. Useful when one layout has to hold up on phones and desktops.
CX Codex +1
1,100installs
hyva-theme-list skill Walks a Magento 2 project and prints the path of every Hyvä theme it finds. Useful when the agent has to know which theme it is editing.
CX Codex +1
1,300installs
hyva-playwright-test skill Guides writing Playwright end-to-end tests for Hyvä Magento storefronts using Alpine.js. It resolves locator conflicts caused by hidden DOM elements.
CX Codex +1
1,300installs
hyva-ui-component skill This skill applies template-based Hyvä UI components to a selected theme. It helps choose a component, review its variant and copy the required files.
CX Codex +1
1,300installs
hyva-render-media-image skill Writes responsive <picture> markup for Hyvä Theme templates through the Media view model. Useful when mobile and desktop need different image sources.
CX Codex +1
1,300installs
hyva-compile-tailwind-css skill Builds Tailwind CSS stylesheets for Hyvä themes in Magento 2. It triggers production builds or watch mode when updated utility classes fail to render on the storefront.
CX Codex +1
1,300installs
hyva-child-theme skill Builds a Hyvä child theme inside a Magento 2 project, including its frontend structure and Tailwind CSS setup. Useful when starting a custom theme.
CX Codex +1
1,300installs
hyva-alpine-component skill Guides the agent through building Alpine.js components for Hyvä themes in Magento 2 that keep working when Content Security Policy is strict.
CX Codex +1
1,300installs
mapbox-store-locator-patterns skill Store locator patterns for Mapbox GL JS. Helps agents implement marker layers, synchronized lists, and Turf distance calculations without DOM overhead.
CX Codex +1
1,700installs
nextjs skill This skill guides Next.js 16 App Router work, from caching and Server Components to routing and codebase reviews.
CX Codex +1
1,200installs
electron-dev skill A skill for building Electron desktop apps with React, TypeScript and Vite: IPC, tray, PTY terminals, packaging.
CX Codex +1
305installs
storybook-stories skill Writes and edits Storybook stories the way your repo already does it. Handy once a project has plenty of stories and the naming rules live only in people's heads.
CX Codex +1
305installs
analytics-metrics skill A skill that hands your agent ready Recharts components: line, bar and pie charts plus KPI cards. Useful when a screen needs metrics, not another table.
CX Codex +1
380installs
incremental-static-rendering skill Teaches your coding agent Incremental Static Regeneration in Next.js. It enables background page updates and lazy generation without full site rebuilds.
CX Codex +1
918installs
cross-browser-testing skill A skill that picks which browsers to test, wires them into Playwright or a cloud grid, and keeps a log of known engine divergences.
CX Codex +1
1,100installs
accessibility-testing skill An accessibility skill that runs axe-core through Playwright, audits keyboard navigation and screen readers, and validates ARIA patterns.
CX Codex +1
1,100installs
1,681–1,720 of 2,909
