skills.rest
artmsilva
artmsilvaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

inspect-output

...

2|Updated Jan 27, 2026
Search Tags:#css#debug#rsc#stitches#layer-structure#variant-styles
One-click install
npx skills add https://github.com/artmsilva/stitches-rsc --skill inspect-output
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: inspect-output
Source: https://github.com/artmsilva/stitches-rsc/tree/main/.claude/plugins/stitches-rsc-dev/skills/inspect-output
Command: npx skills add https://github.com/artmsilva/stitches-rsc --skill inspect-output

SYSTEM DOCUMENTATION & REQUIREMENTS

## 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.

Frequently Asked Questions about inspect-output

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

FAQPage Schema
How do I inspect CSS output generated by Stitches RSC components?▼

To inspect Stitches RSC CSS output, create a test file importing the component, use the Stitches core API to generate the CSS text, and print the resulting output for review.

Why are my Stitches variant styles not applying to the rendered component?▼

If Stitches variant styles are not applying, verify the generated class names and ensure the correct CSS layer contains the expected properties by inspecting the output structure.

What is the CSS layer order in Stitches RSC output?▼

The Stitches RSC CSS layer order is themed, global, styled, onevar, resonevar, allvar, and inline, which dictates how scope rules map to generated class names.

How do I inspect Stitches CSS build output in Next.js or Vite?▼

To inspect Stitches CSS build output, review the generated CSS files under .next/static/css for Next.js or dist/assets for Vite to examine the final layer structure.

Can I integrate Stitches CSS output inspection into test fixtures?▼

Yes, you can integrate the generated CSS text output into test fixtures to programmatically verify layer order, scope rules, and variant styles across components and builds.

Do I need access to the Stitches core API to debug generated CSS?▼

Yes, debugging Stitches generated CSS requires access to the Stitches core API to generate the CSS text and the ability to output the resulting CSS for inspection.

Related Skills

Explore More Software Engineering Skills→
artmsilvaartmsilva
2

check-rsc-compat

Audit Stitches RSC components for React Server Components compatibility issues.

Community
Intermediate
wikimediawikimedia
7

protowiki-snapshot-data

Coordinate ProtoWiki snapshot workflows across fetchers, HTML snapshots, and skin scoping.

Official
Advanced
sanghee01sanghee01

devup-ui

Compile JSX styles into static CSS for React components.

Community
Intermediate
artmsilvaartmsilva
2

migrate-stitches

Migrate Stitches.js code to Stitches RSC by replacing package names and configuring Next.js or Vite build plugins.

Community
Advanced