Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

murillodutt/stitch/skills/html-to-vue

Name: stitch/skills/html-to-vue
Author: murillodutt

stitch/skills/html-to-vue/SKILL.md

npx skillsauth add murillodutt/cellm stitch/skills/html-to-vue

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Convert Stitch HTML to Vue SFC with semantic tokens and Nuxt UI components.

Pipeline

Read HTML — Read the .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.
Extract body — Strip <head>, <script> (including tailwind.config), and <html>/<body> wrappers. Keep only the inner content.
Extract tailwind.config — Parse the inline tailwind.config from <script> tag to understand project colors, fonts, and radius. This is the token source (Stitch does NOT use CSS variables).
CLASS_MAP remap — Apply CLASS_MAP to replace Tailwind utility classes with Nuxt UI semantic tokens. Source of truth: @cellm-ai/stitch-bridge/class-map (resolveClass() + matchColor() for DeltaE fallback). Tables below are human-readable reference.
Remove dark: prefixes — Delete all dark:* classes. Nuxt UI handles dark mode automatically via the theming layer.
DeltaE hex matching — For hardcoded hex values (bg-[#F8FAFC], text-[#2C2C2C]), compare against tailwind.config colors and DSE palette using deltaE color distance. Map to nearest semantic token if deltaE < 10.
Component substitution — Replace HTML elements with Nuxt UI components using the substitution table below.
Wrap in SFC — Wrap result in <template> + <script setup lang="ts"> with proper imports and typed props.
Review — Present the converted SFC to the user via AskUserQuestion for approval before writing.
Write — Save as app/components/{PageName}.vue or user-specified path.

CLASS_MAP — Tailwind to Nuxt UI Semantic Tokens

Background

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

Text

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

Border

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

Primary color

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

Ring and focus

| Stitch class | Nuxt UI semantic | |-------------|-----------------| | ring-gray-200, ring-gray-300 | ring-default | | focus:ring-blue-500, focus:ring-primary | focus:ring-primary |

Dark mode

| Stitch class | Action | |-------------|--------| | dark:* (any) | Remove entirely — Nuxt UI theming handles dark mode automatically |

Component Substitution

| 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 HTML Extraction Note

Stitch embeds design tokens in an inline <script>tailwind.config = { ... }</script> block — NOT in CSS variables. When extracting tokens:

Parse the tailwind.config.theme.extend.colors object for project colors
Parse tailwind.config.theme.extend.fontFamily for typography
Parse tailwind.config.theme.extend.borderRadius for radius values
These values inform the deltaE matching step and the DSE ingest pipeline

DeltaE Color Matching

For arbitrary hex values in classes like bg-[#F8FAFC] or text-[#2C2C2C]:

Convert hex to Lab color space
Compare against known semantic roles using deltaE (CIE2000):
- deltaE < 5: confident match — auto-replace with semantic token
- deltaE 5-10: probable match — replace but flag for review
- deltaE > 10: no match — keep as custom CSS variable, flag for DSE decision
Matching priority: project tailwind.config colors > DSE palette > Tailwind default palette

NEVER

Keep dark: classes — Nuxt UI handles dark mode; keeping them causes conflicts
Use raw Tailwind palette colors — always map to semantic tokens (text-primary, not text-blue-600)
Keep hardcoded hex in classes — resolve via deltaE or extract to CSS variable
Skip the review step — always show the converted SFC to the user before writing
Remove accessibility attributes — preserve aria-*, role, alt, for attributes from source HTML
Inline styles — convert to Tailwind semantic classes or component props, never leave style=""

murillodutt/stitch/skills/html-to-vue

stitch/skills/html-to-vue/SKILL.md

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

tools

Updated Apr 16, 2026

$ install --global

skillsauth

npx skillsauth add murillodutt/cellm stitch/skills/html-to-vue

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 16, 2026, 5:23 AM6.1s1 file scanned

SKILL.md

description:: 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'.
cellm_scope:: universal
user-invocable:: true
argument-hint:: [path-to-html-file]
allowed-tools:: Read, Write, Glob, AskUserQuestion, mcp__stitch__get_screen, mcp__stitch__list_screens

Convert Stitch HTML to Vue SFC with semantic tokens and Nuxt UI components.

Pipeline

Read HTML — Read the .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.
Extract body — Strip <head>, <script> (including tailwind.config), and <html>/<body> wrappers. Keep only the inner content.
Extract tailwind.config — Parse the inline tailwind.config from <script> tag to understand project colors, fonts, and radius. This is the token source (Stitch does NOT use CSS variables).
CLASS_MAP remap — Apply CLASS_MAP to replace Tailwind utility classes with Nuxt UI semantic tokens. Source of truth: @cellm-ai/stitch-bridge/class-map (resolveClass() + matchColor() for DeltaE fallback). Tables below are human-readable reference.
Remove dark: prefixes — Delete all dark:* classes. Nuxt UI handles dark mode automatically via the theming layer.
DeltaE hex matching — For hardcoded hex values (bg-[#F8FAFC], text-[#2C2C2C]), compare against tailwind.config colors and DSE palette using deltaE color distance. Map to nearest semantic token if deltaE < 10.
Component substitution — Replace HTML elements with Nuxt UI components using the substitution table below.
Wrap in SFC — Wrap result in <template> + <script setup lang="ts"> with proper imports and typed props.
Review — Present the converted SFC to the user via AskUserQuestion for approval before writing.
Write — Save as app/components/{PageName}.vue or user-specified path.

CLASS_MAP — Tailwind to Nuxt UI Semantic Tokens

Background

Text

Border

Primary color

Ring and focus

| Stitch class | Nuxt UI semantic | |-------------|-----------------| | ring-gray-200, ring-gray-300 | ring-default | | focus:ring-blue-500, focus:ring-primary | focus:ring-primary |

Dark mode

| Stitch class | Action | |-------------|--------| | dark:* (any) | Remove entirely — Nuxt UI theming handles dark mode automatically |

Component Substitution

Stitch HTML Extraction Note

Stitch embeds design tokens in an inline <script>tailwind.config = { ... }</script> block — NOT in CSS variables. When extracting tokens:

Parse the tailwind.config.theme.extend.colors object for project colors
Parse tailwind.config.theme.extend.fontFamily for typography
Parse tailwind.config.theme.extend.borderRadius for radius values
These values inform the deltaE matching step and the DSE ingest pipeline

DeltaE Color Matching

For arbitrary hex values in classes like bg-[#F8FAFC] or text-[#2C2C2C]:

Convert hex to Lab color space
Compare against known semantic roles using deltaE (CIE2000):
- deltaE < 5: confident match — auto-replace with semantic token
- deltaE 5-10: probable match — replace but flag for review
- deltaE > 10: no match — keep as custom CSS variable, flag for DSE decision
Matching priority: project tailwind.config colors > DSE palette > Tailwind default palette

NEVER

Keep dark: classes — Nuxt UI handles dark mode; keeping them causes conflicts
Use raw Tailwind palette colors — always map to semantic tokens (text-primary, not text-blue-600)
Keep hardcoded hex in classes — resolve via deltaE or extract to CSS variable
Skip the review step — always show the converted SFC to the user before writing
Remove accessibility attributes — preserve aria-*, role, alt, for attributes from source HTML
Inline styles — convert to Tailwind semantic classes or component props, never leave style=""

Related Skills

murillodutt/cellm/skills/prose

data-ai

VerifiedTrustedCommunity

Prose override — temporarily disable quantization and respond in readable prose. Use when relational density matters, for safety-critical explanations, onboarding handoffs, or when token economy is not the priority.

SKILL.mdUpdated Apr 23, 2026

murillodutt/cellm/skills/prose

murillodutt/cellm/skills/pr-guardian

development

VerifiedTrustedCommunity

Govern explicit weekly Super PRs or maintainer-requested PR merges. Evaluates a 10-criterion readiness checklist and performs governed merge only when a user-requested PR is READY. Never creates or keeps permanent PRs. Use when: 'pr-check', 'pr-merge', 'merge this PR safely', 'is PR ready', 'guard merge', or /sk-git delegates pr-merge.

SKILL.mdUpdated Apr 23, 2026

murillodutt/cellm/skills/pr-guardian

murillodutt/cellm/skills/compress-llm

data-ai

VerifiedTrustedCommunity

Operational surface for the compress-llm Layer-1 token I/O compressor. Enable, disable, switch mode, and inspect status without editing config files. Use when tuning compression pressure for the current session or project.

SKILL.mdUpdated Apr 23, 2026

murillodutt/cellm/skills/compress-llm

murillodutt/cellm/skills/cellm-feedback

tools

VerifiedTrustedCommunity

Generate structured upstream feedback for the CELLM engineering team. Produces evidence-first Markdown at docs/evidence/<date>-cellm-feedback-*.md for bugs, anti-patterns, deprecation gaps, and harness surprises, with optional atom registration via knowledge_ops. Use when: 'feedback for CELLM', 'send to CELLM team', 'register this as atom', 'document this anti-pattern', 'report this bug upstream'. Trigger proactively on MCP schema/runtime mismatches, mechanical edit loops (>=3 sequential edits), short deprecation windows (<6 weeks), or reusable harness surprises. Do NOT trigger for routine feature work or project-local bugs.

SKILL.mdUpdated Apr 21, 2026

murillodutt/cellm/skills/cellm-feedback

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/murillodutt/cellm.git

# Copy into Claude Code skills folder (global)
cp -r cellm/stitch/skills/html-to-vue ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

murillodutt/cellm

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT