` - `content.md` — real content written in lobster.js extended Markdown --- ## index.html — always use this exact structure ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>PAGE TITLE HERE

# Hacknock Lobsterjs Lobsterjs > Generate a lobster.js starter page by creating two files: `index.html` and `content.md`. - Skill: `tomevault-io/hacknock-lobsterjs-lobsterjs` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/hacknock-lobsterjs-lobsterjs` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/hacknock-lobsterjs-lobsterjs/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/hacknock-lobsterjs-lobsterjs --- Generate a lobster.js starter page by creating two files: `index.html` and `content.md`. lobster.js is a Markdown parser that renders `.md` files into web pages directly in the browser — no build step, no bundler, no dependencies. Use the user's description from their message to determine the page content. If no description is given, create a minimal scaffold only. --- ## Behavior **If no description is given:** Create a minimal scaffold only. - `index.html` — the shell below, title set to "My Page" - `content.md` — a single placeholder heading: `# My Page` **If a description is provided:** Create both files with content tailored to the description. - `index.html` — the same shell, with an appropriate `` - `content.md` — real content written in lobster.js extended Markdown --- ## index.html — always use this exact structure ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>PAGE TITLE HERE

``` For the stylesheet, use the CDN URL directly in the `` — do NOT use a local `./style.css` path. Choose the most appropriate theme and note it in a comment: | Theme | `` | | :--- | :--- | | Default (clean, minimal) | `https://hacknock.github.io/lobsterjs/style.css` | | Formal (professional, serif, navy) | `https://hacknock.github.io/lobsterjs/themes/formal.css` | | Engineer (dark, terminal-like) | `https://hacknock.github.io/lobsterjs/themes/engineer.css` | | Pastel (soft, gentle, lavender/mint) | `https://hacknock.github.io/lobsterjs/themes/pastel.css` | | Pop (bright, playful, coral/pink) | `https://hacknock.github.io/lobsterjs/themes/pop.css` | IMPORTANT: The correct base URL is `https://hacknock.github.io/lobsterjs/` — never include `docs/` in the path. --- ## lobster.js extended Markdown syntax (for content.md) Use these extensions when generating content if a description is provided: **Page structure blocks:** ``` :::header # Site Title Navigation or tagline here ::: :::footer © 2025 Name — contact@example.com ::: :::details Click to expand Hidden content here. ::: ``` **Multi-column layout with Warp** (for hero sections, feature grids, sidebars): ``` ~ | [~col-a] | [~col-b] | ~ | :--- | :--- | :::warp col-a ### Left column Content here ::: :::warp col-b ### Right column Content here ::: ``` **Image sizing:** ``` ![Alt text](image.png =800x) ![Alt text](image.png =400x300) ``` **Footnotes:** ``` See the docs[^1] for details. [^1]: https://example.com ``` Standard Markdown (headings, bold, italic, lists, tables, code blocks, links, images) works as expected. --- ## Content guidelines - Always wrap the site title and top navigation in `:::header` ... `:::` - Use `:::footer` for copyright, contact, or links - Use `:::details` for FAQ entries or supplementary information - Use Warp multi-column for feature comparisons, hero layouts, or sidebars - Write content in the same language as the user's description (default: English) - Keep content realistic and useful — avoid "Lorem ipsum" --- > Source: [Hacknock/lobsterjs](https://github.com/Hacknock/lobsterjs) — distributed by [TomeVault](https://tomevault.io).