Resource Format

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

---
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 <!DOCTYPE html> page
Use pure CSS by default (no Tailwind in HTML target)
Add <link rel="stylesheet" href="style.css" /> and <script src="script.js"></script>
Add role and aria-label attributes for accessibility
Respect prefers-reduced-motion

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 for the user guide.

---
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.

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 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 doc page with a new table row — see the Contributors: adding a new collection section there.