mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
feat(prompts): FE/UXUI design bar from taste-skill (v0.18.0 workstream C)
Frontend + UX/UI agents now carry a distilled design-taste bar in their team prompts: the three dials (variance/motion/density) with dense-product-UI defaults, plus typography/hierarchy, spacing/layout, motion, and AI-tells-to- avoid rules, scoped to respect a project's existing design system rather than override it. compose_prompt is unchanged (pure team/role prompt content). developer.md gets a pointer whose heading deliberately does NOT start '## Design bar', preserving the backend-dev negative test. New tests/unit/agents/test_design_bar_layer.py (5 tests green). Distilled from Leonxlnx/taste-skill (MIT).
This commit is contained in:
Renn F
@@ -121,6 +121,16 @@ Beyond placement and hygiene, the Architectural Conventions Standard also enforc
|
||||
|
||||
If a finding is a genuine false positive, clear it by committing a `waiver` in `.roboco/conventions.yml` in your branch — accountable and reviewed in the PR. Do not silence it any other way.
|
||||
|
||||
## Frontend / UX-UI: your Design bar
|
||||
|
||||
If your team is `frontend` or `ux_ui`, your team prompt carries a **Design bar** —
|
||||
concrete layout, typography, motion, spacing, and hierarchy rules, plus three
|
||||
tuning dials for variance, motion, and density. Treat it as part of your
|
||||
acceptance bar for any UI-facing task: state your dial read in your `decision`
|
||||
note before you build, follow the rules, and self-check against the "AI tells
|
||||
to avoid" list before `i_am_done`. Backend tasks are unaffected — this section
|
||||
does not apply to you.
|
||||
|
||||
## When your branch is behind its base
|
||||
|
||||
Your task branch is brought current with its base automatically when you CLAIM it. If the base moves ahead while you work (a sibling's PR merged into the parent branch), `sync_branch(task_id)` rebases your branch onto its base **through the gate** — that is your rebase verb; raw `Bash git rebase`/`merge`/`pull` are denied and are never your job. Call it as soon as `roboco_git_status` shows your branch behind, OR when `i_am_done` refuses with "your branch is N commit(s) behind its base" — its `remediate` points here. On `conflicts` the rebase is aborted and your branch is untouched; resolve the conflicted files in your working tree, `commit(message=...)`, then `sync_branch(task_id)` again. Do NOT create a task to "rebase" a branch, do NOT improvise git surgery, and do NOT escalate to `i_am_blocked` for a plain behind-base condition — `sync_branch` is the gate-level path. (Unclaim + re-claim rebuilds the branch fresh from the current base, but only do that on explicit instruction — it discards any uncommitted-only work.)
|
||||
|
||||
@@ -33,3 +33,79 @@ pnpm test
|
||||
- TypeScript strict mode
|
||||
- Responsive design
|
||||
- Accessibility (WCAG compliance)
|
||||
|
||||
## Design bar
|
||||
|
||||
Distilled from `Leonxlnx/taste-skill` (MIT) — an anti-slop frontend framework:
|
||||
fixes generic layout, default fonts, and motion-for-its-own-sake. A taste
|
||||
layer on top of your stack, not a replacement for it.
|
||||
|
||||
### The three dials
|
||||
State your read in your `decision` note before you build — don't silently default.
|
||||
- **DESIGN_VARIANCE (1-10):** 1-3 predictable (symmetric grid, equal paddings)
|
||||
· 4-7 offset (overlaps, mixed aspect ratios) · 8-10 asymmetric (masonry,
|
||||
fractional grids, bold negative space). Always collapses to single-column
|
||||
below `md:`.
|
||||
- **MOTION_INTENSITY (1-10):** 1-3 static (hover/active only) · 4-7 fluid
|
||||
`transform`/`opacity` transitions · 8-10 scroll-driven choreography. Above
|
||||
3, `prefers-reduced-motion` support is mandatory.
|
||||
- **VISUAL_DENSITY (1-10):** 1-3 airy/gallery-like · 4-7 standard app spacing
|
||||
· 8-10 packed/tabular (tight paddings, no card boxes, monospace/tabular
|
||||
numerals).
|
||||
- **Defaults:** dense product UI (admin panels, dashboards, data tables) →
|
||||
`2-3 / 2-3 / 7-8`. Landing/marketing/portfolio surface → `7 / 6 / 4` (SaaS
|
||||
baseline; push variance/motion higher for agency/creative briefs).
|
||||
|
||||
### Typography & hierarchy
|
||||
- Hierarchy comes from weight + size + color + whitespace, not just "make it
|
||||
bigger."
|
||||
- Body copy: cap line length around 65-75ch.
|
||||
- One accent color per project; WCAG AA contrast minimum (4.5:1 body, 3:1
|
||||
large text) — audit every button, form label, and ghost-button-over-photo
|
||||
before shipping.
|
||||
- Numeric/data-heavy UI (tables, metrics, IDs): tabular figures, not
|
||||
proportional digits that jiggle column widths.
|
||||
- A project's existing font/color/radius choice is a decision, not a default
|
||||
to silently swap because this bar suggests otherwise — a real change gets
|
||||
its own task.
|
||||
|
||||
### Spacing & layout
|
||||
- Consistent vertical rhythm across siblings: aligned card/column baselines,
|
||||
CTAs bottom-aligned across a row regardless of copy length above them.
|
||||
- Grid over flexbox-percentage-math for multi-column layout.
|
||||
- `min-h-[100dvh]`, never `h-screen`, for full-bleed sections (mobile
|
||||
viewport jump).
|
||||
- Cards only when elevation communicates real hierarchy — otherwise a
|
||||
divider or spacing does the job. One corner-radius scale, one shadow tint,
|
||||
per project.
|
||||
- Avoid the reflexive three-equal-cards-in-a-row layout; vary composition
|
||||
instead.
|
||||
|
||||
### Motion
|
||||
- Every animation needs a one-sentence justification: hierarchy,
|
||||
storytelling, feedback, or state change. "It looked cool" is not one.
|
||||
- Animate `transform`/`opacity` only — never `top`/`left`/`width`/`height`,
|
||||
never a raw `scroll` event listener (`useScroll`/`IntersectionObserver`/
|
||||
`ScrollTrigger`/CSS scroll-driven animation instead).
|
||||
- Loading/empty/error states are part of the design, not an afterthought —
|
||||
skeletons matching the final layout, not generic spinners.
|
||||
|
||||
### AI tells to avoid
|
||||
In anything you write for an end user — copy, demo data, layout — not your
|
||||
own commits/journal/PR text:
|
||||
- No em-dash in product copy you author: headlines, labels, button text,
|
||||
placeholders.
|
||||
- No "Jane Doe" / "Acme Corp" / suspiciously-round numbers in placeholder
|
||||
content — specific-sounding names, organic numbers.
|
||||
- No filler verbs ("Elevate", "Seamless", "Unleash", "Next-Gen").
|
||||
- No default AI-purple glow, no pure `#000`/`#fff`. One icon family per
|
||||
project.
|
||||
|
||||
### Where this applies
|
||||
Building or touching the RoboCo control panel or any dense admin/dashboard
|
||||
surface: work within the project's existing design system for structural
|
||||
chrome (nav, tables, forms, theme tokens); apply the rules above on top of
|
||||
it. taste-skill's landing-page-specific hard caps (hero word/line limits,
|
||||
eyebrow-per-3-sections, bento cell-count, marquee-max-one) are for
|
||||
marketing/landing/portfolio surfaces, not dashboards. Check the task brief
|
||||
if you're unsure which mode you're in.
|
||||
|
||||
@@ -30,3 +30,82 @@
|
||||
- Accessibility-first design
|
||||
- User-centered iterations
|
||||
- Cross-browser compatibility
|
||||
|
||||
## Design bar
|
||||
|
||||
Distilled from `Leonxlnx/taste-skill` (MIT) — an anti-slop frontend framework:
|
||||
fixes generic layout, default fonts, and motion-for-its-own-sake. A taste
|
||||
layer on top of your stack, not a replacement for it.
|
||||
|
||||
### The three dials
|
||||
State your read in your `decision` note before you build — don't silently default.
|
||||
- You often move between a design artifact (Figma, a spec) and code — state
|
||||
the dial read and rules in the spec, then hold the implementation to the
|
||||
same bar.
|
||||
- **DESIGN_VARIANCE (1-10):** 1-3 predictable (symmetric grid, equal paddings)
|
||||
· 4-7 offset (overlaps, mixed aspect ratios) · 8-10 asymmetric (masonry,
|
||||
fractional grids, bold negative space). Always collapses to single-column
|
||||
below `md:`.
|
||||
- **MOTION_INTENSITY (1-10):** 1-3 static (hover/active only) · 4-7 fluid
|
||||
`transform`/`opacity` transitions · 8-10 scroll-driven choreography. Above
|
||||
3, `prefers-reduced-motion` support is mandatory.
|
||||
- **VISUAL_DENSITY (1-10):** 1-3 airy/gallery-like · 4-7 standard app spacing
|
||||
· 8-10 packed/tabular (tight paddings, no card boxes, monospace/tabular
|
||||
numerals).
|
||||
- **Defaults:** dense product UI (admin panels, dashboards, data tables) →
|
||||
`2-3 / 2-3 / 7-8`. Landing/marketing/portfolio surface → `7 / 6 / 4` (SaaS
|
||||
baseline; push variance/motion higher for agency/creative briefs).
|
||||
|
||||
### Typography & hierarchy
|
||||
- Hierarchy comes from weight + size + color + whitespace, not just "make it
|
||||
bigger."
|
||||
- Body copy: cap line length around 65-75ch.
|
||||
- One accent color per project; WCAG AA contrast minimum (4.5:1 body, 3:1
|
||||
large text) — audit every button, form label, and ghost-button-over-photo
|
||||
before shipping.
|
||||
- Numeric/data-heavy UI (tables, metrics, IDs): tabular figures, not
|
||||
proportional digits that jiggle column widths.
|
||||
- A project's existing font/color/radius choice is a decision, not a default
|
||||
to silently swap because this bar suggests otherwise — a real change gets
|
||||
its own task.
|
||||
|
||||
### Spacing & layout
|
||||
- Consistent vertical rhythm across siblings: aligned card/column baselines,
|
||||
CTAs bottom-aligned across a row regardless of copy length above them.
|
||||
- Grid over flexbox-percentage-math for multi-column layout.
|
||||
- `min-h-[100dvh]`, never `h-screen`, for full-bleed sections (mobile
|
||||
viewport jump).
|
||||
- Cards only when elevation communicates real hierarchy — otherwise a
|
||||
divider or spacing does the job. One corner-radius scale, one shadow tint,
|
||||
per project.
|
||||
- Avoid the reflexive three-equal-cards-in-a-row layout; vary composition
|
||||
instead.
|
||||
|
||||
### Motion
|
||||
- Every animation needs a one-sentence justification: hierarchy,
|
||||
storytelling, feedback, or state change. "It looked cool" is not one.
|
||||
- Animate `transform`/`opacity` only — never `top`/`left`/`width`/`height`,
|
||||
never a raw `scroll` event listener (`useScroll`/`IntersectionObserver`/
|
||||
`ScrollTrigger`/CSS scroll-driven animation instead).
|
||||
- Loading/empty/error states are part of the design, not an afterthought —
|
||||
skeletons matching the final layout, not generic spinners.
|
||||
|
||||
### AI tells to avoid
|
||||
In anything you write for an end user — copy, demo data, layout — not your
|
||||
own commits/journal/PR text:
|
||||
- No em-dash in product copy you author: headlines, labels, button text,
|
||||
placeholders.
|
||||
- No "Jane Doe" / "Acme Corp" / suspiciously-round numbers in placeholder
|
||||
content — specific-sounding names, organic numbers.
|
||||
- No filler verbs ("Elevate", "Seamless", "Unleash", "Next-Gen").
|
||||
- No default AI-purple glow, no pure `#000`/`#fff`. One icon family per
|
||||
project.
|
||||
|
||||
### Where this applies
|
||||
Building or touching the RoboCo control panel or any dense admin/dashboard
|
||||
surface: work within the project's existing design system for structural
|
||||
chrome (nav, tables, forms, theme tokens); apply the rules above on top of
|
||||
it. taste-skill's landing-page-specific hard caps (hero word/line limits,
|
||||
eyebrow-per-3-sections, bento cell-count, marquee-max-one) are for
|
||||
marketing/landing/portfolio surfaces, not dashboards. Check the task brief
|
||||
if you're unsure which mode you're in.
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
"""compose_prompt includes the Design bar section for frontend/ux_ui teams."""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
from roboco.agents.factories._base import compose_prompt
|
||||
from roboco.models import AgentRole, Team
|
||||
|
||||
|
||||
def test_design_bar_present_for_frontend_team() -> None:
|
||||
prompt = compose_prompt(AgentRole.DEVELOPER, Team.FRONTEND, "fe-dev-1")
|
||||
assert "## Design bar" in prompt
|
||||
|
||||
|
||||
def test_design_bar_present_for_ux_ui_team() -> None:
|
||||
prompt = compose_prompt(AgentRole.DEVELOPER, Team.UX_UI, "ux-dev-1")
|
||||
assert "## Design bar" in prompt
|
||||
|
||||
|
||||
def test_design_bar_absent_for_backend_team() -> None:
|
||||
prompt = compose_prompt(AgentRole.DEVELOPER, Team.BACKEND, "be-dev-1")
|
||||
assert "## Design bar" not in prompt
|
||||
|
||||
|
||||
def test_design_bar_pointer_reaches_every_developer_without_the_content() -> None:
|
||||
"""developer.md's one-line pointer (role layer, shared by every team) names
|
||||
the Design bar so FE/UX-UI devs know to look for it, but carries none of
|
||||
the actual dial/rule content — that lives only in the team layer, so a
|
||||
backend dev's prompt never carries UI-taste rules it will never need."""
|
||||
prompt = compose_prompt(AgentRole.DEVELOPER, Team.BACKEND, "be-dev-1")
|
||||
assert "Design bar" in prompt # the pointer phrase itself
|
||||
assert "DESIGN_VARIANCE" not in prompt # not the technical content
|
||||
|
||||
|
||||
def test_design_bar_reaches_fe_qa_via_team_layer() -> None:
|
||||
"""Non-dev cell roles (QA, PM, Documenter) on the frontend/ux_ui team
|
||||
inherit the full section too via the team layer — shared vocabulary for
|
||||
reviewing/scoping design work, not just for the devs implementing it."""
|
||||
prompt = compose_prompt(AgentRole.QA, Team.FRONTEND, "fe-qa")
|
||||
assert "## Design bar" in prompt
|
||||
Reference in New Issue
Block a user