NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
better-accessibility skill Reviews an interface against WCAG 2.2 and fixes issues in the project’s styling system. Use it to check keyboard navigation and screen-reader behavior.
CX Codex +1
29,600installs
better-writing skill Writes and reviews UI copy, from button labels to errors and empty states. It keeps product vocabulary consistent and guides users to the next step.
CX Codex +1
29,100installs
game-engine
official skill Guides GitHub Copilot when building browser games and game engines with HTML5 and JavaScript. Use it for 2D or 3D rendering, physics, collisions, and controls.
13,140installs
flags skill This skill runs React's feature-flag command and explains the results. Use it to compare release channels when a feature behaves differently between them.
CX Codex +1
1,100installs
flow skill Runs Flow type checking in a React project and reports errors with file locations. Useful when you edit code and don't want to look up the right renderer flag each time.
CX Codex +1
1,100installs
penpot-uiux-design
official skill A skill for building interfaces in Penpot via MCP tools: web, mobile, dashboards, design systems. Works with Penpot API directly from your code editor.
12,782installs
transitions-dev skill A skill with ready-made CSS transitions for web apps: modals, dropdowns, toasts, skeletons. Useful when you need motion in the UI without adding an animation library.
CX Codex +1
20,300installs
design-is skill Audits an interface against Dieter Rams' ten design principles, collects evidence with subagents, and generates a /make-plan prompt.
CX Codex +1
4,200installs
nextjs-app-router-patterns skill This skill covers Next.js App Router patterns for rendering, routing, and data fetching. Use it when starting an App Router project or moving from Pages Router.
CX Codex
32,529installs
web-quality-audit skill Runs an evidence-led web quality audit across performance, accessibility, SEO, and best practices using live browser telemetry and source code.
CX Codex +1
32,700installs
fixing-metadata skill Audits page metadata and fixes what's broken: titles, descriptions, canonical URLs, Open Graph, Twitter cards, icons and JSON-LD.
CX Codex +1
18,200installs
core-web-vitals skill A skill that measures first, then fixes LCP, INP and CLS. Handy when a page loads slowly or the layout jumps around.
CX Codex +1
32,000installs
react skill This skill turns json-render JSON specs into React component trees. Use it when building JSON-driven UIs or defining a component catalog for generated specs.
CX Codex +1
16,300installs
vue-best-practices skill Enforces Vue 3 guidelines using Composition API and TypeScript. Helpful for structuring SFCs, managing reactivity, and writing composables.
CX Codex +1
42,900installs
chakra-ui-builder skill Build responsive, accessible interfaces with Chakra UI v3, add the library to a project, and shape its theme. Useful for components, pages, and layouts.
CX Codex +1
3,500installs
modern-web-guidance skill A skill that searches a catalog of modern web guides and feeds the matching one to your agent. Useful when the model's training data has stale HTML, CSS or client-side JS patterns.
CX Codex +1
35,600installs
playwright-best-practices skill A reference skill for Playwright test architecture, locator design, and Page Object Model. Helps debug flaky runs, mock network requests, and audit accessibility.
CX Codex +1
98,500installs
core skill Defines the schema and component catalog for json-render and builds the system prompt that makes an AI emit JSON UI specs.
CX Codex +1
15,000installs
winui-app
official skill This skill helps create, configure, and review WinUI 3 apps built with C# and the Windows App SDK. Use it for new projects or XAML issues.
CX Codex +1
3,200installs
frontend-design skill The skill picks an aesthetic direction before the agent writes any code. Useful when you want a landing page, dashboard or component that does not look auto-generated.
CX Codex +1
3,700installs
text-to-lottie skill Generates, edits, and debugs Lottie JSON animations for the local Skia Skottie player. Helps create UI microinteractions, loaders, and animated charts.
CX Codex +1
10,700installs
ai-elements skill React component library for AI interfaces: messages, conversation history, prompt inputs, tool call displays. Built on shadcn/ui.
CX Codex +1
20,400installs
shadcn-svelte skill A skill for working with shadcn-svelte: adding components, building interfaces, fixing styles, and debugging projects. Use it if you're building UI with shadcn-svelte on Svelte or planning to start.
CX Codex +1
6,700installs
motion-design skill This skill guides UI animation choices, from timing and easing to choreography. Use it when planning micro-interactions, loading states, or page transitions.
CX Codex +1
19,900installs
a11y-debugging skill Audits web-page accessibility with Chrome DevTools MCP, covering semantics, ARIA, focus states, keyboard navigation, tap targets and contrast.
CX Codex +1
3,600installs
extract-design-system skill This skill extracts design primitives from a public website and generates starter tokens.json and tokens.css files for your project.
CX Codex +1
130,700installs
figma-generate-design
official skill Turns an app page or multi-section layout into a Figma screen built from your published design system, not hand-drawn boxes.
CX Codex +1
2,900installs
figma-create-design-system-rules
official skill Generates project-specific design system guidelines for AI coding agents handling Figma-to-code tasks. It inspects existing components and writes rules directly into your repository.
CX Codex +1
2,900installs
shadcn-vue skill Teaches coding agents shadcn-vue architecture, proper CLI runners, FieldGroup form composition, and strict Tailwind semantic token rules.
CX Codex +1
5,800installs
mobile-android-design skill This skill guides native Android UI work with Material Design 3 and Jetpack Compose. Use it for screens, navigation, adaptive layouts, and accessibility checks.
CX Codex
24,847installs
debug-optimize-lcp skill Breaks Largest Contentful Paint into four sequential stages and shows exactly where the main content load is bottlenecked.
CX Codex +1
3,600installs
design-critique
official skill Provides structured design critique covering usability, visual hierarchy, and accessibility. Works with Figma links, screenshots, or screen descriptions.
CX Codex +1
5,300installs
next-intl-add-language
official skill Adds a language to a Next.js app using next-intl by translating en.json and updating locale setup. Use it when a new locale must appear in the UI.
9,349installs
design-mobile-apps skill Designs mobile screens via the Sleek REST API and translates them into React Native or HTML code.
CX Codex +1
1,000,000installs
nuxt skill This skill equips your AI agent with Nuxt 5 knowledge: server-side rendering, file-based routing, auto-imports, and Nitro v3 deployment. Use it when building Nuxt apps, server routes, useFetch calls, middleware, or hybrid rendering.
CX Codex +1
24,100installs
agentation skill Adds a visual feedback toolbar to a Next.js project and, on request, wires it to your coding agent over MCP.
CX Codex +1
13,600installs
mobile-ios-design skill Guides native iOS interface work with Apple HIG and SwiftUI patterns. Use it when building views, navigation, or adaptive layouts.
CX Codex
23,659installs
vscode-ext-commands
official skill This skill guides VS Code extension command work, covering naming, visibility, localization, icons, and related contribution details.
9,000installs
fluentui-blazor
official skill This skill guides Blazor work with Microsoft Fluent UI components, service providers, forms, dialogs, and themes. Use it while building or debugging a Fluent UI app.
9,000installs
chakra-ui-refactor skill Reviews components against Chakra UI v3 patterns and converts markup from HTML, Tailwind, or styled-components. Useful for UI refactoring and accessibility audits.
CX Codex +1
2,800installs
161–200 of 2,909
