NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
vinext-vite-nextjs skill Guides your AI assistant through running Next.js codebases on Vite and deploying them to Cloudflare Workers.
CX Codex +1
1,400installs
inspira-ui skill This skill guides Vue and Nuxt work with 120+ animated components. Use it for hero sections, 3D visuals, interactive backgrounds, and motion effects.
CX Codex +1
553installs
zustand skill A skill with 43 rules for Zustand in React: store architecture, selectors, re-render fixes. Useful when you write or refactor a store.
CX Codex +1
446installs
nextjs-advanced-routing skill A skill that briefs your coding agent on advanced Next.js App Router work: Server Actions, Route Handlers, parallel and intercepting routes.
CX Codex +1
334installs
linear-ui-skills skill Hands the agent a fixed set of rules for dark Linear-style interfaces: palette, Inter, 4px grid. Useful when you keep re-explaining the same design details.
CX Codex +1
393installs
dribbble-ui-skills skill Supplies AI agents with Dribbble UI system guidelines: a 4px grid, Inter typography, semantic tokens, and strict CSS rules. Useful when assembling light-mode web layouts.
CX Codex +1
392installs
upgrade-react-navigation skill A skill that walks the agent through a React Navigation major bump, from 6.x to 7.x or 7.x to 8.x, fixing breaking changes without changing navigation behavior.
CX Codex +1
502installs
testimonial-video skill Turns text testimonials and reviews into vertical video cards via Remotion, complete with line-by-line reveals and animated star ratings.
CX Codex +1
932installs
tailwindcss-advanced-design-systems skill A skill for building a Tailwind v4 design system: @theme tokens, color scales, typography, shadows and dark mode.
CX Codex +1
655installs
airbnb-ui-skills skill Design system constraints for Airbnb-inspired light interfaces. Sets up Inter font typography, a 4px layout grid, and strict CSS styling limits.
CX Codex +1
389installs
inertia-rails-controllers skill Tells the agent how to return data from Rails controllers to Inertia.js: render inertia, prop types, shared data, flash and validation errors.
CX Codex +1
491installs
inertia-rails-forms skill A skill for building forms in Inertia.js + Rails: create, edit, delete, multi-step wizards and file uploads. Useful when wiring form submission to Rails controllers.
CX Codex +1
486installs
accessibility-auditor skill Audits web pages for accessibility defects and guides compliance with WCAG 2.1 AA. It runs automated checks, inspects keyboard navigation, and suggests markup fixes.
CX Codex +1
322installs
notion-ui-skills skill Enforces Notion design system guidelines with a 4px grid and light-mode tokens.
CX Codex +1
383installs
build-chatgpt-app
official skill Scaffolds, refactors, and debugs ChatGPT Apps SDK projects combining MCP servers with widget UIs. Useful when building apps for ChatGPT in Codex.
CX Codex GP ChatGPT
16installs
node-link-and-diagram-layout
official skill This skill selects layouts for graphs, diagrams, and connected nodes. Use it when crossings, overlaps, edge routing, or unstable placement make a visual hard to read.
CX Codex GP ChatGPT
16installs
nextjs-client-cookie-pattern skill A skill that shows how a Next.js client component sets a server-side cookie through a server action. Useful for themes, auth and language preferences.
CX Codex +1
323installs
event-landing-page skill Builds the public page for a conference, meetup or hackathon: sections, date-gated buttons, accessibility and event structured data.
CX Codex +1
5,300installs
ui-ux-expert skill Configures the agent to design accessible web components and design systems. It focuses on WCAG 2.2 standards, test-driven UI, and Core Web Vitals.
CX Codex +1
828installs
create-remotion-geist skill A skill that steers your agent to build Remotion videos in Vercel's Geist look: dark theme, Geist type, spring motion.
CX Codex +1
484installs
react-component-generator skill A skill that generates React components in TypeScript with props, hooks and accessibility. Useful when building new UI elements or refactoring old ones.
CX Codex +1
318installs
anycap-human-interaction skill Skill for collecting visual feedback from humans and collaborating on Excalidraw diagrams. It opens image markup, web page reviews, and screen recording with voice.
CX Codex +1
653installs
web-performance-audit skill A skill that audits page speed: pulls Core Web Vitals, finds bottlenecks and points at what to fix. Useful when LCP or CLS drifts out of range.
CX Codex +1
526installs
ios-design skill A skill with 62 rules for building SwiftUI interfaces: semantic colors, typography, state, navigation and accessibility.
CX Codex +1
418installs
vite-react-best-practices skill Curated guidelines for Vite React single-page apps covering static rewrites and asset caching rules.
CX Codex +1
634installs
performance-profiler skill This skill guides performance profiling across network, rendering, memory, and compute. Use it when an app loads slowly, leaks memory, or needs measured tuning.
CX Codex +1
311installs
inertia-rails-typescript skill Configures TypeScript type safety for Inertia Rails with React, Vue, and Svelte. Fixes common TS2344 and TS2339 compiler errors.
CX Codex +1
468installs
vtex-io-storefront-react skill Guides coding of shopper-facing VTEX IO React components. Enforces vtex.css-handles, localized strings, and storefront hooks while preventing Node-only runtime calls.
CX Codex +1
1,200installs
taiwan-md-knowledge-base skill A skill for maintaining an open knowledge base about Taiwan built on Astro v5, with Chinese and English articles and a D3.js graph. Useful if you write or translate content for that project.
CX Codex +1
1,300installs
json-render-generative-ui skill Guides AI agents in creating generative UI via json-render, converting structured JSON specs into safe components across React, Vue, or PDF.
CX Codex +1
1,300installs
git-city-3d-github-visualization skill A skill for building on Git City, a project that turns GitHub profiles into 3D pixel-art buildings with Next.js and Three.js.
CX Codex +1
1,300installs
nextjs-use-search-params-suspense skill A skill that shows how to read URL query parameters in Next.js client components: the 'use client' directive plus a Suspense wrapper.
CX Codex +1
311installs
framework-to-capacitor skill Turns a Next.js, Nuxt, Angular, SvelteKit or Vite build into a static bundle Capacitor can ship as an iOS and Android app.
CX Codex +1
870installs
feature-arch skill Turns a React project into a feature-based layout and writes a target-architecture blueprint with directory tree, public APIs and a migration plan.
CX Codex +1
412installs
event-accessibility-inclusion skill Helps organizers set accessibility commitments for a technical event, publish them, and assign ownership. Use it while planning provisions or handling an attendee’s accommodation request.
CX Codex +1
4,800installs
expo-react-native-coder skill A skill with 50 rules and code templates for building Expo and React Native apps. Useful for screens, navigation and auth flows.
CX Codex +1
409installs
frontend-js-best-practices skill Provides 17 performance and style rules for JavaScript and TypeScript. Helps agents optimize loops, reduce algorithmic complexity, and avoid array mutations.
CX Codex +1
333installs
shadcn-component-review skill Reviews finished components and layouts against shadcn patterns: spacing, semantic tokens, primitive composition, and the project's chosen visual style.
CX Codex +1
635installs
threejs-data-visualization
official skill Guides the agent to pick a renderer and build 3D or GPU-heavy visuals when SVG and Canvas2D stop scaling.
CX Codex GP ChatGPT
15installs
bubbletea skill Builds terminal user interfaces in Go using Bubbletea and Lipgloss. It structures Elm-based apps and prevents layout bugs in multi-panel screens.
CX Codex +1
496installs
2,161–2,200 of 2,909
