NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
css-native skill A skill that tells your coding agent when plain CSS is enough for animations and visual effects, and when to reach for a library.
CX Codex +1
1,100installs
gsap skill This skill helps an agent write GSAP animations with timelines, staggered effects, and ScrollTrigger. Use it for complex motion and scroll-linked scenes.
CX Codex +1
997installs
canvas-generative skill A skill for algorithmic graphics on Canvas 2D: particles, flow fields, noise, fractals and L-systems. Useful when you need a browser animation or a generative still.
CX Codex +1
995installs
r3f-interaction skill Configures pointer events, object picking, dragging, and camera controls in React Three Fiber. Helps avoid input conflicts between 3D scene controls and interactive meshes.
CX Codex +1
3,300installs
llm-icon-finder skill This skill finds icon URLs for AI models and providers in the lobe-icons library and can download them as SVG, PNG or WEBP.
CX Codex +1
952installs
antv-x6-editor skill Teaches the agent to build flowchart, DAG and ER diagram editors on @antv/x6, wire up plugins and track down rendering bugs.
CX Codex +1
676installs
framer-motion skill Guides coding agents on Framer Motion and Motion patterns in React: layout transitions, gestures, and DOM-direct motion values.
CX Codex +1
990installs
desktop-principles skill A skill with desktop UX rules: hover states, pointer precision, keyboard shortcuts, multi-window patterns. Useful when the interface targets macOS, Windows or Linux.
CX Codex +1
982installs
om-auto-qa-pr skill Verifies UI changes in a real browser, captures screenshots, and produces pass or fail reports. Useful for pull request checks and local worktrees.
CX Codex +1
3,200installs
swap-integration skill Integrates Uniswap token swaps into frontends, backend scripts, and smart contracts. Useful when connecting the Uniswap Trading API or Universal Router.
CX Codex +1
2,200installs
mobile-principles skill A rule set for mobile interfaces: tap target sizes, no-hover doctrine, thumb zones, safe areas and gestures. Loads when the agent detects a mobile platform.
CX Codex +1
974installs
ecommerce-checkout-optimization skill Walks through your checkout funnel and points at where buyers abandon the cart. Useful when checkout conversion stalls.
CX Codex +1
1,200installs
qt-ui-design skill A skill that walks an AI agent through designing or auditing interfaces for Qt/QML apps, the web and embedded panels: layout, navigation, contrast, hit targets.
CX Codex +1
1,100installs
qt-qml skill Enforces QML coding standards during component authoring, refactoring, and code review. Designed for developers building Qt 6 user interfaces.
CX Codex +1
1,100installs
interface-kit skill A skill that gives the agent a working order for interface code: accessibility first, then type, grid, color, motion. Useful when you build a component or landing page and want it to look deliberate.
CX Codex +1
2,200installs
product-showcase skill This skill turns a running web app into a multi-page site with real screenshots and visual workflow guides. Use it when a static image cannot explain how the app works.
CX Codex +1
1,100installs
onboarding-ux skill This skill walks your app as a first-time user, finds where they get stuck, and writes the copy plus code for empty states, hints and welcome screens.
CX Codex +1
1,100installs
ui-craft skill A design and implementation skill for interfaces: it inspects the project first, then writes code. Built to kill the generic AI look.
CX Codex +1
1,400installs
ui-mobile skill Gives the agent hard rules for mobile interfaces: 44×44 touch targets, WCAG 2.1 AA contrast, visible button boundaries.
CX Codex +1
1,200installs
compatibility-testing skill Organizes cross-browser and responsive layout testing across devices and screen sizes. Useful before major releases and right after layout rewrites.
CX Codex +1
651installs
workflow-progress-screenshots skill Instructs coding agents to capture and send real visual progress screenshots automatically. Built for UI, 3D, charts, and motion tasks.
CX Codex +1
341installs
compose-multiplatform skill Provides Compose Multiplatform patterns for Android, iOS, Desktop, and Web. It guides UI architecture and platform interop via expect and actual declarations.
CX Codex +1
951installs
apple-launch-film skill Builds an Apple-style Mac launch film entirely in code: menu bar, notch, widgets and gradient wallpapers. Useful when you need a launch video without screen recording or After Effects.
CX Codex +1
1,500installs
title-sequence-3d skill Creates cinematic 3D title sequences in code using Three.js and Claude Code. Best for scroll-stopping video intros, social hooks, or newsletter openers.
CX Codex +1
1,500installs
launch-video skill Builds 30-45 second product launch promo videos as self-contained HTML files with deterministic frame seeking for MP4 export. Useful for SaaS launches and course announcements.
CX Codex +1
1,500installs
ux-designer skill A skill for reviewing and building interfaces: it checks accessibility, screen states and microcopy, and supplies the numbers for spacing and contrast.
CX Codex +1
1,600installs
swiftui-motion skill Provides SwiftUI animation rules and decision trees for coding agents. Helps configure springs, phase animators, and clean transitions without visual bugs.
CX Codex +1
943installs
compose-motion skill A skill for Jetpack Compose animation: picks the right API for the job and hands over ready spring specs. Built for Android and Compose Multiplatform.
CX Codex +1
943installs
swiftui-graphics skill A skill for advanced SwiftUI visuals: Metal shaders, .visualEffect, iOS 26 Liquid Glass and Canvas. Useful once built-in modifiers stop being enough.
CX Codex +1
939installs
compose-graphics skill A skill for advanced Jetpack Compose visuals: Material 3 Expressive spring physics, AGSL shaders, Canvas drawing and graphicsLayer effects.
CX Codex +1
937installs
frontend-testing-debugging
official skill Guides coding agents through structured frontend testing, UI checks, and bug investigations. Runs validation loops using Browser tools or local Playwright.
CX Codex GP ChatGPT
159installs
design-system skill Extracts design tokens from UI screenshots or mockups into docs/design.md for agents and a mirrored docs/design.html style guide.
CX Codex +1
1,800installs
svelte5-best-practices skill A skill that feeds your coding agent Svelte 5 runes, snippets and SvelteKit patterns while you write or refactor components.
CX Codex +1
16,600installs
swiss-design skill A skill that hands your coding agent a Swiss International Style design system: IBM Plex Sans type, a 12-column grid, stone palette and one accent color.
CX Codex +1
951installs
paper-cinder-transition skill A WebGL transition where a line of fire eats the old page and reveals the next scene live behind it. Use it when a fade or slide reads cheap.
CX Codex +1
330installs
responsive-patterns skill Supplies container query guidelines, fluid typography rules, and CSS subgrid patterns for React components. Helps build adaptable UI elements without relying on viewport media queries.
CX Codex +1
1,600installs
craft-design-engineering skill A skill that hands your agent design engineering rules: type, colour, spacing, motion and numbers. Useful when a UI needs to look finished.
CX Codex +1
479installs
wireframe skill Designs what sits on a screen, where it goes and what matters most. Useful while layout is still cheap to change.
CX Codex +1
2,300installs
3d-orbit-inspect-demo skill A Three.js skill where the object leans under the cursor and lifts into your hand on click. Built for product and portfolio pieces.
CX Codex +1
321installs
edgeone skill Deploys HTML content or web projects to EdgeOne Pages and returns a public URL. Useful when you need to share a live page without creating an account.
CX Codex +1
2,200installs
1,281–1,320 of 2,909
