Skills
.Work. You
Rest

inspect-output

Community

Preview Stitches RSC CSS output instantly.

Software Engineering#css#debug#rsc#stitches#layer-structure#variant-styles
Authorartmsilva
Version1.0.0
Installs0

System Documentation

## What problem does it solve? Analyze and display the CSS output generated by Stitches RSC for components, including layer structure, scope rules, and variant styles.

## Core Features & Use Cases

  • Quick Inspection: Inspect a single component by creating a test file that imports the component, using the core API to generate CSS, and printing the output.
  • Inspect Build Output: After building, examine the generated CSS; for Next.js, review the CSS files under .next/static/css, and for Vite, inspect dist/assets for the stitches CSS.
  • Understanding Output Structure: Learn the CSS layer order (themed, global, styled, onevar, resonevar, allvar, inline) and how @scope rules map to generated class names.
  • Debugging Guidance: If styles don’t apply or a variant is not reflected, verify the generated class names and that the correct layer contains the expected properties.

### Quick Start Run the inspect-output workflow to print and review the generated CSS for a component.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: inspect-output
Download link: https://github.com/artmsilva/stitches-rsc/archive/main.zip#inspect-output

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.