A small Next.js app on shadcn/ui and Tailwind, reviewed by Crocotaste on every pull request. Each pull request here shows one thing Crocotaste catches, and everything on it (the summary, the inline findings, the check, the replies) is exactly what Crocotaste posted. Nothing was edited after the fact.
See the app and the walkthrough live: crocotaste.github.io/crocotaste-examples
AI design reviews. Crocotaste checks every UI change against your design system: your tokens, your components, and your team's decisions. It's a GitHub App: there's no CI step to write and no package to add.
It reads three things from the repository it reviews:
- Your tokens. The colours, radii and sizes declared in your stylesheets (here, the shadcn theme in
src/app/globals.css) and in DESIGN.md. - Your components. What's in
components/andui/(here,src/components/ui/), so a hand-rolled button can be pointed at theButtonit should have used. - Your team's decisions. The rules in DESIGN.md, plus the design and UI rules your coding agents already follow in
CLAUDE.md,AGENTS.mdor Cursor rules.
Every finding cites the file and line it comes from. A finding with no source in your repository is deleted before it reaches the pull request.
Follow the walkthrough below in order, and on each pull request look at four places:
- The summary comment. The first comment on the pull request: what was checked, what was found, and one collapsed prompt that hands every finding to your coding agent at once.
- The inline findings. Under Files changed, on the exact line. Each one names the value, the token, then the source, and most carry a suggestion you can commit in one click.
- The check. At the bottom of the pull request, named Crocotaste. Green means the change is on-system. Neutral means there's something to look at. It's never red, and it never blocks a merge.
- The review. A clean pull request gets an approving review. Findings are posted as a comment review, never as a request for changes.
| Step | What to look for | Link |
|---|---|---|
| The onboarding issue | One issue with instructions for your coding agent to write DESIGN.md | #1 |
| Adding DESIGN.md | The agent's pull request, and the note on what Crocotaste read once it merged | #2 |
| A Tailwind colour where a theme token exists | text-red-600 flagged as --color-destructive, with the one-click fix |
#3 |
| A hex that several roles share | A white that is --card, --popover and more, named with all of them and no guess |
#4 |
| A spacing value just off the scale | p-[18px] reported as drift against spacing.card in DESIGN.md; the check stays green |
#5 |
| A radius off the scale | rounded-[12px] reported as drift, with rounded-lg as the one-click fix |
#6 |
| A token that does not exist | var(--primay) caught in a stylesheet, with --primary as the fix |
#7 |
| A button built from scratch | A hand-styled link where Button exists, flagged by the AI review with the DESIGN.md rule it breaks |
#8 |
| Dismissing a finding | An @crocotaste ignore reply that drafts the decision to record, and the summary's Dismissed row |
#9 |
| Recording the decision | The drafted block merged into DESIGN.md's ## Decisions |
#10 |
| Breaking the recorded decision | A later change goes against it, and the finding cites the decision's line | #11 |
| A clean pull request | A green check and an approval: "Nothing to snap at." | #12 |
DESIGN.md (#2) and the recorded decision (#10) are merged, because every later review reads them. Every other pull request stays open, so each review sits beside the code it read and main stays on-system.
Violation · `text-red-600` is `--color-destructive` — use the token (src/app/globals.css:24)
Below the message: the source line, a one-line suggestion, and a collapsed Prompt for your coding agent you can paste into Cursor, Claude Code or Codex.
There are two verdicts:
- Violation. A value that is exactly one of your tokens written raw, a component of yours rebuilt by hand, or a written rule broken. The check turns neutral.
- Drift. A near miss: a colour close to a token, a spacing value just off the scale. The check stays green.
Two commands, typed as a comment on a pull request by anyone who can push to the repository:
@crocotaste reviewruns the review again on the latest commit.@crocotaste ignore <reason>, as a reply to one of its inline findings, dismisses that finding for the pull request and drafts a## Decisionsentry for your DESIGN.md, so the exception lives in your repository where the team can read it.
Crocotaste never writes to your repository. It reads your code and your design system, and it comments, posts a check and opens one onboarding issue if you ask it to. It never commits, never opens a pull request and never edits a file. The full list of permissions is in the docs.
- Install the GitHub App from crocotaste.com on the repositories you pick.
- Let it open the onboarding issue, and hand the instructions in it to your coding agent. The agent opens a pull request that adds your DESIGN.md.
- Open a pull request that touches UI.
Your first three reviews are free. Get started has the details, and pricing has the plans.
npm install
npm run devThen open localhost:3000. Other scripts: npm run build, npm run typecheck, npm run lint, npm run format.
The site is a static export. Every push to main builds it and publishes it to GitHub Pages through .github/workflows/pages.yml.
The design system lives in three places:
src/app/globals.css: the shadcn theme, light and darksrc/components/ui/: the shadcn components (Button,Badge,Card,Separator)CLAUDE.md: the rules this project's coding agents follow, which Crocotaste reads as conventions
Want to see it on your own changes? Fork this repository, install Crocotaste on the fork, and open a pull request there. The croc will find something to snap at, or approve it.