stitch-adapter
CommunityTransform external HTML into design-system-ready UI
Design & Creative#html#accessibility#design system#vanilla javascript#ui adaptation#css tokens#stitch mcp
Authorpaulinett1508-dev
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill converts external UI HTML (from Stitch MCP or manually pasted) into a production-ready, design-system-compliant interface while quantifying quality and highlighting issues to fix.
Core Features & Use Cases
- HTML intake from multiple sources: Accepts HTML generated via Stitch MCP (primary) or pasted HTML from any external tool/LLM.
- Quality evaluation (0-100): Scores stack compliance, dark mode fit, design token usage, typography, responsiveness, accessibility, JavaScript quality, and performance heuristics.
- Design-system adaptation: Separates and adapts HTML/CSS/JS to the project’s Vanilla JS stack and converts styles into CSS design tokens (including color/spacing/radius/fonts/shadows/transitions), with icon mapping (FontAwesome → Material Icons) and Tailwind class strategy.
- Practical output for Admin vs App: Classifies destination and generates production-ready artifacts and a detailed compliance report.
Quick Start
Paste the external HTML you want to integrate and instruct the AI to run the stitch-adapter flow to evaluate quality and generate design-system-ready Vanilla JS output.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: stitch-adapter Download link: https://github.com/paulinett1508-dev/SuperCartolaManagerv5-production/archive/main.zip#stitch-adapter Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.