frontend-expert
AGENTS.md9 starsChanged 2 months agoMITView on GitHub
Guidance for AI coding agents when this pack is available. Users should not need to type slash commands. When the request matches an intent below, load the skills automatically. Slash commands are optional shortcuts only. Frontend Expert — a suite of pillars for shipping product web UI: UI quality + responsive (all devices) + ship FE (shell/data/forms) + depth (architecture/SEO). Not a full roadmap.sh curriculum; not React Native. Pillar map: docs/pillars.md.
Where files are headingNew AGENTS.md files have more rules about keeping secrets out of the code, and fewer about code style.
Of the AGENTS.md files we read, the 31,774 first seen in the last six months, against the older ones: the kind of rule that gained most share, and the kind that lost most. About files like this in general, not this one, and an estimate, since a kind is a pattern in the words.
In this repository36 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- .cursor/rules/design-system-enforcer.mdcCursor rule
- frontend-expertSkill
- accessibilitySkill
- anti-slop-codeSkill
- anti-slop-designSkill
- app-shellSkill
- architectureSkill
- componentsSkill
- content-designSkill
- data-fetchingSkill
- design-colorSkill
- design-directionSkill
- design-foundationsSkill
- design-surfacesSkill
- design-typographySkill
- design-vocabularySkill
- devtoolsSkill
- engineering-vocabularySkill
- fidelitySkill
- formsSkill
- frontend-expertSkill
- marketingSkill
- monitoringSkill
- motion-inspectionSkill
- motionSkill
- performanceSkill
- polishSkill
- prototypeSkill
- quality-loopSkill
- responsiveSkill
- seoSkill
- skill-authoringSkill
- testingSkill
- tokensSkill
- webglSkill
The file
We split this AGENTS.md into the rules it gives an agent
8 rules. About 0 are common, 4 are distinctive, and 4 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈4
Distinctive · estimate
This author's own choices. Worth a look.
4
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 7
Users should not need to type slash commands: When the request matches an intent below, load the skills automatically.
- Distinctive: line 65
Wait for a clear pick (or “langsung saja”)
- Very specific: line 110
Responsive: MUST: verify 320/768/1024/1440 on layout UI — responsive
- Very specific: line 112
Hierarchy pass: before DONE on blank-canvas / layout polish — one primary focus + one primary CTA (design-direction)
- Very specific: line 115
No purple/indigo defaults / Lorem (purple only via scored/hard-gated/explicit token)
- Distinctive: line 120
Do not fabricate visual audit scores without tokens/screenshots
- Distinctive: line 121
Never block on slash commands when intent is clear
- Very specific: line 124
Before DONE → Conventions check including Responsive, Hierarchy, Typography, Control geometry, Motion, Shell, Landing.
≈ “Common” is an estimate: at least 1 in 5 of the 40,246 AGENTS.md 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
AGENTS.md
Guidance for AI coding agents when this pack is available.
Chat-first (default)
Users should not need to type slash commands. When the request matches an intent below, load the skills automatically. Slash commands are optional shortcuts only.
What this pack is
Frontend Expert — a suite of pillars for shipping product web UI: UI quality + responsive (all devices) + ship FE (shell/data/forms) + depth (architecture/SEO). Not a full roadmap.sh curriculum; not React Native.
Pillar map: docs/pillars.md.
Auto intent map
| User says / means | Load skills (order) | Optional shortcut |
| Build/change UI, page, component, layout, styling | design-direction* → (+ prototype if comparing/stressing) → design-foundations** → tokens → (+ marketing if landing) → components → anti-slop-code → responsive → motion (light shell defaults) → anti-slop-design → polish → accessibility | /ui |
| + form / validasi / wizard | … + forms (before or with components) | /ui |
| + list/detail API / loading data | … + data-fetching | /ui |
| + app shell / sidebar / routing / 404 | … + app-shell | /ui |
| + architecture / folder structure / state choice | … + architecture | — |
| + SEO / meta / OG / landing public | … + seo (+ performance if CWV) | — |
| + marketing landing / homepage sections / logo cloud / testimonials | … + marketing (+ motion / seo) | /ui |
| + animation / motion / marquee / parallax / text reveal / landing motion | … + motion (families/patterns in motion-families.md; hand-roll — no registry default) | /ui |
| Inspeksi animasi / frame by frame / jelaskan transisi / kenapa animasinya aneh | motion-inspection (then motion to fix) | /design |
| Mobile / responsive / semua device / tablet | responsive (MUST on layout UI) | /ui |
| Audit design, AI slop, UI generik | anti-slop-design → polish → tokens → responsive → accessibility → performance (+ motion / motion-inspection if animated; marketing if landing; + design-direction hierarchy/type if scores claimed) | /design or /audit |
| Match Figma / mock / pixel / fidelity | fidelity → tokens → responsive → polish | /design |
| Lighthouse / axe / DevTools / measured audit | devtools → accessibility → performance → testing | /test-ui or /design |
| Hierarchy / visual hierarchy / primary CTA unclear | design-direction (Hierarchy pass) → design-foundations → anti-slop-design → polish | /design |
| Grid / spacing / alignment / density / cluttered layout / "layout berantakan" / "struktur layout" / "rapikan struktur" | design-foundations → tokens → responsive | /ui |
| Typography / type scale / multi-h1 / heading ladder | design-direction (Typography ladder) → design-typography → polish → anti-slop-design | /design |
| Font choice / type scale / wrapping / truncation / variable fonts | design-typography → responsive → accessibility | — |
| Palette / OKLCH / dark mode / contrast / gamut | tokens → design-color → accessibility | — |
| Card / modal / radius / border / shadow / elevation | tokens → design-surfaces → polish | — |
| Component props / API / “prop terlalu banyak” / composition | components | /ui |
| Prototype / varian / side-by-side / bandingkan arah / cek semua state | design-direction (if axes unnamed) → prototype — then foundations → tokens → components | /ui |
| Kode terasa AI / rapikan kode / dampak ke modul lain / error handling generik / edge case | anti-slop-code (not anti-slop-design, not polish) | /ui |
| UI copy / CTA / error / empty state / confirmation / AI writing / tulisan AI | content-design (not anti-slop-design, not polish) | — |
| Figma Auto Layout / Fill / Hug / layout from Figma | responsive (Auto Layout ↔ CSS) → components | /ui |
| Feels off / rapihin detail | polish (+ anti-slop-design if generik) — one pass | — |
| Test / TDD / coverage | testing → components → accessibility | /test-ui |
| Polish / rapihin sampai bagus | quality-loop | /polish |
| Slow / LCP / optimize | performance | — |
| WebGL / shader / Plasma | webgl | — |
| Monitoring / Sentry / OTel | monitoring | — |
| "What's the name for…" / loose UI description / design term lookup | design-vocabulary | — |
| "What pattern is…" / loose engineering description / FE term lookup | engineering-vocabulary | — |
| Create/add new skill / extend the pack / "buat skill baru" | skill-authoring | — |
* design-direction for non-trivial / blank-canvas only — see skip rules.
** design-foundations for new layouts and structural redesigns. Skip isolated color, typography, copy, token, component-state, motion, and micro-polish changes.
prototype when the user wants rendered comparison or state stress — not on every tiny /ui.
“Rapihin”: alone on existing UI → polish. Vague new UI → judgment. “Rapikan struktur” / layout berantakan → design-foundations. “Rapikan kode” / kode terasa AI → anti-slop-code. Copy / “tulisan AI” / empty-state wording → content-design. “Sampai bagus” → quality-loop.
Personas: build → ui-developer; audit → design-reviewer; test → test-engineer.
Expert judgment
- At most 1–2 clarifying questions if blocked
- Offer 2–3 approaches on distinct axes with tradeoffs + one recommendation
- Wait for a clear pick (or “langsung saja”)
- Then run domain skills (including responsive for layout)
Skills (suite)
| Skill | Pillar | Triggers |
frontend-expert | Suite root | Catalog / install entry — routes into pillars |
design-direction | UI Quality | Blank-canvas / ambiguous UI |
prototype | UI Quality | Rendered variants + state stress |
design-foundations | UI Quality | Grid, spacing rhythm, alignment, density, composition |
tokens | UI Quality | Theme — decision tree + scoring |
components | UI Quality | Components, states, composition, public props/API |
responsive | Responsive MUST | Every layout UI / all devices |
anti-slop-design | UI Quality | Build + visual audits |
anti-slop-code | UI Quality | Generated implementation tells, blast radius, field errors |
polish | UI Quality | Micro craft |
accessibility | UI Quality | Build/audit a11y |
performance | UI Quality | CWV / slow |
motion | UI Quality | Shell defaults + family/pattern vocabulary (motion-families.md); hand-roll |
motion-inspection | UI Quality | Playback / reverse-engineer existing motion |
testing | UI Quality | Tests / TDD |
quality-loop | UI Quality | Polish until clean |
webgl | UI Quality | Plasma backgrounds |
monitoring | UI Quality | Sentry / analytics |
app-shell | Ship FE | Shell, nav, routes |
data-fetching | Ship FE | Async API UI |
forms | Ship FE | Forms / wizards |
architecture | Depth | Folders / state boundaries |
seo | Depth | Meta / OG / indexability |
marketing | UI Quality | Marketing section stack (hero→footer); hand-roll — not registry install |
fidelity | UI Quality | Spec / Figma / screenshot match |
devtools | UI Quality | Lighthouse / axe / measured checks |
design-vocabulary | UI Quality | Reverse-lookup: loose description → design term |
engineering-vocabulary | Depth | Reverse-lookup: loose description → FE engineering term |
skill-authoring | Suite root | Author new pack skills following conventions |
design-typography | UI Quality | Font choice, type roles/scales, wrapping, truncation, numerics, bidi |
design-color | UI Quality | Palette construction, OKLCH, themes, contrast, gamut |
design-surfaces | UI Quality | Radius, borders, elevation, shadows, overlays |
content-design | UI Quality | UI copy, recovery language, voice, localization, AI-sounding prose |
Hard rules
- Tokens via decision tree (
token-preset-scoring.md) or project system — never vibe-pick - Icons: MUST ship Reicon unless waiver —
compliance-gates.md - Responsive: MUST verify 320/768/1024/1440 on layout UI —
responsive - Primary CTAs full-width below 768 (forms / toolbars / action rows) — no tiny desktop-width CTAs on phone
- Hierarchy pass before DONE on blank-canvas / layout polish — one primary focus + one primary CTA (
design-direction) - Typography ladder — ≤2 families; one h1/page; sequential levels; token type roles
- WebGL →
webgl/ Plasma — no parallel invented stack - No purple/indigo defaults / Lorem (purple only via scored/hard-gated/explicit token)
- Loading / error / empty for interactive + async surfaces
- Light Motion defaults on shell/dashboard (or waiver) —
motion; marketing: name families/patterns frommotion-families.mdand hand-roll (registry install is not the default) - Shell chrome — theme in topbar (icon); profile = avatar → account menu; filters = custom select (
app-shell/components) - Marketing landing — section stack via
marketing/landing-sections.md; hero-only fails; hand-roll (registry install is not the default) - Do not fabricate visual audit scores without tokens/screenshots
- Never block on slash commands when intent is clear
- Blank-canvas → judgment first
- “Sampai bagus” →
quality-loop(cap 3) - Before DONE → Conventions check including Responsive, Hierarchy, Typography, Control geometry, Motion, Shell, Landing; report
n/aor an explicit waiver when a gate does not apply - Evidence before taste — classify standards, project defaults, enterprise patterns, recommendations, heuristics, and inspiration (
evidence-policy.md) - Structural layout →
design-foundations: relationships before values; no universal column count, width, or density
Orchestration: session agent loads skills; agents do not call agents. See docs/pack-layers.md, docs/pillars.md.
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.