Frontend Development (1064 — page 13)

🎨 Quieter

This skill helps you apply quiet design principles to reduce visual intensity while preserving impact and usability across interfaces.

designuxfrontendaccessibility

🎨 R3f Animation

React Three Fiber animation - useFrame, useAnimations, spring physics, keyframes. Use when animating objects, playing GLTF animations, creating procedural motion, or implementing physics-based movement.

enzedfrontend

🎨 R3f Fundamentals

React Three Fiber fundamentals - Canvas, hooks (useFrame, useThree), JSX elements, events, refs. Use when setting up R3F scenes, creating components, handling the render loop, or working with Three.js objects in React.

enzedfrontend

🎨 R3f Interaction

React Three Fiber interaction - pointer events, controls, gestures, selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.

enzedfrontend

🎨 R3f Lighting

React Three Fiber lighting - light types, shadows, Environment component, IBL. Use when adding lights, configuring shadows, setting up environment lighting, or optimizing lighting performance.

enzedfrontend

🎨 R3f Loaders

React Three Fiber asset loading - useGLTF, useLoader, Suspense patterns, preloading. Use when loading 3D models, textures, HDR environments, or managing loading states.

enzedfrontend

🎨 R3f Materials

React Three Fiber materials - PBR materials, Drei materials, shader materials, material properties. Use when styling meshes, creating custom materials, working with textures, or implementing visual effects.

enzedfrontend

🎨 R3f Physics

React Three Fiber physics with Rapier - RigidBody, colliders, forces, joints, sensors. Use when adding physics simulation, collision detection, character controllers, or creating interactive physics-based experiences.

enzedfrontend

🎨 R3f Postprocessing

React Three Fiber post-processing - @react-three/postprocessing, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.

enzedfrontend

🎨 R3f Shaders

React Three Fiber shaders - GLSL, shaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.

enzedfrontend

🎨 R3f Textures

React Three Fiber textures - useTexture, texture loading, environment maps, texture configuration. Use when loading images, working with PBR texture sets, cubemaps, HDR environments, or optimizing texture usage.

enzedfrontend

🎨 Ralph Tui Create Beads

This skill converts PRDs into beads for ralph-tui execution, generating an epic and child tasks with quality gates and dependencies.

automationbackendfrontendproduct

🎨 Rams

This skill performs accessibility and visual design reviews on UI components, identifying WCAG issues and design inconsistencies to improve quality.

accessibilitydesignuxfrontend

🎨 Raycast Extensions Skill

This skill helps you build and fix Raycast extensions efficiently by following API references and applying best practices.

apifrontendperformancedebugging

🎨 React

Modern React 18+ patterns with TypeScript, hooks, state management, and performance optimization. This skill should be used when building React components, debugging frontend issues, or reviewing React code. (user)

tenlisboafrontend

🎨 React

Comprehensive assistance with react

mengfei0053frontend

🎨 React

Modern React (v18+) expert enforcing Functional Components, Hooks, TailwindCSS v4 (CSS-config aware), and pnpm workflows.

plutowangfrontend

🎨 React

This skill helps you locate React official docs and tutorials, guiding you through concepts, hooks, and patterns with authoritative references.

reactfrontenddocs

🎨 React 19

This skill helps you adopt React 19 patterns and deprecations, guiding component and hook updates for server-first rendering and compiler-assisted optimization.

reactfrontendperformancemigration

🎨 React 19

This skill helps you implement React 19 features in .tsx/.jsx with the compiler-driven patterns, improving component structure and performance.

frontendperformancerefactorcode-review

🎨 React Best Practices

This skill helps you optimize React and Next.js performance by applying high-impact best practices across components, pages, and data fetching.

reactnextjsperformance

🎨 React Best Practices

React performance optimization guidelines from Vercel Engineering. This skill should be used proactively when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, bundle optimization, or performance improvements.

lgariv-dnfrontend

🎨 React Best Practices

This skill helps optimize React and Next.js performance by applying Vercel best practices across components, pages, and data fetching.

frontendperformancerefactorcode-review

🎨 React Best Practices

This skill applies React best practices from react.dev and Vercel to review code, optimize performance, and improve state and effects.

frontendperformancedebuggingcode-review

🎨 React Best Practices

Comprehensive React and Next.js best practices guide covering performance optimization, component architecture, shadcn/ui patterns, Motion animations, and modern React 19+ patterns. This skill should be used when writing, reviewing, or refactoring React/Next.js code. Triggers on tasks involving Reac

dedalus-erp-pasfrontend

🎨 React Composition Patterns

This skill helps you refactor React components by applying composition patterns to reduce boolean props and design flexible, reusable APIs.

frontendrefactorcode-reviewdesign

🎨 React Effects Audit

This skill audits React code for unnecessary useEffect patterns, flags anti-patterns, and suggests fixes with severity levels.

reactdebuggingcode-reviewperformance

🎨 React Flow

This skill guides you in building node-based interfaces with React Flow, covering patterns, performance, and TypeScript integration.

frontendperformancedesignproductivity

🎨 React Gradual Architecture

Incremental React code organization guidelines. Start small, then extract when scanning and responsibilities start to blur. Use when creating features, organizing files, refactoring components, or deciding when to extract hooks, UI, or utils.

vandrieshfrontend

🎨 React Hooks Patterns

Master React Hooks including useState, useEffect, useContext, useReducer, and custom hooks with production-grade patterns

