check-rsc-compat

Audit Stitches RSC components for React Server Components compatibility issues.

2|Updated Jan 27, 2026
One-click install
npx skills add https://github.com/artmsilva/stitches-rsc --skill check-rsc-compat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: check-rsc-compat
Source: https://github.com/artmsilva/stitches-rsc/tree/main/.claude/plugins/stitches-rsc-dev/skills/check-rsc-compat
Command: npx skills add https://github.com/artmsilva/stitches-rsc --skill check-rsc-compat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers verify that Stitches RSC components are compatible with React Server Components by detecting runtime CSS generation, client-side hooks usage, and unsafe browser patterns.

Core Features & Use Cases

  • Detects runtime CSS generation and incompatible client patterns before deployment.
  • Scans components across server and client boundaries to prevent runtime errors in server components.
  • Provides guidance on fixes and safe patterns for RSC readiness.

Quick Start

Run the quick compatibility check on a component file using the provided script to audit RSC patterns.

Frequently Asked Questions about check-rsc-compat

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check React Server Components compatibility for Stitches components?▼

To check React Server Components compatibility, audit Stitches source code for runtime CSS generation, client-side state usage without 'use client', and forbidden browser APIs. This flags incompatible patterns across server and client boundaries to prevent runtime errors.

What makes a Stitches component incompatible with React Server Components?▼

A Stitches component is incompatible with React Server Components if it uses runtime CSS generation, direct browser APIs, non-serializable props, or client-side hooks without a 'use client' directive. These patterns break server boundaries and cause runtime errors.

How do I audit my codebase for unsafe RSC patterns before deployment?▼

Audit your codebase for unsafe RSC patterns by scanning single-file components or entire projects to detect client-side state usage and browser API calls. This verifies serializable props and flags incompatible patterns before deployment.

Does Stitches work with React Server Components across server and client boundaries?▼

Stitches works with React Server Components only if components avoid runtime CSS generation and direct browser APIs. You must add 'use client' directives for client-side state usage to ensure safe execution across server and client boundaries.

Why does my Stitches component fail in a React Server Component?▼

Your Stitches component fails in a React Server Component because it likely contains runtime CSS generation, direct browser APIs, or client-side state without a 'use client' directive. Scanning the source flags these incompatible patterns.

When do I need to verify RSC compatibility for my Stitches components?▼

Verify RSC compatibility for Stitches components before deployment to ensure serializable props and no forbidden browser APIs. This prevents runtime errors when rendering components across server and client boundaries.