Watch a design review happen on real pull requests
A small Next.js app on shadcn/ui and Tailwind. Each pull request here shows one thing Crocotaste catches, and exactly what it posts.
Your tokens
Every colour, radius and size in a diff is read against the shadcn theme in globals.css and the tokens in DESIGN.md.
Your components
Markup that rebuilds a Button or a Card from components/ui gets flagged, citing the file it should have used.
Your team's decisions
Rules and decisions in DESIGN.md are read at the base of each pull request and cited by file and line.
- <p className="text-sm text-destructive">Upload failed</p>+ <p className="text-sm text-red-600">Upload failed</p>
text-red-600 is --color-destructive — use the token (src/app/globals.css:24)
<p className="text-sm text-destructive">Upload failed</p>
The onboarding issue
Crocotaste opens one issue with instructions for your coding agent.
Setup#1Adding DESIGN.md
The agent's pull request, and what Crocotaste read once it merged.
Setup#2A Tailwind colour where a theme token exists
text-red-600 instead of text-destructive, with a one-click fix.
Violation#3A hex that several roles share
Every token it could be, and no guess about which one.
Violation#4A spacing value just off the scale
An arbitrary padding a few pixels from a spacing value in DESIGN.md.
Drift#5A radius off the scale
An arbitrary corner radius, with the nearest step as a one-click fix.
Drift#6A token that does not exist
A misspelled var() that would silently render nothing.
Violation#7A button built from scratch
A hand-styled link where Button exists, caught by the AI review.
Violation#8Dismissing a finding
An @crocotaste ignore reply that drafts the decision to record.
Command#9Recording the decision
The drafted block merged into DESIGN.md, where every review reads it.
Decision#10Breaking the recorded decision
A later change goes against it, and the finding cites its line.
Violation#11A clean pull request
Nothing off-system, so the check goes green and approves.
Pass#12