frontend-invariants
Skill4 starsChanged 12 days agoMITView on GitHub
Apply stack-independent frontend invariants. Use when writing or reviewing React, TypeScript, or UI code across routing, state, data, and design systems.
In this repository117 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- accessibilitySkill
- agent-watchdogSkill
- aipSkill
- animateSkill
- animation-performanceSkill
- animation-vocabularySkill
- ask-benSkill
- ask-sonnerSkill
- bazelSkill
- bend-lawsSkill
- blast-radiusSkill
- brain-dumpSkill
- break-uiSkill
- ci-fixesSkill
- codebase-designSkill
- codex-compatSkill
- codexSkill
- commit-push-prSkill
- connect-querySkill
- create-verification-skillSkill
- demoSkill
- development-lifecycleSkill
- diagnosing-bugsSkill
- docsSkill
- dogfoodSkill
- domain-modelingSkill
- e2e-testingSkill
- effect-tsSkill
- effect-v3-to-v4Skill
- efficient-frontierSkill
- eli5Skill
- excalidraw-diagramSkill
- extend-harnessSkill
- frontend-starter-kitSkill
- full-sendSkill
- gesturesSkill
- golang-reviewSkill
- golangSkill
- goSkill
- grillingSkill
- handoffSkill
- hook-auditSkill
- implement-specSkill
- improve-animationsSkill
- improve-codebase-architectureSkill
- improveSkill
- launchdarklySkill
- lie-detectorSkill
- maintain-verification-skillSkill
- make-pr-easy-to-reviewSkill
- mobile-nativeSkill
- plan-arbiterSkill
- plow-aheadSkill
- postgresqlSkill
- primeSkill
- productSkill
- protobufSkill
- prototypeSkill
- The first 60 shown.
The file
We split this skill into the rules it gives an agent
6 rules. About 0 are common, 4 are distinctive, and 2 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.
2
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 20
Never lie: no fake defaults, lossy display of undecodable data, or truthiness hiding numeric zero.
- Distinctive: line 21
Put machine truth beside human labels where operators need it.
- Very specific: line 35
Use color/spacing/type tokens.
- Distinctive: line 37
Search first; fix APIs repeatedly misused by consumers.
- Distinctive: line 50
Keep PRs single-purpose; migrations migrate.
- Very specific: line 51
Use precise names: no route/file/label acronyms.
≈ “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
For interface, type or shared-state changes, read Poteto.
Override conflicting /stack-registry mechanics. Fix at source; suppress only with a same-line reason: escapes train later sessions.
For TypeScript assertions/widened contracts, use anti-slop: preserve type evidence; safety comments do not justify casts.
Imports: checks.
Rendering
- Never lie: no fake defaults, lossy display of undecodable data, or truthiness hiding numeric zero. Degraded states name possible causes, preserve the reported reason, and offer retry.
- Put machine truth beside human labels where operators need it; derive labels, never present keys as labels.
- Hide unready features; reserve loading layout to prevent CLS.
- Handle loading, empty, error, no-permission, disabled and stuck states. Hide empty chrome only on authoritative loaded data: zero diff totals or disabled actions do not prove no work. Preserve errors, untracked work, progress and recovery.
State
- URL holds shareable tabs/filters/sort/page; local/session storage holds preferences; server cache holds server data; component state dies with its component.
- Push history on section entry; replace within sections.
- Scope async state by environment/org/user; await teardown before navigation. Abort stale work or use last-write-wins; read defaults after providers resolve.
Editable server defaults: read override guidance.
Design system
- Use color/spacing/type tokens; round one-offs to scale, never hardcode existing tokens.
- Fix shared components at source; no forks, inline restyles, or deep selectors. Keep feature rows local, not as single-consumer primitive variants. Verify computed styles across layers and combined flag/theme/interaction variants; low specificity alone does not guarantee utility precedence. Temporary forks need a named defect and upstream ticket.
- Search first; fix APIs repeatedly misused by consumers.
Interaction
- Buttons act; links navigate and support command-click. Disabled controls expose a reason.
- Destructive flows fail closed: enable confirmation only after a fresh zero-reference check; X/Escape/Enter/back respect dirty and in-flight state.
- Motion only clarifies state; honor
prefers-reduced-motion.
Process
- Mock minimally at boundary seams and only for unhappy paths; factories build real types by assignment, not deep merge.
- Tests prove user-caused side effects, not rendering; wait for conditions, never durations.
- Migrations mechanically freeze old patterns. Feature-flag removal is definition of done.
- Keep PRs single-purpose; migrations migrate; deferrals link tickets; dependency bumps and registry syncs ship separately.
- Use precise names: no route/file/label acronyms; booleans are predicates.
- Cite owners for domain inheritance, units, names and SLAs; never assume UI truth.
- Security: no secrets in history; redact logs/replays/dumps; authz fails closed; reads never mutate; audit URL persistence leaks.
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.