New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Scaffold App

by oframe in oframe/ogpu

Scaffold a new OGPU example/app from scratch — a Renderer + Camera + Orbit + update loop and a single spinning cube wired through the vanilla Box primitive - RenderPipeline - Mesh setup.

UnlicenseAuto-check passedDevelopment

Install Scaffold App

skills CLI
$ npx skills add oframe/ogpu --skill scaffold-app -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install oframe/ogpu scaffold-app --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/oframe/ogpu.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/scaffold-app .claude/skills/scaffold-app && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
scaffold-app
GitHub stars
151
Token cost
~1.1k tokens
SKILL.md length
461 words
Files
2 (incl. scripts)
Skills in repo
7
Repo updated
First seen
Licence
Unlicense

At a glance

Scaffold a new OGPU example/app from scratch — a Renderer + Camera + Orbit + update loop and a single spinning cube wired through the vanilla Box primitive - RenderPipeline - Mesh setup.

  • Works in 4 steps: Get the example name. It's used verbatim… → Run the generator from anywhere (it… → Wire src/main.js — three insertions,… → …
  • The user wants a new OGPU example
  • SKILL.md covers Workflow, What the generated class does, Extending from here and Reference
  • Runs Shell scripts from its folder; calls npm

What it does

Scaffold App is an agent skill from oframe/ogpu. Scaffold a new OGPU example/app from scratch — a Renderer + Camera + Orbit + update loop and a single spinning cube wired through the vanilla Box primitive - RenderPipeline - Mesh setup. Use whenever the user wants a new OGPU example, a base/starter scene, a blank WebGPU sketch in this repo, "scaffold an app", "new example called X", "boilerplate a OGPU scene", "set me up a starting point", or just "new scene"/"new example" when OGPU is the implied target. Generates the example class + shader and wires it into…

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including scripts (for example `scripts/scaffold-app.sh`).

It sits in Development, covering Project scaffolding. The repository describes itself as: Minimal WebGPU Library. The licence is Unlicense.

When your agent uses it

  • The user wants a new OGPU example
  • A base/starter scene
  • A blank WebGPU sketch in this repo
  • Scaffold an app

Example prompts

  • “scaffold an app”
  • “new example called X”
  • “boilerplate a OGPU scene”
  • “/scaffold-app”

