NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
storefront-builder skill Walks an agent through building a Saleor storefront: GraphQL wiring, design, then catalog with variant selection. Useful when the frontend exists but the data layer does not.
CX Codex +1
384installs
interactive-portfolio skill A skill that shapes a personal portfolio so a visitor gets who you are and what you do within seconds. Aimed at developers and designers.
608installs
playwright-interactive-sandbox skill This skill runs iterative web UI checks through a persistent Node.js Playwright workflow. Use it for functional checks, visual QA, and screenshot evidence.
CX Codex +1
400installs
safe-action-tanstack-query skill Connects next-safe-action mutations to TanStack Query with typed error handling, cache updates, and invalidation. Use it when React Query already handles your client data.
CX Codex +1
438installs
frontend-dev-guidelines skill A skill that gives the agent one set of rules for React and TypeScript work: Suspense, lazy loading, features layout, MUI v7 and TanStack.
556installs
claude-d3js-skill skill Tells the agent how to build non-standard d3.js visualisations: network graphs, geographic maps, choreographed transitions. Useful when off-the-shelf charting libraries fall short.
531installs
primevue skill Sets up PrimeVue in Vue 3 and Vite projects. It guides theme presets like Aura and configures component auto-importing.
CX Codex +1
527installs
frontend-ui-dark-ts skill A skill for building dark React interfaces with Tailwind CSS: custom theming, glassmorphism, Framer Motion animations. Handy for dashboards and admin panels.
5installs
implement_lenis_scroll skill A skill that walks the agent through wiring Lenis into a React or Next.js app: package install, a wrapper component, layout integration. Useful when you want smooth scrolling without writing the hook yourself.
CX Codex +1
468installs
mobile-first-website-design skill A skill that walks the agent through landing and marketing pages: style-free structure first, identity second, implementation from the narrowest width up.
CX Codex +1
318installs
design-like-im-5 skill A skill for designing and reviewing interfaces: keeps the user-facing core simple and checks states, inputs and screen sizes.
CX Codex +1
304installs
dtcg-tokens skill Turn multimodal source material into DTCG tokens, evidence data, and an HTML proof artifact. Use it when token choices need to trace back to inspectable source material and pass visual review.
CX Codex +1
303installs
zoom-video-sdk-web
official skill Walks your agent through building a custom video session with the Zoom Video SDK for Web: joining, camera, screen share, recording.
CX Codex GP ChatGPT
★ 7,604repo stars
ui-toolkit
official skill A skill that walks the agent through wiring a prebuilt Zoom Video SDK web UI into your app. Useful when you need a custom session, not a regular Zoom meeting.
CX Codex GP ChatGPT
★ 7,604repo stars
zoom-meeting-sdk-web-component-view
official skill This skill guides agents through embedding a Zoom meeting with Component View. Use it when a web app needs a custom meeting layout.
CX Codex GP ChatGPT
★ 7,604repo stars
zoom-meeting-sdk-web-client-view
official skill A Claude and Claude skill that helps wire up the Zoom Meeting SDK Web in Client View — a full-page meeting with the familiar Zoom interface.
CX Codex GP ChatGPT
★ 7,604repo stars
stripe-apps
official skill This skill guides Stripe App work from scaffolding and Dashboard UI to webhooks, uploads, versioning, and marketplace release.
CX Codex GP ChatGPT
★ 7,604repo stars
shopify-polaris-checkout-extensions
official skill Writes Shopify checkout UI extension code: searches the docs, validates the result and scaffolds new extensions through Shopify CLI.
CX Codex GP ChatGPT
★ 7,604repo stars
shopify-polaris-admin-extensions
official skill A skill that steers Claude through building Shopify admin UI extensions: look up the docs, write Polaris code, then validate it before you get an answer.
CX Codex GP ChatGPT
★ 7,604repo stars
magicpath
official skill This skill wires the agent to the MagicPath platform: it finds canvas components, installs them into your repo and edits them as code. Handy when design lives in MagicPath and the app lives in git.
CX Codex GP ChatGPT
★ 7,604repo stars
ui-mockup skill Create ASCII wireframes, standalone HTML screens, or live prototypes from product requirements. Use the skill to review a proposed interface before building it.
CX Codex +1
★ 8,227repo stars
zustand-store-ts skill A skill that sets the pattern for Zustand stores in TypeScript: separate state and action types, subscribeWithSelector, individual selectors.
3installs
auteur skill A skill that designs and builds web experiences from scratch: landing pages, cinematic scroll-directed sites, and multi-screen products in one style.
CX Codex +1
★ 1,042repo stars
accessibility skill This skill guides Claude Code through web accessibility reviews based on WCAG 2.1. Use it to inspect keyboard access, screen reader support, and interface elements.
325installs
react-patterns skill Get guidance on React components, hooks, state choices, and performance. Useful when building or refactoring a React interface with TypeScript.
321installs
core-web-vitals skill This skill examines LCP, INP, and CLS and suggests code changes for loading, responsiveness, and layout stability. Use it when diagnosing weak page metrics.
315installs
ui-dev skill Guides UI work in a vanilla TypeScript renderer, with patterns for components, dialogs, dropdowns, and styling.
CX Codex +1
★ 1,388repo stars
add-npm-dependency skill A skill that walks the agent through npm dependency changes in an Electron app: three build targets, CSS copying, native module rebuilds.
CX Codex +1
★ 1,388repo stars
web-quality-audit skill This skill reviews a project for performance, accessibility, SEO, and web best practices. Use it to find issues and get prioritized fixes with code examples.
294installs
frontend-to-backend-requirements skill A skill that helps a frontend developer tell backend what data a screen needs, without dictating the API shape.
278installs
i18n-localization skill A Claude skill covering internationalization and localization: translation keys, locale files, RTL layout and a checker script.
251installs
nextjs-developer skill Build Next.js 14+ apps with App Router using guidance for server components, data fetching, SEO, and deployment preparation.
CX Codex +1
★ 4,679repo stars
data-viz-renderer skill Turn JSON data into standalone HTML/SVG infographics, from metric cards to process diagrams. Use it to build report visuals or combine metrics and charts in a dashboard.
CX Codex +1
★ 4,679repo stars
html-injection-testing skill This skill guides checks for HTML injection in web apps and helps assess how injected markup affects rendered pages. Use it when reviewing user-input handling.
234installs
angular skill This skill guides Angular v20+ work with Signals, standalone components, zoneless setup, SSR, and reactive code. Use it for new apps or staged upgrades.
216installs
tanstack-query-expert skill This skill guides TanStack Query work in React and Next.js, from query design and cache handling to mutations and server-side hydration. Use it when building or revising data-fetching flows.
196installs
develop-timeline-studio-plugin skill Guides work on image and video generation connectors for Timeline Studio, from provider checks to importing finished media. Use it when adding or reviewing a provider integration.
CX Codex +1
★ 901repo stars
astro skill This skill guides Astro projects with Markdown or MDX content and selectively hydrated interactive components. Use it for blogs, documentation, and portfolio sites.
157installs
performance-profiling skill A Claude skill that keeps the agent on a fixed loop: measure, find the bottleneck, change one thing, confirm the result. Useful when a page drags.
132installs
react-useeffect skill A skill that walks through React's useEffect rules from the official docs and points out what to use instead when an Effect is unnecessary.
127installs
2,841–2,880 of 2,909
