qa-cratis-docs

qa-cratis-docs is a skill for Claude Code, Codex from Cratis/VerticalSlices. It costs 96 tokens per session (871 once invoked), scanned A, a copy of qa-cratis-docs, MIT.

A visual quality-checking skill for Cratis documentation pages. It captures documentation pages in a browser in both light and dark themes so their layout and rendered content can be inspected.

In plain words
What is it for?
It is for screenshotting changed documentation pages, checking both themes, inspecting rendered sections, and diagnosing layout shifts.
Why use it?
It helps detect visual problems such as broken diagrams, tables, code blocks, or page elements that jump or flicker while loading.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/cratis/verticalslices/qa-cratis-docs
Any agent
npx skills add Cratis/VerticalSlices --skill qa-cratis-docs
Clone the repo
git clone --depth 1 https://github.com/Cratis/VerticalSlices

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for qa-cratis-docs

README.md
[![agentmods](https://agentmods.dev/badge/skills/cratis/verticalslices/qa-cratis-docs.svg)](https://agentmods.dev/skills/cratis/verticalslices/qa-cratis-docs)
Your own site
<a href="https://agentmods.dev/skills/cratis/verticalslices/qa-cratis-docs"><img src="https://agentmods.dev/badge/skills/cratis/verticalslices/qa-cratis-docs.svg" alt="Measured on agentmods" height="20"></a>
Per session 96 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 871 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin 100% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00096 $0.00871
Opus 5 $0.00048 $0.00436
Sonnet 5 $0.00019 $0.00174
Haiku 4.5 $0.00010 $0.00087

Measured 3d ago against content hash d88d3aecb2a2, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

qa-cratis-docs scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

100% identical to qa-cratis-docs — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

.ai/skills/qa-cratis-docs/SKILL.md · 52 lines

How it starts

The opening of the file, as written. The whole thing — 52 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Visual & layout QA for the docs site

Scope this skill to visual checks for product or contributing docs whose source lives under Documentation/**. Site-level pages in Documentation/web are owned by the Documentation repo.

shot-scraper/Playwright aren't dependencies, but Chrome is. Use the committed Documentation/web/scripts/screenshot.mjs (drives system Chrome over CDP) — it captures light or dark, full-page, with client-side rendering settled.

Capture

cd Documentation/web && npm run dev        # serve at http://localhost:4321 (keep it running)
node scripts/screenshot.mjs http://localhost:4321/chronicle/concepts/event-source/ /tmp/es-dark.png dark
node scripts/screenshot.mjs http://localhost:4321/chronicle/concepts/event-source/ /tmp/es-light.png light

Then Read the PNG to evaluate it. Crop/zoom with the sharp already in node_modules (PIL/ImageMagick aren't installed):

node -e "require('sharp')('/tmp/es-dark.png').extract({left:300,top:600,width:900,height:500}).resize({width:1400}).toFile('/tmp/crop.png')"

Build the page list from web/src/generated/topics.json + the site-level slugs. The bar is aspire.dev — study its frontend site.css/mermaid.css for the depth cues (gradient glows, framed diagrams, lifted cards) that cratis.css is built from.

What to check on each page

  • Diagrams themed and correctly sized in both themes (pre-rendered SVG — should be present immediately, no pop).
  • Tables render as real tables (not raw | pipes — that's the GFM/MDX bug).
  • Code blocks not over-indented (no spurious leading whitespace in the source snippet) and lifted off the page.
  • Hero / cards have depth (glow, lift), inline code is a brand-tinted chip.
  • Light AND dark both read cleanly.

Diagnosing a flicker / twitch / layout-shift

The cause is almost always one of: font swap (fixed — font-display: optional + preload in Head.astro), client-side rendering settling, or Mermaid (fixed — build-time pre-render). To measure:

Read the full file on GitHub · 52 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 52 lines · 96 tokens per session scan A d88d3aecb2a2

Subscribe to this mod's changes

qa-cratis-docs is a skill published in the GitHub repository Cratis/VerticalSlices (2 stars, last pushed today), licensed MIT. It adds 96 tokens to every session and 871 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to qa-cratis-docs, differing in 0 lines, and is treated as a copy.

Related

Other skills, from other repositories

ship-changes

Ship staged or unstaged local changes: create a branch, make logical commits, push to origin, open a PR with the correct description and label, merge it, prepare no-effect dispositions for related issues, and delete the branch locally and on origin. Use whenever the user asks to commit, push, create a PR, ship, or…

Cratis/AI · 74 tokens

cratis-command

Step-by-step guidance for creating a Cratis Arc command — [Command] record, Handle() method, CommandValidator, proxy generation, and React .use() hook with CommandDialog. Use when adding or creating a command, wiring up a form or button to the backend, working with IEventLog, CommandResult, CommandValidator…

Cratis/AI · 80 tokens

auth-and-identity

Use this skill for authentication, authorization, or identity in a Cratis Arc project — backend, frontend, or both. Covers identity providers (IProvideIdentityDetails), protecting commands/queries with authorization attributes, Microsoft Identity Platform, connecting backend identity to React, multi-tenant identity…

Cratis/AI · 88 tokens

cratis-react-page

Step-by-step guidance for building a React page in a Cratis Arc application — DataPage lists, CommandDialog toolbar actions, confirmation and busy-indicator dialogs, row selection, details components, observable queries, and MVVM. Use when building or modifying a page that lists/displays data, adding a table, wiring…

Cratis/AI · 93 tokens

cratis-readmodel

Step-by-step guidance for creating a Cratis Chronicle read model from scratch — defining events, choosing between projection and reducer, [ReadModel] record with static query methods, and the generated TypeScript proxy in React. Use when creating a read model, working with [EventType], [ReadModel], IProjectionFor…

Cratis/AI · 100 tokens

cratis-specs-csharp

Step-by-step guidance for writing C# specs in Cratis with BDD Specification by Example — the Establish/Because/should pattern, for/when/and folder hierarchy, reusable given/ contexts, NSubstitute mocking, and the in-process scenario family. Use when writing C# unit or integration specs or structuring the for/when/and…

Cratis/AI · 101 tokens