본문으로 건너뛰기
cccskills
무료GitHub에 공개

schema-review

Render a crouton collection schema (the field-definition JSON) into a human-readable field table + relationships sketch (HTML + PNG + a terse Markdown table), so a human can sign off on the DATA MODEL before any code is generated. Use when an agent drafts or changes a collection schema (before `crouton config` / `generate_collection`), or when asked to "review a schema", "show the data model", "check these fields".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(3)

  • SKILL.md6.9 KB
  • example.schema.json815 B
  • render-schema.mjs13.1 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Schema Review — check the data model before you generate it

Turns a raw collection schema (field-definition JSON) into a reviewable artifact: a skimmable field table (name · type · required · translatable · default · references) plus a small relationships sketch — so the data model can be approved before crouton config generates the Form / List / API / migration from it.

This is the schema analog of the ui-proposal skill, and the foundation of the schema sign-off loop (epic #314): produce the review → it gets posted on the PR → iterate on feedback → only then generate the collection. The schema is the foundation; a wrong field type or missing relationship means regenerating the whole collection, so approving it first is cheap and fixing it after is not.

Why a PNG? GitHub comments can't render raw HTML/CSS. The committed .html is the editable source; the .png is what gets posted (plus the inline Markdown table).

When to use

  • An agent has drafted/changed a collection schema (the fieldsFile JSON, or MCP design_schema output) and is about to run crouton config / generate_collection.
  • The user asks to "review the schema", "show the data model", "check these fields".
  • Skip for non-schema work (no collection / field defs involved).

Review the crouton.config.js alongside the fields. The schema is the data model; crouton.config.js is the generation plan — collections, target layer, features, locales, dialect — and it decides the generated forms / lists / API surface. So the config is part of the same sign-off, presented next to the field tables, not a separate step.

It sits after the machine validate_schema step (which checks the JSON is well-formed) — this is the human gate on top of it.

What it produces

ArtifactPathCommitted?
Review source (HTML)writeups/schema-reviews/<collection>.html✅ yes (editable source of truth)
Markdown tablewriteups/schema-reviews/<collection>.md✅ yes (inline-postable)
Rendered imagescreenshots/schema-review-<collection>.png❌ no — screenshots/ is gitignored; it's posted to the PR, not committed

Step 1 — Get the schema JSON

Obtain the field-definition JSON for the collection (the fieldsFile, or the MCP design_schema output). Save it to a file, e.g. /tmp/<collection>.schema.json. The renderer accepts any of these shapes:

  • { "collection": "products", "fields": { ... } }
  • { "fields": { ... } }
  • a flat map { "name": { "type": "string" }, ... } (pass --collection <name>).

Each field follows the crouton schema (see the crouton skill): type, optional meta (required, unique, primaryKey, default, precision/scale, options + displayAs, optionsCollection…), translatable, and refTarget/refScope for relations.

Step 2 — Render the review

node .claude/skills/schema-review/render-schema.mjs /tmp/<collection>.schema.json
# → writes writeups/schema-reviews/<collection>.html + .md, and prints the Markdown table
# options: --collection <name>   --out-dir <dir>

Step 3 — Render to PNG (shared renderer from #308)

node .claude/skills/ui-proposal/render.mjs \
  writeups/schema-reviews/<collection>.html \
  screenshots/schema-review-<collection>.png

Uses the repo's Playwright headless Chromium — offline, no network.

Step 4 — Hand off (review happens on the DIFF)

The committed Markdown is the actionable review surface — not the image. A PNG can't be commented on; the reviewer would have to copy text and describe which field they mean. The .md lands in the PR's "Files changed", one field per row, so the reviewer can click the + on any line and leave an inline comment pinned to that exact field ("make this decimal", "add a slug field here") — no copying, no describing.

  • Commit writeups/schema-reviews/<collection>.md and .html (via /commit, scope docs) so the .md appears in the PR diff. This is where feedback goes.
  • The PNG is the optional at-a-glance visual — post it in the PR description/comment, but steer feedback to the diff.
  • The gate + revision loop that hold crouton config until approval are wired in #316 (reusing the generic approval loop from #310): it reads the inline review comments on the committed .md, revises the schema field-by-field, re-renders, and replies to/resolves each thread. When running this skill by hand, point the reviewer at the committed .md in the diff.

Unresolved relations — the thing this gate exists to catch

A field typed relation with no refTarget is the highest-value thing on the page: it is the one detail that makes the relation buildable, and it is the easiest to approve without noticing. The renderer marks it ⚠ not set in the References column and replaces the relationships sketch with a warning naming each offender. It never reports "No relationships" for a collection that has relation fields.

Do not approve a schema carrying one. Name the collection each points at, and check that collection is actually being generated — a target that doesn't exist produces an import to a missing file and fails the build, minutes later, with an error that names none of this.

If people are the intended target, say so explicitly: in crouton they come from the auth/team side, not a generated collection, so it likely needs a different field type rather than a relation.

Pass --strict to make it a hard gate (exit 1) — use that for a pre-generate check or CI. It is off by default because the decompose apply step calls this inside a best-effort guard, where a non-zero exit would drop the schema artifact from the sign-off comment entirely and hide the problem instead of showing it.

Minted by the #1825 chores POC: assignee and lastDoneBy were approved as untargeted relations, the summary read "No relationships.", the build instruction then invented "references household members/users", the worker turned that into refTarget: "users", and the generated code imported a users collection nobody ever created.

Conventions

  • One review per collection; re-render after every schema edit so the artifact never drifts.
  • The field table is the source of truth for review — keep it honest (mirror the actual JSON, including primary keys 🔑, unique, defaults, and every relationship).
  • Keep it focused on the one collection under discussion.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

a11y

무료

Accessibility review for Vue surfaces — the code-cleaning analog of /code-review and /simplify, pointed at WCAG/ARIA. Reviews just your diff (or a package/file), rates findings by severity, and either comments inline on the PR (--comment) or applies the safe fixes for you (--fix). Steers the depth-aware `a11y` subagent. Use when asked to "check accessibility", "a11y this", "audit ARIA/keyboard", or run /a11y.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

FriendlyInternet/nuxt-crouton102026년 10월 20일 업데이트

ask-human

무료

Emit a blocking question the owner can read in ~10 seconds and answer in one reply — the scannable, recommendation-first handoff every agent posts when it hits a fork it can't own. Leads with the one decision + a recommendation, carries the 🤖 provenance header, doubles as the

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

FriendlyInternet/nuxt-crouton102026년 10월 20일 업데이트

audit

무료

Audit packages for documentation completeness, detect drift between code and docs, and maintain documentation quality across the monorepo. Use when checking package docs, running audits, or reviewing documentation health.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

FriendlyInternet/nuxt-crouton102026년 10월 20일 업데이트

Author a placeable layout block that looks right at ANY pane size. The one hard rule — size to the PANE with container queries (@container), never the viewport — plus list/form playbooks and the sizing contract (minWidth etc.) the viability metric reads. Use when adding/converting a croutonLayoutBlocks block, or when a block overflows/breaks in a narrow pane.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

FriendlyInternet/nuxt-crouton102026년 10월 20일 업데이트

When a bug or regression is reported, the FIRST step — before fixing — is to research how and when it was introduced (git archaeology), then record that finding on the tracking issue/PR. Use the moment a bug, error, broken build, or "this used to work" is reported, before writing a fix. Produces a first-bad-commit (or "not a code regression") note you paste onto the issue.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

FriendlyInternet/nuxt-crouton102026년 10월 20일 업데이트

commit

무료

Smart, granular git commits following monorepo conventions. Analyzes changes, filters to session-relevant files, groups by intent, and uses conventional commit format. Use when committing code changes.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

FriendlyInternet/nuxt-crouton102026년 10월 20일 업데이트

FriendlyInternet의 스킬 모두 보기

이 스킬의 문제 신고