pluginagentmarketplacefrontend

🎨 React Integration

This skill helps you build a React frontend with the agent runtime by wiring providers, hooks, and streaming chat UI for real-time conversations.

frontendfullstackapi

🎨 React Native

This skill helps you find React Native documentation on releases and the new architecture, guiding you to relevant sections and usage details.

react-nativedocsdebuggingrelease

🎨 React Native Basics

Master React Native fundamentals - components, styling, layout, and Expo

pluginagentmarketplacefrontend

🎨 React Native Best Practices

This skill helps you optimize React Native apps by applying proven performance guidelines for FPS, TTI, bundle size, and memory management.

react-nativeperformancedebuggingexpo

🎨 React Native Design

This skill helps you build performant cross-platform mobile apps with expert styling, navigation, and animated UI using React Native and Reanimated.

designuxfrontendperformance

🎨 React Native Navigation

Master React Navigation - stacks, tabs, drawers, deep linking, and TypeScript integration

pluginagentmarketplacefrontend

🎨 React Native Patterns

This skill helps you apply React Native development patterns to structure projects, manage navigation, state, and styling for scalable cross-platform apps.

frontendperformancedebuggingrefactor

🎨 React Native Skills

This skill helps optimize React Native apps by applying best practices for list performance, animations, and native integrations across Expo and RN.

performancefrontendmonitoring

🎨 React Patterns

This skill helps optimize React and Next.js performance for local or docker deployments by applying Vercel best practices and patterns.

reactnextjsperformancedocker

🎨 React Performance

Master React performance optimization with memoization, code splitting, profiling, and Web Vitals monitoring

pluginagentmarketplacefrontend

🎨 React Performance Patterns

This skill helps you boost React performance by applying memoization, code splitting, virtualization, and optimized context usage based on real-world patterns.

reactperformancecode-review

🎨 React Router

Master React Router v6 for production routing with error boundaries, lazy loading, and navigation guards

pluginagentmarketplacefrontend

🎨 React Router

React Router v7 Data Mode for Vite SPA with Convex backend. Triggers on routing, navigation, nested routes, protected routes, lazy loading. Use for client-side routing in Vite React apps.

sebastiaanwoutersfrontend

🎨 React Starter Skill

This skill scaffolds modern React projects with a production-ready stack of Vite, Tailwind, React Router, Lingui, and related tooling.

frontendproductivitycliscripting

🎨 React Three Game

react-three-game, a JSON-first 3D game engine built on React Three Fiber, WebGPU, and Rapier Physics.

prnthhfrontend

🎨 React Typescript

This skill helps you build type-safe React 19 apps with TypeScript by applying patterns, editor tooling, and the React Compiler.

reacttypescriptfrontendrefactor

🎨 React Use Callback

This skill helps you optimize React performance by applying useCallback best practices to memoized components and effect dependencies.

reactperformancedebuggingrefactor

🎨 React Use Hooks

This skill applies react-use hooks to build concise, maintainable React features, mapping requirements to optimal hooks for readability, performance, and reuse.

frontendperformanceproductivityrefactor

🎨 React Useeffect

This skill guides you on when to use React useEffect, optimize data fetching, and apply alternatives for derived state and events.

frontendperformancerefactorcode-review

🎨 React Web

Modern React 19+ development with Server Components, Actions, hooks, TypeScript integration, and performance optimization. Use when building React web applications, implementing Server Components, using Actions for form handling, working with new hooks (use, useActionState, useOptimistic, useFormSta

ibuttersfrontend

🎨 React19 Patterns

This skill helps you apply React 19 patterns and best practices to optimize components, state, and rendering for faster, maintainable UI.

frontendperformancerefactorcode-review

🎨 Reactive Polling

This skill lets you monitor a value with a useReactive hook and trigger React re-renders when the value changes.

frontendperformancedebugging

🎨 Readme Writing

This skill helps write folder READMEs by explaining why the folder exists, its mental model, and how to place future code within the structure.

docswritingplanningfrontend

🎨 Reanimated Skia Performance

Write and review high-performance React Native animations and 2D graphics using react-native-reanimated (v4+) and @shopify/react-native-skia (Canvas scenes, runtime effects/shaders). Use for: gesture-driven interactions, spring/timing transitions, layout/mount animations, Reanimated CSS transitions/

andreev-danilafrontend

🎨 Recent Data

This skill helps you efficiently access and manage recently used topics, resources, and pages with session-store guidance and type-safe patterns.

frontenddataanalyticsproductivity

🎨 Redux Best Practices

This skill enforces Redux best practices and patterns using RTK, guiding store setup, slices, selectors, thunks, and React-Redux hooks.

reacttypescriptdebuggingcode-review

🎨 Refactor Flutter

This skill refactors Flutter/Dart code to improve maintainability, readability, and performance using Dart 3 features, modern state management, and clean

refactorfrontendperformancecode-review

🎨 Refactoring Ui

This skill helps you apply Refactoring UI principles to create clean, scalable frontends with consistent spacing, typography, color, and depth.

frontenddesignuxrefactor

🎨 Reka Ui

This skill helps you build accessible, headless Vue components with Reka UI by guiding patterns, state management, virtualization, and styling integration.

frontendaccessibilityperformancedocs

🎨 Remixjs Best Practices

This skill helps you adopt Remix best practices with React Router v7, server-first data loading, and robust error handling strategies.

remixreactmigrationperformance