Foodhy Page Resources (Library templates)
Use this skill when adding a copy-paste full-page template to the StealThis Library — resources with category: pages and type: page. For Astro routes on stealthis.dev itself, use create-site-pages.
When to use
- Landing pages, about pages, pricing pages, portfolios, dashboards
- Full HTML page layouts developers can steal into their projects
- Runnable Lab preview of the page design
Folder shape
packages/content/resources/my-landing-page/
index.mdx
snippets/
html.html # required for Lab
style.css # recommended
script.js # if interactive
react.tsx # optional second target
Minimal frontmatter
---
slug: my-landing-page
title: My Landing Page
description: One sentence describing the page layout and use case.
category: pages
type: page
tags: [landing, hero, cta, pricing]
tech: [css, javascript]
difficulty: med
targets: [html]
labRoute: /pages/my-landing-page
license: MIT
author:
name: "Stealthis"
src: "https://github.com/Foodhy/stealthis"
createdAt: 2026-06-12
updatedAt: 2026-06-12
---
Field notes for page resources
| Field | Value |
|---|---|
category |
pages (current page/showcase work) or web-pages (legacy bucket — follow existing neighbors) |
type |
page |
labRoute |
/<category>/<slug> — enables Lab button and static route |
targets |
Only list targets with actual snippet files |
difficulty |
easy / med / hard — affects homepage marquee tiers |
Snippet conventions
HTML shell (Lab-compatible)
Lab inlines CSS/JS only when html.html references sibling files:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>My Landing Page</title>
</head>
<body>
<main class="demo-root">
<!-- page sections -->
</main>
<script src="script.js"></script>
</body>
</html>
<link rel="stylesheet" href="style.css" />→ Lab inlinesstyle.css<script src="script.js">→ Lab inlinesscript.js- Missing
html.html→ Lab shows fallback message
Page structure tips
Typical sections for page templates:
- Header — logo + nav
- Hero — headline, subcopy, primary CTA
- Features / values — grid of cards
- Social proof — logos, testimonials, stats
- CTA band — conversion block
- Footer — links, copyright
Keep CSS self-contained in style.css. Prefer semantic HTML and responsive layout without external frameworks unless the page topic requires it.
After creating the resource
bun run --filter @stealthis/mcp catalog # regenerate MCP catalog
bun run lint
bun run build:www
bun run build:lab
Verify routes
curl -s -o /dev/null -w "%{http_code}" http://localhost:4321/r/my-landing-page
curl -s -o /dev/null -w "%{http_code}" http://localhost:4323/pages/my-landing-page
Examples in the repo
| Slug | What it demonstrates |
|---|---|
about-page |
Team page with flip cards and timeline |
changelog-page |
Release history layout |
blog-listing-page |
Post grid with filters |
analytics-page |
Dashboard-style page shell |
Browse packages/content/resources/*/index.mdx where type: page for more patterns.
Checklist
-
packages/content/resources/<slug>/index.mdxwith valid frontmatter -
snippets/html.html(+style.css,script.jsas needed) -
labRoutematches/<category>/<slug> -
targetsmatches files present - Prose README in MDX body (sections, when to use)
- MCP catalog regenerated
-
bun run lint+ build www + lab
Related
- General resource rules:
content-authoring - Full field reference:
CONTENT_AUTHORING.mdat repo root - Lab route handler:
apps/lab/src/pages/[category]/[slug].astro