Requirements

  • A Bash shell

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Get the example name. It's used verbatim as the class name; the directory and
  2. Run the generator from anywhere (it resolves the repo root itself)
  3. Wire src/main.js — three insertions, matching the surrounding style
  4. Validate the shader without a browser: `node scripts/validate-shaders.mjs

What it can do on your machine

Read from SKILL.md and the folder at commit 65e0a1a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Scaffold App loads about 1.1k tokens when it runs. Until then it costs about 143 tokens; SKILL.md has 461 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~143
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from oframe/ogpu at commit 65e0a1a, republished under its Unlicense licence (© oframe). 461 words, ~1,053 tokens.

Download SKILL.mdSave it as .claude/skills/scaffold-app/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
scaffold-app
description
Scaffold a new OGPU example/app from scratch — a Renderer + Camera + Orbit + update loop and a single spinning cube wired through the vanilla Box primitive -> RenderPipeline -> Mesh setup. Use whenever the user wants a new OGPU example, a base/starter scene, a blank WebGPU sketch in this repo, "scaffold an app", "new example called X", "boilerplate a OGPU scene", "set me up a starting point", or just "new scene"/"new example" when OGPU is the implied target. Generates the example class + shader and wires it into src/main.js so it boots at ?src=<name>.

Scaffold a OGPU example

Stand up a complete, runnable OGPU example: renderer boot, camera + orbit controls, an update loop, and one spinning cube built the canonical way — new Box(gpu) → new RenderPipeline(...) → new Mesh(...). The point is a clean, idiomatic starting point the user immediately builds on, not a finished piece.

A shell script generates the two files (class + shader); you wire it into src/main.js afterward. The split exists because file generation is fixed boilerplate (delegate it) but the main.js edits are structured insertions into an existing file (do them precisely with Edit).

Workflow

  1. Get the example name. It's used verbatim as the class name; the directory and ?src= value are its lowercased form. Convention here is a PascalCase class in a lowercase dir (e.g. HelloWebGPU in hellowebgpu/). If the user gives a casual name, PascalCase it for the class.

  2. Run the generator from anywhere (it resolves the repo root itself):

    bash
    .claude/skills/scaffold-app/scripts/scaffold-app.sh <Name>

    It creates examples/<name>/<Name>.js + examples/<name>/cube.wgsl and refuses to overwrite an existing example dir (surface the error, don't force).

  3. Wire src/main.js — three insertions, matching the surrounding style:

    • an import { <Name> } from '@examples/<name>/<Name>'; with the others;
    • a <name>: () => new <Name>(), entry in the views map;
    • a { view: '<name>', label: '<Label>', folder: '<name>' }, entry in the items array inside renderLanding(), under the most fitting { section: '...' } header, so it shows on the gallery landing page.

  4. Validate the shader without a browser: node scripts/validate-shaders.mjs examples/<name>/cube.wgsl (runs naga). The generated cube always passes; re-run after any edits.

  5. Tell the user it boots at ?src=<name> (npm run dev, then http://localhost:5173/?src=<name>).

Show full SKILL.md (201 more words)Show less

What the generated class does

  • constructor({ el } = {}) → async init that awaits renderer.ready, then grabs this.gpu = renderer.gpu (the OGPU gpu context — never the raw device).
  • Camera + Orbit, a Transform scene root.
  • Vanilla mesh: Box geometry → RenderPipeline (pure compiled state, serves layouts only) → Mesh, parented to the scene. Mesh REQUIRES bindGroups: the template passes a factory (uniformResource) => [...] that builds group(0) against pipeline.bindGroupLayout(0) and binds that per-draw slice verbatim at binding 0.
  • Drives the loop via this.gpu.renderer.add(this.update) — OGPU owns the rAF tick and calls back with { time, deltaTime }. The cube spins in update, which then calls renderer.render({ scene, camera }).
  • cube.wgsl outputs the normal mapped to 0..1 (a clear, lighting-free default that confirms geometry + transforms are correct).

Extending from here

Once it runs, common next steps the user may want — drop in GUI (Tweakpane wrapper) for params, swap the Box for another @core/primitives shape, give the shader custom uniforms/textures (see the scaffold-shader skill for the WGSL conventions), or add more meshes to the scene.

Reference

  • scripts/scaffold-app.sh — the generator (class + cube shader). Edit this script, not inline copies, if the template needs to change.
  • Canonical examples to mirror for more advanced setups: examples/hellowebgpu/HelloWebGPU.js (bare cube + GUI + texture), examples/rendertotexture/RenderToTexture.js (the renderer.add loop + el-or-getElementById boot this template follows).

© oframe, Unlicense. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (scripts) in .claude/skills/scaffold-app of oframe/ogpu.

  • SKILL.md
  • scripts/scaffold-app.sh

Open the folder on GitHubat commit 65e0a1a

Compare with similar skills

Scaffold App next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Scaffold App compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Scaffold App this skilloframe/ogpu151—~1.1kAutomated safety check: PassUnlicense
Nx Generatenomcopter/react-mosaic4.8k6 repos~1.9kAutomated safety check: PassCustom licence
PonytailDavidObando/gsharp5648 repos~1.7kAutomated safety check: PassMIT
Run Nx Generatornrwl/nx29k2 repos~592Automated safety check: NotesMIT
Conductor Setupgemini-cli-extensions/conductor3.8k—~4.2kAutomated safety check: PassApache-2.0
Mirage VFS Adapter Authoringstrukto-ai/mirage3.7k—~2.4kAutomated safety check: PassApache-2.0

Similar skills

  • Nx Generate

    nomcopter/react-mosaic

    Generate code using nx generators. An agent skill from nomcopter/react-mosaic.

    4.8k GitHub starsUsed in 6 repos~1.9k tokens
    DevelopmentAuto-check passed

  • Ponytail

    DavidObando/gsharp

    Forces the laziest solution that actually works, simplest, shortest, most minimal.

    564 GitHub starsUsed in 8 repos~1.7k tokens
    DevelopmentAuto-check passed

  • Run Nx Generator

    nrwl/nx

    Run Nx generators with prioritization for workspace-plugin generators.

    29k GitHub starsUsed in 2 repos~592 tokens
    DevelopmentAuto-check: notes

  • Conductor Setup

    gemini-cli-extensions/conductor

    Scaffolds the project and sets up the Conductor environment.

    3.8k GitHub stars~4.2k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • Mirage VFS Adapter Authoring

    strukto-ai/mirage

    Builds or extends a custom Mirage virtual filesystem adapter for an API, database, object store or app data, with a working mount configuration and filesystem tests.

    3.7k GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-check passed

  • Siteboon Backend Module Standards

    siteboon/claudecodeui

    Enforces this repository's TypeScript backend module architecture under server/: feature folders, barrel exports, and where shared types and utilities belong.

    14k GitHub stars~1.2k tokensUpdated 2 days ago
    DevelopmentAuto-check passed

More from oframe/ogpu

  • Scaffold Shader

    oframe/ogpu

    Scaffold a new simple WGSL shader for the OGPU engine, wired for a RenderPipeline + Mesh.

    151 GitHub stars~1.4k tokensUpdated 11 days ago
    Auto-check passed

  • Webgpu Utils Lookup

    oframe/ogpu

    Ground any answer about the webgpu-utils library (greggman/webgpu-utils) in its actual API before responding.

    151 GitHub stars~1.4k tokensUpdated 11 days ago
    Auto-check passed

  • Naga Setup

    oframe/ogpu

    Get naga WGSL validation working in a repo — installs the naga/jq toolchain, a PostToolUse hook that compiles every .wgsl on write, and a batch validate-shaders script, so shader checking then…

    151 GitHub stars~1.9k tokensUpdated 11 days ago
    Auto-check passed

  • Webgpu Spec Lookup

    oframe/ogpu

    Ground any answer about the WebGPU platform itself — browser support/compatibility, feature availability, limits, what's shipping or behind a flag, and exact spec behavior — in the live Chrome…

    151 GitHub stars~1.3k tokensUpdated 11 days ago
    Auto-check passed

  • Pbr Shading

    oframe/ogpu

    Fold PBR/IBL shading into a RenderPipeline in the OGPU engine.

    151 GitHub stars~1.6k tokensUpdated 11 days ago
    Auto-check passed

  • Shadow Mapping

    oframe/ogpu

    Fold real-time shadow mapping into an existing RenderPipeline/shader in the OGPU engine.

    151 GitHub stars~1.9k tokensUpdated 11 days ago
    Auto-check passed

Categories

Questions about Scaffold App

What does Scaffold App do?

Scaffold a new OGPU example/app from scratch — a Renderer + Camera + Orbit + update loop and a single spinning cube wired through the vanilla Box primitive - RenderPipeline - Mesh setup. Scaffold App is an agent skill from oframe/ogpu. Scaffold a new OGPU example/app from scratch — a Renderer + Camera + Orbit + update loop and a single spinning cube wired through the vanilla Box primitive - RenderPipeline - Mesh setup.

When should I use Scaffold App?

Scaffold App fits situations like: the user wants a new OGPU example; A base/starter scene; A blank WebGPU sketch in this repo; scaffold an app.

How do I install Scaffold App in Claude Code?

Run `npx skills add oframe/ogpu --skill scaffold-app -a claude-code`. Or copy the skill folder (.claude/skills/scaffold-app in oframe/ogpu) into .claude/skills/scaffold-app in your project. Claude Code loads it when a task matches its description.

How do I install Scaffold App in Codex?

Run `npx skills add oframe/ogpu --skill scaffold-app -a codex`. Or copy the skill folder (.claude/skills/scaffold-app in oframe/ogpu) into .agents/skills/scaffold-app in your project. Codex loads it when a task matches its description.

Can I use Scaffold App in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add oframe/ogpu --skill scaffold-app -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/scaffold-app, .gemini/skills/scaffold-app, .github/skills/scaffold-app and .opencode/skills/scaffold-app in your project.

What does Scaffold App need to run?

Going by SKILL.md and its folder, Scaffold App needs a shell for the scripts in its folder and the command-line tools its instructions call (npm). Our summary lists: A Bash shell.

Does Scaffold App access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Scaffold App safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Scaffold App use?

Scaffold App is published under the Unlicense licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Scaffold App use?

About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Scaffold App?

Skills that share tags, products or a category with Scaffold App: Nx Generate (nomcopter/react-mosaic, 4.8k stars), Ponytail (DavidObando/gsharp, 564 stars), Run Nx Generator (nrwl/nx, 29k stars) and Conductor Setup (gemini-cli-extensions/conductor, 3.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Scaffold App?

oframe (a GitHub organization) maintains it in oframe/ogpu, which has 151 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on September 26, 2026.

Source: oframe/ogpu on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.