frontend-component-boundaries SKILL.md skillA
frontend-component-boundaries from annatchijova/skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add annatchijova/skills/frontend-component-boundaries@git:20260922.d250213Pins git:20260922.d250213 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- annatchijova/skills
- Path
frontend-component-boundaries/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260922.d250213, committed Sep 22, 2026
- Size
- 8,018 bytes
- Repository stars
- 9
- License
- a license file GitHub does not identify
Decide where to cut a frontend component's boundary by cohesion, behavior, semantics, reuse, and shared reasons to change — not by a mechanical "one responsibility per component" rule that produces ceremonial fragmentation. Use whenever creating a new component, splitting or merging existing ones, or reviewing a PR that adds/removes component files. Trigger on "should this be its own component", "this component is doing too much", "prop drilling", "too many props", "extract a component…
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Frontend Component Boundaries "One responsibility per component" sounds precise and is actually underspecified — a component that renders a labeled input with validation has "one responsibility" by any reasonable reading, and so does a component that renders an entire checkout form. The rule doesn't tell you which one is right; it just supplies false confidence for whichever granularity you picked first. This skill replaces the slogan with the actual criteria. Composes with the library: - **frontend-performance-budgets** — the client/server component split in RSC frameworks is a boundary decision governed by *this* skill, whose performance consequence is covered *there* - **resilient-ui-states** — where a loading/error/empty state machine lives (owned by the fetching component vs. passed down) is a boundary decision - **non-overwhelming-ux** — a boundary that fragments one user-perceived task across many components can still be correct code architecture while producing a confusing, disjointed UI; keep the two judgments separate --- ## Methodological decision: five criteria, not one rule There is no single normative source for component granularity — this is a …
Read the whole file at its exact version.
How to install
mdr add annatchijova/skills/frontend-component-boundaries@sha256:d409ca77c281ab96The line at the top of this page pins the label git:20260922.d250213, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_4bt5ixjz6zlbuugz)
1 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Sep 22, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (8018 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
annatchijova/skills · 9 stars · license a license file GitHub does not identify · pushed 2026-11-02 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_4bt5ixjz6zlbuugz GET https://markdownregistry.com/api/v1/resolve?ref=annatchijova/skills/frontend-component-boundaries GET https://markdownregistry.com/api/v1/blob/d409ca77c281ab96ad8b0a7f67daea5474a61ef43f040a6b624413aeb20d65ce
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.