skills.rest
civitai
civitaiOFFICIAL
Explore all skills by this author →
Website𝕏@HelloCivitaiGitHub

component-preview

Preview React components with Mantine and Tailwind styling using Ladle stories and screenshots.

7.2k|734|Updated Oct 11, 2022
Search Tags:#storybook#Tailwind#screenshot#mantine#reAct#component preview#ladle
One-click install
npx skills add https://github.com/civitai/civitai --skill component-preview
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-preview
Source: https://github.com/civitai/civitai/tree/main/.claude/skills/component-preview
Command: npx skills add https://github.com/civitai/civitai --skill component-preview

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @ladle/react.

What problem does it solve?

Verifying visual changes to React UI components normally requires running the full dev server and navigating to the right page, which is slow and cumbersome. This Skill renders components in isolation with real Mantine v7 and Tailwind styling, capturing dark and light mode screenshots for immediate visual review.

Core Features & Use Cases

  • Isolated Component Stories: Creates Ladle .stories.tsx files with realistic mock data and multiple states (default, empty, overflow) near the component being modified.
  • Automated Screenshot Capture: Uses browser automation to capture cropped screenshots of each story variant in both dark and light themes.
  • Iterative Visual Review: Presents screenshots inline, gathers feedback, and re-captures after adjustments until the component looks right.
  • Use Case: After fixing a visual bug in a sidebar card component, generate a story at 320px width, capture dark and light screenshots, and confirm the fix before committing.

Quick Start

Ask the assistant to preview the component you just modified and show screenshots of it in dark and light mode.

Frequently Asked Questions about component-preview

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

FAQPage Schema
How do I preview a React component without running the dev server?▼

Create a Ladle story file (.stories.tsx) next to the component with mock data, then run npx ladle serve on port 61111. Ladle renders the component in isolation with the configured Mantine provider and Tailwind styles, no full app needed.

What is Ladle and how does it compare to Storybook?▼

Ladle is a lightweight Storybook alternative built on Vite that auto-discovers stories matching src*.stories.tsx. It starts faster and needs minimal configuration, using a global provider file for Mantine theme setup.

How do I capture screenshots of Ladle stories in dark and light mode?▼

Use the browser-automation CLI to open each story URL with the theme query parameter, wait for render, then screenshot the .ladle-story-wrapper element. Loop over story paths and both theme values to capture all variants.

Can I preview components that depend on tRPC or auth context?▼

Components coupled to tRPC, auth, or router context need their dependencies mocked or their visual parts extracted into the story. For deeply coupled components, the Skill offers to mock dependencies, extract visuals, or fall back to the dev server.

Why does my Ladle story not match the real component's appearance?▼

Mismatches usually come from missing parent container styles, unconstrained width, or omitted Mantine props. Copy the exact Tailwind classes, inline styles, and parent container styles from the real context, and set a realistic wrapper width.

Related Skills

Explore More Software Engineering Skills→
merileymeriley

mantine-developing

Develop React UIs with Mantine components, Styles API, and @mantine/form.

Community
Intermediate
VYRE-StudiosVYRE-Studios

commit-push-pr

Commit staged changes, push the branch, and open a pull request via GitHub CLI.

Official
Intermediate
westnwestn
1

gstack

Control a persistent headless browser to navigate pages, interact with UI, and capture evidence.

Community
Advanced
hemant0510hemant0510

dev

Start a local development server and verify the app in a browser.

Community
Basic