NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
depth skill Establishes elevation scales, two-part shadows, and inset surfaces. Helps make UI layers distinct when flat components blend together or look cluttered.
CX Codex +1
537installs
ux-usability-foundations skill Guides an AI agent to design, review, and refine interfaces around usability principles, error prevention, and user mental models.
CX Codex +1
559installs
lynx-typescript skill Configures TypeScript for Lynx and ReactLynx projects, providing patterns for event types, global properties, and custom native components.
CX Codex +1
425installs
formisch skill A skill that teaches your agent to build forms with Formisch, the headless Valibot-based library. Useful whenever a project has inputs and validation.
CX Codex +1
418installs
imagery skill Audits UI photos, screenshots, and icons to fix contrast issues, preserve layout bounds, and align visual styles.
CX Codex +1
533installs
information-architecture-navigation skill A skill for designing navigation, labels, taxonomy and search in a digital product. Useful when the structure of a site or app stops helping people find things.
CX Codex +1
556installs
framer-motion-react skill A Framer Motion skill for React and Next.js: AnimatePresence, layout animations, useAnimation, and the SSR workarounds that keep hydration quiet.
CX Codex +1
822installs
frontend-design-review skill Audits UI mockups, design tokens, and components for WCAG 2.1 AA accessibility, responsive behavior, and design system consistency before engineering begins.
CX Codex +1
458installs
optimize skill A skill that tracks down why an interface feels slow: load time, janky animations, heavy images, bloated bundles. It kicks in when you say something lags.
CX Codex +1
536installs
bolder skill A skill for when a design feels too safe and generic. It finds what makes the interface bland and pushes the impact up.
CX Codex +1
535installs
framer-motion-scroll skill A Framer Motion skill that tells your agent how to build scroll-linked animations, parallax and progress indicators.
CX Codex +1
803installs
exploring-autocapture-events skill Guides exploration of $autocapture data from posthog-js. It helps agents find resilient CSS selectors, inspect click uniqueness, and build action filters.
CX Codex +1
435installs
delight skill Adds joy and personality to interfaces: success states, empty screens, loading moments, hover details. For projects where the basics already work.
CX Codex +1
523installs
mobile-design skill A skill for mobile interfaces: touch targets, gestures, thumb zones, safe areas and mobile-first layout for small screens.
CX Codex +1
545installs
showcase skill Guides the agent to build technically ambitious web interfaces with View Transitions and WebGL rendering. Useful when standard UI polish is not enough.
CX Codex +1
521installs
figma-design skill A Figma skill covering components, auto layout, variables, prototyping and plugin development. Useful when the agent writes plugin code or builds a design system.
CX Codex +1
542installs
extract skill Finds duplicated UI patterns, extracts them into shared components, sets up design tokens, and refactors existing calls.
CX Codex +1
520installs
integrate-fusion-agent skill This skill wires the Atlas/EOS sidebar into a Flows/Fusion app through @cognite/app-sdk instead of an embedded chat.
CX Codex +1
1,700installs
migrate-app-to-flows skill Automates migrating legacy Dune web applications to the new Flows app hosting (appsApi). It audits configs, updates deployment scripts, and builds network CSP rules.
CX Codex +1
1,700installs
web-audio-api skill Gives the agent working knowledge of Web Audio API: signal synthesis, frequency visualisation, mic input and spatial sound for interfaces.
CX Codex +1
395installs
observability
official skill Configures logging and metrics for applications hosted on Vercel. Useful when debugging runtime errors or adding OpenTelemetry.
CX Codex GP ChatGPT
7installs
ai-elements
official skill This skill guides React AI interfaces built with ai-elements and shadcn/ui. Use it for chat views, streaming responses, tool calls, and reasoning panels.
CX Codex GP ChatGPT
7installs
grammar-of-graphics-and-declarative-visualization
official skill Generates tabular charts using Vega-Lite, Vega, and Observable Plot. It guides the model to pick the right declarative grammar instead of writing bespoke rendering code.
CX Codex GP ChatGPT
7installs
raycast-extension skill This skill guides an agent through Raycast extensions built with React and TypeScript. Use it when a task calls for a Raycast command or tool.
CX Codex +1
321installs
quieter skill A coding-agent skill that cuts saturation, contrast and visual noise in a UI while keeping hierarchy and character. Useful when the structure is fine but the design shouts.
CX Codex +1
513installs
tanstack-query skill Guides AI assistants in configuring TanStack Query for React, handling server state, background caching, and optimistic updates.
CX Codex +1
583installs
onboard skill Designs a product's first run: what a new user sees, in what order, and how they reach their first win.
CX Codex +1
521installs
security-ux skill A skill for designing sign-in, MFA and account recovery screens so that security feels like control, not punishment.
CX Codex +1
519installs
billing-sdk skill Guides the integration of Dodo Payments billing UI, pricing tables, and subscription management in React and Next.js apps.
CX Codex +1
810installs
interaction-patterns-components skill Guides the agent through picking and critiquing UI interaction patterns and reusable components: navigation, tables, modals, forms, states.
CX Codex +1
539installs
applicationinsights-web-ts skill Set up Application Insights telemetry for browser apps, including page views, requests, and exceptions. Use it for RUM or to connect browser-side GenAI agent traces with backend spans.
38installs
framer-motion-layout skill Provides layout animation patterns for Framer Motion, covering shared element transitions with layoutId, reorderable lists, and exit sequences via AnimatePresence.
CX Codex +1
770installs
forms-inputs-checkout skill A skill for designing, critiquing and implementing forms, validation and checkout flows without breaking accessibility.
CX Codex +1
524installs
framer-motion-gestures skill A skill covering Framer Motion gesture animations: drag, pan, tap, hover and focus. Useful when you build interactive elements and need the prop details at hand.
CX Codex +1
766installs
localize skill Guides i18n architecture across UI layouts, ICU string formatting, RTL styles, and locale routing for multilingual web apps.
CX Codex +1
497installs
framer-motion-variants skill Teaches coding agents to coordinate Framer Motion animations using variants, staggered lists, and custom state machines.
CX Codex +1
759installs
indicator-dashboard skill Creates technical analysis dashboards with Plotly Dash or Streamlit. Generates live multi-timeframe charts and market scanners.
CX Codex +1
570installs
stream-android skill A skill that wires Stream Chat, Video and Feeds into Android apps: package setup, auth, chat screens, calls and feeds.
CX Codex +1
491installs
responsive-design skill Guides coding agents in mobile-first responsive layout work using CSS Grid, Flexbox, and fluid sizing. Useful when interfaces need consistent adaptation across screens.
CX Codex +1
511installs
vuejs-development skill A skill that gives your coding agent a Vue 3 reference: reactivity, Composition API, single-file components and directives. Useful when building an SPA or moving off the Options API.
CX Codex +1
509installs
2,561–2,600 of 2,909
