NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
globe-particles skill Renders a 3D particle globe with a luminous spherical core and an orbital disc using WebGL and Three.js. Useful for data visualizations and dark themes.
CX Codex +1
1,400installs
agency-grid-layout-minimal skill Sets a minimal agency-site direction with an editorial grid, oversized type and restrained image framing. Use it when a page needs structure rather than card-heavy sections.
CX Codex +1
1,400installs
unicorn-studio skill Guides you through embedding Unicorn Studio interactive WebGL scenes on a page: container setup, responsive sizing, performance tuning, layering with UI.
CX Codex +1
1,400installs
skeuomorphic-ui skill Generates tactile skeuomorphic web CSS with layered gradients, inset shadows, and reflective edges. Useful when buttons or panels need physical depth without cartoon gloss.
CX Codex +1
1,400installs
background-grid-webgl skill A skill that tells your coding agent how to build a perspective WebGL grid background with fading lines, particle haze and slow forward drift.
CX Codex +1
1,500installs
finesse-ui skill A skill for building and refining web interfaces: landing pages, dashboards, mobile screens, single components. It keeps an eye on type, color and motion.
CX Codex +1
1,000installs
replica-diff skill Measures an app clone against the original by calculating feature parity scores from a matrix and diffing UI layouts without penalizing rebrands.
CX Codex +1
625installs
epic-design skill A Claude Code skill that builds cinematic pages: scroll storytelling, parallax depth, animated text. No WebGL involved.
701installs
nuxt-modules skill Guides the creation of Nuxt modules, covering local directory extensions, npm package publication, runtime injections, and CI/CD automation.
CX Codex +1
2,700installs
replica-build skill Rebuilds an app screen by screen from the recon map: shell first, then the core flow, then every screen with all its states. Useful when you need to reproduce a product in your own code.
CX Codex +1
622installs
data-visualization skill Guides your agent through picking a chart type and setting axes, labels and accessible colors so the result reads without a legend.
CX Codex +1
2,400installs
layout-grid skill This skill defines a responsive page grid: columns, gutters, margins and breakpoint behaviour. Handy when you are setting up page structure from scratch.
CX Codex +1
2,400installs
icon-system skill Sets design specifications for icon systems, covering grids, size tiers, naming rules, and accessibility. Ideal for standardising iconography in design systems.
CX Codex +1
2,400installs
dark-mode-design skill This skill turns an existing light palette into a dark theme: surface elevation, contrast, desaturated accents. Use it when the light tokens already exist.
CX Codex +1
2,400installs
use-igniteui-blazor skill Sets up and configures Ignite UI for Blazor Lite components in .NET 8.0+ applications. It configures packages, styles, and interactive render modes.
CX Codex +1
1,500installs
scandinavian-design skill This skill guides interface work toward calm layouts, restrained monochrome styling, and clearer hierarchy. Use it to redesign a surface, review it, or explore prototype directions.
CX Codex +1
1,800installs
spline-interactive skill Guides agents on integrating interactive Spline 3D scenes into web apps. Useful for embedding 3D UI, configuring state animations, and handling object events in React.
CX Codex +1
2,800installs
gsap-scrolltrigger skill A skill that teaches the agent to write GSAP animations and ScrollTrigger scroll effects: tweens, timelines, pinning, parallax.
CX Codex +1
2,800installs
awwwards skill Turns a one-line prompt into a finished portfolio or landing page, using Awwwards Site of the Day as the quality bar.
CX Codex +1
1,300installs
ux-writing skill Writes and edits button labels, error messages, notifications and empty states against four standards: purposeful, concise, conversational, clear.
CX Codex +1
2,700installs
swiftui-patterns skill Guides SwiftUI view work around state, composition, environment wiring, and isolated previews. Use it when refactoring a screen or sorting out @Observable ownership.
CX Codex +1
4,500installs
responsive-design skill A skill that steers your coding agent toward layouts and interactions that hold up across screen sizes and input methods.
CX Codex +1
2,300installs
spacing-system skill Builds a systematic spacing scale from a 4px or 8px base unit with rules for padding and margins. Useful when cleaning up inconsistent layout values.
CX Codex +1
2,300installs
presentation-creator skill Creates interactive React and Vite slide decks with Sentry styling. Use it when a presentation needs real metrics, charts, and slide navigation.
CX Codex +1
2,900installs
react-devtools skill The skill connects your agent to a running React or React Native app and exposes the component tree, props, hooks and profiler data.
CX Codex +1
2,600installs
animejs skill A skill that feeds your coding agent Anime.js syntax: timelines, stagger, SVG morphing and keyframe sequences.
CX Codex +1
2,800installs
apple-hig-expert skill Audits iOS, macOS, watchOS, and visionOS interfaces against Apple HIG. Use it to review mockups or design native-feeling Apple UI.
662installs
build-game-audio-feedback skill Guides an agent through designing responsive audio cues for a Three.js or browser game: hits, blocks, music states.
CX Codex +1
1,300installs
optimize-threejs-games skill A skill that profiles and speeds up Three.js and WebGL games: it finds whether the CPU or the GPU is the bottleneck, then fixes it without breaking gameplay.
CX Codex +1
1,300installs
liquid-metal-border skill Guides React work with animated metal-fx WebGL borders for buttons, cards, and selected controls when visual states need a metallic frame.
CX Codex +1
1,300installs
beam-glow-states skill A React skill that wires the border-beam animated edge glow into loading, selected, current, focus and pressed states.
CX Codex +1
1,300installs
no-ai-design-slop skill A passive quality gate for UI work: it flags reflex design choices and common interface defects while you build or revise a screen.
CX Codex +1
1,300installs
documentary-brutalist-agency skill A skill for building creative agency and portfolio sites: billboard typography, hard black-and-white chapters, documentary collages.
CX Codex +1
1,300installs
thinking-orbs skill Guides coding agents to implement animated AI status indicators using the React thinking-orbs package. Useful for chat interfaces, copilot sidebars, and search tools.
CX Codex +1
1,300installs
editorial-service-booking skill Guidance for service websites with appointments, from editorial treatment browsing to booking states that retain each selection.
CX Codex +1
1,300installs
operational-enterprise-ai skill A skill for building or reworking enterprise product pages: system boundaries, approvals, audit, exceptions and rollback.
CX Codex +1
1,300installs
browser-video-recording skill Renders 60 fps 4:3 4K browser demo videos from in-app browser screenshots. Useful for Dribbble UI clips and product presentations with macOS cursor styling.
CX Codex +1
1,300installs
add-shader-cursor-trail skill Installs a WebGPU hero effect: a twinkling white halftone trail that follows the pointer, with chromatic ripples and film grain. Falls back to the static frame.
CX Codex +1
1,300installs
shaders-cursor-ripples skill Adds interactive WebGPU fluid distortion over existing images using the Shaders library. Useful when replacing old CSS spotlight reveals without altering layout.
CX Codex +1
1,400installs
swiftui-navigation skill Provides SwiftUI navigation architectures, covering typed stacks, multi-column layouts, sheets, and tabs. Useful when structuring navigation state across iOS and macOS apps.
CX Codex +1
4,400installs
881–920 of 2,909
