NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
web-design-guidelines skill This skill checks web interfaces against accessibility and UX rules. Use it to audit UI code, forms, or keyboard navigation.
CX Codex +1
896installs
catalyst-slate skill Walks your agent through deploying a frontend to Catalyst Slate: scaffold the app, configure slate-config.toml, ship the build. Handy when React or Next.js needs to live on Catalyst.
CX Codex +1
1,000installs
sync-figma-token skill This skill diffs design tokens in code against Figma variables, reports drift, and applies changes only after you approve them.
CX Codex +1
676installs
storybook skill Enforces Storybook best practices for component libraries, covering file structure, autodocs, controls, and interaction tests.
CX Codex +1
909installs
agency-agents-ai-specialists skill Swap in a specialist persona — frontend, backend, reviewer, UX — and let it carry the task with its own workflow.
CX Codex +1
2,100installs
gsap skill A skill that teaches the agent GSAP animations: HUD panel entrances, status indicator transitions, scroll effects. Useful when the UI is built on Vue.
CX Codex +1
1,300installs
rspack-best-practices skill Ruleset for configuring, troubleshooting, and profiling Rspack builds. Helps coding agents apply native loaders and optimize bundle performance.
CX Codex +1
669installs
landing-page-design skill A skill that turns your agent into a landing page specialist, with reference files for building, diagnosing and validating pages.
CX Codex +1
447installs
design-systems skill Walks your agent through design tokens, a component library and accessibility rules in one project.
CX Codex +1
903installs
shopify-theme-development-guidelines skill This skill guides Shopify theme work across Liquid, Online Store 2.0, HTML, CSS, and JavaScript. Use it when building theme sections or reviewing structure and performance.
CX Codex +1
898installs
frontend-accessibility skill This skill adds WCAG guidelines to your coding workflow. It instructs agents to write semantic HTML, configure ARIA attributes, and support keyboard navigation.
CX Codex +1
599installs
sveltekit-data-flow skill Teaches your AI coding assistant proper SvelteKit data flow patterns, from form actions and load functions to serialization and cache invalidation.
CX Codex +1
492installs
astro skill A skill that tells the agent how to build Astro sites: static generation, partial hydration, file-based routing and as little client-side JavaScript as possible.
CX Codex +1
886installs
21st-ui-build skill A skill for implementing pages and components in an existing web project: it reads your design context and tokens first, then searches 21st.
CX Codex +1
1,400installs
auth-web-cloudbase skill Guides frontend authentication and session handling for Tencent CloudBase in Web apps. Helps agents avoid deprecated methods and broken route guards.
CX Codex +1
951installs
modal-and-overlay-patterns skill Rules for selecting and building overlays, from tooltips and drawers to blocking modals, using a unified shell and strict ARIA requirements.
CX Codex +1
686installs
operational-expert-tool-ui skill Sets interface rules for dispatch, warehouse and logistics tools: data density over breathing room, status visible at a glance.
CX Codex +1
689installs
prototype skill Renders a proposed page redesign into one self-contained static HTML file you can open in a browser and iterate on from chat.
CX Codex +1
524installs
micro-interactions skill A skill that tells your coding agent how to animate buttons, toggles, checkboxes, loading indicators and notification badges.
CX Codex +1
1,400installs
swr skill SWR data-fetching guidelines for React and TypeScript apps. It guides agents on caching, request deduplication, and optimistic mutations.
CX Codex +1
870installs
tailwind skill A skill with 42 rules for Tailwind CSS v4: build setup, CSS generation, bundle size, theming. Useful for migrations and config work.
CX Codex +1
512installs
repeated-component-alignment skill A coding-agent skill that keeps cards, list rows and tiles aligned when text lengths differ. Useful whenever you build or review a repeated component.
CX Codex +1
678installs
ui-ux-pro-max-skill skill Describe a product to get a proposed page structure, visual style, palette, and font pairing. Use it to shape interface decisions before implementation.
CX Codex +1
2,000installs
trpc skill A rule set that steers an AI agent writing a Next.js app on tRPC v11. It keeps types flowing from server to client and keeps Zod validation in place.
CX Codex +1
864installs
cloudbase-document-database-web-sdk skill A skill for browser-side CloudBase document database work with @cloudbase/js-sdk, covering CRUD, queries, pagination, and realtime listeners.
CX Codex +1
932installs
tab-navigation skill A skill for designing tabs: when they fit, how the strip and panel are built, and how keyboard navigation should behave.
CX Codex +1
674installs
seo-best-practices skill Provides search optimization guidelines for web apps. Helps configure metadata, JSON-LD schemas, rendering modes, and Core Web Vitals.
CX Codex +1
858installs
flutter-internationalization skill Automates Flutter internationalization using gen-l10n and ARB files. Solves UI string extraction, RTL layout adjustments, and generated import errors.
CX Codex +1
536installs
awwwards-ui-skills skill Enforces Awwwards-style UI constraints for AI agents using light mode, Inter typography, and a 4px spacing grid.
CX Codex +1
560installs
accessibility-testing skill A skill that walks your agent through WCAG checks: axe scans, keyboard navigation, ARIA, screen readers. Useful when a project has to meet a11y requirements.
CX Codex +1
575installs
coordinated-data-views skill A coding-agent skill that explains how to show a table next to its map, diagram or chart and keep selection synced both ways.
CX Codex +1
668installs
svelte-template-directives skill A reference for Svelte template directives, from DOM attachments to HTML and snippets. Useful when building or debugging Svelte components.
CX Codex +1
474installs
authentic-product-representation skill Enforces truthful product visuals on landing pages and hero sections using real data instead of lorem ipsum. Use it to avoid synthetic marketing chrome.
CX Codex +1
662installs
domain-expert-configuration skill Guides coding agents to build settings panels, solver controls, and constraint editors tailored for non-developer domain experts.
CX Codex +1
660installs
ai-model-web skill Directs frontend apps to run AI models via @cloudbase/js-sdk straight from the browser without setting up a Node.js proxy.
CX Codex +1
913installs
performance-optimization skill A rule set for web performance: server-side rendering, CSS, JavaScript, assets and caching. Useful when your agent writes frontend code and you want a bar to hold it to.
CX Codex +1
848installs
sass-best-practices skill A skill that hands your agent a rulebook for indented-syntax Sass: file layout, variables, mixins, BEM. Useful when the project stylesheets are .sass, not SCSS.
CX Codex +1
845installs
nextjs-react-redux-typescript-cursor-rules skill Development guidelines for Next.js, React, Redux Toolkit, and TypeScript. Enforces Server Component defaults, strict typing, and specific code style standards.
CX Codex +1
842installs
vitest-testing-patterns skill Provides Vitest and React Testing Library conventions, mock patterns for APIs and databases, and directory rules for unit and component testing.
CX Codex +1
361installs
ui-audit skill Evaluates user interfaces against core UX guidelines from Making UX Decisions. Spots hierarchy flaws, navigation issues, and accessibility oversights.
CX Codex +1
542installs
1,961–2,000 of 2,909
