NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
clerk-react-patterns skill Provides authentication patterns for React single-page apps using @clerk/react in Vite and CRA. It helps implement route guards, session hooks, and custom forms.
CX Codex +1
19,700installs
rive-interactive skill A skill for Rive: state machines, input handling and data binding in React. Useful when an animation has to react to UI state.
CX Codex +1
2,600installs
lightweight-3d-effects skill A skill for decorative 3D elements and micro-interactions: pseudo-3D illustrations, animated backgrounds, tilt on hover. Useful when a landing page needs depth without a full WebGL stack.
CX Codex +1
2,600installs
design-token skill Defines and organises colour, spacing, type and elevation tokens with naming and usage rules. Useful when you are laying down the token layer.
CX Codex +1
2,200installs
error-handling-ux skill A skill that guides the agent through preventing, surfacing and recovering from errors in a product. Useful when failures cross several flows at once.
CX Codex +1
2,200installs
design-qa-checklist skill Builds a systematic QA checklist to verify that an implementation matches design specs. Use it during review to catch visual, layout, and accessibility bugs.
CX Codex +1
2,200installs
loading-states skill Designs waiting states with skeletons, progress indicators, progressive loading and optimistic updates. Use it when content or actions take time to complete.
CX Codex +1
2,200installs
state-machine skill Models UI component behavior as explicit states, events, and transitions. Useful when a component has multiple interacting states that must remain predictable.
CX Codex +1
2,200installs
design-token-audit skill Finds where a product bypasses its design tokens: hard-coded values, duplicate names, missing scale steps.
CX Codex +1
2,200installs
animation-principles skill A skill that tunes one specific UI animation: picks easing, duration and the order in which related elements move.
CX Codex +1
2,200installs
wireframe-spec skill Defines wireframe layout specifications, content priorities, and interaction notes. Useful when structuring an interface before moving into visual UI design.
CX Codex +1
2,300installs
micro-interaction-spec skill Specifies one micro-interaction end to end: trigger, rules, feedback, loops and modes. Useful when a single interaction goes to engineering.
CX Codex +1
2,300installs
react-native-best-practices skill Software Mansion's guidance for React Native and Expo code on the New Architecture, split into topic files for animations, gestures, audio and JSI.
CX Codex +1
5,600installs
saas-scaffolder skill Generates a working SaaS scaffold on Next.js: auth, database schema, Stripe billing, API routes and a dashboard. Useful when you want to start a project without wiring it by hand.
630installs
ant-design skill A decision guide for antd 6.x, Ant Design Pro 5 and Ant Design X v2. It steers the agent through component choice, tokens and SSR.
CX Codex +1
4,100installs
bencium-controlled-ux-designer skill Guides visual choices for web interfaces before code changes begin. Use it when building components, pages, or applications that need accessibility checks.
CX Codex +1
4,600installs
form-cro skill Audits lead, contact, demo, application, survey, quote, and checkout forms. Use it to find friction and plan changes that improve form completion.
622installs
ui-design-brain skill This skill guides interface generation with documented component patterns and design-system rules. Use it for pages, dashboards, forms, navigation, and other UI work.
CX Codex +1
845installs
babylonjs-engine skill A skill that walks the agent through Babylon.js: engine setup, cameras, lights and meshes for browser 3D work, so you don't rebuild the API from memory.
CX Codex +1
2,500installs
pixijs-2d skill Equips your coding agent with PixiJS patterns for WebGL and WebGPU canvas apps, handling sprite animations, vector graphics, and fast particle systems.
CX Codex +1
2,500installs
locomotive-scroll skill This skill guides an agent through Locomotive Scroll setup for smooth scrolling, parallax, and scroll-driven motion. Use it when page elements need viewport tracking or scroll events.
CX Codex +1
2,500installs
experience-lwc-generate skill A skill for building Lightning Web Components: bundles, wire service patterns, SLDS 2 styling and Jest tests. Useful whenever you touch files under lwc/.
CX Codex +1
6,200installs
accessibility-test-plan skill Plans accessibility testing sessions with assistive technology and real users. Useful when preparing user flows for WCAG compliance.
CX Codex +1
2,100installs
naming-convention skill Sets one naming scheme for components, tokens and layers so names stop drifting between files.
CX Codex +1
2,100installs
handoff-spec skill Generates developer handoff specifications covering measurements, interaction states, responsive breakpoints, and edge cases before engineering starts.
CX Codex +1
2,100installs
gesture-patterns skill Designs touch and pointer gestures such as swipes, dragging and long presses. Use it when an interface relies on gestural input.
CX Codex +1
2,100installs
feedback-patterns skill Gives the agent a method for designing how a system answers a user action: toasts, progress, badges, notifications. Useful when the interface goes silent after a click.
CX Codex +1
2,100installs
theming-system skill Designs a three-layer token architecture to support brand variants, color modes, and interface density in a single component library.
CX Codex +1
2,100installs
component-spec skill This skill writes a full spec for one design-system component: anatomy, variants, states, accessibility and usage rules. Useful when a library grows and the API needs pinning down.
CX Codex +1
2,100installs
accessibility-audit skill Audits an existing interface against WCAG and reports issues with severity, impact, and remediation steps.
CX Codex +1
2,100installs
ux-writing skill Writes microcopy, error messages, empty states and CTAs. Useful when the words themselves are the deliverable.
CX Codex +1
2,200installs
threejs-towers skill Builds pagodas, castles and domes from parameters instead of mesh files, then films the structure assembling from the ground up.
CX Codex +1
1,200installs
audit-ai-design-slop skill Audits interfaces, mockups, and UI code for decorative clutter, generic AI clichés, and usability defects. It helps streamline products through removal instead of speculative redesigns.
CX Codex +1
1,200installs
threejs-weather skill Adds controllable rain, storms and snow to Three.js scenes. Use it when weather needs to affect particles, lighting and ground appearance.
CX Codex +1
1,200installs
threejs-landscape skill This skill builds a live Three.js landscape: terrain, grass, stones, sky and a time-of-day cycle. It suits hero backdrops where a subject has to sit somewhere, not float on a gradient.
CX Codex +1
1,200installs
falling-leaves skill Builds realistic falling foliage and petal animations for 2-D canvas and 3-D scenes where standard particle sprites look like flat confetti.
CX Codex +1
1,200installs
pointer-trail-emitter skill A skill that teaches the agent to build a cursor trail whose mote spacing holds steady no matter how fast the hand moves.
CX Codex +1
1,200installs
build-vesperfall-review-assets skill Builds review pairs for the Vesperfall catalog by pairing transparent PNGs with live Three.js or FBX models. Useful when adding characters or equipment and setting up isolated moveset routes.
CX Codex +1
1,200installs
build-game-changelog skill A skill for designing and maintaining an in-game changelog: versioning, deployment provenance, menu navigation.
CX Codex +1
1,200installs
build-game-map-editor skill Guides the creation of production-linked browser map editors for Three.js and isometric games. It keeps drafts isolated from live gameplay saves.
CX Codex +1
1,200installs
921–960 of 2,909
