skills.rest
angelo-v
angelo-vCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

spa-html

Creates single-page web apps as self-contained HTML files using Lit, WebAwesome, and CDN-only dependencies.

Updated May 12, 2026
Search Tags:#html#prototyping#cdn#web-components#lit#single-page-app#webawesome
One-click install
npx skills add https://github.com/angelo-v/pi-kit --skill spa-html-angelo-v
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spa-html
Source: https://github.com/angelo-v/pi-kit/tree/main/packages/software-development/skills/spa-html
Command: npx skills add https://github.com/angelo-v/pi-kit --skill spa-html-angelo-v

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building quick web app prototypes often forces a choice between a heavyweight bundler setup and an unstructured single file. This Skill scaffolds single-page web apps that start as one self-contained HTML file and evolve into an organized multi-file component structure only when complexity thresholds are hit. ## Core Features & Use Cases - Template-Based Scaffolding: Eight ready-made layout templates (blank, dashboard, landing page, CRUD list, settings form, kanban board, graph explorer, map) adapted to the user's domain. - Component Extraction Rules: Automatic restructuring into feature-based components/ folders when a class exceeds 100 lines or more than 3 component classes exist. - CDN-Only Stack: Lit for custom elements, WebAwesome for standard UI controls, Pollen for design tokens, plus reference docs for Leaflet maps and Cytoscape.js graphs — no bundler or node_modules required. - Use Case: Ask for an interactive graph explorer for your team's project dependencies, and get a working HTML file with a Cytoscape.js canvas, layout picker, detail panel, and PNG export that you can open in a browser immediately. ## Quick Start Create a single-page dashboard web app with a sidebar, stat cards, and an activity panel using the dashboard template.

Frequently Asked Questions about spa-html

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

FAQPage Schema
How do I build a single-page web app without a bundler?▼

Start with one index.html containing an inline style block and a single script type="module" block, importing all JavaScript dependencies from esm.sh CDN URLs. Use Lit for custom elements and WebAwesome for standard UI controls, with no node_modules or build step required.

How to create an interactive graph visualization in a single HTML file?▼

Import Cytoscape.js from esm.sh, initialize it with a container, elements array, style rules, and a layout name like cose or breadthfirst. The graph template includes a layout picker, node detail panel, add/delete operations, and PNG export via cy.png().

When should components be extracted from a single HTML file?▼

Extract components when any single component class exceeds 100 lines or when more than 3 component classes exist inline. Move them into feature-named folders under components/ with an index.js re-export, turning index.html into an orchestration shell.

Can I use Leaflet maps with ES module imports from a CDN?▼

Yes, import Leaflet 1.9.4 from unpkg using the leaflet-src.esm.js build with a dynamic import, falling back to the UMD bundle if needed. Load the Leaflet CSS separately via a link tag, then use L.map, L.tileLayer, and L.marker as usual.

Why do extracted component files fail to load from file://?▼

Browsers block ES module imports over the file:// protocol, so extracted components using bare import paths require an HTTP server. Run npx serve . or use VS Code Live Server to serve the project directory locally.

What design token system works for theming single-file web apps?▼

Load Pollen CSS first for base tokens, then define a semantic theme layer in :root mapping tokens like --color-brand and --space-4 to Pollen variables. Components reference only the semantic variables, so re-theming means editing :root rather than individual declarations.

Related Skills

Explore More Software Engineering Skills→
akornmeierakornmeier

ui-cloner-brand-interview

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

Community
Basic
abhiroopbabhiroopb

static-site-deployer

Deploy static website prototypes to an internal hosting service via REST API or MCP with SSO authentication.

Community
Intermediate
andrewle9510andrewle9510

fd-color-systems

Generate cohesive color systems with semantic tokens and dark-mode support.

Community
Basic
lespacemanlespaceman
4

router-plugin

Automate file-based routing and code splitting for TanStack Router across Vite, Webpack, Rspack, and esbuild.

Community
Intermediate