Section catalog
repository

Section catalog

Each section has its own layout.

This page shows every section the kit can build. A project page keeps only the sections it can fill with real content.

pnpm build
Open the repository
Three stacked landing views labeled Content, Demo, and Docs on a near-black canvas

About

From text to a live page.

Use this section when numbers, steps, and limits belong in one reading. This copy is from the kit itself.

Add the project name, colors, and the sections you want. Skip the rest.

  1. 1 file to edit
  2. 5 presets
  3. 0 frameworks in the output

From gh-pages-template

Numbers

Counts from TokenUsage.

These counts come from TokenUsage. Each number has a source in that repository.

  1. 55 providers cataloged
  2. 10 active local readers
  3. 0 TokenUsage accounts
  4. 2 Windows architectures

From tokenusage

GitHub

Live numbers from Panopticon.

The browser reads the public GitHub API for Panopticon. These counts are not written in YAML.

gvastethecreator panopticon

MIT

  • stars
  • license
  • last commit
  • release
  • issues
  1. — Stars
  2. — Forks
  3. — Watching
  4. — Open issues

Activity

Weekly commits load from GitHub.

Releases

    Recent commits

      From panopticon

      Steps

      SpriteBoy's four steps.

      SpriteBoy moves one sprite sheet through these four steps, in this order.

      1. Slice

        Detect

      2. Compose

        Arrange regions and assets on the compose canvas.

      3. Animate

        Sequence frames and inspect timing in context.

      4. Export

        Write PNG

      From sprite-boy

      Screens

      Photos of the running app.

      Show the app itself here. These four screens come from SpriteBoy.

      SpriteBoy Slice workspace with the forest scout sheet and eight staged results
      Compose workspace with a region rendered on canvas
      Collision workspace with the hitbox authoring surface
      Export workspace with the eight committed outputs

      Slice workspace

      From sprite-boy

      Demo

      Switch between views.

      Each tab shows a real file from this kit.

      Edit site.yaml

      Name, colors, text, and section order live in one file. Empty sections do not show.

      schema: gvaste-pages/v1preset: appsections: [hero, demo, docs, links]

      Build writes docs/

      The script fills the templates, copies images, and writes index.html plus styles.css.

      pnpm build# docs/index.html# docs/styles.css

      Copy into an existing repo

      Copy kit/, scripts/build-site.mjs, and a site.yaml. Point Pages at the generated docs/ folder.

      kit/scripts/build-site.mjssite.yaml

      Live

      Dungeon Escape in the browser.

      Use this section when your project has a public URL. Dungeon Escape runs at this one.

      dungeon.gvaste.ar Play Dungeon Escape

      WebGL2 is the default. Add ?renderer=webgpu to the URL for WebGPU.

      From dungeon-escape

      One command

      The command a new clone runs.

      pnpm build
      npm run build

      Then run pnpm preview to open docs/ on this machine.

      Download

      Panopticon Windows builds.

      Panopticon publishes Windows builds on GitHub Releases.

      From panopticon

      Keys

      Panopticon shortcuts.

      These shortcuts come from the Panopticon README.

      Input Action
      Tab Next layout
      17 Select a layout
      R Refresh windows
      O Open settings
      CtrlAltP Focus Panopticon

      From panopticon

      Status

      TokenUsage readers vs catalog.

      TokenUsage counts a listed provider and a working reader as two different things.

      Row Status Count
      Active readers active 10
      Prepared prepared 35
      Policy blocked blocked 9
      Opt-in held held 1

      From tokenusage

      Objects

      Panopticon's seven layouts.

      Panopticon names seven layout modes in its README.

      1. Grid Even thumbnail field.
      2. Mosaic Mixed tile sizes.
      3. Bento Packed groups.
      4. Fibonacci Ratio split.
      5. Columns Vertical stacks.
      6. Row One horizontal strip.
      7. Column One vertical strip.

      From panopticon

      Docs

      Fields, SpriteBoy, TokenUsage.

      site.yaml fields on the kit page, plus the two app landings.

      1. site.yaml fields Required keys and the content each section needs.
      2. SpriteBoy example App landing with route
      3. TokenUsage example App landing with facts

      Limits

      What this kit does not do.

      • Static pages only

        GitHub Pages cannot host APIs

      • GitHub section needs the public API

        The github section reads api.github.com in the browser. A private repo will not fill.

      • Empty sections stay hidden

        If the repo has no release

      • Real images only

        The gallery and screens sections need image files that exist next to the YAML.

      Privacy

      What stays on the machine.

      Panopticon lists what stays local in its README.

      Stays local

      • Window thumbnails, tags, filters, and workspaces.
      • Theme, language, and shortcuts in local TOML files.

      Leaves the machine

      • Bounded GitHub release update check.

      From panopticon

      Agent skill

      Load it into your agent.

      This install line comes from the quality-obsessed README.

      Trigger quality-obsessed

      npx skills@1.5.15 add gvastethecreator/quality-obsessed

      .agents/skills/quality-obsessed

      .claude/skills/quality-obsessed

      .opencode/skills/quality-obsessed

      Without the installer, copy the pack into .agents/skills, .claude/skills, or .opencode/skills.

      From quality-obsessed

      Evidence

      Files that prove it.

      ruthless-designer writes these files during each build.

      From ruthless-designer-skill

      Keep a section only when your project can fill it.

      Use this template