Frontend architecture, state management, and lifecycle engineering skill. Governs React 19, Next.js, and Flutter with clean boundary isolation.
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 Architecture & State Management (`/frontend`)
> **Philosophy**: *Keep components pure. Isolate side effects. Manage state deliberately. Handle errors at the boundary. Never leak business logic into render trees.*
This skill enforces high-performance client architecture across React 19, Next.js App Router, TypeScript, and modern web applications.
---
## 1. Quick Navigation & Progressive Disclosure
| Resource Type | Document | Description |
| :--- | :--- | :--- |
| **Reference** | [references/rsc-and-action-boundaries.md](references/rsc-and-action-boundaries.md) | RSC rules, leaf client boundaries, Server Actions with Zod validation. |
| **Reference** | [references/client-state-lifecycle.md](references/client-state-lifecycle.md) | State scope matrix, optimistic UI updates via useOptimistic, URL state. |
| **Utility** | [scripts/verify_frontend_architecture.py](scripts/verify_frontend_architecture.py) | Scans components for inline fetch calls, bloated client boundaries, and missing error boundaries. |
---
## 2. Architecture Tiers & Component Separation
```mermaid
flowchart TD
subgraph Server["Server Layer"]
A["React Server Component (RSC)"]
…
The line at the top of this page pins the label git:20261029.1aa6bef, 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.
GET https://markdownregistry.com/api/v1/artifacts/art_44ggdiwfxyib3cm4
GET https://markdownregistry.com/api/v1/resolve?ref=darknecrocities/skillbuilder/.cursor/rules/frontend.mdc
GET https://markdownregistry.com/api/v1/blob/e42dafea44d1f63ca2ec4cea77bd16dbf6288cc38d3b2d1bb0830e758d55644f
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.
darknecrocities/skillbuilder · .cursor/rules/ai.mdc · Architect, implement, and maintain production AI systems, Gemini API agents, Antigravity multi-agent orchestration…
code-yeongyu/oh-my-openagent · packages/shared-skills/skills/frontend/SKILL.md · Builds, styles, and polishes anything drawn with HTML, CSS, or SVG: web UI, pages, components, HTML reports rendered to…
code-yeongyu/oh-my-openagent · packages/skills-loader-core/src/features/builtin-skills/frontend/SKILL.md · Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or…
oyadotai/oya-browser · .agents/skills/frontend/SKILL.md · Use when building or changing anything in the frontend: a page, a component, a layout, styling, copy on screen…
oyadotai/oya-browser · .claude/skills/frontend/SKILL.md · Use when building or changing anything in the frontend: a page, a component, a layout, styling, copy on screen…
nerds-odd-e/doughnut · .agents/skills/frontend/SKILL.md · Vue frontend — components, Vitest, generated API client, apiCallWithLoading, DaisyUI. Read this first for any frontend…