Stats
Actions
Tags
From stitch
Convert Stitch-generated HTML screens to Vue 3 SFCs with semantic Nuxt UI tokens. Remaps Tailwind utility classes, substitutes HTML elements for Nuxt UI components, and removes dark: prefixes. Use when: 'html to vue', 'convert stitch html', 'stitch to component'.
How this skill is triggered — by the user, by Claude, or both
Slash command
/stitch:html-to-vueThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Convert Stitch HTML to Vue SFC with semantic tokens and Nuxt UI components.
Convert Stitch HTML to Vue SFC with semantic tokens and Nuxt UI components.
.stitch/designs/{page}.html file (or user-provided path). If the local file does not exist, fetch HTML via mcp__stitch__get_screen using the screen's htmlCode.downloadUrl.<head>, <script> (including tailwind.config), and <html>/<body> wrappers. Keep only the inner content.tailwind.config from <script> tag to understand project colors, fonts, and radius. This is the token source (Stitch does NOT use CSS variables).@cellm-ai/stitch-bridge/class-map (resolveClass() + matchColor() for DeltaE fallback). Tables below are human-readable reference.dark:* classes. Nuxt UI handles dark mode automatically via the theming layer.bg-[#F8FAFC], text-[#2C2C2C]), compare against tailwind.config colors and DSE palette using deltaE color distance. Map to nearest semantic token if deltaE < 10.<template> + <script setup lang="ts"> with proper imports and typed props.app/components/{PageName}.vue or user-specified path.| Stitch class | Nuxt UI semantic | CSS variable |
|---|---|---|
bg-white | bg-default | --ui-bg |
bg-gray-50 | bg-muted | --ui-bg-muted |
bg-gray-100 | bg-elevated | --ui-bg-elevated |
bg-gray-200 | bg-accented | --ui-bg-accented |
bg-gray-800, bg-gray-900 | bg-inverted | --ui-bg-inverted |
| Stitch class | Nuxt UI semantic | CSS variable |
|---|---|---|
text-gray-400 | text-dimmed | --ui-text-dimmed |
text-gray-500 | text-muted | --ui-text-muted |
text-gray-600 | text-toned | --ui-text-toned |
text-gray-700 | text-default | --ui-text |
text-gray-900, text-black | text-highlighted | --ui-text-highlighted |
text-white | text-inverted | --ui-text-inverted |
| Stitch class | Nuxt UI semantic | CSS variable |
|---|---|---|
border-gray-200 | border-default | --ui-border |
border-gray-300 | border-accented | --ui-border-accented |
border-gray-700, border-gray-800 | border-inverted | --ui-border-inverted |
| Stitch class | Nuxt UI semantic |
|---|---|
bg-blue-600, bg-primary, bg-{customColor} | bg-primary |
text-blue-600, text-primary, text-{customColor} | text-primary |
border-blue-600, border-primary | border-primary |
hover:bg-blue-700, hover:bg-primary/90 | hover:bg-primary/90 |
| Stitch class | Nuxt UI semantic |
|---|---|
ring-gray-200, ring-gray-300 | ring-default |
focus:ring-blue-500, focus:ring-primary | focus:ring-primary |
| Stitch class | Action |
|---|---|
dark:* (any) | Remove entirely — Nuxt UI theming handles dark mode automatically |
| HTML element | Nuxt UI component | Notes |
|---|---|---|
<button> | <UButton> | Map class styles to color, variant, size props |
<input> | <UInput> | Map type, placeholder to props |
<textarea> | <UTextarea> | Map rows, placeholder to props |
<select> | <USelect> | Extract <option> elements to :items prop |
<table> | <UTable> | Extract headers to :columns, rows to :rows |
<a> (navigation) | <ULink> or <NuxtLink> | Use <NuxtLink> for internal routes |
<img> | <NuxtImg> | Add loading="lazy" if not present |
<nav> with links | <UNavigationMenu> | Extract items to :items prop |
<dialog>, modal divs | <UModal> | Extract trigger and content |
<details> | <UAccordion> | Extract summary and content to :items |
<div class="card"> | <UCard> | Map header, body, footer to slots |
<span class="badge"> | <UBadge> | Map color and variant |
<div class="avatar"> | <UAvatar> | Map src, alt, size |
Stitch embeds design tokens in an inline <script>tailwind.config = { ... }</script> block — NOT in CSS variables. When extracting tokens:
tailwind.config.theme.extend.colors object for project colorstailwind.config.theme.extend.fontFamily for typographytailwind.config.theme.extend.borderRadius for radius valuesFor arbitrary hex values in classes like bg-[#F8FAFC] or text-[#2C2C2C]:
deltaE < 5: confident match — auto-replace with semantic tokendeltaE 5-10: probable match — replace but flag for reviewdeltaE > 10: no match — keep as custom CSS variable, flag for DSE decisiontailwind.config colors > DSE palette > Tailwind default palettedark: classes — Nuxt UI handles dark mode; keeping them causes conflictstext-primary, not text-blue-600)aria-*, role, alt, for attributes from source HTMLstyle=""npx claudepluginhub murillodutt/cellm --plugin stitchBatch-converts UI screenshots into Vue 3 Composition API components. Use when the user provides a directory of design images and wants generated page components, shared components, and router wiring using Vant, Element Plus, or Ant Design Vue.
Converts Stitch designs to semantic HTML5 + CSS with custom properties, dark mode, mobile-first responsiveness, and zero dependencies. For WebViews, Capacitor, Ionic, static sites.
Generates token-bound web components from design tokens and aesthetic intent, implementing with Tailwind/CSS and React/Vue/Svelte patterns while enforcing no hardcoded design values.