HTML Anything
Turn rich agent answers and any file, folder, URL, or export into a polished single-file HTML page. Auto-picks a default route plus 17 concrete design systems (teaching, dashboard, atlas, timeline-story, document, …).
Install
npx skills add clockless-org/html-anything --skill html-anythinggit clone --depth 1 https://github.com/clockless-org/html-anything.git /tmp/html-anything
mkdir -p ~/.claude/skills
cp -r /tmp/html-anything/. ~/.claude/skills/html-anythingPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# html-anything You are the `html-anything` skill. Your job is to turn **an idea, file, folder, URL, exported dataset, or rich deliverable request** into a polished live HTML page the user can open, share, or publish. Do not present this as a parser, CLI, or internal pipeline. The user only needs to understand: - **Input**: an idea, file, folder, URL, or source they want help exporting. - **Output**: a live HTML page, usually `output.html`, sometimes with an `assets/` folder when generated images or local media are useful. Everything else is your responsibility: source understanding, export guidance, style choice, page design, asset generation, implementation, browser verification, and final handoff. Two constraints are non-negotiable: 1. **Style fidelity**: if a style is based on a reference design, reproduce the reference's layout system, first viewport, component vocabulary, typography roles, color/surface language, and motion grammar. Do not merely borrow the mood. 2. **Final HTML compliance**: the delivered HTML must visibly and structurally follow the selected style, not a generic html-anything report with different colors. ## User-Facing Promise Accept requests like: - "Create an interactive teaching site about the solar system." - "Turn my Amazon order history into a personal spending atlas." - "Make this WhatsApp export into a relationship rhythm report." - "Turn this transcript into a meeting scorecard."
Details
- Skill name
html-anything- Repository
- clockless-org/html-anything
- License
- MIT-0
- Repo updated
- 13 May 2026
FAQ
What does the HTML Anything skill do?
Turn rich agent answers and any file, folder, URL, or export into a polished single-file HTML page. Auto-picks a default route plus 17 concrete design systems (teaching, dashboard, atlas, timeline-story, document, …).
How do I install the HTML Anything skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add clockless-org/html-anything --skill html-anything. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is HTML Anything popular?
It lives in clockless-org/html-anything, which has 161 GitHub stars and 7 forks.
Related skills
Prototype to Figma
141alima-max/prototype-to-figma-skill
Converts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames, generate design specs from a prototype, create a Figma handoff from code, explode a prototype into states, or make a prototype reviewable by cross-functional partners. Also trigger when the user mentions "prototype to Figma", "design review from prototype", "async feedback on prototype
Bricks
143wpgaurav/bricks-skills
Author Bricks Builder (WordPress) layouts, templates, and full designs as paste-ready JSON. Use for any Bricks task — sections, pages, headers/footers, query loops, ACF/dynamic data, faceted filters, conditions, interactions/animations, popups, WooCommerce templates, custom elements, or hooks. Verified against Bricks 2.3.6 source.
Persian Motion Director
148atmirrr/persian-motion-director
Direct and build professional motion design (promo and launch films, kinetic typography, animated explainers, social clips, title sequences) with correct Persian/Farsi and right-to-left typography, in Remotion or plain web code. Use this skill whenever the user wants a video, animation, motion graphics, teaser or animated text that contains Persian, Farsi, Arabic-script or RTL text, and whenever they say a motion piece looks "default", "like a slideshow", "AI-made" or "not pro", or that the Persian looks off, broken or disconnected, even if they never say "motion design". It brings the anti-sl
Material Design 3 UI
159skydashnet/material-design-3-ui-skill
Design, redesign, review, or implement user interfaces using Google Material Design 3 (M3), Material You, and optional Material 3 Expressive principles. Use for UI/UX screens, app flows, design systems, component selection, theming, responsive/adaptive layouts, accessibility audits, Figma-ready specifications, or developer handoff where Material Design 3 is required.
Design Auditor
92Ashutos1997/claude-design-auditor-skill
Audit designs against 19 rules across Figma files and code (HTML/CSS/React/Vue/Tailwind). Auto-detects framework and design system (MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap). Runs code superpowers across all 19 categories: aria, focus, contrast, tokens, responsive, motion, forms, navigation, spacing, states, microcopy, elevation, iconography/SVG. Flags color blindness risk. Audits dark patterns, ethical design, Nielsen's heuristics. Outputs before/after diffs, developer handoff reports, wireframe-to-spec. English and Korean. Triggers on: check my design, review my UI, audit my layo
Aria Icons
103LeulAria/Aria-Icons
Use when working with icons in any project. Search 1.4M icons, add them as source files (no giant dependency), migrate existing icon libraries, and run as an MCP server. Commands: `aria-icons search`, `aria-icons add`, `aria-icons get`, `aria-icons migrate`, `aria-icons doctor`.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.