qa-cratis-docs

A visual quality-check process for rendered Cratis documentation pages. It uses screenshots in both light and dark themes to inspect diagrams, tables, code blocks, and layout movement.

In plain words
What is it for?
Use it after changing Documentation files to capture pages, inspect their rendered layout, and diagnose visual or client-side rendering issues.
Why use it?
It catches appearance and layout problems that source-code review may not reveal, including pages that flicker, jump, or shift 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/ai/qa-cratis-docs
Any agent
npx skills add Cratis/AI --skill qa-cratis-docs
Clone the repo
git clone --depth 1 https://github.com/Cratis/AI

Made for: Claude Code, Codex.

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 original No closer match found 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 2d 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 2d 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

Copies of this mod

1 near-identical copy found in the catalogue:

.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. 2d 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/AI (2 stars, last pushed 4d ago), 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. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

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, close the issues it resolves, and delete the branch locally and on origin. Use whenever the user asks to commit, push, create a PR, ship, or land changes.

Cratis/VerticalSlices · 72 tokens

add-concept

Use this skill when asked to create a strongly-typed domain identifier or value (such as ProjectId, AuthorName, InvoiceNumber) in a Cratis-based project. Produces a ConceptAs record with the correct conversions and sentinel values.

Cratis/VerticalSlices · 54 tokens

skill-creator

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

Cratis/VerticalSlices · 63 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/VerticalSlices · 88 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/VerticalSlices · 80 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/VerticalSlices · 100 tokens