baro7
npx skills add https://github.com/barocss/baro7 --skill baro7
Agent 安装分布
Skill 文档
baro7 â Application Development & UI Structure
Why: (1) Non-breaking UI â Data and view may change; layout behavior and app structure must not break. (2) Token use â This skill is kept compact. Use SKILL.md as primary context; open docs/ only for the scope you’re working on (e.g. react-shadcn-ui-7layers.md when generating React/shadcn UI, accessibility.md when adding forms, application-development-guidelines.md when doing full-stack).
Principle
- Structure (L1âL5 or Layer 1â2): Do not change for “add field”, “bind data”, “change copy”. Change only when the user explicitly asks for layout/structure changes.
- Content (L6âL7 or Layer 3): Change freely for features and data binding. Keep all wrappers and layout structure intact.
Three-Layer Model (quick reference)
| Layer | Contents | When to touch |
|---|---|---|
| 1. Core | App shell, sidebar, header, tab list, routing, layout primitives (ScrollRegion, FillLayout, etc.) | Only when user asks for layout/structure change. |
| 2. Screen structure | Per-screen scroll/fill wrappers (flex-1, min-h-0, overflow-y-auto) | Do not remove or weaken when adding content. |
| 3. Content/data | Buttons, cards, inputs, tables, labels, data binding | Modify here for features and data. |
7-layer (L1âL7) detail: ui-7-layers.md.
Layout Rules (reference)
- Scroll: Scrollable region needs
min-h-0(flex child) andoverflow-y-auto. Parent constrains height (e.g.flex-1 flex flex-col min-h-0 overflow-hidden). - Fill: Filling region needs
flex-1and in flex contextmin-h-0. - Do not: Use
100vhorcalc(100vh - ...)for content height. (Why and alternatives: layout-research.)
Forbidden (unless user asks for layout change)
- Remove or replace layout primitives with plain divs.
- Remove or alter scroll/fill wrappers (flex-1, min-h-0, overflow-y-auto, overflow-hidden).
- Refactor entire screen layout when the request is “add this button” or “change this field.”
- Create a new screen from scratch if a screen template exists; copy the template and fill content only.
Feature Flow (full stack)
When adding a feature (API + data + UI): Define â API â Data â UI (Layer 3/L7 only). New screen: copy template, fill content. For “add button” or “bind field” only: change UI (Layer 3 / L7) only.
Agent Roles (when splitting work)
| Role | Focus |
|---|---|
| Spec | Feature spec, API contract, implementation checklist. |
| API | Backend only (routes, validation, errors). No UI/schema. |
| Data | Schema, migrations only. No API handlers/UI. |
| UI | Frontend only, Layer 3/L7. Follow UI guidelines. |
| Implementation | Full feature: define â API â data â UI. |
| Test / E2E / GitHub / Docs / Review | As named. |
Invoke with “Act as Role ⦔ and stay within that role’s scope.
Expert pillars (stable apps)
| Pillar | Rule | Detail |
|---|---|---|
| UI structure | L1âL5 untouched for content. | agent-ui-structure-behavior-guidelines, layer-1-2-3-guide, ui-7-layers |
| React/shadcn UI | 7-layer mapping; generate L5âL6âL7 only for content. | react-shadcn-ui-7layers |
| API + data | Validate, errors, schema + migrations. | application-development-guidelines §2â3 |
| Logging and errors | Logs + safe messages; no secrets. | application-development-guidelines §6 |
| Security | Auth logging, HTTPS/headers, rate limit if public. | application-development-guidelines §7 |
| Accessibility | Labels, semantics, keyboard, alt. | accessibility (see accessibility-research) |
| CI/CD and deploy | Lint/test in CI; deploy + rollback doc. | application-development-guidelines §8 |
| Performance | LCP/INP/CLS; lazy load; no regression. | application-development-guidelines §9 (see performance-research) |
| Documentation | README + §7 for run/test/deploy. | application-development-guidelines §10, AGENTS.md §7 |
Project-specific
When the project has docs/agent-ui-structure-behavior-guidelines.md with §8 Project-specific filled: follow those paths (layout primitives, screen template, L1âL2 scope). Otherwise infer from codebase: root/layout = Layer 1; per-screen wrappers with flex/overflow = Layer 2; everything inside = Layer 3. To save tokens: read SKILL.md + §7; load other docs only for the current task (UI / API / a11y / etc.).
More detail
Full guides and checklists: agent-ui-structure-behavior-guidelines, application-development-guidelines, react-shadcn-ui-7layers (React/shadcn + 7 layers), accessibility, layer-1-2-3-guide, ui-7-layers, agents-application-project, stable-app-checklist. Research (why/when/alternatives): layout-research, accessibility-research, responsive-research, theming-research, performance-research, forms-research, react-shadcn-research. Load by scope to save tokens.
Install: skills.sh â npx skills add barocss/baro7