// Convert a codebase into a self-contained HTML portal app for ingestion into AI application systems. Produces a single deployable HTML file with embedded CSS, JS, and data.
Design RESTful APIs with best practices for consistency and usability
Provides coding assistance with best practices and code review
Systematic debugging approach for identifying and fixing issues
Git best practices for version control and collaboration
Write comprehensive tests following TDD and BDD principles
| name | html-portal-generator |
| description | Convert a codebase into a self-contained HTML portal app for ingestion into AI application systems. Produces a single deployable HTML file with embedded CSS, JS, and data. |
| version | 1.0.0 |
Convert any codebase into a single, self-contained HTML portal application. The output is one .html file with embedded styles, scripts, and data that works offline, on file:// protocol, and can be uploaded into AI application portals.
Follow these phases in order. Each phase builds on the previous.
Understand what the product does before writing any HTML.
Produce a mental inventory:
If the user provides a reference HTML app:
Design the portal as a single-page app with tab navigation.
Required structural elements:
max-width for readabilityView planning - map each product feature to a view:
| Feature Type | View Pattern |
|---|---|
| Entity browsing (skills, packages, endpoints) | Card grid with search/filter/sort + detail panel |
| Validation/checking | Split editor (textarea input) + results panel |
| Analysis/metrics | Input + stat cards + bar charts |
| Configuration/creation | Form inputs + live preview + download |
| Format conversion | Side-by-side input/output with target selector |
| Reference docs (commands, APIs) | Searchable/filterable list with copy-on-click |
| Status/compatibility | Matrix grid or table |
| Dashboard/overview | Stat cards + quick actions + recent items |
Every view must work 100% standalone. No external API calls required. Embed demo data. Add optional live-server connection as a bonus.
Convert real product data into JavaScript arrays embedded in the HTML.
const arrays in the <script> block - no external JSON filesFor large datasets (100+ items), use a build script to extract and format the data rather than hand-writing it.
If the product has local files users might want to scan:
showDirectoryPicker)Build the HTML file following these rules:
Single-file architecture:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product - Portal</title>
<style>/* All CSS here */</style>
</head>
<body>
<!-- All HTML here -->
<script>/* All JS here, wrapped in IIFE */</script>
</body>
</html>
CSS requirements:
:root { --bg: ...; }) for theming@media (prefers-color-scheme: light)@media (max-width: ...) breakpointsJavaScript requirements:
(function() { 'use strict'; ... })();onclick handlers - use addEventListener exclusivelydocument.execCommand('copy') for file:// protocoldata-view attributes and .active class togglingInteractivity checklist - every element the user can see must do something when clicked:
target="_blank" rel="noopener"Entity Browser (the main catalog view):
- Search input (filters by name + description)
- Source/category dropdown filter
- Quality/status dropdown filter
- Sort selector (alpha, by source, by status)
- Card grid with: name, source badge, description, validation tags
- Validation tags with hover tooltips showing failure reasons
- Detail panel (sticky sidebar) with full metadata on click
- Export button (download as JSON)
- Local scan button (File System Access API)
Validator:
- Target selector (individual CLI or "All")
- Textarea for pasting content
- Validate button - runs client-side validation logic
- Autofix button - actually modifies content:
- Fills missing frontmatter fields
- Converts names to kebab-case
- Scaffolds body sections if too short
- Adds target-specific fields (e.g., globs for Cursor)
- Quality score panel (0-100 with visual ring)
- Download button for the validated/fixed file
- Load Sample button with realistic example content
Token/Size Analyzer:
- Name input with datalist autocomplete from catalog
- Load button to pull content from catalog by name
- Textarea for content
- Stat cards: tokens, words, lines, characters
- Progress bar with percentage (label outside bar for small values)
- Size category with color coding
- Optimization suggestions list
Format Converter:
- Source format selector
- Target format selector
- Convert button (single target)
- Convert All button (generates all formats with tab switcher)
- Download button
- Side-by-side input/output layout
Creator/Builder:
- Form fields for metadata (name, description, version, deps)
- Target-specific fields shown/hidden based on selection
- Body textarea with placeholder template
- Live preview panel (pre element)
- File path display showing where to save for each CLI
- Dependency graph visualization
- Download and Send-to-Validator buttons
Reference views (commands, tools, APIs):
- Search input
- Category filter
- Each item shows: name/command, description, usage guidance
- Click to copy, with toast confirmation
- Usage guidance paragraph below each item explaining when/how to use it
Dashboard:
- Stat cards row (total items, categories, etc.)
- Quick Actions panel:
- In-browser actions (green "runs here" badge): actually execute
- CLI-only actions (muted "CLI only" badge): copy command + link to docs
- Supporting info panels with clickable items
- Recent items grid linking to the browser view
Before delivering, verify:
node -e "new Function(scriptContent)" parses without errordata-view has a matching id="view-..." element— with - (AI slop reduction)execCommand fallbackopen filename.html and manually test each tabThe user will test and request changes. Common requests:
target="_blank" links to product documentationA single .html file (typically 60-120KB) that:
file:// protocol in any browser