NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
data-display-and-selection skill Guides the agent through data collections: view modes, row selection, mass actions, sorting, filters and search patterns.
CX Codex +1
855installs
notifications-and-recovery skill A skill for designing notifications and error states: toasts, inline errors, banners and recovery paths. Useful when you need feedback after an action.
CX Codex +1
854installs
provider-pattern skill Teaches your agent to move shared data into React Context and hand it out through a Provider when props crawl through every layer.
CX Codex +1
620installs
webflow-mcp:custom-code-management skill Manages inline JavaScript on Webflow sites via MCP. It inserts, reviews, and wipes tracking tags or widgets across entire sites or individual pages.
CX Codex +1
858installs
tui-design skill A skill for designing terminal interfaces: panel layouts, color schemes, keyboard navigation and async state. Useful when you build a TUI dashboard or picker.
CX Codex +1
1,300installs
tanstack-store skill A skill covering TanStack Store: a framework-agnostic reactive store with adapters for React, Vue, Solid, Angular and Svelte. Useful when your agent writes state with @tanstack/store.
CX Codex +1
1,800installs
mixin-pattern skill Teaches the AI agent how to implement the mixin pattern in JavaScript and TypeScript without inheritance chains.
CX Codex +1
616installs
scroll-areas skill Teaches coding agents to avoid inner scroll containers and restricts unavoidable scroll areas to a single axis in UI layouts.
CX Codex +1
843installs
rails-hotwire skill A skill for Hotwire in Rails: Turbo Frames, Turbo Streams, broadcasts and Stimulus controllers. Useful when you want reactive pages without a heavy JS framework.
CX Codex +1
348installs
ui-context-and-scope skill Defines rules for user orientation in deep navigation layouts: breadcrumbs, visual section borders, and persistent impersonation banners.
CX Codex +1
842installs
iphone-duo-dual-pane-patterns skill Guides two-pane UI development for iPhone Duo, covering panel dimensions and hinge callbacks. Useful when building dual-screen flows or adapting layouts to fold poses.
CX Codex +1
393installs
prototype-pattern skill Teaches coding assistants the JavaScript Prototype Pattern. It shows how to share methods via the prototype chain to keep memory consumption low.
CX Codex +1
614installs
proxy-pattern skill A skill that teaches the JavaScript Proxy pattern: intercepting property reads and writes, adding validation and logging. Useful when your agent edits that kind of code.
CX Codex +1
612installs
real-world-metaphors skill Helps you pick between a card, carousel, drawer and accordion when designing components and navigation.
CX Codex +1
841installs
21st-design-sync skill Extracts shadcn and Tailwind CSS tokens from your project and publishes them as a public theme on 21st.dev using the 21st CLI.
CX Codex +1
1,700installs
global-toolbar-controls skill Guides the layout and styling of language, currency, and unit selectors. It helps keep global controls accessible in the header or footer without cluttering primary navigation.
CX Codex +1
834installs
webflow-mcp:designer-tools skill Use this skill to create and edit Webflow pages, elements, styles, and components through MCP. Most page work can run without Designer open.
CX Codex +1
841installs
webflow-mcp:cms-collection-setup skill Creates CMS collections in Webflow with fields, relationships, and plan limit checks. Runs through seven phases: site selection, requirements, schema validation, approval, collection creation, field setup, and final report.
CX Codex +1
841installs
flutter-development skill A skill for building Flutter and Dart mobile apps: widgets, state management with Provider or BLoC, navigation, and API integration.
CX Codex +1
719installs
xstate-v5 skill Guides an agent through building, reviewing and porting XState v5 machines and statecharts in TypeScript. Useful once screen or process logic outgrows a couple of booleans.
CX Codex +1
494installs
visual-regression-testing skill Catches unintended UI changes by capturing screenshots of pages and components and comparing them across versions.
CX Codex +1
718installs
figma-design-to-code
official skill Guides an agent through implementing a Figma node in a project’s existing stack. Use it before calling get_design_context.
CX Codex GP ChatGPT
30installs
typescript-refactor skill A skill with 47 rules for refactoring TypeScript and React/TSX: type architecture, narrowing, generics, and modern TS 6.0 / React 19 features.
CX Codex +1
788installs
framer-motion skill This skill guides the agent in implementing Disney's 12 animation principles with Framer Motion in React. Useful for building UI transitions and gesture animations.
CX Codex +1
1,700installs
Next.js Security Scan skill A skill that scans Next.js and TypeScript/JavaScript projects for XSS, injection flaws, auth holes and hardcoded secrets. Useful before you ship.
CX Codex +1
553installs
react-refactor skill Architectural refactoring skill with 40 rules for React codebases. Guides component decomposition, custom hook design, and module boundaries.
CX Codex +1
776installs
dembrandt skill Runs a UI/UX task through six ordered stages: brand, tokens, layout, components, polish, accessibility. Useful for a design review or a build from scratch.
CX Codex +1
822installs
premium-frontend-design skill Guides coding assistants to build distinctive, motion-driven frontend interfaces. It prevents generic layouts by enforcing design principles and shader rules.
CX Codex +1
1,400installs
font-pairing-suggester skill Suggests font combinations for a given use case and shows heading hierarchy with examples. Handy when you need a free stand-in for a paid typeface.
CX Codex +1
578installs
webflow-mcp:flowkit-naming skill Brings CSS class names in Webflow in line with the Flowkit system: audits what exists, generates new names, applies them through MCP tools.
CX Codex +1
824installs
ionic-design skill Builds and reviews Ionic Framework UI components for Capacitor apps. Helps configure themes, iOS and MD modes, and handle migrations from Ionic 8 to Ionic 9.
CX Codex +1
1,600installs
dashboards-and-real-time-visualization
official skill Designs dashboards and live data visualization systems. Helps structure streaming data, refresh rates, mobile interruptions, and rendering budgets.
CX Codex GP ChatGPT
29installs
pinia-skilld skill A skill that feeds your coding agent the correct Pinia 4.x APIs: stores, getters, actions, SSR hydration, testing and v2/v3 migration notes.
CX Codex +1
313installs
frontend-designer skill A skill that guides your agent through accessible, responsive component work: design tokens, modern CSS, patterns for React, Vue and Svelte.
CX Codex +1
335installs
tanstack-cli skill A skill that walks the agent through TanStack Start project creation: picks integrations, generates the structure, and covers deployment.
CX Codex +1
1,700installs
web-design-expert skill Builds web layouts, visual brand identity, and OKLCH color palettes. Works when structuring page hierarchy and responsive designs before coding.
CX Codex +1
439installs
e2e-testing-automation skill A skill that helps you write end-to-end tests: browser flows, user journeys and frontend-backend integration checks.
CX Codex +1
689installs
tailwind-v4 skill A skill that tells your coding agent how to set up Tailwind CSS v4: theme in CSS, design tokens, OKLCH colors and dark mode.
CX Codex +1
812installs
workos-widgets skill Walks your agent through embedding WorkOS widgets — user management, profile, SSO connection and domain verification — and wiring token issuance on the backend.
CX Codex +1
857installs
react-component-architecture skill A skill that tells your coding agent how to structure React components: function components, hooks, composition and TypeScript. Useful once a shared component library starts growing.
CX Codex +1
674installs
1,881–1,920 of 2,909
