Skills tagged "react" (185)

🎨 Use Ai Sdk

This skill helps developers integrate and reason about the AI SDK to build agents, tools, and chat features efficiently.

aifrontendbackendapi

882

🎨 Mastering Animate Presence

This skill audits AnimatePresence usage in TypeScript projects, delivering file:line findings and actionable improvements for exit animations and presence

reacttypescriptcode-reviewdebugging

38

🎨 Ai Model Web

This skill enables browser apps to generate and stream AI text using CloudBase JS SDK, with Hunyuan or DeepSeek models.

aicloudfrontendreact

37

🎨 Ui Design

This skill helps you craft production-grade frontend interfaces with distinctive visuals, cohesive layouts, and polished interactions for web pages and

frontenddesignproductreact

18

🎨 Frontend React Best Practices

This skill helps you optimize React components and bundles by applying best-practice guidelines for performance, memoization, and reusable architectures.

reactperformancerefactorcode-review

14

🎨 Gluestack Ui V4

This skill helps you create and manage custom gluestack-ui v4 variants using tva for type-safe, scalable design system extensions.

frontenddesignreacttypescript

7

🎨 Ant Design

This skill helps you select Ant Design components and theming strategies for a performant, accessible SSR React app using v6 and Pro/X patterns.

reactfrontendperformanceaccessibility

4

🎨 Epic React Patterns

This skill helps you implement React patterns, optimize performance, and maintain code quality in Epic Stack apps.

reactperformancerefactorcode-review

4

🎨 1k Defi Module Integration

This skill guides you step-by-step to integrate new DeFi modules into OneKey, covering Earn, Borrow, and New Module scenarios.

reacttypescriptreact-nativeexpo

3

🎨 1k Feature Guides

This skill guides you through adding new chains, WebSocket events, notifications, and pages in OneKey, accelerating secure feature implementations.

typescriptreact-nativedocsexpo

3

🛡️ Brainstorming

This skill orchestrates parallel agents to turn rough ideas into robust design options through structured, multi-phase brainstorming and evaluation.

aiautomationtestingsecurity

3

🎨 Epic Forms

This skill guides you through building Epic Stack forms with Zod validation and Conform for progressive enhancement, including file uploads and honeypot

frontendfullstackreacttypescript

3

🎨 Nextfriday React

This skill helps you write cleaner React and JSX code by applying Next Friday patterns for props, lazy loading, destructuring, and formatting.

reactnextjsformattingrefactor

3

🎨 Nextfriday Types

This skill enforces TypeScript patterns from Next Friday to standardize props, params, and return types for safer, clearer React code.

typescriptreactnextjscode-review

3

🎨 Performance

This skill helps you optimize Gluestack UI v4 performance by enforcing cross-platform patterns, TypeScript typing, memoization, and UI thread animations.

performancereact-nativeexpotypescript

3

🎨 React Patterns

This skill helps you leverage React 19 patterns including Server Components, Actions, use(), and concurrent features to build scalable, high-performance

reacttypescriptfrontendperformance

3

🎨 Shadcn Baseui

This skill enforces Base UI patterns in shadcn/ui projects, preventing incorrect Radix UI guidance and ensuring render prop usage.

frontendreactnextjsshadcn

3

🎨 Velt Notifications Best Practices

This skill helps you implement robust notification systems in React and Next.js, covering panels, delivery channels, and user preferences.

reactnextjstypescriptfrontend

3

🎨 Accelint React Best Practices

This skill optimizes React components and hooks for performance using best-practices including memoization, effect dependencies, and SSR hydration fixes.

reactperformancedebuggingrefactor

2

🎨 Check Refine Trpc

This skill identifies components that directly use trpc or react-query hooks and guides replacing them with refine hooks for consistent data access.

frontendreacttypescriptrefactor

2

🎨 Convert Web App

This skill guides turning a standalone web app into a hybrid MCP App, enabling in-host rendering with a single codebase.

frontendfullstacktypescriptreact

2

🎨 Copycat

This skill inventories a Next.js app's public and authenticated views, confirms view names with you, and plans a shadcn-based clean platform scaffold.

nextjsshadcnplanningfrontend

2

🎨 Creating Components

This skill guides you through creating reusable Gluestack UI v4 components, covering planning, structure, styling, TypeScript, and accessibility best practices.

frontendreactnextjstypescript

2

🎨 Data Client Endpoint Setup

This skill configures @data-client/endpoint to wrap custom async functions for non-REST/GraphQL patterns with Data Client hooks.

datafrontendtypescriptwebsocket

2

🎨 Data Client Graphql Setup

This skill configures @data-client/graphql for GraphQL APIs, enabling authenticated endpoints and custom headers with automatic integration after

graphqltypescriptfrontenddata

2

🎨 Data Client Rest

This skill helps you model, fetch, and normalize REST resources with type safety and automatic cache management using @data-client/rest.

resttypescriptfrontendreact-native

2

🧪 Debug With Playwright

This skill helps you debug E2E tests by capturing targeted Playwright screenshots to visually inspect app state during failures.

debuggingtestingautomationfrontend

2

🎨 Feature Gating

This skill helps you enforce premium feature access with Flowglad, gating features and paywalls based on user subscriptions.

nextjstypescriptreacttrpc

2

🎨 Frontend Dev

This skill helps you craft production-grade frontend interfaces with bold, memorable aesthetics across components, dashboards, and pages.

frontenddesignuxaccessibility

2

🎨 Implement Split

