frontend-graph
Skill0 starsChanged 3 months agoMITView on GitHub
Auto-routes frontend/UI work with a hard Sameness Shield gate: plan → build → parallel reviews → run sameness-check.py (must exit 0) → Pass?. Rejects vibe-coded sameness with actual rework. Use for UI/pages/components without the user naming a skill. Skip pure Q&A and non-frontend work.
In this repository6 other files it gives its agents.
- frontend-a11ySkill
- frontend-design-critiqueSkill
- frontend-implementSkill
- frontend-interactionSkill
- frontend-plannerSkill
- frontend-responsiveSkill
The file
We split this skill into the rules it gives an agent
6 rules. About 0 are common, 5 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈5
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 45
Run the checker (try in order until one works):
- Distinctive: line 56
If exit code ≠ 0: treat as FAIL.
- Distinctive: line 62
Read the first file that exists:
- Distinctive: line 87
Sameness Shield: must exit 0
- Very specific: line 102
All must-pass reviewers return PASS (interaction may WARN)
- Distinctive: line 112
If Shield fails, lead with:
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Frontend quality graph (auto-router)
Never ask which skill to use. Classify silently, then invoke skills yourself.
Thin stack only (do not load extra UI skill packs):
| Job | Skill / tool |
| Design intelligence | ui-ux-pro-max (optional companion) |
| Taste / anti-generic | frontend-design (optional companion) |
| Anti-slop detectors | impeccable (optional companion) |
| React engineering | vercel-react-best-practices (optional) |
| Audit gates | web-design-guidelines + our reviewers |
| Hard gate | scripts/sameness-check.py — must exit 0 |
| Orchestration | this skill |
Step 0 — Classify (silent)
| Class | Signals | Mode |
fe.full | New page/section, redesign, multi-component UI, landing/hero | Full graph + Shield |
fe.visual | Look/brand/typography/spacing/hero polish | Plan-light → build → design + Shield |
fe.responsive | Mobile, breakpoint, overflow | Implement → responsive (+ a11y if chrome changes) |
fe.a11y | Keyboard, focus, contrast, aria | Implement → a11y |
fe.interaction | Loading/empty/error, motion | Implement → interaction |
fe.component | Single component / small UI slice | Plan-light → implement → a11y + responsive (+ design/Shield if visually led) |
skip | Pure Q&A, non-FE, or tightly scoped one-line tweak | No graph |
Status: Route: fe.full → … → Sameness Shield → Pass/Rework
Sameness Shield (actual effect — non-negotiable)
On fe.full, fe.visual, and visually led fe.component, before you tell the user the work is done:
- Identify changed UI files (tsx/jsx/css/vue/svelte/html, etc.).
- Run the checker (try in order until one works):
python3 .cursor/frontend-quality-graph/sameness-check <files>
python3 ~/.agents/frontend-quality-graph/bin/sameness-check <files>
python3 ~/.agents/frontend-quality-graph/repo/scripts/sameness-check.py <files>
python3 scripts/sameness-check.py <files>Do not skip because path resolution is annoying — find the script.
- If exit code ≠ 0: treat as FAIL. Print the Shield output to the user. Rework the UI. Re-run. Max 2 rework loops after Shield fails.
- Forbidden: claiming done while Shield fails. Forbidden:
SAMENESS_ALLOW=1unless the user explicitly requests a bypass. - Soft reviewers (
frontend-design-critique) still run; Shield is the machine gate that blocks ship.
Models
Read the first file that exists:
.cursor/frontend-quality-graph/models.toml(project install)~/.agents/frontend-quality-graph/models.toml(global install)
| Role | Config | Behavior |
| Planner | roles.planner | Subagent |
| Worker | roles.worker (inherit OK) | This chat |
| Reviewers | reviewers.* / roles.qa | Parallel subagents |
Step 1 — Invoke by class
fe.full
ui-ux-pro-maxif installed → design brieffrontend-planner@ planner (must list 3 vibe patterns we will not ship)frontend-implement@ worker (+frontend-design/vercel-react-best-practices/impeccableif present)- Parallel:
frontend-design-critique,frontend-a11y,frontend-responsive(+frontend-interactionwarn) - Run Sameness Shield on changed UI files — must exit 0
- Pass? → else rework → re-run failed gates only
fe.visual
- Companions as available → implement →
frontend-design-critique - Sameness Shield must exit 0
- a11y/responsive if structure changed
fe.responsive / fe.a11y / fe.interaction
Implement + matching reviewers. Shield optional unless the change is visually led.
fe.component (visually led)
Implement + a11y + responsive + design-critique + Sameness Shield.
Pass?
You may only say the work is complete when:
- All must-pass reviewers return
PASS(interaction mayWARN) - Sameness Shield exits 0 (for classes that require it)
- Design critique
Sameness: PASS
Otherwise: rework. Max 2 loops, then stop with residual risks + Shield output.
User-facing
Route → Plan → Build → Review → Sameness Shield → Pass/Rework → Done
If Shield fails, lead with:
Sameness Shield: FAIL — looks like other AI-built products. Reworking.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.