compliance audit skill based on instruction files - #320
Conversation
Reviewer's GuideAdds a reusable UI compliance-audit skill and a non-invocable design-audit agent wired to Owner Community’s new design-system instructions, and refreshes dependency overrides/lockfile to address security advisories and keep tooling aligned with the design tokens and audit workflow. Sequence diagram for design-audit agent runtime audit flowsequenceDiagram
actor Orchestrator
participant DesignAuditAgent
participant AppServer as pnpm_dev_server
participant AgentBrowser as agent-browser_session
participant DesignSystem as DESIGN_md
Orchestrator ->> DesignAuditAgent: invoke design-audit
DesignAuditAgent ->> DesignAuditAgent: check https://ownercommunity.localhost/
alt app unreachable
DesignAuditAgent ->> AppServer: nohup pnpm dev > /tmp/ownercommunity.log 2>&1 &
DesignAuditAgent ->> AppServer: wait up to 60s for readiness
end
DesignAuditAgent ->> DesignSystem: read ./apps/ui-community/DESIGN.md
DesignAuditAgent ->> AgentBrowser: agent-browser --session ownercommunity-desktop open --headed https://ownercommunity.localhost/
DesignAuditAgent ->> AgentBrowser: agent-browser --session ownercommunity-desktop ... --format json
DesignAuditAgent ->> DesignAuditAgent: compare rendered UI to tokens and audit rules
DesignAuditAgent -->> Orchestrator: audit report and findings
DesignAuditAgent ->> DesignAuditAgent: echo done > .agents-work/current/design-audit.done
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Hey - I've found 2 issues, and left some high level feedback:
Fixed security issues:
-
In
apps/ui-community/DESIGN.md, the Layout section introduces hardcoded values likeSection gap: 80pxandCard padding: 20px, which conflict with the earlier spacing token scale and the later "no hardcoded spacing" guidance; consider expressing these in terms of the definedspacing.*tokens so the file remains self-consistent and token-driven. -
The
ui-compliance-auditSKILL checklist claims every rule is derived from the listed.github/instructions/ui/*.instructions.mdfiles, but some checks (e.g., requiring sibling.stories.tsxand.test.tsxfor every presentational component) are not clearly traceable to those sources; either add explicit references for these rules or relax the claim that all checks are instruction-derived.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `apps/ui-community/DESIGN.md`, the Layout section introduces hardcoded values like `Section gap: 80px` and `Card padding: 20px`, which conflict with the earlier spacing token scale and the later "no hardcoded spacing" guidance; consider expressing these in terms of the defined `spacing.*` tokens so the file remains self-consistent and token-driven.
- The `ui-compliance-audit` SKILL checklist claims every rule is derived from the listed `.github/instructions/ui/*.instructions.md` files, but some checks (e.g., requiring sibling `.stories.tsx` and `.test.tsx` for every presentational component) are not clearly traceable to those sources; either add explicit references for these rules or relax the claim that all checks are instruction-derived.
## Individual Comments
### Comment 1
<location path="pnpm-workspace.yaml" line_range="127" />
<code_context>
'@babel/core': ^7.29.6
- js-yaml: 4.3.0
- [email protected]: 3.15.0
+ js-yaml: 3.15.1
shell-quote@<1.8.4: 1.8.4
'@opentelemetry/exporter-prometheus@0.57.2': 0.217.0
</code_context>
<issue_to_address>
**🚨 issue (security):** Reconsider downgrading js-yaml to the 3.x line due to known security issues.
This change puts all js-yaml consumers on 3.15.1 via a workspace-level override, expanding exposure to the 3.x line’s known CVEs. If you’re addressing a specific compatibility issue, consider scoping the override only to the affected dependency, or instead using a patched 4.x release. Please also verify that 3.15.1 does not reintroduce previously mitigated advisories.
</issue_to_address>
### Comment 2
<location path=".github/agents/design-audit.md" line_range="3-4" />
<code_context>
+---
+name: design-audit
+description: >
+ A design agent made for the purpose of auditing existing codebases compliance towards OwnerCommunity styling. Not meant for creating new designs, but rather auditing existing codebases for compliance with OwnerCommunity styling. The agent will read the codebase and report any issues found, along with suggestions for fixes.
+
+model: kimi-k2.7-code
</code_context>
<issue_to_address>
**suggestion (typo):** Clarify grammar in the description sentence about codebase compliance.
The phrase “auditing existing codebases compliance towards OwnerCommunity styling” reads awkwardly. Using the possessive and “with” instead (e.g., “auditing existing codebases’ compliance with OwnerCommunity styling”) would be clearer.
```suggestion
description: >
A design agent made for the purpose of auditing existing codebases' compliance with OwnerCommunity styling. Not meant for creating new designs, but rather auditing existing codebases for compliance with OwnerCommunity styling. The agent will read the codebase and report any issues found, along with suggestions for fixes.
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
|
@sourcery-ai review |
There was a problem hiding this comment.
Hey - I've found 3 issues
Fixed security issues:
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location path="apps/ui-community/DESIGN.md" line_range="986" />
<code_context>
+**Role:** Secondary action paired with the primary button
+
+Background `transparent`
+Text `colors.primary.text-secondary`
+Border Radius `rounded.md`
+Padding `padding.sm padding.md`
</code_context>
<issue_to_address>
**issue (bug_risk):** Use `colors.theme.text-secondary` instead of the undefined `colors.primary.text-secondary` token.
The defined token namespaces are `colors.palette.*` and `colors.theme.*`; `colors.primary.*` does not exist. Update this (and any similar usage) to `colors.theme.text-secondary` to match the actual token names.
</issue_to_address>
### Comment 2
<location path="apps/ui-community/DESIGN.md" line_range="988" />
<code_context>
+Background `transparent`
+Text `colors.primary.text-secondary`
+Border Radius `rounded.md`
+Padding `padding.sm padding.md`
+Height `spacing.2xl`
+Typography `typography.body`
</code_context>
<issue_to_address>
**issue:** Replace `padding.sm`/`padding.md` with the defined `spacing.sm`/`spacing.md` tokens.
There is no `padding.*` token family in the scale—only `spacing.*`. Here and in similar component descriptions, use `Padding `spacing.sm spacing.md`` to stay consistent with the defined spacing tokens.
</issue_to_address>
### Comment 3
<location path="apps/ui-community/DESIGN.md" line_range="1127-1129" />
<code_context>
+
+**Header:** Background `colors.theme.surface-secondary`, Text `colors.theme.text`, Typography `typography.body`
+
+**Striped rows:** Background `colors.theme.background`
+
+**Sorted cells:** Background `colors.theme.option-selected`
+
+### Menu
</code_context>
<issue_to_address>
**issue:** Align the striped vs sorted row background descriptions with the earlier token definitions.
In the token front-matter, `table-row-striped` uses `colors.theme.option-selected` and `table-row-sorted` uses `colors.theme.background`, but here striped rows use `background` and sorted cells use `option-selected`. Please swap these here so the prose matches the token definitions.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
|
@sourcery-ai review |
There was a problem hiding this comment.
Hey - I've left some high level feedback:
Fixed security issues:
-
The Owner Community DESIGN.md currently defines the same tokens in three places (YAML front matter, CSS custom properties, and Ant Design theme TS), which will be hard to keep in sync; consider extracting a single machine-readable source (e.g., a tokens JSON/YAML module) and generating/deriving the CSS and AntD theme mappings from that.
-
The design-audit agent’s auto-install step for
DESIGN.md(which design.md || pnpm add -g @google/design.md) looks fragile and may install a global binary whose name conflicts with the project’s DESIGN.md file; consider either removing this step or switching to a clearly named local devDependency/CLI to avoid confusion and global side effects.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The Owner Community DESIGN.md currently defines the same tokens in three places (YAML front matter, CSS custom properties, and Ant Design theme TS), which will be hard to keep in sync; consider extracting a single machine-readable source (e.g., a tokens JSON/YAML module) and generating/deriving the CSS and AntD theme mappings from that.
- The design-audit agent’s auto-install step for `DESIGN.md` (`which design.md || pnpm add -g @google/design.md`) looks fragile and may install a global binary whose name conflicts with the project’s DESIGN.md file; consider either removing this step or switching to a clearly named local devDependency/CLI to avoid confusion and global side effects.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Summary by Sourcery
Introduce instruction-driven UI compliance auditing and design review while updating dependencies to resolve security advisories.
New Features:
packages/ui-*code against repository UI conventions.Bug Fixes:
Enhancements:
Documentation:
apps/ui-community/DESIGN.md.Chores: