Frontend
1,029 skills.
Browse
nextjs-shadcnlaguaguCreates Next.js frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns. Also use when the user asks to create a new Next.js project, add UI components, style pages, or build any web interface — even if they don't mention shadcn explicitly.livewire-developmentlaravelVendor-overridden Livewire skilltailwindcss-developmentlaravelAlways invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3/v4 work. The core use case: writing or fixing Tailwind utility classes in HTML templatlegend-list-best-practiceslegendappBuild, audit, and fix @legendapp/list and LegendList usage in React, React Native, and web apps. Use for virtualization, scroll blanking, mount cost, data identity, recycling, row invalidation, measurement, chat anchoring, drawDistance, visibility, or Legend List performance regressions.legend-state-best-practiceslegendappBuild, audit, and fix @legendapp/state usage in React, React Native, and TypeScript. Use for observable ownership, useValue selectors, observer and reactive components, fine-grained subscriptions, effects, persistence and sync, settings or session stores, deprecated use$ or useSelector migration, and reducing re-renders in hot paths.react-coding-stylelegendappImplement and review React, React Native, and TypeScript UI for maximum practical render performance through leaf-local updates, stable identities, honest Hook semantics, and minimal effects. Use for components, hooks, callbacks, context, external stores, memoization, list rows, large dependency arrays, callback or state fanout, re-render reduction, and React Compiler-aware performance work.lingui-best-practiceslinguiImplement internationalization with Lingui in React and JavaScript applications. Use when adding i18n, translating UI, working with Trans/useLingui/Plural, extracting messages, compiling catalogs, or when the user mentions Lingui, internationalization, i18n, translations, locales, message extraction, ICU MessageFormat, or working with .po files.next-intl-app-routerliuchiaweiConfigures and uses next-intl for Next.js App Router with locale-based routing. Use when adding or changing i18n, locale routing, translations, next-intl plugin, middleware/proxy, or message files in Next.js App Router projects.web-shader-extractorlixiaolin94Use when a user gives or references a webpage URL and wants to extract, reproduce, port, or locally replay a WebGL, WebGPU, Canvas, shader-like, animated background, interactive 3D, or web visual effect. Locks the target rendering surface group, records shader/resource/render graph/timing/input evidence, builds an evidence-matched local baseline, then projectizes it. Do not use for ordinary DOM/CSS page cloning.web-hapticslochieAdd haptic feedback to web apps using the web-haptics library. Use when building mobile-facing UIs that need tactile feedback on buttons, toggles, forms, pickers, and other interactive elements.reactlynx-best-practiceslynx-communityReviews, writes, and refactors ReactLynx code and component libraries for Lynx dual-thread best practices. Applies when writing ReactLynx components, or handling background-only, useLayoutEffect, bindtap/catchtap, main-thread:*, runOnMainThread/runOnBackground, lazy/Suspense, globalPropsMode/__globalProps, component-library publishing (preserved JSX vs React.createElement), or render/diff/commit performance traces. Excludes vanilla Lynx Element PAPI without ReactLynx JSX (use vanilla-lynx), runnrspeedy-bundle-sizelynx-communityAnalyze and reduce the bundle size of rspeedy/Lynx (ReactLynx) apps — the size / `.lynx.bundle` lever (not runtime perf, types, or CI). Use when the user wants to optimize 包体积 / bundle size, find what is making a rspeedy bundle large, decide which size lever to pull, or shrink `main-thread.js` by stripping background-only code (jsb / telemetry / request / monitor SDKs) out of the render path via `__BACKGROUND__` / `'background only'` gating. Covers media, JS-background, and main-thread layers, pmagic-uimagicuidesignUse this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (`@magicui/*`), integration patterns, and practical quality checks for accessibility and maintainability.shadcn-ui-expertmajesteitbartDevelop high-quality, accessible React components using shadcn-ui, Tailwind CSS, and Radix UI. Use when building forms, layouts, dialogs, tables, or any UI components. Supports Next.js, Vite, Remix, Astro, and more. Integrates with shadcn MCP server for component discovery and installation.cmux-sidebar-buildermanaflow-aiBuild, inspect, or revise cmux custom sidebar views using the runtime SwiftUI-style interpreter. Use for sidebar vibe coding, custom sidebars in Bonsplit panes, left sidebar picker previews, interpreted Swift sidebars, ~/.config/cmux/sidebars/*.swift, cmux docs sidebars, or Aziz's Swift interpreter work.cmux-debuggingmanaflow-aiDebug logging, Debug menu, runtime pitfalls, typing-latency-sensitive paths, SwiftUI list snapshot boundaries, OS-version repros, and local visual iteration for cmux. Use when adding debug probes, diagnosing UI/runtime issues, touching terminal rendering, tab/sidebar list views, drag/drop UTTypes, or using the Debug menu.angular-developmentmanutejComprehensive Angular framework development covering components, directives, services, dependency injection, routing, and reactive programming based on official Angular documentationfrontend-architecturemanutejComponent architecture, design patterns, state management strategies, module systems, build tools, and scalable application structurenextjs-developmentmanutejComprehensive Next.js development skill covering App Router, Server Components, data fetching, routing patterns, API routes, middleware, and full-stack Next.js applicationsreact-developmentmanutejComprehensive React development with hooks, components, state management, context, effects, and performance optimization based on official React documentationreact-patternsmanutejModern React development with hooks, component patterns, state management, and performance optimization for building scalable applicationsresponsive-designmanutejMobile-first responsive design covering fluid layouts, media queries, flexbox, grid, viewport units, and responsive imagessvelte-developmentmanutejComprehensive Svelte development skill covering reactivity runes, components, stores, lifecycle, transitions, and modern Svelte 5 patternstailwind-cssmanutejUtility-first CSS framework for rapid UI development with responsive design, component patterns, and production optimization. Master core utilities, dark mode, customization, and modern component composition for building beautiful, performant user interfaces.vuejs-developmentmanutejComprehensive Vue.js development skill covering Composition API, reactivity system, components, directives, and modern Vue 3 patterns based on official Vue.js documentationmapbox-google-maps-migrationmapboxMigration guide for developers moving from Google Maps Platform to Mapbox GL JS, covering API equivalents, pattern translations, and key differencesmaplibre-tile-sourcesmaplibreHow to choose and configure data sources for MapLibre GL JS — rendering your own data without tiles, hosted tile services, serverless PMTiles, self-hosted tile servers, tile schemas, and sprites.filament-promarcelorodrigoBuild Laravel admin panels with Filament v5. Use for creating resources, forms, tables, widgets, and testing admin interfaces with Livewire v4.blazor-expertmarkpittComprehensive Blazor development expertise covering Blazor Server, WebAssembly, and Hybrid apps. Use when building Blazor components, implementing state management, handling routing, JavaScript interop, forms and validation, authentication, or optimizing Blazor applications. Includes best practices, architecture patterns, and troubleshooting guidance.tailwindcssmartinholovskyTailwind CSS utility-first styling for JARVIS UI componentstaurimartinholovskyCross-platform desktop application framework combining Rust backend with web frontend, emphasizing security and performancewebglmartinholovskyWebGL shaders and effects for JARVIS 3D HUDshadcn-component-discoverymattbxDiscover shadcn-compatible components and registries across the entire ecosystem before writing any custom UI. Use PROACTIVELY before building tables, forms, modals, animations, dashboards, auth pages, or any UI component. Use when the user says "find a component for...", "is there something for...", "search registries", "what exists for...", or asks about shadcn blocks, Magic UI, Aceternity, ReUI, Animate UI, DiceUI, Tailark, AI Elements, or any other shadcn-compatible registry. Complements themagento-hyva-specialistmaxnormDevelops high-performance Magento 2 storefronts using Hyvä theme framework. Use when working with Hyvä themes, Alpine.js, Tailwind CSS, or modern frontend development. Masters Alpine.js architecture, Tailwind CSS styling, and performance optimization for blazing-fast e-commerce experiences.add-mouse-driven-orbitmengtoAdd restrained mouse-driven orbit and parallax depth to a Three.js hero by damping one pointer target and splitting it across camera translation, look-at, and small object rotations. Use for passive cinematic 3D heroes, pointer-responsive scenes, organic model parallax, and interactive depth where OrbitControls would feel like a product viewer.add-shader-cursor-trailmengtoAdd the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film grain, and protected by static, touch, accessibility, SSR, and performance fallbacks. Use when a user asks for this shader mouse effect, a halftone cursor trail, an interactive WebGPU hero/contact background, or a reusable cursor-following shader layer in React, Next.js, Vue, Svelte, Solid, or plain wbeam-glow-statesmengtoCreate React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or agent surface needs a restrained traveling or breathing beam; includes installation, imports, prop selection, state wiring, reduced motion, accessibility, and performance and layout guardrails.build-threejs-scroll-worldsmengtoBuild rich, scroll-controlled real-time Three.js experiences as one persistent 3D world whose camera, lighting, atmosphere, materials, objects, DOM story, and interactions evolve across authored chapters. Use for 3D scrollytelling, scroll-driven WebGL worlds, camera journeys, interactive portfolios, product stories, exhibitions, explainers, game or film microsites, spatial narratives, and multi-scene websites where native scroll should travel through one continuous place. Not limited to landing css-alpha-maskingmengtoApply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image). Use when asked for alpha masks, fade edges, or CSS mask gradients.globe-glmengtoUse when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.liquid-metal-bordermengtoAdd and tune animated liquid-metal WebGL borders with the React `metal-fx` package. Use when buttons, icon controls, chips, tabs, cards, or selected surfaces need a metallic active, selected, hover, focus, or premium border; when implementing the MetalFx component from metal.jakubantalik.com; or when troubleshooting its presets, themes, strength, glow, reflections, sizing, radius, animation, accessibility, SSR, or performance.matterjsmengtoUse when implementing 2D physics interactions with Matter.js, including Engine/World setup, Render/Runner configuration, adding bodies and constraints, and scroll/interaction-friendly canvas scenes.optimize-web-animationsmengtoProfile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to make animations performant, pause offscreen animations, look for memory leaks, profile pages that slow the computer over time, fix janky scrolling, reduce CPU/GPU use, or repeat the "only play in view" oscroll-progress-timelinemengtoTurn any ordered process into a data-driven vertical or horizontal scroll story with a base line, progress fill, active step states, responsive collapse, semantic fallback, and reduced-motion behavior. Use for onboarding, checkout, roadmaps, recipes, case studies, service processes, histories, or narratives where progress through the sequence should become visible while scrolling.scroll-scrubbed-visual-sequencemengtoBuild reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers. Use for hero transformations, product assembly, interface state walkthroughs, object rotation, diagrams, or photo sequences that must move forward and backward with native scrolling.scroll-scrubbed-word-revealmengtoReveal marked-up text word by word as scroll progress advances, while preserving semantic inline links, emphasis, responsive line wrapping, and reduced-motion readability. Use for headlines, quotes, manifestos, product statements, onboarding messages, or editorial passages where scrolling should pace comprehension rather than simulate typing.thinking-orbsmengtoAdd accessible animated AI loading and agent-status indicators with the React thinking-orbs library. Use when a chat, copilot, voice, search, generation, or tool-running interface needs a semantic working, searching, solving, listening, composing, or shaping state; when replacing a generic spinner with an AI activity orb; or when implementing the library's size, theme, speed, pause, reduced-motion, and canvas behavior.unicorn-studiomengtoUse when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).vantajsmengtoUse when adding animated WebGL background effects with Vanta.js (setup, parameters, resizing, performance, integration in React/Next.js).angularmindrallyExpert in Angular TypeScript development with scalable, high-performance patterns