Skills tagged "frontend" (1279)

🎨 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

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 Component

This skill generates modern React components with TypeScript, hooks, accessibility best practices, and a context provider pattern for state management.

frontendperformancetestingcode-review

🧪 React Component Performance

This skill analyzes and optimizes React component performance to reduce re-renders and speed up UI updates.

frontendperformancedebuggingrefactor

🧪 React Components

This skill converts Stitch designs into modular React components with TypeScript interfaces and automated validation to ensure clean, reusable code.

frontendcode-reviewtestingrefactor

🎨 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

This skill helps you decide when to use useEffect in React components, reducing unnecessary effects and guiding proper data fetching and subscriptions.

frontenddebuggingperformancecode-review

🎨 React Email

This skill helps you rapidly scaffold and preview React Email templates for transactional emails across clients.

reactfrontendtailwindtypescript

🎨 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 Basics

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

pluginagentmarketplacefrontend

🎨 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 Expert

This skill helps you build cross-platform React Native apps with Expo, optimize navigation and FlatList performance, and ensure robust platform handling.

frontendperformancedebuggingtesting

🎨 React Native Navigation

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

pluginagentmarketplacefrontend

🎨 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 Performance

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

pluginagentmarketplacefrontend

🎨 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 State Driven Ui

This skill helps you build predictable React UI by projecting state through reducers and events, reducing bugs and improving testability.

reactfrontendtestingdebugging

🧪 React Tanstack Testing

This skill provides comprehensive TanStack testing patterns for React apps, including mocks, router validation, and query behavior with Vite and Vitest.

testingfrontendreactdebugging

🧪 React Testing

This skill simplifies testing React components, hooks, and context with React Testing Library patterns to ensure user-visible behavior.

frontendtestingunit-testsintegration-tests

🎨 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 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

🧪 Refactor

This skill helps you progressively refactor JavaScript code to improve maintainability without changing behavior, with guidance on extracting functions and

refactorcode-reviewtestingdebugging

🧪 Refactor

This skill converts inline styles and utility classes into semantic, reusable components with dark mode support and tests.

refactorfrontendtestingcode-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

🧪 Refactor Nextjs

This skill refactors Next.js apps to App Router best practices, improving maintainability, performance, and server/client boundaries.

frontendrefactorperformancecode-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

🎨 Remotion

This skill generates Remotion walkthrough videos from Stitch screens, applying smooth transitions, zoom effects, and contextual text overlays for engaging

reacttypescriptdesignfrontend

🧪 Remotion

This skill helps you create and optimize Remotion video projects by applying domain-specific best practices for compositions, assets, and animations.

frontendautomationperformancescripting

🎨 Remotion

Best practices for Remotion - Video creation in React. Includes Launchpad monorepo components and CUA integration.

vapvarunfrontend

🎨 Remotion

This skill helps you apply Remption best practices to build maintainable, high-quality video projects with React and TypeScript.

reacttypescriptfrontendperformance

🎨 Remotion Best Practices

This skill helps you implement Remotion best practices across animations, assets, compositions, and timing for high-quality video projects.

reacttypescriptfrontenddesign

🎨 Remotion Best Practices Zh

This skill helps you apply Remotion best practices in Chinese, guiding composition, timing, assets, captions, and transitions for polished videos.

remixtypescriptfrontenddocs

🎨 Remotion Editor Skill

This skill guides building Remotion-based video editors, covering timeline math, state management, AI integration, and performance optimizations for 60fps

frontendreactperformanceai

🎨 Remotion Expert

This skill enables programmatic, frame-precise Remotion video generation with AI-driven workflows and dynamic data for high-fidelity 2026 productions.

aiautomationfrontendperformance

🎨 Remotion Spline

This skill generates and animates smooth spline paths in Remotion using linear and Catmull-Rom splines for SVG paths.

frontendreacttypescriptperformance

🎨 Remotion Video Creator

This skill helps you create animated videos with Remotion by turning UI concepts into TSX scenes, complete with transitions and exports.

frontenddesignuxautomation

🎨 Remotion Video Toolkit

This skill helps you generate production-ready Remotion videos by composing React components, animations, and data-driven rendering pipelines.

reactfrontendcloudautomation

🎨 Rendering Rsc

This skill helps you maximize SEO and minimize rendering flicker by favoring server components and strategic hydration safeguards.

frontendperformanceseoanalytics

🧪 Rendering Stability Under Load

This skill helps maintain UI stability under heavy rendering by partitioning boundaries and applying adaptive throttling to expensive tasks.

frontendperformancedebuggingtesting

🎨 Repomix Reference Black Tortoise

This skill helps you understand the Black Tortoise codebase structure, locate implementations, and read source files across a large TypeScript project.

code-reviewdebuggingdocsbackend

🛡️ Research

This skill helps you verify current API behavior and latest tooling before coding, saving debugging time and ensuring secure, future-proof implementations.

researchapisecuritybackend