NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
livewire-development skill Guides your agent through writing and debugging reactive Livewire 4 components: wire: directives, islands, async actions and tests.
CX Codex +1
591installs
explainer-default skill Builds a product demo in MP4 from code, with UI scenes, camera moves, music, and a closing card. Made for launch videos, walkthroughs, and SaaS explainers.
CX Codex +1
819installs
3d-four-seasons skill Adds four-season transitions to a 3D scene by blending foliage, lighting, snow, and particles via uniforms without rebuilding the world.
CX Codex +1
497installs
app-observability skill Walks an agent through Grafana Cloud setup: RED metrics from OTel traces, service maps, browser RUM with Faro and LLM monitoring via OpenLIT.
CX Codex +1
4,400installs
liquid-theme-a11y skill Adds WCAG 2.2 patterns for Shopify Liquid themes. Use it when building components, reviewing ARIA, or fixing keyboard accessibility issues.
CX Codex +1
2,800installs
layers-surface skill A skill for auditing the surface of a product: words, objects, feedback, hierarchy, accessibility. It sorts surface fixes from problems rooted deeper.
CX Codex +1
2,000installs
design skill Guides an agent through Subframe work: build a page or component, line up design options on a canvas, adjust a theme.
CX Codex +1
775installs
cypress-docs skill Points the agent at the official Cypress documentation instead of its own memory. Useful when you need an exact command signature or version-specific behavior.
CX Codex +1
8,200installs
service-digital-engagement-messaging-site-integrate skill Embeds the Embedded Messaging widget into an Experience Cloud site by patching the page bundle JSON, deploying, publishing and checking guest access.
CX Codex +1
2,400installs
tailwind-design-system skill Creates and orchestrates a design system using Tailwind CSS v4.1+ and shadcn/ui. It defines oklch design tokens, themes via CSS variables, and wraps UI primitives.
CX Codex +1
4,500installs
testing skill Sets up uptime probes, k6 load tests, and frontend observability through Grafana Cloud. Use it before a release or when investigating failures.
CX Codex +1
4,200installs
landing-page skill Generates a deployable, single-file landing page using Tailwind CSS from a quick brief.
CX Codex +1
1,500installs
cast skill A creative coding skill that turns a static interface into something alive: motion, micro-interactions, real feedback. Adapts to Web, Android (Compose) and Apple (SwiftUI).
CX Codex +1
1,300installs
paint skill Runs a full design pipeline for Web, Compose, and SwiftUI: from art direction brainstorm to tokens, page implementation, and motion audit.
CX Codex +1
1,300installs
react-19-plugin-migration skill This skill guides changes that prepare a Grafana plugin for React 19 compatibility without upgrading React itself. Use it to scan a plugin and work through the migration steps.
CX Codex +1
4,100installs
plugin-bundle-size skill Helps reduce the module.js entry point in Grafana app plugins using React.lazy, Suspense, and Webpack code splitting.
CX Codex +1
4,200installs
grafana-scenes skill A skill for building Grafana plugin pages with the @grafana/scenes framework: panels, variables, drilldown navigation.
CX Codex +1
4,200installs
portable-text-serialization skill A skill that shows the agent how to render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown and plain text.
CX Codex +1
2,900installs
react-container-presentation-component
official skill This skill scaffolds React components with the Container/Presentation pattern and follows the project’s TypeScript, Storybook, and SCSS conventions.
65installs
experience-lwc-typescript-migrate skill Converts an existing JavaScript Lightning Web Component to TypeScript: a typed .ts plus a .d.ts that exposes only the @api surface.
CX Codex +1
2,300installs
experience-lwc-rtl-validate skill Reviews Lightning Web Components for right-to-left layout compliance. Scans CSS, markup, and scripts to generate code fixes for Arabic and Hebrew locales.
CX Codex +1
2,300installs
platform-mcp-tool-widget-coordinate skill Coordinates Lightning Type and HXL widget generation so a custom MCP server tool backed by an Apex Invocable Action renders as rich UI.
CX Codex +1
2,400installs
sentry-nextjs-sdk skill This skill inspects your Next.js project and guides Sentry setup across browser, Node.js, and Edge runtimes. It helps configure error tracking, tracing, and session replays.
CX Codex +1
3,600installs
react-code-review skill Reviews React components and hooks before merge: composition, hook dependencies, accessibility, TypeScript types. Findings come sorted by severity.
CX Codex +1
4,300installs
taste skill Reverse-engineers any webpage aesthetic using a real browser to extract concrete design tokens and style rationale. Helps port a visual language to new code.
CX Codex +1
579installs
tailwindcss-advanced-layouts skill Advanced Tailwind CSS layout recipes. Helps you assemble complex CSS Grid structures, container queries, and resilient Flexbox patterns directly in your components.
CX Codex +1
8,100installs
experience-ui-bundle-localize skill Extracts hardcoded UI strings from React or Angular UI Bundles into Salesforce Custom Labels and wires runtime i18n through the GraphQL UI API.
CX Codex +1
2,200installs
experience-lwc-security-validate skill Checks Lightning Web Component bundles for Lightning Web Security issues and returns ranked findings or a SARIF report.
CX Codex +1
2,300installs
swiftui-design-skill skill Designs custom SwiftUI screens for iOS and macOS without generic AI clichés. Useful when drafting interface prototypes or picking a distinct visual direction.
CX Codex +1
1,000installs
svg-animations skill Instructs the assistant to write clean animated SVGs using CSS and SMIL. Helpful when building custom icons, loading spinners, and logo animations.
CX Codex +1
2,600installs
design-review skill Reviews the visual quality of a web page or app and produces a findings report with screenshots. Use it when an interface looks off and the cause is hard to spot.
CX Codex +1
1,400installs
animation-principles skill Calculates timing, cubic-bezier curves, and stagger offsets for UI transitions. Solves stiff or robotic movement with physics-based motion rules.
CX Codex +1
3,000installs
android-jetpack-compose skill Guides an agent through Android UI work with Jetpack Compose and state patterns. Use it when composables, ViewModel state, or declarative UI need attention.
CX Codex +1
2,200installs
nextjs-app-router skill Patterns and code examples for Next.js 16+ App Router work, including components, actions, API handlers, caching and routing.
CX Codex +1
3,900installs
3d-ultra-realistic-water skill A Three.js skill that builds an open sea with Gerstner waves, sun glitter, foam and a Kelvin wake. Useful when your scene has a horizon and a moving camera.
CX Codex +1
408installs
framer-motion-animator skill Generates smooth Framer Motion animations and micro-interactions in React. Useful for building page transitions, drag gestures, and scroll effects.
CX Codex +1
11,100installs
website-builder-setup skill Walks you through setting up a complete web design stack in Claude Code with UI/UX Pro Max, Framer Motion, and 21st.dev Magic.
CX Codex +1
580installs
react-patterns skill A skill that checks React 19 components for waterfalls, bundle bloat and re-renders, and suggests composition fixes. Useful while writing or reviewing code.
CX Codex +1
1,300installs
react-native skill Performance guidelines and architecture patterns for React Native and Expo apps. Helps coding agents handle list virtualization, UI-thread animations, and navigation.
CX Codex +1
1,300installs
nextjs-authentication skill A skill with ready authentication patterns for Next.js 15+ App Router on Auth.js 5: providers, route protection, sessions and roles.
CX Codex +1
3,800installs
1,201–1,240 of 2,909
