HTML → Registry Ingestion
Convert raw HTML sections into installable @vandoko registry components via the 5-phase pipeline
Take a raw HTML section and convert it to a @vandoko registry component installable via npx shadcn add. The 5-phase pipeline handles extraction, Tailwind mapping, TSX conversion, validation, and all 7 registry artifacts automatically.
Prerequisites
vandoko-registry repo
Access to Vandoko-Agency/vandoko-registry (NOT mautomo/vandoko-registry)
Node.js + pnpm
Node.js and pnpm installed in your environment
shadcn CLI
Verify with: npx shadcn@latest --version
Input HTML file
Raw HTML file ready to convert (inline styles expected)
Command
Load the html-to-registry skill, then provide input:
Convert this HTML to a registry component:
[paste HTML or provide file path]Input Example
5-Phase Pipeline
Phase 1: Extract and Inventory
The skill parses the input and identifies discrete sections:
- Input type: raw HTML file (no ZIP)
- Sections identified: 1 hero section
- Component name derived:
hero-industrial
Phase 2: Analyze and Map
Every inline style is mapped to a Tailwind utility class or oklch design token:
| HTML Element | Maps To |
|---|---|
background: #0D1117 | bg-background (oklch token) |
color: #00EEFF | text-primary (oklch token) |
color: #FAFAFA | text-foreground (oklch token) |
color: #8B95A3 | text-muted-foreground (oklch token) |
border: 1px solid #2A2A2E | border-border (oklch token) |
font-size: 56px; font-weight: 700 | text-5xl font-bold |
border-radius: 8px | rounded-lg |
display: grid; grid-template-columns: 1fr 1fr | grid grid-cols-1 lg:grid-cols-2 |
<a> with solid background | <Button> from shadcn |
<a> with border | <Button variant="outline"> |
<img> | <Image> from next/image |
Phase 3: Convert to TSX
The skill generates a fully typed React component with a Props interface, cn() utility, and shadcn primitives:
Phase 4: Validate (10 checks)
The skill runs 10 automated checks before proceeding to artifact generation:
| # | Check | Result |
|---|---|---|
| 1 | No boolean props | PASS |
| 2 | Exported Props interface | PASS — HeroIndustrialProps exported |
| 3 | No forwardRef | PASS |
| 4 | No top-level hooks | PASS |
| 5 | Under 200 lines | PASS (~50 lines) |
| 6 | className prop | PASS |
| 7 | No hardcoded hex | PASS — all oklch tokens via Tailwind |
| 8 | No relative imports | PASS — @/ alias only |
| 9 | No same-layer imports | PASS |
| 10 | Props-driven content | PASS — all text via props |
Phase 5: Generate Registry Output (7 artifacts)
All 7 artifacts are created in sequence:
| Artifact | File | Purpose |
|---|---|---|
| 5a. Source TSX | registry/new-york/blocks/hero-industrial/hero-industrial.tsx | Component code |
| 5b. Registry manifest | registry.json (append entry) | CLI install metadata |
| 5c. Preview wrapper | components/docs/preview-wrappers-vandoko.tsx (add function) | Docs preview |
| 5d. Component registry | components/docs/component-registry.tsx (add to vandokoMap) | Dynamic import |
| 5e. MDX docs | content/docs/components/hero-industrial.mdx | Documentation page |
| 5f. Sidebar nav | content/docs/components/meta.json (add entry) | Navigation |
| 5g. Build + deploy | pnpm registry:build && pnpm build && git push vandoko main | Publication |
Phase 6: Verify (post-deploy)
After the Vercel deploy completes, confirm each endpoint:
| Check | Command | Expected |
|---|---|---|
| Registry JSON | curl https://registry.vandoko.com/r/hero-industrial.json | Valid JSON with $schema |
| Docs page | curl https://registry.vandoko.com/docs/components/hero-industrial | HTTP 200 |
| Gallery | Search "hero-industrial" on registry.vandoko.com/gallery | Component visible |
| Install test | npx shadcn@latest add @vandoko/hero-industrial --dry-run | Resolves files and deps |
| Sidebar | Visit docs page | Appears under Vandoko section |
How to Install
Once published, any project can install the component with:
npx shadcn@latest add @vandoko/hero-industrialThis downloads the TSX, resolves dependencies (Button, Image), and places the component in the project's component directory.
Troubleshooting
| Symptom | Likely Cause | Fix |
|---|---|---|
pnpm registry:build fails | Missing registryDependencies | Ensure all shadcn primitives (button, card, etc.) are listed in the manifest entry |
--dry-run cannot resolve | Registry JSON not deployed | Verify pnpm build succeeded and git push vandoko main triggered Vercel deploy |
| Component shows no preview | Preview wrapper not added | Check preview-wrappers-vandoko.tsx has the function AND component-registry.tsx has the dynamic import |
| Colors wrong in preview | Hardcoded hex values | Audit for hex strings; replace with oklch tokens per the Token Map |