openbot-screen-layout
The default layout for every OpenBot configuration screen — PageShell and its prose/wide widths, PageSection and PageRows, Item row composition, the settings-row pattern where a summary and a chevron open a dialog, and the size and variant vocabulary. This is what a new screen looks like unless an instruction says otherwise. Use when adding or changing a screen under app/src/routes, adding a row to an admin or…
- installs 8w
- 0
- 30-day movement
- starts with the next reading
- Related entries
- 1
- Connections
- 0
A SKILL.md that teaches an AI coding agent OpenBot's default configuration-screen layout: PageShell, PageSection/PageRows, Item row composition, the settings-row pattern, and size/variant vocabulary. It includes procedures, a decision tree, pitfalls like the 15px rem trap, and troubleshooting for common row mistakes.
Reach for it when an agent is adding or changing a screen under app/src/routes so the result matches the project's default layout instead of inventing one.
Use it to
- Lay out a new configuration screen under app/src/routes
- Add a row to an admin or settings page
- Choose Button or Item sizes and row variants
- Lay out a dialog with DialogContent defaults
- Review a diff adding max-w-* or new spacing scales
For AI coding agents working on OpenBot configuration screens
- Host repository
- CopilotKit/OpenBot
- Host stars
- 5,107
- Host language
- TypeScript