skills.rest
NimaChu
NimaChuCOMMUNITY
Explore all skills by this author →
GitHub

html-design

Create, validate, and package standalone HTML applications without build chains or frameworks.

101|Updated Mar 18, 2026
Search Tags:#html#validation#scaffold#web app#presentation#static site#local ai
One-click install
npx skills add https://github.com/NimaChu/html-design --skill html-design-nimachu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-design
Source: https://github.com/NimaChu/html-design
Command: npx skills add https://github.com/NimaChu/html-design --skill html-design-nimachu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Building small web apps usually drags in frameworks, npm installs, and build pipelines. This Skill turns a plain-language request into a self-contained index.html that runs directly in a browser, works offline, and can be shared as a single file. ## Core Features & Use Cases - Scenario and style routing: Selects deliverable types (marketing, prototype, infographic, motion, document, game, presentation) and interaction kinds (tool, dashboard, guided, knowledge) from a natural-language brief, then applies one of 20+ registered visual style families independently. - Scaffold, validate, and build scripts: Generates starter apps with executable kind contracts, runs strict static validation, serves projects locally, and packages results into distributable zip archives. - Optional local AI integration: Connects apps to OpenAI-compatible local model endpoints for text, vision, image, or code capabilities while keeping credentials out of the delivered HTML. - Use Case: Ask for a multi-currency travel expense splitter; the Skill scaffolds a tool-kind app, applies a suitable style, validates it strictly, and delivers a single index.html that works on phones and desktops. ## Quick Start Use html-design to build a word-matching game with a saved high score and touch and keyboard support, delivered as a single index.html file.

Frequently Asked Questions about html-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a standalone HTML app without React or npm?▼

Describe the app in plain language and the Skill scaffolds a self-contained index.html with inline CSS and JavaScript. The result opens directly in a browser, runs offline, and can be validated with the included webapp.py script.

What kinds of web apps can be built as a single HTML file?▼

Supported kinds include tools, dashboards, guided workflows, knowledge apps, games, presentations, and motion pieces. Deliverable types cover marketing pages, prototypes, infographics, documents, and applications, each with its own contract.

Can a static HTML app connect to a local AI model?▼

Yes. The Skill configures an OpenAI-compatible local endpoint through a .webapp.local.json file and a local server that exposes same-origin chat and image routes. Credentials stay in environment variables and never appear in the HTML.

How do I validate an HTML app before delivery?▼

Run python3 scripts/webapp.py validate on the file or folder, adding --strict for the quality floor. Presentations support rendered validation with Playwright, and the build command packages the project into a zip archive.

When should a project be split into multiple files instead of one HTML?▼

Split only for large media, complex game logic, workers, WASM, or when a single file becomes hard to maintain. The project must remain purely static with no build chain, even when split across local files.

Related Skills

Explore More Design & Creative Skills→
akornmeierakornmeier

ui-cloner-brand-interview

Collect brand and user details through a structured 12-question interview.

Community
Basic
sztwioroksztwiorok

static-site

Deploy static websites to Buddy Packages with versioned URLs.

Community
Intermediate
tokidev-aitokidev-ai

linkedin-dev-auditor

Audits 10 LinkedIn developer profile sections and rates each with ✅/⚠️/❌ statuses.

Community
Intermediate
hasnahasna

jotai

Integrate Jotai atoms as a StateStore adapter for json-render UI.

Official
Basic