VerticalSlices: Skill for Claude Code

.ai/skills/qa-cratis-docs/SKILL.md

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

Written for no agent in particular: nothing here depends on one.

This is Cratis/VerticalSlices's own configuration. It tells Claude Code and Codex how to work on VerticalSlices itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything VerticalSlices configures →

Needs its repository: it runs a file that does not travel with it, so clone the repository first. The line is node scripts/screenshot.mjs http://localhost:4321/chronicle/concepts/event-source/ /tmp/es-dark.png dark.

Reuse

Borrowing it

Nothing to install: this file belongs to Cratis/VerticalSlices. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/Cratis/VerticalSlices/main/.ai/skills/qa-cratis-docs/SKILL.md
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/github.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/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for qa-cratis-docs

Your own site · 80×15
<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="Reviewed on agentmods" width="80" 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. A grade says what 26 rules found in the file — not that it is safe.
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.1 $0.00096 $0.00871
Opus 5.5 $0.00038 $0.00348
Sonnet 5.5 $0.00019 $0.00174
Haiku 4.5 $0.00010 $0.00087

Measured 1mo ago against content hash d88d3aecb2a2, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, 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 1mo 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 — 98 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. 1mo 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 1mo ago), licensed MIT. It adds 96 tokens to every session and 871 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 100% identical to qa-cratis-docs, differing in 98 lines, and is treated as a copy.

Related

Other skills, from other repositories

cratis-specifications-csharp

Write C# specifications with Cratis.Specifications using the Establish/Because/should pattern and the for/when/and folder hierarchy. Use when adding or restructuring C# specs in any Cratis repository, choosing between an isolated unit spec and an in-process scenario spec, or building reusable given/ contexts. Do not…

Cratis/AI · 98 tokens

cratis-stage-rendering-and-sandbox

What Cratis Stage and cratis render do with a Screenplay .play model: the model shape Stage admits and refuses (STAGE-ESM-, PLAY0268 render refusals), what it emits (C# Arc/Chronicle backend, React/Vite scaffold with Arc CommandForm shell emission over Scene typed bindings, Debug specifications), managed publication…

Cratis/AI · 211 tokens

cratis-application-slice-specifications

Specify the backend behavior of an event-sourced Cratis application slice — plain-call specs for pure decisions, plus CommandScenario, EventScenario, ReadModelScenario and ReactorScenario where the pipeline, validation, constraints or projections matter — including what to cover for each slice type and where the…

Cratis/AI · 126 tokens

cratis-chronicle-event-constraints

Enforce append-time uniqueness in Chronicle with the [Unique] attribute, [RemoveConstraint], and IConstraint, and specify the violation with EventScenario. Use when a rule must hold at the event store rather than in a command, so two concurrent appends cannot both win. Do not use for ordinary command input validation…

Cratis/AI · 81 tokens

cratis-chronicle-read-model-specifications

Specify declarative projections and reducer wiring with ReadModelScenario from Cratis.Chronicle.Testing — seeding events through Given and asserting on the materialized instance; start with Specification plus a direct call for pure reducer decisions. Use when the behavior under specification is how events become…

Cratis/AI · 87 tokens

cratis-arc-command-operation

Declare immediate inline work as a Cratis Arc ICommandOperation returned by a model-bound command, with optional compensation and commit-aware recovery. Use when moving service writes out of Handle(), choosing operation return shapes, diagnosing recovery, or specifying execution and compensation through…

Cratis/AI · 83 tokens