From qe-framework
Converts Stitch HTML designs into production-ready React TSX components with theme-aware styling and design token extraction.
How this skill is triggered — by the user, by Claude, or both
Slash command
/qe-framework:Qstitch-applyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
| Request | Action |
| Request | Action |
|---|---|
| "Apply stitch", "HTML to React conversion", "convert stitch code to react" | This skill — convert design to components |
| "Set up Stitch", "Connect Stitch MCP" | NOT this skill — use Qstitch-cli |
| "Create new UI component" (no Stitch source) | NOT this skill — use Qfrontend-design |
Check for DESIGN.md in the project root FIRST.
DESIGN.md exists: Use it as the design token source for the conversion. Proceed.DESIGN.md does NOT exist: STOP. Do not proceed with Stitch conversion.
⚠️ DESIGN.md가 없습니다.
Stitch 변환 전에 /Qdesign을 먼저 실행하세요.
designmd.ai에서 프로젝트에 맞는 디자인 시스템을 찾아볼 수 있습니다.
Run /Qdesign to create a design system specification first.
Determine how Stitch HTML is available:
| Source | Detection | Action |
|---|---|---|
| MCP connected | claude mcp list | grep -i stitch returns result | Fetch via MCP tools |
| Local files | code.html + screen.png pairs in project | Read from filesystem |
| Pasted HTML | User provides HTML inline | Use directly |
If MCP is available, prefer it for live fetching. Otherwise proceed in code-only mode (no visual verification).
From each Stitch screen HTML:
Output a brief component map before writing any code:
Screen: Dashboard
Components: AppShell, NavSidebar, MetricCard(x3), DataTable
Theme tokens found: 6 colors, 3 font sizes, 4 spacing values
Parse all color, spacing, and typography values from the HTML/CSS:
Colors — group by semantic role:
// From: color: #1a1a2e; background: #16213e; accent: #0f3460;
colors: {
surface: '#1a1a2e',
surfaceAlt: '#16213e',
accent: '#0f3460',
}
Typography — map to scale roles:
typography: {
display: { size: '2rem', weight: 700 },
body: { size: '0.875rem', weight: 400 },
}
Spacing — identify base unit (4pt or 8pt grid):
spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 }
If a design-context.md already exists in the project root, load it and merge — do not overwrite existing tokens.
Check for existing theme system before writing styles:
useColors hook — grep -r "useColors" src/grep -r "design-context\|themeTokens\|colorTokens" src/useColors-compatible hook:// src/shared/hooks/useColors.ts
export const useColors = () => ({
// light mode
light: { surface: '#ffffff', text: '#1a1a1a', accent: '#0f3460' },
// dark mode
dark: { surface: '#1a1a2e', text: '#f0f0f0', accent: '#4a8cff' },
});
Convert each identified component. Rules:
p-4 → padding: '16px', text-sm → fontSize: '0.875rem'useColors() hook, never hardcode colorspackage.jsonanyTemplate per component:
import { useColors } from '@/shared/hooks/useColors';
interface MetricCardProps {
label: string;
value: string | number;
trend?: 'up' | 'down' | 'flat';
}
export const MetricCard = ({ label, value, trend }: MetricCardProps) => {
const colors = useColors();
const isDark = /* your theme context */;
const c = isDark ? colors.dark : colors.light;
return (
<div style={{ background: c.surface, padding: '16px', borderRadius: '8px' }}>
<span style={{ color: c.textSecondary, fontSize: '0.75rem' }}>{label}</span>
<p style={{ color: c.text, fontSize: '1.5rem', fontWeight: 700 }}>{value}</p>
</div>
);
};
claude mcp list | grep -i chrome
If connected, verify each converted component against screen.png:
mcp__claude-in-chrome__screenshotscreen.pngWhen Chrome MCP is unavailable, skip visual verification and apply these static checks instead:
useColors() — none hardcodedcursor: 'pointer' and hover state logicReport code-only mode clearly: "Visual verification skipped — Chrome MCP not connected. Code-only checks applied."
After completing all components, report:
## Conversion Complete
Screens processed: N
Components created: [list with file paths]
Theme tokens: [new tokens added, or "merged with existing useColors"]
Visual verification: [passed / code-only mode]
Files created:
- src/components/MetricCard.tsx
- src/components/NavSidebar.tsx
- src/shared/hooks/useColors.ts (new / updated)
Before marking conversion complete:
useColors)any typesuseColors patternQstitch-cli)Qfrontend-design)package.json to add new styling libraries without askingnpx claudepluginhub inho-team/qe-framework --plugin qe-frameworkCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.