Skip to content

compliance audit skill based on instruction files - #320

Open
ingridgburger wants to merge 6 commits into
mainfrom
ui-instructions-to-skills
Open

compliance audit skill based on instruction files#320
ingridgburger wants to merge 6 commits into
mainfrom
ui-instructions-to-skills

Conversation

@ingridgburger

@ingridgburger ingridgburger commented Aug 21, 2026

Copy link
Copy Markdown

Summary by Sourcery

Introduce instruction-driven UI compliance auditing and design review while updating dependencies to resolve security advisories.

New Features:

  • Add a reusable UI compliance audit skill for reviewing packages/ui-* code against repository UI conventions.
  • Add a design-audit agent that combines source-level checks with rendered UI verification against the Owner Community design system.
  • Add a canonical Owner Community design-system reference covering tokens, component mappings, accessibility, and audit rules.

Bug Fixes:

  • Update dependency resolutions to address reported fast-uri, js-yaml, and nanoid security vulnerabilities.
  • Refresh related dependency overrides and lockfile entries, including brace-expansion and other transitive packages.

Enhancements:

  • Expose the UI compliance audit skill through the skills documentation and GitHub Copilot and Claude discovery links.

Documentation:

  • Document the UI compliance audit checklist, traceable instruction sources, severity levels, and finding report format.
  • Document the Owner Community visual language and tokenized design guidance in apps/ui-community/DESIGN.md.

Chores:

  • Add audit exclusions for image-size advisories where the referenced fixed version is unavailable.

@ingridgburger
ingridgburger requested a review from a team August 21, 2026 13:00
@sourcery-ai

sourcery-ai Bot commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

Reviewer's Guide

Adds 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 flow

sequenceDiagram
  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
Loading

File-Level Changes

Change Details Files
Introduce a dedicated ui-compliance-audit skill with detailed UI architectural checklist and reporting format, and wire it into Copilot/Claude skill discovery docs.
  • Extend .agents/skills/README.md with a new UI Compliance Audit section describing purpose, use cases, and references for auditing packages/ui-* code.
  • Add .agents/skills/ui-compliance-audit/SKILL.md defining the ui-compliance-audit skill, mapping each checklist area to specific .github/instructions/ui/*.instructions.md files, and specifying the audit checklist and reporting format.
  • Expose the ui-compliance-audit skill via new symlink-style entries for GitHub (.github/skills/ui-compliance-audit) and Claude (.claude/skills/ui-compliance-audit) skill discovery.
.agents/skills/README.md
.agents/skills/ui-compliance-audit/SKILL.md
.claude/skills/ui-compliance-audit
.github/skills/ui-compliance-audit
Add a non-user-invocable design-audit agent that orchestrates browser-based visual audits against the Owner Community design system and UI instructions.
  • Create .github/agents/design-audit.md defining the design-audit agent (model, tools, non-invocable status) and detailed operational instructions for starting/reusing the dev server, managing a headed agent-browser session, and handling crashes.
  • Specify required reading for DESIGN.md and UI instruction files, delegation rules, severity levels, and a structured JSON-centric output format for audit findings.
  • Embed explicit guidance to always treat ./apps/ui-community/DESIGN.md as read-only source of truth for visual tokens, and to always report token bypasses such as hardcoded colors, spacing, or !important overrides.
.github/agents/design-audit.md
Introduce the Owner Community design system as a canonical, machine- and human-readable token set aligned to Ant Design theming and audit expectations.
  • Add apps/ui-community/DESIGN.md with a large YAML front matter block defining color palettes, theme tokens, typography, spacing, border radii, layout, component-level tokens, Ant Design seed/alias/component tokens, and audit rules.
  • Document how these tokens should manifest in the UI via narrative sections on colors, typography, layout, surfaces, elevation, per-component visual specs (buttons, inputs, tables, menus, alerts, etc.), and do/don’t guidelines.
  • Provide implementation-ready examples, including CSS custom properties and TypeScript Ant Design theme mapping for both light and dark themes, plus an audit guide and example findings format.
apps/ui-community/DESIGN.md
Tighten dependency overrides and audit configuration to address security advisories and lock in safer versions of vulnerable packages.
  • Update pnpm-workspace.yaml auditConfig.allowlist with two image-size advisories that cannot be resolved because the required version is unavailable.
  • Bump or adjust overrides for brace-expansion (including v2 range), fast-uri, js-yaml, adm-zip, immutable, nanoid, image-size, protobufjs, and browserslist to non-vulnerable or pinned versions.
  • Refresh pnpm-lock.yaml resolutions to match the new override set and security fixes.
pnpm-workspace.yaml
pnpm-lock.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 2 issues, and left some high level feedback:

Fixed security issues:

  • fast-uri (link) · Dashboard

  • js-yaml (link) · Dashboard

  • nanoid (link) · Dashboard

  • 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.

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>

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 pnpm-workspace.yaml
Comment thread .github/agents/design-audit.md Outdated
@ingridgburger

Copy link
Copy Markdown
Author

@sourcery-ai review

@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 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>

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 apps/ui-community/DESIGN.md Outdated
Comment thread apps/ui-community/DESIGN.md Outdated
Comment thread apps/ui-community/DESIGN.md Outdated
@ingridgburger

Copy link
Copy Markdown
Author

@sourcery-ai review

@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 left some high level feedback:

Fixed security issues:

  • fast-uri (link) · Dashboard

  • js-yaml (link) · Dashboard

  • nanoid (link) · Dashboard

  • 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.

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.

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