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

Verify Frontend

by ibuilder in ibuilder/massing

How to verify Massing web/viewer UI changes LIVE — full verification works; two historic "stalls" are fixed and neither was the geometry loader.

MITAuto-check passedTesting & QA

Install Verify Frontend

skills CLI
$ npx skills add ibuilder/massing --skill verify-frontend -a claude-code

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

GitHub CLI
$ gh skill install ibuilder/massing verify-frontend --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/ibuilder/massing.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/verify-frontend .claude/skills/verify-frontend && 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
verify-frontend
GitHub stars
121
Token cost
~1k tokens
SKILL.md length
431 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
MIT

At a glance

How to verify Massing web/viewer UI changes LIVE — full verification works; two historic "stalls" are fixed and neither was the geometry loader.

  • Tasks that involve Unit testing
  • SKILL.md covers Always, Force the tools rail to build…, What you CAN'T verify live… and Report
  • Calls npm and npx

What it does

Verify Frontend is an agent skill from ibuilder/massing. How to verify Massing web/viewer UI changes LIVE — full verification works; two historic "stalls" are fixed and neither was the geometry loader. Invoke when you changed apps/web and need to prove it works. Covers typecheck/lint/vitest/build, driving the real app, and honest flagging of flows you genuinely couldn't exercise.

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Testing & QA, covering Unit testing. It works with Vitest. The repository describes itself as: Open, self-hosted, IFC-native AEC platform: web BIM viewer + modeling, a ~100-module GC portal (RFIs, pay apps, CPM, construction accounting — double-entry GL/WIP → QuickBooks… The licence is MIT.

When your agent uses it

  • Tasks that involve Unit testing

Example prompts

  • “stalls”
  • “/verify-frontend”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 523e5b3. 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

    Shell commands in SKILL.md call:

    • npm
    • npx

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

  • Network

    No URLs in SKILL.md. Its commands use npm and npx, 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

Verify Frontend loads about 1k tokens when it runs. Until then it costs about 85 tokens; SKILL.md has 431 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~85
When it runs · the whole SKILL.md, loaded when a task matches
~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); files beside SKILL.md are not scanned.

SKILL.md

The full file from ibuilder/massing at commit 523e5b3, republished under its MIT licence (© ibuilder). 431 words, ~1,021 tokens.

