NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
frontend-design
official skill This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough.
1,025,790installs
design-taste-frontend skill This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished.
CX Codex +1
678,700installs
prototype skill Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase.
986,201installs
hyperframes skill Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI.
CX Codex +1
1,200,000installs
hyperframes-cli skill Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes.
CX Codex +1
1,300,000installs
webapp-testing
official skill This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs.
186,758installs
hyperframes-registry skill Finds and installs about 450 ready-made HyperFrames blocks and components as editable source code. Useful when adding video effects and titles without building markup from scratch.
CX Codex +1
1,000,000installs
ui-ux-pro-max skill Equips coding agents with a local catalog of 119 UX guidelines, 74 font pairings, and 192 product palettes. Useful when designing components or tuning accessibility.
CX Codex +1
417,000installs
impeccable skill A skill for your coding agent that designs and reworks interfaces: landing pages, dashboards, forms, iOS and Android screens. Useful when the UI needs real design decisions, not guesswork.
CX Codex +1
363,400installs
web-artifacts-builder
official skill This skill builds complex claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui. Use it for interfaces with state or routing.
112,122installs
theme-factory
official skill Applies preset color palettes and font pairs to slides, documents, and HTML pages. Use it when an artifact needs one consistent visual style.
94,921installs
algorithmic-art
official skill Creates p5.js generative art with seeded randomness and adjustable parameters. Use it for flow fields, particle systems, and code-based visual experiments.
89,081installs
remotion-to-hyperframes skill Imports Remotion animations or video footage into HyperFrames and verifies visual matching frame by frame against the original.
CX Codex +1
510,300installs
shadcn skill A skill that keeps your agent on the rails with shadcn/ui: adds components, searches registries, fixes markup and builds a design system from your spec.
CX Codex +1
123,300installs
slideshow skill Builds a HyperFrames deck you present live: slides, fragment reveals, branching hotspots and presenter notes. Meant for showing, not for rendering video.
CX Codex +1
420,300installs
figma skill Imports assets, brand tokens and components from Figma into a HyperFrames project, then turns storyboard frames into motion. Useful when a design has to move, not sit still.
CX Codex +1
334,000installs
vercel-composition-patterns skill A rule set that pushes your agent away from boolean props and toward compound components, shared context and state lifted into providers.
CX Codex +1
418,600installs
emil-design-eng skill This skill guides UI polish, component details, and animation choices. Use it when an interface works but its states and transitions need closer review.
CX Codex +1
388,200installs
vercel-react-native-skills skill A rules pack for React Native and Expo work: lists, animations, navigation, native modules. Load it so your agent makes mobile changes the same way every time.
CX Codex +1
255,200installs
review-animations skill Reviews UI animation and motion code against Emil Kowalski's design standards. Flags slow easings, non-GPU properties, and unnecessary transitions.
CX Codex +1
256,500installs
apple-design skill Translates Apple's fluid interface principles from WWDC talks into web code with Pointer Events and spring physics. Essential for gesture-driven sheets, drags, and sliders.
CX Codex +1
244,500installs
animation-vocabulary skill This skill maps a vague web animation description to the right term. Use it when you need wording for an AI prompt or a designer.
CX Codex +1
239,000installs
improve-animations skill Surveys motion and animation code across your project, then generates self-contained fix plans. It spots janky keyframes and poor easing without altering source files.
CX Codex +1
224,200installs
find-animation-opportunities skill Scans a codebase or UI for motion that would clarify states and interactions, while rejecting decoration that gets in the way. It is read-only.
CX Codex +1
208,900installs
pick-ui-library skill A skill that maps a frontend task to one library from Emil Kowalski's curated list: toasts, charts, OTP fields, virtualization, drag and drop. Runs only when you call it.
CX Codex +1
185,400installs
turborepo skill Configures Turborepo monorepos and troubleshoots task pipelines. Useful when editing turbo.json, setting up caching, or fixing CI builds.
CX Codex +1
84,700installs
vercel-react-view-transitions skill A skill that walks your agent through native view transitions in React: page changes, shared elements, enter and exit animations without third-party libraries.
CX Codex +1
168,100installs
prototype skill The skill builds several genuinely different versions of one piece of UI and puts them behind a visual picker, so you flip through them live and keep the one that feels right.
CX Codex +1
174,300installs
animate skill Builds UI animations from scratch following Emil Kowalski's motion philosophy. Use it when adding motion, transitions, or component interactions.
CX Codex +1
172,700installs
migrate-radix-to-base skill Migrates React components and full projects from Radix UI to Base UI (@base-ui/react). Useful when switching the underlying primitives in shadcn/ui projects.
CX Codex +1
30,400installs
hallmark skill A design skill for AI coding that keeps generated UIs from looking generated. Useful when you ask an agent to build a new page or site.
CX Codex +1
70,800installs
ask-sonner skill A skill for the Sonner React toast library: how to mount the Toaster, which toast() call to use, and how to fix toasts that never show up.
CX Codex +1
140,500installs
design-system skill This skill builds design tokens, component specs, and presentation slides. Use it when an interface and its slides need to follow one visual system.
CX Codex +1
43,200installs
remotion-best-practices skill Routes Remotion tasks to focused guidance for video creation, React markup, maps, multimedia, previews, and rendering.
CX Codex +1
684,500installs
animate-expo skill Builds React Native and Expo animations using Reanimated and Gesture Handler. Helps keep motion on the UI thread and avoid dropped frames on physical devices.
CX Codex +1
137,900installs
design skill Generates logos, brand identity assets, design tokens, Chart.js HTML slides, and multi-platform banners using Python scripts and AI providers.
CX Codex +1
41,800installs
ui-styling skill A skill that helps your agent build accessible interfaces with shadcn/ui and Tailwind CSS: components, themes, dark mode, responsive layouts and canvas design.
CX Codex +1
41,200installs
brand skill Keeps brand voice, visual rules and design tokens in one markdown file, then feeds them to your agent's prompts and to your CSS variables.
CX Codex +1
40,500installs
banner-design skill Generates banners for social media, ads, and web hero sections using HTML/CSS. Useful when you need fast visual creative assets directly in your coding agent.
CX Codex +1
40,000installs
slides skill Builds strategic HTML presentations using Chart.js and design tokens. Useful for generating pitch decks and marketing slides directly from the agent.
CX Codex +1
39,300installs
1–40 of 2,909
