agentleFS
Sign inStart free
bholmesdevbholmesdev/hubble.md/.agents/skills/create-html-app/SKILL.md

create-html-app

Skill1.5k starsChanged 9 days agoMITView on GitHub

Create or update a Hubble HTML App: a folder-local .html file

1 other project uses a version of this.

Trending

Steady talk.thin dataabout the whole repository

Dec 2025: 0 mentionsJan 2026: 0 mentionsFeb 2026: 2 mentionsMar 2026: 1 mentionApr 2026: 0 mentionsMay 2026: 0 mentionsJun 2026: 1 mentionJul 2026: 1 mentionAug 2026: 0 mentionsSep 2026: 1 mentionOct 2026: 1 mentionNov 2026: 0 mentions
Dec 2025Jun 2026Nov 2026
Mentions a month of the bholmesdev/hubble.md repository that our weekly crawl found: only 7 in all, so this is a hint, not a trend. There is no adoption data for this file yet.

Who's talking about bholmesdev/hubble.md

The biggest 5 of 7 mentions linking to the repository that our crawl found. Each line is their own headline.

See all 7

Talked about on Bluesky and GitHub (7 times).

On GitHub · 3

The file

We split this skill into the rules it gives an agent

5 rules. About 0 are common, 3 are distinctive, and 2 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈3

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Use Alpine and Tailwind by default.

    line 22
  2. Distinctive:

    Use Hubble tokens through Tailwind classes so the app feels native:

    line 139
  3. Very specific:

    Keep spacing compact: gap-2, gap-3, p-2, p-3, px-3, py-2.

    line 147
  4. Distinctive:

    Avoid one-off palettes, oversized cards, hero layouts, and decorative gradients unless the user asks for a themed visual.

    line 149
  5. Distinctive:

    Read only the patterns you need:

    line 153

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Create HTML App

A Hubble HTML App is a folder-local .html file Hubble runs as a self-contained interactive UI. Opening it shows the app in the main content panel. Build any interactive experience — a tool, dashboard, or app — as a single .html file in the Folder.

To embed an HTML App inline inside a Markdown File, see create-embed.

Runtime

Hubble provides the app runtime. Write plain HTML that assumes these globals are already available:

  • hubble
  • Alpine
  • Tailwind browser v4
  • Hubble theme tokens

Use Alpine and Tailwind by default. Do not add dependency <script> tags or set up package files, lockfiles, or node_modules.

HTML Apps run in a sandboxed iframe. Hubble allows:

  • allow-scripts: Alpine, Tailwind browser, and the Hubble runtime can execute.
  • allow-forms: native HTML form semantics work when paired with Alpine handlers such as @submit.prevent.

Hubble does not allow:

  • allow-same-origin: apps keep an opaque origin and cannot use app-origin storage, cookies, or same-origin access.
  • allow-top-navigation: apps cannot navigate the desktop app frame.
  • allow-popups / allow-popups-to-escape-sandbox: apps cannot open unsandboxed popup windows.
  • allow-downloads: apps cannot start downloads directly.
  • allow-modals: apps cannot use modal browser dialogs.

Files API

Apps reach Workspace files through hubble.files, an async broker rather than direct filesystem access. All paths are Workspace-relative and point to Markdown files.

await hubble.files.list("todos/*.md")
// → [{ name, path, modified_at, size }], sorted by path
await hubble.files.read("notes/today.md")
// → { path, body, properties }
await hubble.files.open("notes/today.md")
// → { path }, navigates the editor to the file
await hubble.files.create({ path, body, properties, open })
// → { path, body, properties }
await hubble.files.update(path, { body, properties })
// → { path, body, properties }, patch
await hubble.files.remove("notes/today.md")
// → { path }

Methods throw on failure; each has a safe* variant. See Files API for shapes, patch semantics, and error handling.

Template

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Folder files</title>
	</head>
	<body class="m-0 bg-background p-3 font-sans text-foreground">
		<main
			class="grid gap-3 rounded-md border border-border bg-card p-3 text-card-foreground"
			x-data="{
				files: [],
				error: '',
				async init() {
					try {
						this.files = await hubble.files.list('**/*.md')
					} catch (error) {
						this.error = error.message || 'Could not load files'
					}
				},
			}"
		>
			<header class="flex items-center justify-between gap-3">
				<h1 class="m-0 text-base font-semibold">Folder files</h1>
				<span class="text-sm text-muted-foreground" x-text="`${files.length} files`"></span>
			</header>

			<p class="m-0 text-sm text-muted-foreground" x-show="!error && files.length === 0">
				Loading files...
			</p>
			<p class="m-0 text-sm text-destructive" x-show="error" x-text="error"></p>

			<ul class="m-0 grid list-none gap-2 p-0" x-show="!error && files.length > 0">
				<template x-for="file in files" :key="file.path">
					<li class="rounded-sm border border-border bg-background px-3 py-2">
						<span class="text-sm font-medium" x-text="file.path"></span>
					</li>
				</template>
			</ul>
		</main>
	</body>
</html>

Structuring Logic

Inline x-data is fine for simple state (a flag, a counter, a current tab). For anything more, like async loaders, multiple methods, or computed logic, register an Alpine.data() component in a <script> and reference it by name.

<script>
	document.addEventListener('alpine:init', () => {
		Alpine.data('fileList', () => ({
			files: [],
			error: '',
			async init() {
				try {
					this.files = await hubble.files.list('**/*.md')
				} catch (error) {
					this.error = error.message || 'Could not load files'
				}
			},
		}))
	})
</script>

<main x-data="fileList">…</main>

Why this beats large inline expressions:

  • Alpine parses x-data as a single expression. Multi-line bodies with arrow functions, object methods, or </>/& get HTML-escaped or mis-parsed, surfacing as silent "Alpine Expression Error" failures.
  • Logic lives in real JavaScript with syntax highlighting and normal quoting, not inside an attribute string.
  • Components are reusable and testable, and keep markup readable.

Register components inside alpine:init so they exist before Alpine scans the DOM.

Native Feel

Use Hubble tokens through Tailwind classes so the app feels native:

  • Surfaces: bg-background, bg-card, bg-popover
  • Text: text-foreground, text-muted-foreground, text-card-foreground
  • Borders/rings: border-border, border-input, ring-ring, focus-visible:ring-ring
  • Actions: bg-primary text-primary-foreground, bg-secondary text-secondary-foreground
  • States: hover:bg-accent, bg-selected text-selected-foreground

Keep spacing compact: gap-2, gap-3, p-2, p-3, px-3, py-2. Use rounded-sm or rounded-md for controls.

Avoid one-off palettes, oversized cards, hero layouts, and decorative gradients unless the user asks for a themed visual.

References

Read only the patterns you need:

  • Files API
  • Buttons
  • Radio selects
  • Tabs
  • Forms
  • Lists and empty states

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free