Download SKILL.mdSave it as .claude/skills/verify-frontend/SKILL.md (or your agent's skills folder).
name
verify-frontend
description
How to verify Massing web/viewer UI changes LIVE — full verification works; two historic "stalls" are fixed and neither was the geometry loader. Invoke when you changed apps/web and need to prove it works. Covers typecheck/lint/vitest/build, driving the real app, and honest flagging of flows you genuinely couldn't exercise.

Verify a Massing frontend change

Standing directions for this repo: docs/roadmap-directions.md. Read those first.

The "preview stall" was diagnosed and FIXED in v0.3.703 — it was never the geometry loader. Five SSE endpoints polled the database inside async def gen(), blocking the event loop for every other client; two open tabs left the server wedged and every request timed out, including the app's boot api.health(). That left projectId unset, so the portal showed "No project open" while a model sat rendered on screen. Fixed with run_in_threadpool; measured >8s timeouts → ~20 ms. Full live verification now works — start both servers and drive the real app.

A SECOND "stall" was diagnosed and fixed 2026-08-02, and it was not the loader either — the canvas had width ZERO. Container 830x572, canvas 0x493, four meshes and 230 triangles built and visible, .frag 200, worker fine, console clean. The renderer sizes itself once at construction; if the container is not at final width yet, that first size sticks for ever. A ResizeObserver in createViewer now tracks it (apps/web/src/viewer/canvasResize.test.ts).

Twice now, "the geometry loader stalls" has meant something else entirely — once a blocked event loop, once a zero-width canvas. Before writing that sentence a third time, ask the page:

js
const c = document.querySelector('canvas'), k = document.querySelector('#container');
({ canvas: c.width+'x'+c.height, container: k.clientWidth+'x'+k.clientHeight })   // canvas ≈ container × devicePixelRatio

and count what is actually in the scene (v.viewer.world._scene.three, not v.world). A caveat nobody re-tests becomes folklore: this skill asserted the stall in its own frontmatter for weeks while its body said it was fixed, and the contradiction propagated into eight changelog entries.

Always

cd apps/web && export PATH="/c/Program Files/nodejs:$PATH"
npm run typecheck && npm run lint      # Node 24 (Node 18 breaks the build)
npx vitest run <path/if/covered>
npm run build                          # strongest compile check; ~1 min
Show full SKILL.md (186 more words)Show less

Force the tools rail to build (verifies rail UI live)

The preview server is on :5173. In the running preview (via the browser tools), navigate to a project with a source IFC, then:

js
window.dispatchEvent(new CustomEvent('aec:persona', { detail: 'all' }));  // forces buildToolsPanel + buildClashPanel
// then read #panel-tools — the tool-group sections, buttons, inputs all render

This verifies: new rail tools/buttons/inputs, the ribbon tabs, the Library palette, the node-canvas launcher, the KEYS shortcut layer (dispatch KeyboardEvents), the Ask/analytical boxes. Exercise handlers by .click()ing buttons and reading the result-overlay / DOM.

What you CAN'T verify live (flag it honestly)

  • (historic) panel-tree was unverifiable behind the stall. Both stalls are fixed — verify it live.
  • Nothing, if both servers are current. Start them yourself: .claude/launch.json has api (:8093) and web (:5173) configs — use preview_start with {name: "api"} / {name: "web"}. A previous note here said a stale :8093 process was "the user's call"; there was usually no process at all, and the config to start one has always been in the repo. Check before assuming.
  • Anything geometry-coupled (placing an element, section cuts, camera).

Report

State exactly what was verified live vs. by typecheck/build vs. not exercised. Never claim an interactive viewer flow "verified" if the stall prevented it.

See memory: tools-panel-verify-technique, web-build-needs-node-20, web-eslint-node-pin, dev-api-port.

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

Files

Just SKILL.md in .claude/skills/verify-frontend of ibuilder/massing.

Open the folder on GitHubat commit 523e5b3

Compare with similar skills

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

Verify Frontend compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Verify Frontend this skillibuilder/massing121—~1kAutomated safety check: PassMIT
Typescript Idiomsirahardianto/awesome-agv157—~6.1kAutomated safety check: PassMIT
Test GuardamElnagdy/guard-skills1.3k2 repos~2.1kAutomated safety check: PassMIT
Add UI Stringopenfootmanager/openfootmanager1.1k—~2.6kAutomated safety check: PassGPL-3.0
Creating A Packagec15t/c15t1.9k—~913Automated safety check: PassApache-2.0
Check Visual Changesigrlk/storybook-addon-test-codegen1541 repos~1.4kAutomated safety check: PassMIT

Similar skills

  • Typescript Idioms

    irahardianto/awesome-agv

    TypeScript strict typing: type narrowing, discriminated unions, Zod runtime validation, generic utility types, and Vitest testing.

    157 GitHub stars~6.1k tokensUpdated 3 days ago
    Testing & QAAuto-check passed

  • Test Guard

    amElnagdy/guard-skills

    Reviews newly written or edited tests against nine rules that cut test bloat, such as mock-heavy checks and near-duplicate cases, before they are committed.

    1.3k GitHub starsUsed in 2 repos~2.1k tokens
    Testing & QAAuto-check passed

  • Add UI String

    openfootmanager/openfootmanager

    Add or change any text a player can see, in every locale the game ships in.

    1.1k GitHub stars~2.6k tokensUpdated yesterday
    Testing & QAAuto-check passed

  • Creating A Package

    c15t/c15t

    Scaffold a new workspace package in the c15t monorepo. An agent skill from c15t/c15t.

    1.9k GitHub stars~913 tokensUpdated yesterday
    Testing & QAAuto-check passed

  • Check Visual Changes

    igrlk/storybook-addon-test-codegen

    Check the visual impact of an edit mid-task with uiverify check — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR…

    154 GitHub starsUsed in 1 repo~1.4k tokens
    Testing & QAAuto-check passed

  • Effect TS

    tellahq/opensession

    Write idiomatic Effect v4 TypeScript verified against the pinned effect@4.0.0-rc.112 source.

    392 GitHub stars~3.7k tokensUpdated today
    Testing & QAAuto-check passed

More from ibuilder/massing

  • Backend Tests

    ibuilder/massing

    How to run and add Python tests in the Massing API/data services.

    121 GitHub stars~836 tokensUpdated 5 days ago
    Auto-check passed

  • Massing Bim

    ibuilder/massing

    Drive a Massing BIM/AEC project from an AI agent over MCP — read a project's status, records, CDE, KPI and model-quality checks; run standards-compliance, schedule-risk, embodied-carbon, permit-…

    121 GitHub stars~1.1k tokensUpdated 5 days ago
    Auto-check passed

  • Ship Release

    ibuilder/massing

    The Massing release discipline — how to ship a verified, CI-green version-numbered release direct to main.

    121 GitHub stars~2.3k tokensUpdated 5 days ago
    Auto-check passed

  • Master Builder

    ibuilder/massing

    Reason like a master builder — one mind holding an entire built-asset project from raw land through design, construction, handover, operations, and disposition, anywhere in the world.

    121 GitHub stars~2.6k tokensUpdated 5 days ago
    Auto-check passed

  • Security Monitoring

    ibuilder/massing

    How to monitor and fix security issues in Massing — CodeQL alerts, dependency audits, secret scanning, and ReDoS/XXE fixes.

    121 GitHub stars~1.7k tokensUpdated 5 days ago
    Auto-check passed

Works with

Categories

Questions about Verify Frontend

What does Verify Frontend do?

How to verify Massing web/viewer UI changes LIVE — full verification works; two historic "stalls" are fixed and neither was the geometry loader. Verify Frontend is an agent skill from ibuilder/massing. How to verify Massing web/viewer UI changes LIVE — full verification works; two historic "stalls" are fixed and neither was the geometry loader.

When should I use Verify Frontend?

Verify Frontend fits situations like: tasks that involve Unit testing.

How do I install Verify Frontend in Claude Code?

Run `npx skills add ibuilder/massing --skill verify-frontend -a claude-code`. Or copy the skill folder (.claude/skills/verify-frontend in ibuilder/massing) into .claude/skills/verify-frontend in your project. Claude Code loads it when a task matches its description.

How do I install Verify Frontend in Codex?

Run `npx skills add ibuilder/massing --skill verify-frontend -a codex`. Or copy the skill folder (.claude/skills/verify-frontend in ibuilder/massing) into .agents/skills/verify-frontend in your project. Codex loads it when a task matches its description.

Can I use Verify Frontend 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 ibuilder/massing --skill verify-frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/verify-frontend, .gemini/skills/verify-frontend, .github/skills/verify-frontend and .opencode/skills/verify-frontend in your project.

What does Verify Frontend need to run?

Going by SKILL.md and its folder, Verify Frontend needs the command-line tools its instructions call (npm and npx). Our summary lists: Node.js.

Does Verify Frontend access the network?

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

Is Verify Frontend 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. Review the folder before installing.

What licence does Verify Frontend use?

Verify Frontend is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Verify Frontend use?

About 1k tokens (SKILL.md is roughly 4.1k 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 Verify Frontend?

Skills that share tags, products or a category with Verify Frontend: Typescript Idioms (irahardianto/awesome-agv, 157 stars), Test Guard (amElnagdy/guard-skills, 1.3k stars), Add UI String (openfootmanager/openfootmanager, 1.1k stars) and Creating A Package (c15t/c15t, 1.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Verify Frontend?

ibuilder (a GitHub user) maintains it in ibuilder/massing, which has 121 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 2, 2026.

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