Skip to content

Design Agents for Owner Community - #309

Open
OliviaKnestaut wants to merge 3 commits into
mainfrom
open-pencil-mcp-setup
Open

Design Agents for Owner Community#309
OliviaKnestaut wants to merge 3 commits into
mainfrom
open-pencil-mcp-setup

Conversation

@OliviaKnestaut

@OliviaKnestaut OliviaKnestaut commented Aug 4, 2026

Copy link
Copy Markdown

Summary by Sourcery

Set up an agent-based workflow for OwnerCommunity design work, including audit, implementation, and orchestration agents, while updating a couple of dependency overrides in the pnpm workspace.

New Features:

  • Introduce a non-invocable design-audit agent for reviewing UI compliance with OwnerCommunity design standards.
  • Introduce a non-invocable implementer-ui agent for implementing designs from OpenPencil/Figma using Ant Design and Tailwind in the OwnerCommunity app.
  • Add an orchestrator-design agent to coordinate design audits and UI implementation workflows across subagents.

Enhancements:

  • Document detailed workflows, server lifecycle management, browser session handling, and delegation rules for the new design-related agents.

Build:

  • Bump brace-expansion from 5.0.8 to 5.0.9 and fast-uri from 4.1.1 to 4.1.2 in pnpm workspace overrides.

Documentation:

  • Add comprehensive agent instruction documents under .github/agents for design audit, UI implementation, and orchestration workflows.

@OliviaKnestaut
OliviaKnestaut requested a review from a team August 4, 2026 15:17
@sourcery-ai

sourcery-ai Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Reviewer's Guide

Introduces three GitHub agent definition files to orchestrate design auditing and UI implementation for the OwnerCommunity app, and slightly updates workspace dependency overrides for brace-expansion and fast-uri.

Sequence diagram for the design audit and implementation workflow

sequenceDiagram
    actor User
    participant orchestrator_design
    participant design_audit
    participant implementer_ui

    User->>orchestrator_design: provide_request

    %% STEP 1: initial design-audit
    orchestrator_design->>design_audit: agent(analyze_and_plan)
    design_audit-->>orchestrator_design: audit_plan_and_checklist

    %% STEP 2: initial implementer
    orchestrator_design->>implementer_ui: agent(initial_implementation)
    implementer_ui-->>orchestrator_design: implementation_result

    %% STEP 3: review design-audit
    orchestrator_design->>design_audit: agent(review_implementation)
    design_audit-->>orchestrator_design: review_verdict

    alt issues_found
        %% STEP 4: feedback implementer
        orchestrator_design->>implementer_ui: agent(fix_review_findings)
        implementer_ui-->>orchestrator_design: feedback_fix_result
    else pass
        orchestrator_design-->>User: report_pass_status
    end
Loading

File-Level Changes

Change Details Files
Add a non-user-invocable design-audit agent that can read and inspect the running OwnerCommunity UI against DESIGN.md and project design instructions, producing structured design audit reports and owning app/browser lifecycle coordination for audits.
  • Define front-matter metadata for the design-audit agent including name, description, model, tools, and invocation constraints.
  • Specify detailed application server lifecycle management, including how to start, monitor, and restart the dev server at ownercommunity.localhost using detached pnpm commands.
  • Establish strict rules for using a shared headed agent-browser session, including recovery behavior, viewport constraints, and session reuse.
  • Require use of mock OIDC users from apps/ui-community/mock-oidc.users.json for authenticated flows without hardcoding credentials.
  • Declare DESIGN.md as a read-only design source of truth and mandate auditing styles against its tokens and component-role mapping.
  • Lay out a multi-step audit process including context reading, delegation to subagents, OpenPencil/Ant Design CLI usage, and a structured issue output format with severity levels.
  • Enumerate design, usability, accessibility, and architecture principles and “always report” categories (hardcoded styles, non-tokenized design values, etc.) to guide audits.
