NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
hover-interactions skill A skill for mouse hover effects: button highlights, card lifts, link underlines, image zooms. Useful when an interface needs to respond to the pointer.
CX Codex +1
604installs
ui-ux-polish skill A skill that runs repeated polish passes on a working web app, treating desktop and mobile separately and checking accessibility along the way.
CX Codex +1
539installs
awesome-design-md skill Picks a matching DESIGN.md style from a bundled library and applies it to frontend work: layout, color, type, spacing.
CX Codex +1
666installs
dotnet-wpf-modern skill A skill that steers your coding agent through modern WPF: generic host, MVVM Toolkit, Fluent theme, current C# features.
CX Codex +1
301installs
frontend-architecture skill A skill for planning frontend structure: layers, patterns, state management and module boundaries. Useful once an app outgrows a flat folder of components.
CX Codex +1
722installs
legend-state-best-practices skill A skill that sets the rules for @legendapp/state: observable ownership, subscriptions, effects and persistence. Useful when you build or audit reactive code.
CX Codex +1
475installs
flipoff-split-flap-display skill A skill for building, restyling and embedding FlipOff, a framework-free split-flap board emulator that runs in any browser.
CX Codex +1
849installs
playfulness-fun skill A skill for animations that entertain: exaggerated bounces, wiggles and springy easing. Useful for games, onboarding and empty states.
CX Codex +1
594installs
blockbench-plugins skill Guides JavaScript plugin development for the Blockbench 3D editor, covering custom actions, UI dialogs, Vue panels, and undoable model edits.
CX Codex +1
647installs
ionic-react skill Walks the agent through Ionic Framework apps built with React: project layout, IonReactRouter, lifecycle hooks and state management.
CX Codex +1
717installs
vtex-io-storefront-theme-versioning skill Guides coding agents through publishing, updating, or rolling back VTEX IO storefront themes without losing merchant Site Editor data across major versions.
CX Codex +1
777installs
wix-vibe-headless skill Connects an existing frontend to a live Wix site using client-side REST and a public client ID. Runs straight from the browser without an SDK or custom backend.
CX Codex +1
404installs
elegance-sophistication skill Prompting rules for AI agents to craft restrained, luxury-focused UI motion. It sets gentle transitions and strict easing for high-end web experiences.
CX Codex +1
585installs
pump-analyzer-solana skill A static front end for watching Pump.fun token launches on Solana: a WebSocket feed, price and volume charts, and alerts on your own criteria.
CX Codex +1
837installs
react-coding-style skill A skill that steers your coding agent through React implementation and review: narrow subscriptions, stable identities, honest hook dependencies.
CX Codex +1
466installs
data-visualization skill Applies Disney's 12 animation principles to charts, dashboards, and data transitions. Helps Claude Code configure motion timing and easing in D3.js and Chart.js.
CX Codex +1
583installs
liveblocks-best-practices skill A Liveblocks skill that feeds your agent reference docs on rooms, comments, presence and auth, plus the errors people hit most.
CX Codex +1
882installs
creative-director skill Directs project animation vision and standards using Disney's 12 principles of motion. It helps establish consistent pacing, easing curves, and visual hierarchy across team assets.
CX Codex +1
581installs
ui-visual-composition skill Teaches AI coding agents to critique and construct visual UI layouts. It guides spacing and typography without arbitrary decoration.
CX Codex +1
707installs
transition-sequences skill A skill for multi-step animation: page transitions, onboarding flows, wizard steps. It hands the agent timings and step order based on Disney's principles.
CX Codex +1
575installs
carousels-sliders skill Applies traditional animation principles to carousels, sliders, and image galleries to build fluid horizontal navigation.
CX Codex +1
575installs
ionic-vue skill Walks the agent through Ionic Vue development: project layout, routing, lifecycle hooks and composables. Useful when a page stops refreshing its data on revisit.
CX Codex +1
697installs
tailwindcss-fundamentals-v4 skill A skill covering Tailwind CSS v4: install steps, CSS-first config with @theme, v3-to-v4 migration and the new utilities. Useful when a project moves to v4.
CX Codex +1
389installs
frontend-design skill Walks the agent through a decision order: task and hierarchy first, systems next, colour and decoration last. Useful when building or reworking interfaces.
CX Codex +1
675installs
education-learning skill A skill for animation work in e-learning and tutoring apps: it sets timings, answer feedback and progress cues.
CX Codex +1
570installs
nuxt-seo skill A skill covering the eight Nuxt SEO v5 modules: robots.txt, sitemaps, OG images, Schema.org and meta tags. Useful when a Nuxt app needs SEO wired up.
CX Codex +1
324installs
travel-hospitality skill Guides AI coding agents on animation rules and timing standards for travel booking platforms and hospitality apps.
CX Codex +1
568installs
dramatic-2000ms-plus skill A skill for animation sequences over 2000ms: cinematic intros, story sequences, premium onboarding. Useful when the animation is the product.
CX Codex +1
566installs
open-pencil-design-editor skill Teaches your coding agent to inspect, modify, and export local .fig design files using OpenPencil CLI commands or an MCP server. Useful for automated layout generation.
CX Codex +1
810installs
loading-states skill A skill for loading indicators: spinners, progress bars, skeletons and shimmer. Useful when the UI has to show the system is working.
CX Codex +1
565installs
rive-animations skill A skill that walks your agent through building Rive animations on Disney's 12 principles: state machines, inputs, timing, React hooks.
CX Codex +1
564installs
notifications-toasts skill Guides AI assistants on animating toasts and system alerts using classic animation principles. Useful when building smooth UI notifications.
CX Codex +1
561installs
tailwindcss skill A skill that teaches AI agents to style the JARVIS assistant UI with Tailwind utility classes: dark HUD theme, responsive grids, animations, and tests before implementation.
CX Codex +1
498installs
vtex-io-rootpath skill A skill for VTEX IO apps in multi-binding stores: shows how to build URLs with the binding's path prefix. Useful when links 404 or point to the wrong locale.
CX Codex +1
740installs
frontend-developer skill Translates Disney's 12 animation principles into code for UI transitions and micro-interactions. Helpful when building accessible, performant web animations.
CX Codex +1
558installs
navigation-menus skill A skill for animating navbars, dropdowns and sidebars: timings, easing curves and transition states built on Disney's principles.
CX Codex +1
557installs
instrument-integration skill This skill adds the PostHog SDK to an app: it detects the stack, installs the package, writes the initialization and env vars.
CX Codex +1
537installs
typescript-data-visualization-engineering
official skill Guides typed data visualization architecture in TypeScript, covering data contracts, state boundaries, and renderer selection from D3 to WebGL.
CX Codex GP ChatGPT
9installs
gantt-chart-visualization
official skill Designs Gantt charts, audits schedule models, and selects frontend visualization stacks. Useful when task dates, milestones, and dependencies guide project plans.
CX Codex GP ChatGPT
9installs
canvas2d-data-visualization
official skill Renders data visualizations with Canvas2D when DOM overhead slows down the page. Designed for dense scatterplots, sparkline grids, heatmaps, and streaming traces.
CX Codex GP ChatGPT
9installs
2,361–2,400 of 2,909
