NeVibeCode · 257 items
Frontend and UI: skills, plugins, subagents, slash commands and mcp servers
Frontend and UI for Claude Code, Codex and Cursor: skills, plugins, subagents, slash commands and mcp servers, from popular to niche.
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.
Claude Code Claude.ai
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.
Claude Code CX Codex Cursor +1
673,100installs
prototype skill Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase.
Claude Code
986,201installs
hyperframes skill Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI.
Claude Code CX Codex Cursor +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.
Claude Code CX Codex Cursor +1
1,200,000installs
webapp-testing
official skill This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs.
Claude Code Claude.ai
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.
Claude Code CX Codex Cursor +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.
Claude Code CX Codex Cursor +1
413,800installs
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.
Claude Code CX Codex Cursor +1
359,200installs
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.
Claude Code Claude.ai
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.
Claude Code Claude.ai
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.
Claude Code Claude.ai
89,081installs
remotion-to-hyperframes skill Imports Remotion animations or video footage into HyperFrames and verifies visual matching frame by frame against the original.
Claude Code CX Codex Cursor +1
504,900installs
shadcn skill This skill helps add and configure shadcn/ui components while following project conventions. Use it when building interfaces, applying presets, or working on chat UI.
Claude Code CX Codex Cursor +1
122,100installs
slideshow skill Build live HyperFrames decks with slides, fragment reveals, branching hotspots, and presenter notes. Use it when the output should be a presentation rather than a video.
Claude Code CX Codex Cursor +1
415,500installs
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.
Claude Code CX Codex Cursor +1
329,500installs
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.
Claude Code CX Codex Cursor +1
416,700installs
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.
Claude Code CX Codex Cursor +1
385,500installs
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.
Claude Code CX Codex Cursor +1
253,900installs
review-animations skill Reviews UI animation and motion code against Emil Kowalski's design standards. Flags slow easings, non-GPU properties, and unnecessary transitions.
Claude Code CX Codex Cursor +1
254,100installs
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.
Claude Code CX Codex Cursor +1
242,100installs
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.
Claude Code CX Codex Cursor +1
236,900installs
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.
Claude Code CX Codex Cursor +1
222,000installs
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.
Claude Code CX Codex Cursor +1
206,800installs
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.
Claude Code CX Codex Cursor +1
183,400installs
turborepo skill Configures Turborepo monorepos and troubleshoots task pipelines. Useful when editing turbo.json, setting up caching, or fixing CI builds.
Claude Code CX Codex Cursor +1
84,600installs
vercel-react-view-transitions skill This skill guides React View Transition API work for route changes, shared elements, component enter and exit, and list reordering. It fits UI state changes without a third-party animation library.
Claude Code CX Codex Cursor +1
166,700installs
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.
Claude Code CX Codex Cursor +1
172,400installs
animate skill Builds UI animations from scratch following Emil Kowalski's motion philosophy. Use it when adding motion, transitions, or component interactions.
Claude Code CX Codex Cursor +1
170,400installs
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.
Claude Code CX Codex Cursor +1
30,100installs
hallmark skill Enforces strict frontend design constraints to stop coding assistants from producing generic, AI-looking web pages.
Claude Code CX Codex Cursor +1
69,100installs
ask-sonner skill A guide skill for Sonner, the React toast library: mount the Toaster, pick the right toast() call, style it, fix what breaks.
Claude Code CX Codex Cursor +1
138,600installs
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.
Claude Code CX Codex Cursor +1
42,200installs
remotion-best-practices skill Routes Remotion tasks to focused guidance for video creation, React markup, maps, multimedia, previews, and rendering.
Claude Code CX Codex Cursor +1
678,800installs
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.
Claude Code CX Codex Cursor +1
135,900installs
design skill Generates logos, brand identity assets, design tokens, Chart.js HTML slides, and multi-platform banners using Python scripts and AI providers.
Claude Code CX Codex Cursor +1
40,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.
Claude Code CX Codex Cursor +1
40,200installs
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.
Claude Code CX Codex Cursor +1
39,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.
Claude Code CX Codex Cursor +1
38,400installs
frontend-ui-engineering skill Enforces production standards for component architecture, WCAG 2.1 AA accessibility, and design systems. Stops AI models from defaulting to purple buttons, heavy shadows, and arbitrary spacing.
Claude Code CX Codex Cursor +1
66,600installs
1–40 of 257
Frontend is where agents most often produce code that looks fine and still ignores the project design system. Skills and rules in this topic pin down the stack (React, Next.js, Vue, Svelte, Tailwind), component conventions, accessibility and visual checks. Look at which framework version a skill targets and when it was last updated: instructions written for an old API do more harm than having none. To check the result in a real browser, pair them with a server from the browser MCP list.
