NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
angular-ssr skill A skill for Angular SSR, hydration, and prerendering tasks. It is deprecated and no longer maintained.
CX Codex +1
3,900installs
create-canvas skill This skill builds a freeform canvas inside your project so UI variants sit side by side, move around, and get compared without a page reload.
CX Codex +1
381installs
code-to-prd skill This skill turns a codebase into a PRD covering pages, routes, APIs, and user actions. Use it when existing behavior needs product-readable documentation.
763installs
roku skill Gives the agent a written design system for an app dashboard: purple palette, top-bar navigation, card layouts. Useful when the UI has drifted apart.
CX Codex +1
2,000installs
power skill Turns the agent into a design-system author for a dark, monochrome look with bold headings. Useful when you need component rules and accessibility checks without writing them by hand.
CX Codex +1
2,000installs
geometric skill Defines structured design system guidelines using Inter typography and neutral colors. Helpful when building accessible UI components under WCAG 2.2 AA.
CX Codex +1
2,000installs
stitch skill stitch gives an AI coding agent concrete design-system rules for data-heavy interfaces, including tokens, component states, accessibility, and QA.
CX Codex +1
2,000installs
data-table-filters skill This skill helps build React tables with filters, sorting, virtualization, and infinite scroll. It fits projects using the shadcn registry.
CX Codex +1
476installs
web3d-integration-patterns skill This skill helps plan 3D web experiences that combine Three.js, React Three Fiber, and animation libraries. Use it for scroll-driven scenes and physics-based interactions.
CX Codex +1
3,200installs
globe-gl skill Sets up 3D globe visualizations using globe.gl with WebGL and ThreeJS. Helps configure data layers like points, arcs, and polygons in plain HTML or React.
CX Codex +1
1,500installs
vantajs skill Adds animated Vanta.js backgrounds and explains setup for static sites, React, and Next.js.
CX Codex +1
1,500installs
atmosphere-background skill A skill for building a dark atmospheric backdrop: vertical light folds drift slowly across the frame and the glow concentrates in one corner or along the lower edge.
CX Codex +1
1,500installs
editorial-tech skill Guides code agents to blend magazine typography with technical product UI using asymmetrical grids, mono labels, and restrained accent color.
CX Codex +1
1,500installs
css-alpha-masking skill This skill adds CSS alpha masks with gradient edge fades. Use it when an image, text block, or container needs a horizontal or vertical fade.
CX Codex +1
1,500installs
stitched-full-page-capture skill Stitches a full-page screenshot from settled viewport slices when a one-shot fullPage capture comes back blank. Built for Framer, WebGL and lazy-loaded pages.
CX Codex +1
1,500installs
glass-dark-ui skill Builds dark glassmorphism layouts with frosted surfaces and gradient masked borders. Useful for dark dashboards, hero sections, and cards in HTML, Tailwind, or React.
CX Codex +1
1,500installs
build-threejs-scroll-worlds skill Builds scroll-controlled Three.js worlds that stay spatially continuous across authored chapters. Useful for interactive portfolios, product stories, exhibitions, and WebGL explainers.
CX Codex +1
1,500installs
container-lines skill This skill adds thin vertical guide lines at the edges of the content container, plus mini corner squares on sections. Useful when a layout feels loose and needs structure.
CX Codex +1
1,500installs
company-logos skill Guides agents to use Iconify Simple Icons in a 64x64 box instead of plain text names or random raster images.
CX Codex +1
1,500installs
matterjs skill Walks the agent through a Matter.js scene: engine, render, runner, bodies and mouse dragging. Useful when a canvas needs physics.
CX Codex +1
1,500installs
css-border-gradient skill Applies refined gradient border treatments to cards, modals, and buttons in CSS or Tailwind. Useful when surfaces need subtle edge highlights without loud glowing outlines.
CX Codex +1
1,500installs
scroll-scrubbed-visual-sequence skill Builds reversible visual scenes driven by native scrolling, from product assembly to interface walkthroughs. Useful for interactive hero sections, diagrams, and image sequences.
CX Codex +1
1,500installs
unsplash-asset-images skill This skill picks Unsplash photos for avatars, headshots, backgrounds and wallpapers, and names the ratios and resolutions you need.
CX Codex +1
1,600installs
scroll-world-storytelling skill Turns articles, case studies, and product journeys into visual scroll-driven landing pages. Useful when you need a connected story instead of generic stacked sections.
CX Codex +1
1,600installs
staggered-word-reveal skill Builds word-by-word text reveals as content enters the viewport. Use it for short headlines, section intros, quotes, and hero copy.
CX Codex +1
1,600installs
landing-page-generator skill Generates Next.js/React TSX landing pages with Tailwind CSS. Use it for marketing pages, homepages, lead capture pages, or landing-page A/B variants.
754installs
navigation-event skill Intercepts back gestures and sets up Predictive Back animations via androidx.navigationevent in Compose Android. Helps migrate from legacy BackHandler.
CX Codex +1
546installs
typography-scale skill Builds a modular type scale with sizes, weights and line heights. Useful when you are setting up a design system from scratch.
CX Codex +1
2,600installs
flutter-animations skill A skill that adds, fixes, refactors or explains Flutter animations, from implicit widgets to springs and Hero transitions.
CX Codex +1
15,400installs
ios-accessibility skill Guides accessibility reviews and code adjustments for Apple user interfaces. Helps configure screen reader flows, font scaling, and assistive focus states across devices.
CX Codex +1
4,900installs
remotion-render skill This skill sends a Remotion React component to inference.sh and gets back an MP4. Useful when video should come from code, not from a timeline editor.
CX Codex +1
109,700installs
ui-screenshots
official skill A skill that photographs web pages and desktop windows so the agent can document visual changes before and after a code edit.
209installs
bencium-impact-designer skill Creates frontend interfaces with a clear visual direction. Use it for components, pages, and web apps when a generic look will not do.
CX Codex +1
5,400installs
nuxt-content skill A skill for @nuxt/content work: collections, schemas, queries and Markdown rendering. Useful once a Nuxt project grows and content needs types.
CX Codex +1
2,800installs
square skill This skill gives the agent a full set of Square design-system rules: tokens, type scale, component states and accessibility criteria. Useful when a UI needs one consistent style.
CX Codex +1
2,000installs
pulse skill Provides rules for the vibrant Pulse design system with 4px borders, orange color tokens, and Limelight typography. Generates component specs and checks WCAG 2.2 AA criteria.
CX Codex +1
2,000installs
basic skill This skill guides AI toward print-inspired interfaces for books, magazines, and reports. Use it when you need editorial grids, expressive type, and explicit accessibility rules.
CX Codex +1
2,000installs
color-system skill This skill walks an agent through building a product palette: tonal scales, semantic roles and WCAG contrast checks. Useful when colours are defined from scratch.
CX Codex +1
2,500installs
visual-hierarchy skill This skill sets the order in which interface elements attract attention through size, weight, colour, spacing, and position. Use it when composing new screens.
CX Codex +1
2,500installs
animated-component-libraries skill Helps AI coding agents integrate pre-built animated React components from Magic UI and React Bits. Useful for building landing pages and dashboards without writing custom motion scripts.
CX Codex +1
2,900installs
801–840 of 2,909
