NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
ui-design skill A build guide and quality gate for visual interfaces, covering track selection, accessibility, responsive behavior, themes, motion, and preview delivery.
CX Codex +1
1,800installs
react skill A skill with 49 React 19 rules and a codebase review algorithm. Useful when writing components, migrating from React 18, or auditing a repo.
CX Codex +1
489installs
graphql-development skill A skill that gives the agent GraphQL guidelines: schema design, type-safe clients, React and Next.js integration. Useful when it writes resolvers and queries.
CX Codex +1
661installs
react-flow-architecture skill Architecture guidance for React Flow node-based UIs, covering state, integrations, scale and fit decisions.
CX Codex +1
529installs
rollup-bundler skill This skill gives your agent Rollup.js rules: output formats, external dependencies, tree-shaking and the plugins needed to bundle a library.
CX Codex +1
657installs
react-native-r3f skill Guides AI agents in building React Three Fiber scenes with three.js. Enforces semi-colon-free TypeScript and clean modular code.
CX Codex +1
655installs
landing-page-optimizer skill A skill that walks a landing page through six steps: audit, layout, CTAs, speed, SEO and a queued A/B test list. Useful when conversions dip and you don't know where to start.
CX Codex +1
361installs
e2e-testing skill Defines Playwright end-to-end testing patterns for full-stack React and Python applications. Enforces Page Object Model architecture and stable selectors.
CX Codex +1
1,600installs
testing-data-visualizations
official skill This skill establishes test strategies for charts, dashboards, and diagrams. It separates unit, component, visual regression, and E2E coverage without brittle pixel snapshots.
CX Codex GP ChatGPT
18installs
nextjs-server-client-components skill Helps agents choose between Server and Client Components in Next.js App Router, configure cookies, and handle searchParams without API mixing.
CX Codex +1
360installs
capacitor-expert skill A Capacitor reference skill for AI agents: architecture, CLI, plugins, framework integration and Capawesome Cloud. Useful when the agent builds or debugs a cross-platform app.
CX Codex +1
1,200installs
capacitor-app-development skill Guides coding agents through configuring, running, and troubleshooting existing Capacitor 6, 7, and 8 apps across iOS and Android.
CX Codex +1
1,200installs
inertia-rails-architecture skill Sets the server-driven patterns for Rails + Inertia.js + React and routes you to the right companion skill when you build a page, form or CRUD.
CX Codex +1
537installs
capacitor-keyboard skill Walks through on-screen keyboard behavior in Capacitor apps: iOS resize modes, keyboard event heights, Android edge-to-edge. Useful when inputs hide behind the keyboard.
CX Codex +1
1,000installs
meticulous-increase-coverage skill A Meticulous skill that traces under-covered files to a real UI action, drives it with a recorded browser session and proves the coverage gain against a baseline.
CX Codex +1
2,400installs
responsive-layout-builder skill Equips Claude Code and other AI assistants with mobile-first layout patterns, Tailwind breakpoints, CSS Grid, and container queries.
CX Codex +1
354installs
onchainkit skill A skill that teaches your coding agent the OnchainKit SDK: identity, wallet, transaction, swap and frame components with TypeScript examples.
CX Codex +1
641installs
javascript-animation skill The skill turns a brief into a short animated film where every frame is computed on an HTML canvas, then renders it to MP4. Useful when you have no image assets to work with.
CX Codex +1
532installs
image-optimization skill Guides web image optimization using AVIF and WebP formats, responsive <picture> markup, and lazy loading strategies to cut page load times.
CX Codex +1
585installs
rsbuild-v2-upgrade skill Walks a Rsbuild 1.x project through the v2 migration: dependencies, config, breaking options. Useful when a major bump would otherwise eat an evening.
CX Codex +1
476installs
shadcn-component-discovery skill A skill that searches shadcn-compatible components and registries before your agent writes custom UI from scratch.
CX Codex +1
731installs
magento-hyva-specialist skill A skill for building Magento 2 storefronts on the Hyvä theme: Alpine.js components, Tailwind CSS, GraphQL and frontend performance work.
CX Codex +1
857installs
parcel-bundler skill A skill that gives the agent a working set of Parcel conventions: entry points, TypeScript, CSS modules, caching and production builds. Useful when the project has no bundler config.
CX Codex +1
633installs
ad-creative-video skill Generates data-driven Remotion video ad templates and batch-renders variations from CSV files for A/B testing across social video feeds.
CX Codex +1
984installs
adk-frontend skill A skill with tested patterns for a frontend that talks to Botpress ADK bots: auth, client setup, generated types and action calls.
CX Codex +1
1,700installs
frontend-design-ui-ux skill This skill creates a locked design language and UX/UI specification for a feature or screen. Use it before handing the build to an engineering agent.
CX Codex +1
2,400installs
tailwind-responsive-ui skill A skill for Claude and other AI editors that helps turn Tailwind CSS interfaces into layouts that work on mobile and desktop.
CX Codex +1
461installs
soundtrack skill Writes a score for an animation in code with Web Audio, renders it to WAV, and checks that every cut lands on the beat without a startling jump in loudness.
CX Codex +1
543installs
mobile-first-design skill Enforces mobile-first responsive styling starting at 320px, 48x48px touch targets, and a 500KB total page weight cap.
CX Codex +1
568installs
tailwind-ui-refactor skill A skill that refactors HTML with Tailwind utility classes: hierarchy, spacing, typography, color. Useful when you build UI without a designer on hand.
CX Codex +1
458installs
ui-verification skill Executes targeted browser probes for focus traversal, hit targets, layout shifts, and network failures with runtime measurements.
CX Codex +1
376installs
tailwind-capacitor skill Sets up Tailwind CSS v4 in Capacitor apps and covers the mobile layout traps: safe areas, dark mode, iOS and Android variants.
CX Codex +1
955installs
launch-video skill Helps agents construct 15–60s product launch videos timed to music cues. Generates Remotion and GSAP structures with multi-aspect exports for 16:9, 9:16, and 1:1.
CX Codex +1
964installs
ecommerce-platform-specialist skill A skill that steers your agent through Shopify development: Admin API, Storefront API, Liquid themes, webhooks and checkout.
CX Codex +1
657installs
awwwards-landing-page skill Provides instructions for scaffolding a Next.js designer portfolio with GSAP and Locomotive Scroll. Useful for shipping an animated static site quickly.
CX Codex +1
1,300installs
jest-react-testing skill A skill for testing React components and hooks with Jest and React Testing Library: config, mocks, async patterns.
CX Codex +1
1,200installs
web-performance-optimization skill A skill that walks your agent through code splitting, lazy loading, caching and Core Web Vitals monitoring for web apps.
CX Codex +1
557installs
vercel-ai-sdk skill Walks your agent through Vercel AI SDK v5 code: useChat chat, streaming, tool calling, embeddings.
CX Codex +1
337installs
rsdoctor-analysis skill Evaluates Rspack and Webpack bundles from a local rsdoctor-data.json report. It ranks package duplicates, heavy modules, and tree-shaking leaks.
CX Codex +1
450installs
inertia-rails-pages skill A skill for building Inertia Rails pages: persistent layouts, Link and router navigation, URL-driven state, deferred sections and infinite scroll.
CX Codex +1
504installs
2,121–2,160 of 2,909