This skill splits React components into reusable subcomponents by leveraging store-first data access, removing gratuitous prop drilling, and generating

reactfrontendrefactorcode-review

2

🎨 Inertia Rails

This skill helps you manage Inertia.js in Rails with React, guiding responses, redirects, forms, and props across controllers and components.

railsreactfullstackfrontend

2

🎨 Memory Fabric

This skill orchestrates memory graph queries to extract, deduplicate, and boost cross-referenced memories for unified context.

aidataanalyticsdatabase

2

🛡️ Monitoring Observability

This skill helps you implement comprehensive monitoring and observability patterns for Prometheus, Grafana, Langfuse tracing, and drift detection.

monitoringaiinfrabackend

2

🎨 Remember Learnings

This skill autonomously reviews the session for errors and snags and updates AGENTS.md with actionable learnings to improve future runs.

aiautomationproductivitygit

2

🎨 Remix

This skill helps you understand and navigate Remix documentation to build robust routes, loaders, actions, and data management in your app.

remixfrontendfullstackreact

2

🎨 Remotion

This skill helps you generate professional videos programmatically with React, streamlining animation workflows and automated rendering for rapid video

reactautomationproductivityai

2

🧪 Senior Qa

This skill helps you design and execute robust QA strategies for React, Next.js, and Node.js apps with automated test suite generation and coverage analysis.

testingautomationreactnextjs

2

🛡️ Setup

This skill sets up Clerk authentication across frameworks by following official quickstart guides and configuring keys to secure your app.

frontendbackendautomationsecurity

2

🎨 Shadcn Base

This skill helps you navigate and apply Base UI patterns from shadcn/ui, accelerating component usage, theming, and forms integration.

frontenddesignuxshadcn

2

🎨 Stitch

This skill generates UI screens from text prompts, exports to React components, and creates DESIGN.md design systems to accelerate UI workflows.

designuxreactautomation

2

🎨 Svg Icon Best Practice

This skill unifies SVG icon management in React TypeScript projects by converting inline SVGs into reusable components and enforcing naming and migration

reacttypescriptmigrationrefactor

2

🎨 Ui Engineer

This skill helps you transform PRD-based UI concepts into production-ready HTML/CSS with Tailwind, ensuring minimalist, responsive interfaces.

frontenddesignuxtailwind

2

🎨 Update Release Notes

This skill updates the release notes by adding new PR entries to next.mdx and archiving when a new version is published.

releasedocsautomationscripting

2

🎨 Write Release Notes

This skill guides you to craft complete release notes for tldraw SDK, ensuring clear structure, voice, and attribution across releases.

releasewritingdocsapi

2

🎨 Zustand State

This skill simplifies Shopify Remix state management with Zustand, enabling typed stores, SSR-friendly patterns, and selective re-renders for fast,

remixreacttypescriptfrontend

2

🧪 1k App Upgrade Test

This skill automates creation of test version branches and build configurations to validate app upgrade flows and version migrations.

automationtestingci-cdgit

🎨 1k Performance

This skill helps you optimize React and React Native performance by applying proven patterns for memoization, batching, and efficient list rendering.

reactreact-nativeperformancedebugging

🎨 1k Pkg Upgrade Review

This skill analyzes npm package upgrades by diffing source, tracing usages, and generating a compatibility report to inform safe dependency changes.

code-reviewautomationmigrationtypescript

🧪 Abramov

This skill helps you write predictable, composable React state, colocate data, and use custom hooks to improve developer experience.

reactfrontendjavascriptdebugging

🧪 Accelint React Testing

This skill helps you write, review, and refactor React tests with Testing Library, emphasizing accessible queries and user-centric interactions.

reacttestingfrontendaccessibility

🎨 Add Expert

This skill helps you add a new expert to the Remotion experts page by updating images, metadata, and generated cards.

frontendreactdocswriting

🧪 Add Provider Package

This skill guides you through creating a new @ai-sdk/provider package to integrate an AI service into the SDK.

aidocstypescriptjavascript

🎨 Add Sfx

This skill helps you add a new sound effect to the Remotion SFX library by guiding integration from remotion.media and exporting for use.

reactjavascripttypescriptdocs

🎨 Adding Animations

This skill helps you apply consistent Framer Motion animations across components, using stagger, hover, and reduced-motion patterns for accessible motion.

frontendreacttypescriptaccessibility

🎨 Agora Dev Skill

This skill helps Agora developers generate production-ready code, troubleshoot, and implement cloud recording, media push/pull, and AI agents across web and

frontendbackendclouddebugging

🎨 Ai Elements

This skill helps you create AI Elements interface components following shadcn/ui patterns and Vercel AI SDK conventions for rapid integration.

frontendreactnextjstypescript

🎨 Anduril

This skill applies Anduril design constraints to UI work, ensuring sharp corners, single accent usage, and accessible, lightweight typography.

designuxaccessibilityfrontend

🎨 Animating React Native Expo

This skill helps you implement performant animations and gesture-driven interactions in React Native Expo apps using Reanimated v4 and Gesture Handler.

react-nativeexpoperformancedebugging

🎨 Animation Performance

This skill helps you optimize React Native animation performance using Reanimated, worklets, and gesture handlers for buttery 60fps animations.

react-nativeperformancedebuggingreact

🎨 Animation With Worklets

This skill helps you schedule cross-thread work in React Native using worklets guidelines, improving animation performance and thread safety.

react-nativeperformancedebuggingtypescript