Skills tagged "react" (185)

🎨 Apollo Client

This skill guides React developers through Apollo Client 4.x setup, caching, local state, and error handling to build efficient GraphQL apps.

graphqlreactfrontendperformance

🛡️ Assess

This skill evaluates code, designs, or approaches with a structured 0-10 score, pros/cons, and practical improvement recommendations.

code-reviewtestingsecurityperformance

🎨 Atomic Design Fundamentals

This skill describes Atomic Design fundamentals, quarks, atoms, molecules, organisms, templates, pages and how to structure scalable design systems.

frontenddesignuxreact

🎨 Atomirx

This skill helps you manage reactive state with atomirx primitives in TypeScript, simplifying reading, deriving, and debugging across components.

reacttypescriptdebuggingperformance

🎨 Babysit

This skill helps you implement Zustand state management with type-safe stores, slices, and middleware for scalable React apps.

typescriptjavascriptreactnextjs

🎨 Biome

This skill provides ultra-fast TypeScript/React linting and formatting with a single Rust tool, replacing ESLint and Prettier for faster code quality.

lintingformattingrustreact

🎨 Biome

This skill lints and formats frontend code using Biome 2.4, enabling type-aware checks, import organization, and CI-ready rules.

frontendlintingci-cdgraphql

🎨 Book Translation

This skill translates The Interactive Book of Prompting content and UI strings into a target language, preserving structure and usability for multilingual

aicontenttypescriptnextjs

🎨 Carbon Icons

This skill ensures React components use Carbon Icons from @carbon/icons-react with proper sizing, color, alignment, and accessibility.

reactfrontenddesignux

🎨 Changeset

This skill analyzes code changes, generates changesets, updates docs, drafts blog entries, and prepares PR descriptions for user-facing releases.

releasedocsautomationci-cd

🎨 Chart Visualization

This skill visualizes data by automatically selecting the best chart type and generating a chart image with a complete parameter set.

dataanalyticsfrontendjavascript

🎨 Check Workflows

This skill analyzes the past day's GitHub Actions workflow runs to detect actionable failures and open issues for remediation.

ci-cddevopsautomationdebugging

🎨 Coding Standards

This skill helps teams enforce universal coding standards for TypeScript, JavaScript, React, and Node.js across projects.

lintingcode-reviewtypescriptjavascript

🎨 Cra To Next Migration

This skill guides migrating CRA projects to Next.js, converting routing, data fetching, and assets to modern patterns for improved performance and server

nextjsmigrationreacttypescript

🎨 Create Mcp App

This skill guides you to scaffold and build MCP Apps with interactive UIs, providing framework choices, lifecycle guidance, and host integration.

frontendtypescriptreactdebugging

🎨 Create Ryos App

This skill helps you scaffold ryOS applications by creating structured directories, components, hooks, and metadata following established patterns.

typescriptreactfrontendproductivity

🎨 Dashboard Builder

This skill helps you build professional data visualization dashboards with Next.js, Tailwind, and Recharts, delivering fast UI and live analytics.

frontendanalyticsreactnextjs

🧪 Data Client React Testing

This skill assists testing React data-client hooks and components with renderDataHook, fixtures, and nock HTTP mocks for reliable unit and integration tests.

reacttestingunit-testsintegration-tests

🎨 Data Client Schema

This skill helps you design and compose scalable data schemas for entities, collections, and unions, enabling normalized, polymorphic, and relational data in

datatypescriptrestgraphql

🧪 Data Client Vue Testing

This skill helps you test Vue data-client composables and components with suspense, fixtures, and mocks to ensure reactive state updates.

vuetestingunit-testsintegration-tests

🎨 Docs

This skill guides you to use the AIRIOT client for API, auth, forms, models, pages, and real-time data integration with TypeScript.

frontendapireacttypescript

🎨 Docs Demo

This skill helps you add interactive demos to Remotion docs by guiding you through composing, registering, and embedding demos in MDX pages.

docsreacttypescriptfrontend

🎨 Dust Writing React Effects

This skill guides writing React components to avoid unnecessary useEffect by deriving state during render and avoiding effect-driven updates.

reactfrontendcode-reviewrefactor

🧪 E2e Rebase

This skill helps you rebase e2e test snapshots by extracting failed tests from PR comments and updating snapshots accordingly.

testingautomationgitdebugging

🛡️ Electron Best Practices

This skill guides secure Electron + React development with type-safe IPC, proper packaging, and testing patterns for production-ready desktop apps.

securityreacttestingcode-review

🎨 Epic Routing

This skill guides you through Epic Stack routing with file-based conventions, loaders, actions, and parameter handling for clean, scalable apps.

reacttypescriptprismafrontend

🧪 Figma D3 React Ts

This skill helps you build pixel-perfect D3 visualizations inside React/Next.js, matching Figma designs and validating visuals with Playwright.

reactnextjsdataanalytics

🎨 Figma Illustration Import

This skill helps you convert multi-layer Figma illustrations into reusable React atom components with assets, stories, and theme support.

reactfrontenddesignux

🎨 Figma Implement Design

This skill translates Figma designs into production-ready code with pixel-perfect fidelity using MCP workflows and design-system mapping.

designfrontenduxaccessibility

🎨 Fluxui Docs Pro

This skill helps you implement Flux UI Livewire components with Tailwind CSS across pages, cards, forms, and layouts.