.github/agents/design-audit.md
Add a non-user-invocable implementer-ui agent that implements UI from OpenPencil/Figma frames using Ant Design v6 and Tailwind, managing server and browser lifecycle and following project conventions.
  • Define front-matter metadata for the implementer-ui agent including name, description, model, tools, and invocation constraints.
  • Describe how the agent must manage the OwnerCommunity dev server lifecycle and reuse the shared headed agent-browser session for visual verification and screenshots.
  • Outline a mission and process for implementing scoped UI changes based on designs and existing patterns, including mandatory build/test/lint after edits.
  • Specify what the agent may and may not do, including prohibitions against changing scope, refactoring unrelated code, editing DESIGN.md, or running git commit/push.
  • Require installation and usage of OpenPencil, agent-browser, and design.md CLIs with JSON-formatted output, plus reading instruction files under .github/instructions and apps/ui-community before coding.
  • Document UI principles (molecular design, semantic styling, tokens-first, accessibility, responsiveness) and coding conventions (TypeScript strictness, file naming, domain patterns, imports).
  • Define subagent delegation rules, error-handling, and a detailed definition of done focused on visual parity, token-based styling, reusability, and accessibility landmarks.
.github/agents/implementer-ui.agent.md
Add an orchestrator-design agent that coordinates a fixed, multi-step workflow between design-audit and implementer agents without directly touching source code.
  • Define front-matter metadata for the orchestrator-design agent including its description as a pure workflow controller, tools, and subagents list.
  • Specify that the orchestrator must manage application server health and the shared headed agent-browser session lifecycle, including an initial session reset and constrained recovery commands.
  • Enforce hard constraints that the orchestrator cannot read source code, run git commands, or perform work directly, and must delegate all tasks to subagents via agent tool calls.
  • Describe a strict single review cycle workflow (initial design-audit, implementer, review design-audit, optional feedback implementer) with ordering, retry limits, and no additional cycles.
  • Provide detailed step-by-step prompts and instructions for what to send to each subagent at each stage, including use of DESIGN.md and the audit role map for review.
  • Constrain execute usage to specific agent-browser and server lifecycle commands and define project context (Cellixjs monorepo with pnpm and Node 22).
.github/agents/orchestrator-design.md
Update pnpm workspace dependency overrides to slightly newer versions for brace-expansion and fast-uri.
  • Bump brace-expansion override version from 5.0.8 to 5.0.9.
  • Bump fast-uri override version from ^4.1.1 to ^4.1.2.
pnpm-workspace.yaml

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 5 issues, and left some high level feedback:

Fixed security issues:

  • fast-uri (link)

  • The orchestrator agent lists agents: ['design-audit', 'implementer'] but the implemented UI agent is named implementer-ui, so update the agents array or the agent name to keep orchestration working.

  • The setup step uses which design.md || pnpm add -g @google/design.md, but DESIGN.md is a project file rather than an executable, so replace the which check with a filesystem check under the repo root to avoid unnecessary global installs.

Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The orchestrator agent lists `agents: ['design-audit', 'implementer']` but the implemented UI agent is named `implementer-ui`, so update the agents array or the agent name to keep orchestration working.
- The setup step uses `which design.md || pnpm add -g @google/design.md`, but `DESIGN.md` is a project file rather than an executable, so replace the `which` check with a filesystem check under the repo root to avoid unnecessary global installs.

## Individual Comments

### Comment 1
<location path=".github/agents/design-audit.md" line_range="26-29" />
<code_context>
+fresh headed session. If running independently and an existing session's headed
+state cannot be confirmed, close only that named session once and reopen it with
+`agent-browser --session ownercommunity-desktop open --headed https://ownercommunity.localhost/`;
+keep `--headed` before the URL. Do not rely on `--headed` to convert an existing
+After a fresh headed session is available, leave it open and reuse it.
+
+Use `agent-browser --session ownercommunity-desktop` for every browser command so the
</code_context>
<issue_to_address>
**issue (typo):** The sentence about `--headed` is truncated and missing a noun (e.g., "session"), making it grammatically incomplete.

This line is immediately followed by `After a fresh headed session is available...`, so it reads as cut off. Please complete it, e.g. `Do not rely on --headed to convert an existing headless session`, to keep the instructions clear and unambiguous.

