NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
react-flow skill Provides workflow diagram patterns using @xyflow/react. Helps the agent build custom nodes, handle dynamic connection points, and manage the graph viewport.
CX Codex +1
1,300installs
adding-error-tracking skill This skill wires Sentry into a web app: error tracking, performance traces and source maps. Useful when you want crash reporting without hand-rolling the config.
CX Codex +1
386installs
comparing-branches-visually skill Checks out two branches in separate worktrees, runs both dev servers on different ports, screenshots the same pages and reports before/after.
CX Codex +1
383installs
react-web skill Enforces test-first development for React components and pages using React Testing Library. It triggers automatically when editing .tsx files or components in src/.
CX Codex +1
339installs
static-rendering skill A skill that walks your agent through static generation: which pages can be pre-rendered to HTML at build time and how to do it in Next.js. Useful when content stays the same across requests.
CX Codex +1
910installs
site-architecture skill Sets up technical SEO foundations: robots.txt rules, XML sitemaps, Open Graph metadata, and crawler access for search engines and AI bots.
CX Codex +1
336installs
iphone-duo-vertical-bars skill A skill that tells the agent how to move toolbars, navigation bars and tab bars onto the vertical axis on iPhone Duo, and what the code needs first.
CX Codex +1
596installs
nextjs-shadcn skill A skill that steers the agent through building Next.js interfaces with shadcn/ui, picking typography, theme, backgrounds and motion for the product.
CX Codex +1
835installs
adding-analytics skill Guides the AI agent in setting up PostHog analytics, page view tracking, feature flags, and session replay across web apps.
CX Codex +1
371installs
programmatic-seo skill Walks you through building many similar SEO pages from one template and a data source: cities, comparisons, integrations. Useful for long-tail traffic.
CX Codex +1
419installs
streaming-ssr skill Teaches the agent to flush HTML in chunks with renderToPipeableStream and Suspense. Useful when a large page can't wait for the full tree before the first byte.
CX Codex +1
883installs
signup-flow-cro skill Audits registration funnels and reduces form abandonment. Evaluates steps, field friction, social auth lift, and suggests A/B testing hypotheses.
CX Codex +1
417installs
adding-stripe skill Walks the agent through Stripe setup: SDK, keys, checkout sessions, webhooks and a customer portal for subscriptions.
CX Codex +1
369installs
slide-creator skill Builds 16:9 presentation slide decks using HTML and CSS, then renders them to PDF via headless Chromium.
CX Codex +1
4,100installs
adding-feature-flags skill Adds feature toggles for gradual rollouts and A/B tests using PostHog or local environment variables.
CX Codex +1
361installs
tanstack-virtual skill A skill that shows the agent how to wire up TanStack Virtual so only visible rows render in long lists, tables and grids.
CX Codex +1
2,500installs
tailwindcss skill Tells the agent how to write TailwindCSS: utility classes in markup, mobile-first breakpoints, dark mode through the dark: variant.
CX Codex +1
1,500installs
mobile-touch skill A skill that steers your coding agent through gesture, haptic and animation work on iOS and Android. Useful when you need motion that feels native instead of guessed.
CX Codex +1
2,400installs
playwright skill A Playwright skill for Next.js with 45 rules across 8 categories, from test architecture to CI debugging. Useful when tests fail at random.
CX Codex +1
485installs
framer-motion skill Optimizes React animations using Framer Motion guidelines: slashes bundle size, eliminates unnecessary re-renders, and polishes gesture or scroll transitions.
CX Codex +1
1,100installs
react-native-moq skill This skill guides live video, audio, and data work over a MoQ relay in React Native. Use it when building or debugging react-native-moq code.
CX Codex +1
398installs
api-design skill This skill shapes and reviews public APIs for TypeScript, JavaScript, React, and React Native libraries before implementation.
CX Codex +1
609installs
maplibre-mapbox-migration skill Guides the transition from Mapbox GL JS to MapLibre GL JS across imports, CSS, and tile configurations. Useful when moving away from Mapbox licensing.
CX Codex +1
464installs
sap-fiori-add-visual-filter skill Adds chart-based visual filters to SAP Fiori Elements filter bars and value help dialogs using CAP or ABAP RAP. Configures CDS aggregation annotations and UI charts.
CX Codex +1
603installs
typescript-react-reviewer skill A code review skill for TypeScript and React 19 apps. Catches hook anti-patterns, state mutations and type safety gaps before you merge.
CX Codex +1
9,000installs
css-animation-creator skill A coding-agent skill for writing CSS animations, transitions, micro-interactions and scroll effects. Useful when you need motion in a UI without hand-tuning every duration.
CX Codex +1
805installs
sap-fiori-app-development skill A skill that tells the agent how to build SAP Fiori Elements apps: List Report, Object Page, Worklist, wired to CAP or an OData service.
CX Codex +1
595installs
sap-fiori-analytical-chart skill A skill that puts an aggregated chart above the table on a SAP Fiori Elements List Report. Useful when a report has to be read as a diagram, not row by row.
CX Codex +1
591installs
chart skill Builds interactive charts on Apache ECharts: line, bar, candlestick, scatter. Outputs an HTML page plus a PNG screenshot.
CX Codex +1
3,900installs
mapbox-ios-patterns skill Official integration patterns for Mapbox Maps SDK v11 on iOS in Swift, SwiftUI and UIKit. Useful when you need a map, markers or GeoJSON data in an app.
CX Codex +1
1,500installs
mapbox-mcp-devkit-patterns skill A skill that shows your AI assistant how to drive the Mapbox MCP DevKit Server: styles, tokens, validation and docs lookup from the chat.
CX Codex +1
1,500installs
sap-fiori-eslint-plugin skill This skill sets up, migrates and runs ESLint with @sap-ux/eslint-plugin-fiori-tools in SAP Fiori projects. Useful when linting is missing or broken.
CX Codex +1
584installs
sap-fiori-create-cli skill Wires the @sap-ux/create CLI into your agent: generate SAP Fiori apps, add configs, convert projects. Handy when you work on a Fiori project and don't want to memorise flags.
CX Codex +1
584installs
frontend-accessibility-best-practices skill A skill with 7 accessibility rules for React: semantic markup, screen readers, keyboard support, user preferences. Useful when you build forms and interactive elements.
CX Codex +1
863installs
css-architecture skill A skill that gives your coding agent conventions for structuring CSS with BEM, SMACSS and CSS-in-JS. Handy when stylesheets outgrow the naming scheme you started with.
CX Codex +1
959installs
pulsar-haptics skill Integrates Software Mansion Pulsar haptic feedback across mobile and web frameworks. It handles presets, Figma bindings, and migrations from expo-haptics.
CX Codex +1
380installs
animation-designer skill A skill that hands your agent ready-made web animation patterns: page transitions, component reveals, parallax and micro-interactions.
CX Codex +1
1,900installs
aem-cli skill Helps configure and run the Adobe AEM CLI for Edge Delivery Services, resolve dev server errors, manage TLS, and handle content sync.
CX Codex +1
840installs
lorem-ipsum skill Generates structured lorem ipsum filler text using a bundled Python script. Helps populate mockups and test files with precise word, character, or token counts.
CX Codex +1
511installs
react-query skill Tells the agent how to fetch and cache server data in React: queries, mutations, invalidation and optimistic updates.
CX Codex +1
1,400installs
1,721–1,760 of 2,909
