NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
timing-mastery skill Sets pacing and frame counts for character or UI motion. Useful when animating comedic beats, action sequences, and pauses.
CX Codex +1
554installs
buttons-ctas skill A skill that tells your coding agent how to animate buttons and CTAs: states, timings, CSS transitions.
CX Codex +1
552installs
figma-prototyping skill A skill that walks your agent through building Figma prototypes with Disney's 12 animation principles, Smart Animate and component variants.
CX Codex +1
550installs
motion-one skill A skill that walks through Disney's 12 animation principles as Motion One code — squash and stretch, anticipation, stagger, scroll effects.
CX Codex +1
544installs
attention-direction skill Guides viewer focus across animation frames and UI scenes using classic motion principles. It helps structure visual hierarchy and eliminate competing motion.
CX Codex +1
540installs
video-producer skill Build a custom video player, wire up HLS streaming and picture-in-picture inside your project.
CX Codex +1
449installs
material-3-expressive skill A skill for designing and reviewing Android UI with Material 3 Expressive: picks component tokens, sets hierarchy, motion, color and shape.
CX Codex +1
502installs
polish skill A skill for the last pass over a UI: alignment, spacing, states, consistent copy. Run it once the work is functionally done and needs finishing touches.
CX Codex +1
637installs
solid-drawing-mastery skill A skill for anyone animating UI or characters who wants objects to read as solid forms in space instead of flat shapes sliding around.
CX Codex +1
538installs
search skill Walks an agent through designing site search: autocomplete, filters, result lists and recovery from zero results.
CX Codex +1
626installs
add-ui skill Generates five distinct UI directions for a new or existing section, then walks you through comparing them and applying the one you pick.
CX Codex +1
636installs
icons-badges skill A skill for animating icons, badges, avatars and status indicators. Useful when small UI elements need to feel responsive and give feedback.
CX Codex +1
537installs
audit skill Runs code-level checks on accessibility, performance, theming, responsive design and anti-patterns. Returns a scored report with a fix plan.
CX Codex +1
625installs
gesture-responses skill A skill for animating tap, swipe and drag responses: it sets timings, easing curves and code patterns for CSS and JS.
CX Codex +1
535installs
fintech-banking skill Guides animation design for banking apps, payment systems, and financial dashboards. Helps agents craft motion that emphasizes security and precision.
CX Codex +1
535installs
gaming-entertainment skill A skill for animation in gaming apps, streaming platforms and interactive media: it maps Disney's 12 principles onto concrete UI elements.
CX Codex +1
535installs
accessibility-advocate skill This skill guides developers in designing inclusive web animations that prevent vestibular discomfort and meet WCAG standards. Helpful when setting up reduced-motion styles.
CX Codex +1
533installs
saleor-storefront skill Provides guidelines and GraphQL patterns for building Saleor storefronts. Helps handle checkout flows, multi-channel setups, and variant selection in AI coding agents.
CX Codex +1
2,300installs
frontend-ui-ux-design skill Guides coding agents through end-to-end interface design, atomic component structuring, mobile-first responsive grids, and WCAG accessibility audits.
CX Codex +1
536installs
metabase-modular-embedding-version-upgrade skill A skill that moves a project onto a newer Metabase Modular embedding SDK or embed.js version, scanning code and fixing files along the way.
CX Codex +1
367installs
modals-dialogs skill Guides AI coding agents on animating dialogs, modals, and popovers using Disney's animation principles. Brings structured timing to entrance and exit effects.
CX Codex +1
528installs
entrance-animations skill Teaches coding agents to apply Disney animation principles to UI entrance effects. It provides exact CSS timings, easing curves, and stagger formulas for modals, lists, and cards.
CX Codex +1
527installs
excitement-energy skill Guides AI agents in building high-energy interface animations with punchy timing and springy easing. Useful for gaming UIs and product launches.
CX Codex +1
526installs
arc-mastery skill A skill about arcs in animation: why straight lines read as mechanical and how to build curved paths for UI, characters and games.
CX Codex +1
525installs
code-quality skill Reviews TypeScript and React codebases against strict typing rules, component size limits, and lint baselines. Runs after feature work or before pull request reviews.
CX Codex +1
2,000installs
metabase-embedding-sso-implementation skill A skill that walks the agent through adding JWT SSO to your Metabase embedding: signing endpoint, frontend auth layer, group mappings.
CX Codex +1
363installs
joy-delight skill Guides coding agents in designing playful UI animations based on Disney principles. Useful for reward states, celebrations, and confetti effects.
CX Codex +1
522installs
design-systems-frontend-architecture skill Turns UI, UX and brand decisions into reusable components, tokens and layout rules your agent can act on.
CX Codex +1
635installs
metabase-react-sdk-setup skill A skill that walks the agent through first-time setup of the Metabase React SDK: instance detection, API key, dashboard discovery, JWT auth and package install.
CX Codex +1
362installs
animate skill Adds movement to an interface: transitions, micro-interactions, gestures, hover states. Useful when the UI feels dead or stutters under frequent use.
CX Codex +1
607installs
micro-100-200ms skill A skill for micro-interactions in the 100–200ms range: tooltips, dropdown opens, small feedback. Helps pick timing and easing.
CX Codex +1
521installs
calm-relaxation skill A skill for AI coding that sets rules for gentle, quiet motion: long timings, soft easing curves, no sudden jumps.
CX Codex +1
521installs
squash-stretch-mastery skill Guides AI agents on squash and stretch physics: handles UI bounces and impact deformation while preserving object volume.
CX Codex +1
522installs
staging-mastery skill Design guideline for visual clarity and motion hierarchy. Keeps user focus locked onto a single primary element at any instant.
CX Codex +1
520installs
slow-in-out-mastery skill A skill that tells your coding agent which acceleration and deceleration curve to use in UI, character or game animation.
CX Codex +1
520installs
brand-consistency skill A skill that diagnoses animation which feels off-brand and points to the fixes: timing, easing curves, level of exaggeration.
CX Codex +1
520installs
setup skill Scans project files and asks UX questions to capture audience, brand personality, and UI defaults into .better-web-ui.md.
CX Codex +1
605installs
websocket-realtime-builder skill Guides the setup of real-time communication using WebSockets and Socket.io. Useful when building chat rooms and live push notifications.
CX Codex +1
529installs
attention-grabbers skill A skill that tells your coding agent how to build badge pulses, error shakes and feature highlights using Disney's animation principles.
CX Codex +1
519installs
appeal-mastery skill A skill about appeal — the quality that makes an audience want to keep watching. It helps you design characters, micro-interactions and transitions that read clearly and stick.
CX Codex +1
519installs
2,401–2,440 of 2,909
