skills.rest
gabelul
gabelulCOMMUNITY
Explore all skills by this author →
Website𝕏@GabiExploresGitHub

stitch-shadcn-ui

Replace raw HTML elements in Stitch-generated React apps with shadcn/ui components.

38|5|Updated Feb 18, 2026
Search Tags:#accessibility#react#shadcn/ui#tailwind#design-tokens#stitch#component-integration
One-click install
npx skills add https://github.com/gabelul/stitch-kit --skill stitch-shadcn-ui-gabelul
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-shadcn-ui
Source: https://github.com/gabelul/stitch-kit/tree/main/skills/stitch-shadcn-ui
Command: npx skills add https://github.com/gabelul/stitch-kit --skill stitch-shadcn-ui-gabelul

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually replacing raw HTML elements in Stitch-generated React applications with accessible, customizable shadcn/ui components and aligning design tokens is time-consuming and prone to styling inconsistencies.

Core Features & Use Cases

  • Design Token Alignment: Maps Stitch-extracted CSS variables to shadcn/ui's variable naming convention for consistent styling across the app.
  • Component Discovery & Installation: Guides users through finding, installing, and configuring shadcn/ui components that match their Stitch design.
  • Customization Patterns: Provides templates for extending shadcn components with project-specific variants and wrappers that preserve Stitch's design language.
  • Use Case: For a Stitch-generated e-commerce dashboard, use this skill to quickly swap raw HTML product cards and navigation elements for shadcn components that match the Stitch color palette and typography, with built-in keyboard navigation and ARIA compliance.

Quick Start

Use the stitch-shadcn-ui skill to replace all raw HTML elements in your Stitch-generated React dashboard with matching shadcn/ui components aligned to your Stitch design tokens.

Frequently Asked Questions about stitch-shadcn-ui

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

FAQPage Schema
How do I integrate shadcn/ui components into a React app generated from Google Stitch?▼

To integrate shadcn/ui into a Stitch React app, use this skill to automatically replace raw HTML elements with matching accessible components. It maps Stitch-extracted design tokens to shadcn's CSS variable naming convention, ensuring styling consistency without manual code edits.

What is the best way to map Stitch design tokens to shadcn/ui CSS variables?▼

Mapping Stitch design tokens to shadcn/ui CSS variables involves aligning Stitch-extracted CSS variables with shadcn's variable naming convention. This ensures consistent styling across your React app while preserving the original Stitch design system's color palette and typography.

How do I customize shadcn/ui components to match my Stitch design system?▼

Customizing shadcn/ui components for a Stitch design system uses provided templates to extend components with project-specific variants and wrappers. This approach preserves Stitch's design language while adding built-in keyboard navigation and ARIA compliance for accessibility.

Can I use shadcn/ui with Tailwind CSS in a Stitch-generated React application?▼

Yes, you can use shadcn/ui with Tailwind CSS in Stitch-generated React applications. The skill guides you through discovering, installing, and configuring shadcn components that match your Stitch design, ensuring seamless integration with your existing Tailwind setup.

Why does manually replacing raw HTML elements in Stitch-generated React apps cause styling inconsistencies?▼

Manually replacing raw HTML elements in Stitch-generated React apps causes styling inconsistencies because aligning design tokens by hand is error-prone. Automating this process ensures shadcn/ui components correctly adopt the Stitch color palette and typography without missing CSS variable mappings.

Related Skills

Explore More Software Engineering Skills→
vobasevobase
59

react:components

Convert Stitch HTML designs into modular React components with shadcn/ui and Tailwind.

Official
Advanced
AgentiveCityAgentiveCity
2

nextjs-ui-component-smith

Design and refactor reusable UI components in Next.js App Router with TypeScript, Tailwind, and shadcn/ui.

Official
Intermediate
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
DYAI2025DYAI2025
3

artifacts-builder

Create React/TypeScript HTML artifacts with Tailwind CSS and shadcn/ui.

Community
Advanced