```suggestion
state cannot be confirmed, close only that named session once and reopen it with
`agent-browser --session ownercommunity-desktop open --headed https://ownercommunity.localhost/`;
keep `--headed` before the URL. Do not rely on `--headed` to convert an existing headless session;
create a new headed session instead.
After a fresh headed session is available, leave it open and reuse it.
```
</issue_to_address>

### Comment 2
<location path=".github/agents/orchestrator-design.md" line_range="8" />
<code_context>
+  You control workflow by delegating tasks to specialized subagents.
+model: kimi-k2.7-code
+tools: ['agent', 'execute']
+agents: ['design-audit', 'implementer']
+---
+
</code_context>
<issue_to_address>
**issue (bug_risk):** Front matter references an `implementer` agent, but the defined agent is named `implementer-ui`, which may break delegation.

This config lists an `implementer` agent, but the only agent you’ve added is `implementer-ui.agent.md` with `name: implementer-ui`. Unless another `implementer` agent exists, this mismatch will prevent the orchestrator from calling the UI agent. Please either rename the agent to `implementer` or update the config (and inline references) to `implementer-ui` for consistency.
</issue_to_address>

### Comment 3
<location path=".github/agents/design-audit.md" line_range="136" />
<code_context>
+
+Before auditing any code, read the relevant instruction files:
+
+- `DESIGN.md` — general agent instructions for designing using intealth branding
+
+### UI Changes
</code_context>
<issue_to_address>
**suggestion (typo):** Possible typo in the brand name "intealth"; consider capitalizing or confirming the intended spelling.

If "intealth" is a proper brand name, update it to "Intealth"; if the lowercase form is intentional, then no change is needed.

```suggestion
- `DESIGN.md` — general agent instructions for designing using Intealth branding
```
</issue_to_address>

### Comment 4
<location path=".github/agents/implementer-ui.agent.md" line_range="158" />
<code_context>
+
+Before auditing any code, read the relevant instruction files:
+
+- `DESIGN.md` — general agent instructions for designing using intealth branding
+
+### UI Changes
</code_context>
<issue_to_address>
**suggestion (typo):** Same potential "intealth" brand-name typo appears here; align with the intended capitalization.

This line mirrors the one in `design-audit.md` and also uses `intealth branding`. If `Intealth` is a proper name, update the capitalization/spelling here to keep branding consistent across documents.

Suggested implementation:

```
- `DESIGN.md` — general agent instructions for designing using Intealth branding

```

1. Search the repository (especially other agent and instruction markdown files, e.g., `design-audit.md`) for "intealth" and standardize to "Intealth" wherever it refers to the brand name.
2. If there is a documented branding guideline (e.g., in `DESIGN.md`), confirm the canonical capitalization ("Intealth") and keep all future additions consistent with it.
</issue_to_address>

### Comment 5
<location path=".github/agents/design-audit.md" line_range="82" />
<code_context>
+
+## Mission
+
+You audit and critically review the implemented UI against the OpenPencil designs, DESIGN.md and product quality bars. Assume defects exist until proven otherwise.
+
+Before first use, check if Open Pencil, agent-browser, and DESIGN.md are installed. If not, install them automatically:
</code_context>
<issue_to_address>
**nitpick (typo):** Inconsistent naming of "OpenPencil" vs "Open Pencil" across documents; consider standardizing.

This section mixes `OpenPencil designs` and `Open Pencil`. Please choose one naming convention and use it consistently throughout the docs so it’s clear they refer to the same tool.

Suggested implementation:

```
You audit and critically review the implemented UI against the OpenPencil designs, DESIGN.md and product quality bars. Assume defects exist until proven otherwise.

Before first use, check if OpenPencil, agent-browser, and DESIGN.md are installed. If not, install them automatically:

OpenPencil:

```

Search the rest of `.github/agents/design-audit.md` (and related docs if they reference this agent) for any remaining occurrences of `Open Pencil` and standardize them to `OpenPencil` to keep the naming convention consistent throughout the documentation.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment thread .github/agents/design-audit.md Outdated
Comment thread .github/agents/orchestrator-design.md Outdated
Comment thread .github/agents/design-audit.md Outdated
Comment thread .github/agents/implementer-ui.agent.md Outdated
Comment thread .github/agents/design-audit.md Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants