A powerful conversion skill that transforms static data, URLs, or creative briefs into polished, interactive, and shareable HTML artifacts.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install html-anything
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install html-anything using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is html-anything?
html-anything is a specialized Openclaw Skills tool designed to bridge the gap between raw data and visual storytelling. Whether you start with a vague idea, a local CSV file, a complex folder structure, or a live URL, this skill automates the creation of a high-fidelity HTML page. It doesn't just parse data; it designs a complete user experience by selecting an appropriate architectural style—ranging from interactive dashboards to tactile paper trails—to ensure the output is both functional and aesthetically professional.
The skill prioritizes style fidelity and structural compliance, ensuring that every generated artifact feels like a purpose-built application rather than a generic report. By utilizing a sophisticated use-case taxonomy, it intelligently routes inputs to the most effective layout, such as Lesson Labs for teaching or Rhythm Reports for conversation analysis, delivering a production-ready file that is mobile-responsive and offline-capable.
html-anything Use Cases
- Creating interactive teaching sites and learning studios from conceptual briefs.
- Transforming business data like CSVs, logs, and spreadsheets into operational dashboards.
- Converting personal data exports, such as Amazon order history or health data, into visual recaps.
- Visualizing communication rhythms from chat exports like WhatsApp, Slack, or Discord.
- Building map-based atlases from location history, GPX files, or travel itineraries.
- Generating developer-focused workbenches for analyzing git diffs, PR reviews, and CI logs.
How html-anything Works
- Input Analysis: The skill identifies if the user has provided an idea, a local file, a directory, a URL, or a request for a data export.
- Onboarding & Inspection: For file-based inputs, it performs smart sampling to understand the schema; for export requests, it provides concise instructions to help the user retrieve their data.
- Style Selection: Based on the intent, it automatically selects an underlying system style (e.g.,
soft-saas,timeline-story,kinetic-scoreboard) from its internal catalog. - Design Extraction: It identifies core invariants such as viewport geometry, typography roles, and interaction models specific to the chosen style.
- Artifact Generation: The skill builds a standalone HTML/CSS/JS file, generating necessary assets like images or sprites using integrated tools.
- Quality Verification: Every page undergoes a browser-based check for mobile responsiveness, WCAG contrast compliance, and interaction integrity before handoff.
html-anything Setup
To use this within the Openclaw Skills ecosystem, ensure you have the core environment configured. You can trigger the skill by providing a source file or a descriptive prompt:
# Example: Generating a dashboard from a local CSV
claw run html-anything --input data.csv --output dashboard.html
# Example: Creating a site from a URL
claw run html-anything --url https://example.com/article --style teaching
html-anything Data Schema & Taxonomy
The skill organizes output into a predictable structure, ensuring portability and ease of use:
| Component | Type | Description |
|---|---|---|
output.html |
File | The primary self-contained interactive page (or named after the source). |
assets/ |
Folder | Contains generated images, thumbnails, or local media (if not inlined). |
data-ha-style |
Attribute | A root-level HTML attribute identifying the specific style system used. |
inline CSS/JS |
Code | Default behavior ensures the page is offline-capable without external CDNs. |
html-anything Advanced Features
- Auto-Routing Logic: Automatically maps source types to 15+ distinct visual systems without requiring user configuration.
- Style Fidelity Gate: Enforces a strict internal checklist to ensure the final HTML matches the required layout scaffold and component vocabulary.
- Smart Sampling: Efficiently processes massive datasets (like logs or chat archives) by analyzing headers, outliers, and representative distributions.
- Multi-Source Support: Specialized prompts for 50+ specific sources including Amazon, GitHub, Spotify, and various chat platforms.
- Asset Generation: Integrated support for generating custom cover art and UI textures to enhance the visual appeal of the HTML artifact.
SKILL.md
Loading
Related Openclaw Skills
Amber MM/GBSA - Single-Structure Workflow
A production-ready workflow for computing MM/GBSA binding free energies using AmberTools on single static structures without the need for molecular dynamics sampling.
Weather China (weather-cn)
A specialized tool for AI agents to retrieve accurate, real-time weather information for Chinese cities by utilizing localized data sources through browser automation.
Appliance Manual Tab Stickers
A comprehensive system for generating printable binder tabs, dividers, and service cards to organize physical appliance manuals and maintenance records.
Tow Yard Release Call Kit
A specialized tool that generates professional call scripts, document checklists, and retrieval plans to help users recover towed vehicles efficiently.
RollingGo Hotel CLI
A comprehensive CLI tool for searching hotels, verifying room availability, and retrieving real-time pricing and booking URLs.
RollingGo Hotel Search CLI
A comprehensive travel intelligence skill for searching, filtering, and booking hotels using natural language and structured data via the RollingGo API.
Featured*
