NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
ai-sdk
official skill Provides Vercel AI SDK guidance for your coding agent. Helps build chat interfaces, streaming routes, tool calls, and agents without obsolete syntax.
CX Codex GP ChatGPT
22installs
tanstack-query skill Delivers 41 performance rules for TanStack Query v5. Guides AI agents on cache invalidation, key factories, and mutation rollbacks.
CX Codex +1
457installs
tanstack-ranger skill Headless utilities for accessible single and multi-range sliders. Helps your coding agent wire up slider mechanics without imposing markup or CSS.
CX Codex +1
1,300installs
react-flow-advanced skill Guides your coding agent through complex React Flow implementations, including nested sub-flows, dagre layouts, drag-and-drop, and undo/redo history.
CX Codex +1
631installs
vue-typescript skill Strict standards for Vue 3 and TypeScript development with Vite, Pinia, and Tailwind CSS. Enforces Composition API and frontend performance rules.
CX Codex +1
782installs
roblox-gui skill Provides reference patterns to build and animate Roblox interfaces, from screen HUDs to in-world 3D panels.
CX Codex +1
1,200installs
expo-react-native-javascript-best-practices skill Guidelines for building Expo React Native apps using JavaScript. Guides your AI agent on functional components, Expo Router navigation, and FlatList tuning.
CX Codex +1
777installs
progressive-web-app skill Guides your agent through building a progressive web app: manifest, service worker, offline mode and installability.
CX Codex +1
522installs
capacitor-performance skill Diagnoses and resolves Capacitor performance bottlenecks, from slow cold starts and bridge serialization stalls to background white screens.
CX Codex +1
1,200installs
apple-ui-skills skill Hands the agent a fixed set of Apple-style UI rules: light surfaces, Inter, a 4px grid. Useful when you want a predictable look without tweaking every value by hand.
CX Codex +1
509installs
frontend-tailwind-best-practices skill Ten Tailwind CSS rules for frontend work: stack utilities, gap-based spacing, dark color schemes and className merging. Useful when an agent writes component styles.
CX Codex +1
464installs
gsap skill Tells your agent how to write GSAP animations: transforms over left/top, stagger, timelines, ScrollTrigger. Useful when the UI stutters on weaker hardware.
CX Codex +1
769installs
pwa-development skill Guidelines for Progressive Web App development covering service workers, web manifests, caching strategies, and offline readiness.
CX Codex +1
768installs
creating-reanimated-animations skill Generates React Native Reanimated v3 and v4 animation code. It helps build scroll-linked effects, layout transitions, spring physics, and gestures.
CX Codex +1
857installs
styled-components-best-practices skill Guides AI coding assistants on CSS-in-JS architecture in React: style isolation, file structure, TypeScript theme typing, and ThemeProvider setup.
CX Codex +1
762installs
sveltekit-remote-functions skill Teaches your agent the query(), form(), command() and prerender() patterns for *.remote.ts files. Useful once remote functions are switched on in your SvelteKit app.
CX Codex +1
423installs
figma-designer skill Turns a Figma file into design tokens, component specs and interaction states you can hand to planning or development.
CX Codex +1
807installs
frontend-testing skill Guides frontend testing setups with Jest, Vitest, React Testing Library, and Cypress. Useful for unit tests, Vue components, and end-to-end flows.
CX Codex +1
508installs
admin-dashboard skill Extends an admin dashboard, developer portal and operations console with new tabs, metrics, monitoring and user management.
CX Codex +1
323installs
msw-ui-kit skill This skill picks ready RUID palettes and interaction widgets from official MSWPackages so a game interface stays visually consistent. Handy when a screen or part needs a themed look.
CX Codex +1
1,200installs
svelte skill Guides AI assistants through modern Svelte 5 and SvelteKit development, covering runes, snippets, SSR, and Svelte 4 migration.
CX Codex +1
753installs
mapbox-flutter-patterns skill Skill with official integration patterns for the Mapbox Maps Flutter SDK. Helps set up maps on iOS and Android, add markers, control the camera, and load GeoJSON data.
CX Codex +1
787installs
search skill Tunes queries for Mobbin UI tools. Guides the agent to pick matching screens, flows, and marketing sections without over-filtering.
CX Codex +1
342installs
interaction-design skill A skill for designing interactions: animations, loading and error states, feedback on touch. Useful when the interface works but feels flat.
CX Codex +1
505installs
expo skill Expo and React Native performance guide that directs coding agents to optimize app launch, bundle size, list virtualization, and memory usage.
CX Codex +1
553installs
responsive-web-design skill Guides coding agents to write adaptive CSS with a mobile-first mindset. Covers responsive layouts, fluid clamp() typography, and media queries.
CX Codex +1
684installs
react-native-app skill A skill that walks your agent through building cross-platform React Native apps: navigation, state, API calls.
CX Codex +1
503installs
electron-best-practices skill A skill that steers an AI agent through Electron apps with React: security defaults, typed IPC, packaging and signing. Useful whenever the agent writes main, preload or renderer code.
CX Codex +1
820installs
nodejs-development skill Guidelines for Node.js and TypeScript development. Teaches the agent patterns for Payload CMS with Next.js, Vue 3 components, and Zod validation.
CX Codex +1
742installs
upgrade-browser-sdk-v7 skill Walks a project through the Datadog Browser SDK jump from v6 to v7: stale options, CDN paths, changed APIs. Useful when the upgrade breaks init.
CX Codex +1
459installs
form-validation skill Guides client-side form validation and server synchronization with TypeScript typing. Useful for multi-step flows and instant error messaging.
CX Codex +1
497installs
anime-js skill A skill that gives your agent rules for writing Anime.js animations: timelines, stagger, SVG morphing and performance. Useful when AI writes the motion code.
CX Codex +1
736installs
reactive-programming skill A skill for reactive streams in RxJS: observables, operators, backpressure. Useful when a project leans on async data and events.
CX Codex +1
491installs
agent-browser
official skill Automates browser actions via CLI, takes DOM snapshots, clicks elements, and verifies dev servers. Helps AI agents inspect web interfaces directly.
CX Codex GP ChatGPT
20installs
pnpm skill Guides your agent on pnpm workspace structures, strict package isolation, and monorepo scripts.
CX Codex +1
721installs
tanstack-query skill A skill that tells your agent how to handle server state in React with TanStack Query v5: query keys, queryOptions, mutations, v4 migration.
CX Codex +1
724installs
sveltekit skill Teaches your coding agent SvelteKit conventions with TypeScript and Tailwind CSS. Covers routing, load functions, form actions, and Vitest setup.
CX Codex +1
720installs
solidity skill A skill for writing and reviewing Solidity contracts: reentrancy defenses, gas optimization, testing, and React frontend wiring.
CX Codex +1
721installs
rspress-best-practices skill A skill that gives the agent rules for Rspress v2 sites: config, navigation, MDX, assets, search and deployment. Useful once the docs exist and the agent edits them.
CX Codex +1
538installs
figma-integration skill Guides AI agents through translating Figma designs into code. Covers design token extraction, layout conversion, and MCP server configuration.
CX Codex +1
718installs
2,041–2,080 of 2,909
