Frontend
1,029 skills.
Browse
virtual-listspatternsdevTeaches virtual list (windowing) techniques for rendering large datasets. Use when rendering lists or tables with hundreds or thousands of items that cause scroll jank or slow initial render.vite-bundle-optimizationpatternsdevTeaches Vite-specific bundle optimization patterns. Use when configuring Vite builds, code splitting, managing dependencies, or troubleshooting slow Vite builds.modern-csspaulirishSpecialized knowledge for writing modern high-quality CSS. Trigger this skill when starting a new CSS project/file, when the user asks about new CSS features (e.g. Masonry, View Transitions, Container Queries, Scroll-driven animations), or requests refactoring of legacy styles to modern standards.reactpedronauckBuild React 19 components and hooks under React Compiler: state, Effects, memoization, props/refs, Actions, use(), compiler/lint setup, and Vitest tests. Excludes React Native, other frameworks, and backend-only Node.js.tailwindcsspedronauckStyle components with Tailwind CSS v4 and project tokens. Excludes plain CSS, CSS-in-JS, and other utility frameworks.shiny-bslibposit-devBuild modern Shiny dashboards and applications using bslib (Bootstrap 5). Use when creating new Shiny apps, modernizing legacy apps (fluidPage, fluidRow/column, tabsetPanel, wellPanel, shinythemes), or working with bslib page layouts, grid systems, cards, value boxes, navigation, sidebars, filling layouts, theming, accordions, tooltips, popovers, toasts, or bslib inputs. Assumes familiarity with basic Shiny.chrome-extension-uipproencaChrome Extensions UX/UI design and implementation guidelines for popups, side panels, content scripts, and options pages. Triggers on tasks involving browser extension UI, manifest v3, chrome APIs.framer-motionpproencaFramer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.nextjspproencaNext.js 16 App Router performance, caching, server components, server actions, routing, and codebase-hygiene best practices — plus a category-major review/refactor algorithm with codebase-level (remove/dedup/reuse) findings. This skill should be used when writing Next.js 16 App Router code, configuring caching with 'use cache', building Server Components, setting up parallel/intercepting routes, configuring next.config.js OR proxy.ts, OR auditing/refactoring a Next.js codebase (single file or whreactpproencashadcnpproencashadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns.tailwindpproencaTailwind CSS v4 performance optimization and best practices guidelines (formerly tailwindcss-v4-style). This skill should be used when writing, reviewing, or refactoring Tailwind CSS v4 code to ensure optimal build performance, minimal CSS output, and correct usage of v4 features. Triggers on tasks involving Tailwind configuration, @theme directive, utility classes, responsive design, dark mode, container queries, or CSS generation optimization.tailwind-responsive-uipproencaResponsive UI transformation patterns for Tailwind CSS applications. This skill should be used when making interfaces responsive, refactoring layouts for multiple screen sizes, or reviewing responsive Tailwind code. Triggers on tasks involving breakpoint strategy, layout adaptation, responsive spacing, fluid typography, mobile navigation, touch interaction, responsive media, or data table responsiveness.tanstack-querypproencaTanStack Query v5 performance optimization for data fetching, caching, mutations, and query patterns. This skill should be used when using useQuery, useMutation, queryClient, prefetch patterns, or TanStack Query caching. This skill does NOT cover generating query hooks from OpenAPI (use orval skill) or mocking API responses in tests (use test-msw skill).wxt-browser-extensionspproencaWXT browser extension performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring WXT browser extension code to ensure optimal performance patterns. Triggers on tasks involving WXT, browser extensions, content scripts, service workers, messaging, and extension APIs.zustandpproencaZustand state management best practices for React applications. Use when writing, reviewing, or refactoring Zustand stores to ensure optimal performance and maintainability. Triggers on tasks involving state management, stores, selectors, re-renders, and Zustand patterns.react-19prowler-cloudReact 19 patterns with React Compiler. Trigger: When writing React 19 components/hooks in .tsx (React Compiler rules, hook patterns, refs as props). If using Next.js App Router/Server Actions, also use nextjs-16.tailwind-4prowler-cloudTailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind (className, variants, cn()), especially when dynamic styling or CSS variables are involved (no var() in className).zustand-5prowler-cloudZustand 5 state management patterns. Trigger: When implementing client-side state with Zustand (stores, selectors, persist middleware, slices).upgrade-react-navigationreact-navigationUpgrade React Navigation to a new major version (6.x to 7.x or 7.x to 8.x), applying the required breaking changes — peer-dependency and tooling bumps, and renamed or removed navigate, linking, theme, navigator, and screen-option APIs — while preserving navigation behavior.flagsreactUse when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.flowreactUse when you need to run Flow type checking, or when seeing Flow type errors in React code.3dsvg-interactive-reactreason-machinesTurn SVGs into interactive React 3D components using the 3dsvg library and visual editoracgti-anime-persona-quizreason-machinesACG Type Indicator — MBTI-inspired anime character persona quiz built with Vue 3, TypeScript, and Vitecapso-screenshot-macosreason-machinesExpert skill for Capso, the open-source macOS screenshot and screen recording app built with Swift 6 and SwiftUI — covers architecture, building from source, package APIs, and contributing.emdash-cmsreason-machinesAI coding agent skill for building with EmDash, the full-stack TypeScript CMS built on Astro and Cloudflareflipoff-split-flap-displayreason-machinesExpert skill for building, customizing, and embedding the FlipOff split-flap display emulator — a free, offline-capable web app that turns any browser/TV into a retro airport departure board.gemma-gem-browser-aireason-machinesBuild and extend Gemma Gem, an on-device AI browser assistant Chrome extension running Google's Gemma 4 model via WebGPU with no cloud dependencies.isolet-widget-isolationreason-machinesPackage any component into a self-contained, isolated widget with shadow DOM, scoped styles, and multi-framework supportpretext-text-measurementreason-machinesFast, accurate, DOM-free text measurement and layout library for JavaScript/TypeScript supporting multiline, rich-text, and variable-width layouts.webphysics-avbd-enginereason-machinesWebGPU rigid-body/soft-body physics engine based on the AVBD (Augmented Vertex Block Descent) solverwterm-web-terminalreason-machinesWeb terminal emulator with Zig/WASM core, DOM rendering, and React/vanilla JS bindingsreflex-docsreflex-devReflex framework documentation. Use when building full-stack Python web apps with Reflex, creating components, managing state, handling events, styling, database operations, API routes, authentication, deploying apps, or wrapping React components. Load when the user is working with Reflex (rx), writing .py files that import reflex, or asking about Reflex concepts like State, Vars, EventHandlers, or Components.react-router-data-moderemix-runBuild React applications using React Router's data mode with createBrowserRouter and RouterProvider. Use when working with route objects, loaders, actions, Form, useFetcher, or pending/optimistic UI without the Vite plugin.react-router-declarative-moderemix-runBuild React applications using React Router's declarative mode with BrowserRouter. Use when configuring routes with JSX, navigating with Link/NavLink, or reading URL params and search params without data loaders or actions.react-routerremix-runBuild applications with React Router in Framework, Data, Declarative, and unstable RSC modes. Use when configuring routes, route modules, loaders, actions, forms, fetchers, navigation, pending UI, SSR/SPA/pre-rendering, middleware, URL params/search params, or React Router upgrades.visual-moderemotion-devGuidance for working on Remotion Studio Visual Mode, sequence identity, node paths, symbolicated stacks, override IDs, and hot reload behavior. Use when implementing or debugging visual editing of Sequences.appkitreown-comGuides developers through integrating Reown AppKit into web applications (React, Next.js, Vue, Nuxt, Svelte, vanilla JavaScript). Use when adding wallet connection, network switching, multi-chain support, or troubleshooting AppKit integration issues.rspack-best-practicesrstackjsConfigure, review, or troubleshoot Rspack builds, including loaders, CSS, assets, type checking, bundle optimization, and profiling.event-landing-pagesamberBuild a technical event's public front door and the small site around it - the page shape for the funding model (a ticketed event's single-CTA hero, or a free event's stats hero with no registration to sell), the section set, a date-gated CTA state machine so Propose renders only during the CFP window and Register only inside the registration window, the accessibility target, and the event structured data. Use whenever asked to build or review a conference, meetup or hackathon website, write thesanity-live-cache-componentssanity-ioIntegrates Sanity Live with Next.js Cache Components in next-sanity v13+ apps. Sets up sanityFetch, a shared cachedSanity 'use cache' boundary, <SanityLive>, Visual Editing, Presentation Tool, draft mode handling, and the three-layer (Page/Dynamic/Cached) component pattern with explicit perspective/stega prop-drilling. Sequences with the official Next.js skills (next-cache-components-adoption, next-cache-components-optimizer, next-partial-prefetching-adoption, next-dev-loop). Use when configurinsap-fiori-add-visual-filtersapAdd visual filters (chart-based) to SAP Fiori Elements filter bar/value help using CAP or ABAP RAP.sap-fiori-analytical-chartsapAdd analytical chart (chart + table hybrid) to SAP Fiori Elements List Report using aggregated data. Supports CAP and ABAP RAP (OData V4).sap-fiori-app-developmentsapGuidelines for SAP Fiori app development for CAP and standalone projects. Use this skill when creating or modifying SAP Fiori Elements applications.bun-sveltekitsecondskyUse when building or running SvelteKit apps on Bun, including SSR, adapters, and Bun-specific APIsimage-optimizationsecondskyOptimizes images for web performance using modern formats, responsive techniques, and lazy loading strategies. Use when improving page load times, implementing responsive images, or preparing assets for production deployment.inspira-uisecondsky120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js. Use for hero sections, 3D effects, interactive backgrounds, or encountering setup, CSS variables, motion-v integration errors.internationalization-i18nsecondskyImplements multi-language support using i18next, gettext, or Intl API with translation workflows and RTL support. Use when building multilingual applications, handling date/currency formatting, or supporting right-to-left languages.motionsecondskyMotion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.progressive-web-appsecondskyProgressive Web Apps with service workers, web manifest, offline support, installation prompts. Use for installable web apps, offline functionality, push notifications, or encountering service worker registration, cache strategy, manifest configuration errors.