--- title: Resource Format description: Specification for the StealThis resource bundle format — frontmatter schema, snippet targets, and asset conventions. --- import { Tabs, TabItem } from "@astrojs/starlight/components"; Every resource in StealThis is a self-contained **bundle** — a directory with MDX frontmatter, code snippets, and assets. ## Directory Structure ``` resources/ └── my-resource/ ├── index.mdx # Frontmatter metadata + prose documentation ├── snippets/ │ ├── html.html # Standalone HTML page │ ├── style.css # Styles (used by html.html) │ ├── script.js # Vanilla JS (used by html.html) │ └── react.tsx # React component └── assets/ └── preview.gif # Preview image/gif ``` ## Frontmatter Schema ```yaml --- slug: my-resource # Unique identifier (URL-safe) title: My Resource # Display title description: Short description of what this does. category: web-animations # See Category Taxonomy below type: animation # animation | page | component | pattern | recommendation | ... tags: [scroll, fade] # Searchable tags tech: [css, js] # Technologies used difficulty: easy # easy | med | hard targets: [html, react] # Available snippet targets collections: [saas] # Optional — library collection membership preview: ./assets/preview.gif labRoute: /web-animations/my-resource # Lab demo path license: MIT codepenExamples: # Optional CodePen embeds - id: abc123 title: Full Demo penUrl: https://codepen.io/stealthisdev/pen/abc123 description: Interactive version with all animations height: 520 defaultTab: result createdAt: 2026-02-20 updatedAt: 2026-02-20 --- ``` ## Snippet Targets | Target | File | Notes | |--------|------|-------| | `html` | `snippets/html.html` | Full standalone HTML page | | CSS styles | `snippets/style.css` | Referenced by html.html | | JS | `snippets/script.js` | Referenced by html.html | | `react` | `snippets/react.tsx` | React component (default export = demo) | | `next` | `snippets/next.tsx` | Next.js variant | | `vue` | `snippets/vue.vue` | Vue SFC | ## Writing Guidelines - Include a full `` page - Use **pure CSS** by default (no Tailwind in HTML target) - Add `` and `` - Add `role` and `aria-label` attributes for accessibility - Respect `prefers-reduced-motion` - Export a **default component** that demonstrates the resource - Props should be typed with TypeScript interfaces - Tailwind CSS is allowed - The default export should be a fully self-contained demo - `preview.gif` — animated preview, max 2MB, 16:9 or square - Use `./assets/preview.gif` relative path in frontmatter - Optimize GIFs with Gifsicle or similar ## Category Taxonomy ### Copy-paste resources (snippets + Lab) | Category | Typical type | Description | |----------|--------------|-------------| | `web-animations` | `animation` | Scroll effects, parallax, canvas, WebGL | | `web-pages` | `page` | Full page templates and sections | | `ui-components` | `component` | Reusable UI elements | | `patterns` | `pattern` | Micro-interactions, loaders, hover effects | | `components` | `component` | Extended component library | | `pages` | `page` | Extended page library | | `prompts` | `prompt` | AI prompt templates | | `architectures` | `architecture` | Project structure references | | `boilerplates` | `boilerplate` | Starter project scaffolds | | `remotion` | `animation` | Remotion video compositions | | `database-schemas` | `schema` | Database schema patterns | | `ultra-high-definition-pages` | `page` | High-fidelity page designs | | `design-styles` | `page` | Design style explorations | | `music` | `component` | Music/audio UI | | `3d-models` | `component` | 3D model resources | | `3d-interactions` | `animation` | 3D interaction patterns | | `plugins` | `component` | Plugin/extension patterns | ### Recommendations (no snippets) | Category | Type | Description | |----------|------|-------------| | `recommendations` | `recommendation` | Topic pages comparing tools, platforms, books, courses | Recommendation resources use `options[]` (alternatives) and `comparison[]` (table columns) instead of code snippets. They do not appear in Lab or the MCP catalog. See [Recommendations](/recommendations/) for the user guide. ```yaml --- slug: payment-processors title: Payment Processors category: recommendations type: recommendation recommendationKind: payments comparison: [Model, Fees, Best for] options: - name: Stripe url: https://stripe.com bestFor: Developer-first SaaS billing pros: [Great docs, Broad features] cons: [Fees add up at scale] attributes: Model: "API + dashboard" Fees: "2.9% + 30¢" Best for: "SaaS & marketplaces" license: MIT difficulty: easy tech: [] targets: [] createdAt: 2026-06-08 updatedAt: 2026-06-08 --- ``` Contributors: full spec in [ROADMAP_RECOMMENDATION.md](https://github.com/Foodhy/stealthis/blob/main/ROADMAP_RECOMMENDATION.md). ## Collections UI resources can belong to one or more **library collections** via `collections:` frontmatter (e.g. `saas`, `clinic`, `gym`). Collections group copy-paste resources for browsing — they are separate from recommendation topics. See [Collections](/collections/) for all collection IDs and URL patterns. **Contributors:** when you add a **new** collection ID (not just assign resources to an existing one), update the [Collections](/collections/) doc page with a new table row — see the *Contributors: adding a new collection* section there.