frontenddocsuxaccessibility

🎨 Fp Data Transforms

This skill helps you transform arrays and objects with functional patterns, enabling safer access, grouping, and normalization for real-world data.

dataanalyticstypescriptdebugging

🎨 Fp Immutable

This skill guides practical immutability patterns in TypeScript to safely update state and reduce bugs across arrays and objects.

typescriptfrontendreactdebugging

🎨 Fp Option Either

This skill helps you write safer TypeScript code with fp-ts Option and Either, guiding when to use each and how to compose them.

aidebuggingtypescriptcode-review

🧪 Fp Pipe Flow

This skill helps you master function composition in fp-ts using pipe and flow to build elegant, type-safe data pipelines.

typescriptdatadebuggingproductivity

🎨 Fp Pipe Ref

This skill provides quick references for pipe and flow in fp-ts to compose data pipelines and transform values efficiently.

typescriptdebuggingperformancedocs

🎨 Fp Refactor

This skill helps you migrate imperative TypeScript code to fp-ts patterns, enabling explicit errors, safe optional handling, and functional composition.

typescriptrefactorcode-reviewdebugging

🧪 Fp Side Effects

This skill teaches functional approaches to managing side effects in TypeScript, enabling pure cores, isolated impure shells, and reliable, testable code.

typescriptdebuggingtestingrefactor

🎨 Fp Task Either

This skill enables type-safe async error handling with TaskEither patterns in TypeScript, enabling composable, lazy operations and robust error recovery.

typescriptbackendapireact

🎨 Fp Types Ref

This skill helps you choose the correct fp-ts type (Option, Either, or Task) and provide practical imports for async and error handling.

typescriptapibackendreact

🎨 Fp Validation

This skill teaches error-accumulating validation patterns with fp-ts, enabling robust form and API input validation.

typescriptapidatareact

🎨 Framer Code Components Overrides

This skill helps you create Framer Code Components and Overrides, enabling advanced React customization, property controls, and robust hydration-safe patterns.

reactfrontenddebuggingperformance

🎨 Frontend Agent

This skill helps you build accessible, design-faithful React and Next.js UI using shadcn/ui, server components, and design tokens for performance.

frontendreactnextjsshadcn

🎨 Frontend Design

This skill helps you design production-grade frontend interfaces by analyzing designs, generating tokens, palettes, typography, and framework-ready components.

designfrontendaccessibilityreact

🎨 Frontend Design

This skill helps you craft production-grade interactive interfaces with distinctive aesthetics using HTML/CSS/React components and motion.

frontendreactdesignux

🎨 Frontend Dev

This skill helps you create and modify Next.js pages, React components, and Tailwind styles following Swiss International Style.

frontendnextjstailwindtypescript

🎨 Frontend Developer

This skill helps you build scalable React and Next.js UI components with accessible, responsive layouts and optimized performance.

reactnextjsfrontendperformance

🎨 Frontend Ui Skill

This skill helps audit and build enterprise SaaS UIs with Tailwind v4, shadcn/ui, and Next.js/Vite while ensuring accessibility and performance.

frontendreactnextjstailwind

🎨 Frontend Ui Ux

This skill helps you craft visually stunning, cohesive UI/UX by translating design intent into pixel-perfect code with thoughtful interactions and

frontenddesignuxaccessibility

🎨 Gsap

This skill helps you implement web animations with GSAP for tweens, timelines, and scroll-based effects across components and pages.

frontendjavascriptperformancereact

🎨 Island Rescue

This skill helps you STOP marshal rescue guidance on STOP a lonely island scenario STOP by practical steps and STOP clear checklists

aiautomationplanningproduct

🎨 Localize

This skill helps you localize ryOS apps by extracting strings, replacing with translation keys, and syncing translations across languages.

frontendtypescriptreact

🎨 Mapbox Search Integration

This skill helps you implement Mapbox search end-to-end, from discovery questions to production-ready integration with best practices.

frontendjavascriptapireact

🎨 Mapcn Docs

This skill helps you build comprehensive Next.js App Router documentation sites with live previews, code samples, and accessible, theme-aware UI.

nextjsdocsaccessibilityreact

🎨 Material Component Doc

This skill guides and automates FlowGram material component documentation, including source tracing, story creation, and multilingual translation workflows.

docsautomationwritingreact

🛡️ Memory

This skill enables fast search, load, history, and visualization of memory graphs to recall decisions and load context.

aidataanalyticsapi

🎨 Mobile Ui

This skill helps you optimize mobile UI for responsive layouts, safe areas, touch targets, and typography across iPhone models.

frontenduxperformancetailwind

🎨 Modal

This skill guides you to implement and open imperative modals with createModal from @lobehub/ui, boosting modal UX consistency.

frontendreacttypescriptux

🧪 Multi Pr Review

This skill coordinates three specialized sub-agents to review PR diffs, validate issues by reasoning, and post a summarized verdict.

aiautomationcode-reviewtypescript

🎨 Next Cache Components

This skill helps you implement Next.js 16 Cache Components to mix static, cached, and dynamic content for faster, tailored pages.

nextjsperformancefrontendreact

🎨 Nextfriday Best Practices

This skill helps you write and review Next.js TypeScript code by applying 41 best-practice rules across naming, style, imports, types, and React patterns.

reactnextjstypescriptcode-review