Frontend
1,029 skills.
Browse
r3f-shadersenzed1.5KImplement custom GLSL or TSL materials in React Three Fiber, including uniforms and vertex deformation. Use for shader code and shader debugging, rather than ordinary PBR settings or composer effects.tanstack-dbtanstack-skills1.5KReactive client-first store for your API with collections, live queries, and optimistic mutations.generate-import-htmladobe1.5KUse this when the page-import pipeline needs to produce structured HTML from authoring analysis for AEM Edge Delivery Services. Covers building section structure, applying block tables, handling metadata, and managing the images folder. Do not invoke directly — called by page-import as a pipeline step.clone-websitejcodesmore1.5KReverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", or "pixel-perfect clone". The request must include one or more target URLs.sf-lwcjaganpro1.5KLightning Web Components with PICKLES methodology and 165-point scoring. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use sf-apex), Aura components, or Visualforce.preview-importadobe1.5KUse this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost. Starts the dev server against the imported HTML, checks block rendering, inspects DOM structure, compares against the original page, and troubleshoots broken references and 404s.responsive-patternsyonatangross1.5KResponsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devices, and mobile-first patterns for React applications. Use when building responsive layouts or container queries.react-ui-patternssickn331.5KModern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.threejsmengto1.5KUse when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance). Helpful for designers shipping 3D UI moments.next-cache-componentsvercel-labs1.5KNext.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTagr3f-lightingenzed1.5KLight React Three Fiber scenes with direct lights, environment maps, and shadows. Use for light placement, image-based lighting, shadow artifacts, and lighting performance.frontend-dev-guidelinessickn331.5KYou are a senior frontend engineer operating under strict architectural and performance standards. Use when creating components or pages, adding new features, or fetching or mutating data.mapbox-store-locator-patternsmapbox1.5KCommon patterns for building store locators, restaurant finders, and location-based search applications with Mapbox. Covers marker display, filtering, distance calculation, and interactive lists.shadertoybfollington1.5KThis skill should be used when working with Shadertoy shaders, GLSL fragment shaders, or creating procedural graphics for the web. Use when writing .glsl files, implementing visual effects, creating generative art, or working with WebGL shader code. This skill provides GLSL ES syntax reference, common shader patterns, and Shadertoy-specific conventions.tailwindcssmindrally1.5KExpert in TailwindCSS utility-first styling with responsive design patternsui-componentsyonatangross1.5KUI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix unstyled primitives, or creating design system foundations.ionic-designcap-go1.5KGuide to using Ionic Framework components for beautiful native-looking Capacitor apps. Covers component usage, theming, platform-specific styling, and best practices for mobile UI. Use this skill when users need help with Ionic components or mobile UI design.tailwind-patternssickn331.5KTailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.ue-component-modeladobe1.5KUse this when the user mentions component models, component definitions, component filters, block configuration for the Universal Editor, UE block setup, adding a new block to UE, configuring block properties or block authoring fields, or wants to create an EDS/Franklin block with Universal Editor support, modify block fields, or add a block to the section filter. Covers creating and editing the three JSON files that control how AEM Edge Delivery Services blocks appear and behave in the Universatypegpusoftware-mansion-labs1.5KTypeGPU is type-safe WebGPU in TypeScript. Use whenever the user writes, debugs, or designs TypeGPU code: 'use gpu' shader functions, tgpu.fn, buffers, textures, bind groups, compute and render pipelines, command encoders, render passes, render bundles, vertex layouts, slots, accessors, @typegpu/react hooks (useRoot, useFrame, useUniform), React Native worklet rendering, and any TypeGPU API. Shader logic and CPU-side resources are tightly coupled - handle both sides here even if the user only mer3f-physicsenzed1.5KAdd Rapier rigid bodies, colliders, forces, sensors, and joints to React Three Fiber. Use for collision-driven movement and simulation; use animation guidance for purely visual motion.aceternity-uisecondsky1.4K100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.r3f-loadersenzed1.4KLoad and reuse 3D assets in React Three Fiber with useGLTF, useLoader, Suspense, and preloading. Use for model loading, decoder setup, caching, cloning, or loading/error UI.landing-pagejezweb1.4KGenerate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social proof, pricing (optional), FAQ, footer. Use when building a marketing page, product launch page, coming soon page, or any standalone landing page. Triggers: 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', 'one-page site'.cc-skill-frontend-patternssickn331.4KFrontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.antdv-nextantdv-next1.4KAntdv Next Vue 3 component library. Use when locating component API docs, props/events/slots, playground demos, or theme token definitions.react-querymindrally1.4KGuidelines for using React Query for data fetching, caching, and server state synchronization in React applicationsr3f-texturesenzed1.4KConfigure textures in React Three Fiber, including color spaces, UV channels, sampling, video, and render targets. Use for texture appearance or memory issues; use loader guidance for model-loading workflows.zustand-patternsyonatangross1.4KReference for Zustand 5.x state management including slices, middleware, Immer, useShallow, persistence, selectors, and devtools integration. Documents 7 core patterns with TypeScript examples and anti-patterns. Use when building React state management with Zustand instead of Redux.native-sdkvercel-labs1.3KDiscovery skill for the Native SDK, the complete toolkit for building native desktop applications. Apps are authored in TypeScript + declarative Native markup (.native) by default and compiled to native code with no JS runtime in the binary; Zig cores are an explicit alternative, and WebViews are the optional web-content path. Use when the user asks what the Native SDK is, how to build a Native SDK app, author native UI, scaffold an app, configure app.json or legacy app.zon, add bridge commands,60fps-animationiart-ai1.3KThis skill should be used when the user asks to "fix janky CSS animation", "make animation 60fps", "stop layout thrashing", "animate width/height/top/left smoothly", "convert animation to transform", "animate box-shadow performantly", "animate height auto", "FLIP animation", or "why is my scroll/hover animation choppy".vinext-vite-nextjsreason-machines1.3KVite plugin that reimplements the Next.js API surface for deploying anywhere, including Cloudflare Workerswechat-miniprogram-skillgourdbaby1.3KExpert guidelines for Native WeChat Mini Program development focusing on performance, code size, and native compatibility. Use when developing WeChat Mini Programs in native JavaScript.mobile-responsivenesshoodini1.3KBuild responsive, mobile-first web applications. Use when implementing responsive layouts, touch interactions, mobile navigation, or optimizing for various screen sizes. Triggers on responsive design, mobile-first, breakpoints, touch events, viewport.gsapmengto1.3KUse when you need to add or debug professional web animations with GSAP (timelines, ScrollTrigger, stagger, transforms) in HTML/CSS/JS/React. Includes patterns for smooth motion, performance, and common pitfalls.git-city-3d-github-visualizationreason-machines1.3KBuild and extend Git City — a 3D pixel art city where GitHub profiles become interactive buildings using Next.js, Three.js, and Supabase.gsapmartinholovsky1.3KGSAP animations for JARVIS HUD transitions and effectscompose-expertvitorpamplona1.3KAdvanced Compose Multiplatform UI patterns for shared composables. Use when working with visual UI components, state management patterns (remember, derivedStateOf, produceState), recomposition optimization (@Stable/@Immutable visual usage), Material3 theming, custom ImageVector icons, or determining whether to share UI in commonMain vs keep platform-specific. Delegates navigation to android-expert/desktop-expert. Complements kotlin-expert (handles Kotlin language aspects of state/annotations).micro-interactioniart-ai1.3KThis skill should be used when the user asks to "add a hover/press effect", "animate a toggle or switch", "build an animated like button", "make a toast/snackbar slide in", "animate a drawer or modal", "animate list reordering or add/remove", "do a shared-element layout transition", or "polish UI feedback". Covers UI motion with Framer Motion (motion/react) and modern CSS.json-render-generative-uireason-machines1.3KGenerative UI framework that renders AI-generated JSON specs into type-safe UI components across React, Vue, Svelte, Solid, React Native, video, PDF, and email.accessible-animationiart-ai1.3KThis skill should be used when the user asks to "respect prefers-reduced-motion", "honor reduced motion", "make my animations accessible", "fix vestibular / motion-sickness issues", "add a useReducedMotion hook", "gate GSAP / Framer Motion / Lenis for reduced motion", or "meet WCAG 2.3.3 / C39". Provides tiered (not all-or-nothing) reduced-motion patterns in CSS and JS.cobejsmengto1.3KUse when adding a lightweight interactive globe with cobe (canvas setup, markers, interaction, performance, integration with React/Next.js).frontend-developersickn331.3KBuild React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture.angular-best-practicesalfredoperez1.3KModern Angular best practices for building performant, maintainable Angular 17+ applications. Covers Signals, RxJS, components, templates, styles, performance, SSR, testing, forms, routing, accessibility, and architecture — with code examples and impact ratings for every rule. Use this skill whenever the user is working on Angular code of any kind: components, services, templates, stylesheets, routes, tests, or configuration. This applies to editing .component.ts, .service.ts, .html templates, .progressive-blurmengto1.3KCreate a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for “progressive blur”, “gradient blur overlay”, or stepped blur masks that fade from an edge of the viewport.svg-animationiart-ai1.3KThis skill should be used when the user asks to "animate an SVG", "make a line draw itself on", "do a stroke draw-on / signature animation", "morph one shape into another", "move an element along a path", "animate an icon/logo", or "animate an SVG gradient or filter". Covers stroke-dashoffset draw-on, path morphing, motion-along-path, and animated icons/gradients/filters via CSS, SMIL, and GSAP.nextjs-typescript-tailwindcss-supabasemindrally1.3KFull-stack Next.js 14 development with TypeScript, TailwindCSS, and Supabase for building production-ready web applications.react-emailvercel-labs1.3KReact Email renderer for json-render that turns JSON specs into HTML or plain-text emails using @react-email/components and @react-email/render. Use when working with @json-render/react-email, building transactional or marketing emails from JSON, creating email catalogs, rendering AI-generated email specs, or when the user mentions react-email, HTML email, or transactional email.antv-g2-chartantvis1.3KUse this skill whenever the user wants to create, customize, or troubleshoot G2 v5 chart visualizations. Triggers include: any mention of 'G2', 'antv g2', '@antv/g2', 'G2 chart', 'G2 可视化', or requests to produce charts like bar charts (柱状图), line charts (折线图), pie charts (饼图), scatter plots (散点图), area charts (面积图), heatmap (热力图), radar charts (雷达图), treemap (矩形树图), funnel charts (漏斗图), sankey diagrams (桑基图), gauge (仪表盘), wordcloud (词云), boxplot (箱线图), as well as G2-specific topics like encode cvuevercel-labs1.3KVue 3 renderer for json-render. Use when building Vue UIs from JSON specs, working with @json-render/vue, defining Vue component registries, or rendering AI-generated specs in Vue.