Skip to content

chore: audit full web dashboard for hardcoded design token violations#944

Merged
Aureliolo merged 8 commits intomainfrom
chore/audit-design-tokens
Mar 31, 2026
Merged

chore: audit full web dashboard for hardcoded design token violations#944
Aureliolo merged 8 commits intomainfrom
chore/audit-design-tokens

Conversation

@Aureliolo
Copy link
Copy Markdown
Owner

@Aureliolo Aureliolo commented Mar 31, 2026

Summary

  • Audit all 49 .tsx/.ts files in web/src/ for hardcoded design token violations across all 5 theme axes (color, density, typography, animation, sidebar)
  • Add tweenExitFast motion preset to lib/motion.ts for exit animations (easeIn acceleration)
  • Replace hardcoded Framer Motion transition: { duration: N } in 6 component files with presets from @/lib/motion
  • Replace hardcoded px-4 py-2 with density-aware p-card on ~20 alert/error/warning banners
  • Replace hardcoded p-3/p-4 with p-card on ~10 card containers (bg-card + border)
  • Replace hardcoded space-y-6 with space-y-section-gap on ~27 page-level containers and skeletons
  • Add check_hardcoded_framer_transitions to scripts/check_web_design_system.py PostToolUse hook
  • Create .claude/agents/design-token-audit.md for ongoing theme token enforcement
  • Integrate design-token-audit agent into /pre-pr-review and /aurelio-review-pr skill rosters (triggers on any web_src change)
  • Add design token items 10-13 to frontend-reviewer prompt in both skills
  • Update web/CLAUDE.md Enforcement section with new Framer Motion check

Test plan

  • npm --prefix web run type-check -- clean
  • npm --prefix web run lint -- zero warnings
  • npm --prefix web run test -- 2278 tests pass
  • npm --prefix web run storybook:build -- builds clean
  • Pre-reviewed by 4 agents (docs-consistency, frontend-reviewer, design-token-audit, issue-resolution-verifier), 3 findings addressed
  • Manual: switch density (dense/balanced/medium/sparse) in ThemeToggle -- all sections, cards, banners breathe uniformly
  • Manual: switch animation preset -- page transitions and drawer open/close respond

Closes #938

Generated with Claude Code

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 31, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 7ecf1d81-67f0-4149-8c97-4ebdf7138b80

📥 Commits

Reviewing files that changed from the base of the PR and between 311ac60 and 4c4dba0.

📒 Files selected for processing (1)
  • scripts/check_web_design_system.py
📜 Recent review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
  • GitHub Check: Dashboard Test
  • GitHub Check: Build Backend
  • GitHub Check: Build Sandbox
  • GitHub Check: Dependency Review
  • GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.py: Do not use from __future__ import annotations -- Python 3.14 has native PEP 649 lazy annotations
Use except A, B: syntax (PEP 758 except syntax, no parentheses) for multiple exception handling in Python 3.14

Files:

  • scripts/check_web_design_system.py
!(src/synthorg/observability/setup.py|src/synthorg/observability/sinks.py)

📄 CodeRabbit inference engine (CLAUDE.md)

Never use import logging, logging.getLogger(), or print() in application code. Exception: observability/setup.py and observability/sinks.py may use stdlib logging and print(..., file=sys.stderr) for bootstrap/handler-cleanup code

Files:

  • scripts/check_web_design_system.py
scripts/**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

All Python files in scripts/ may use relaxed ruff rules: print statements and deferred imports are allowed

Files:

  • scripts/check_web_design_system.py
🧠 Learnings (2)
📓 Common learnings 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use density-aware spacing tokens (`p-card`, `gap-section-gap`, `gap-grid-gap`) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Do NOT use `rgba()` with hardcoded values -- use design token variables

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : ALWAYS reuse existing components from `web/src/components/ui/` before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use token variables (`var(--so-shadow-card-hover)`, `border-border`, `border-bright`) for shadows and borders. NEVER hardcode values

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/components/ui/**/*.{ts,tsx} : When creating new shared components: place in `web/src/components/ui/` with kebab-case filename, create `.stories.tsx` file alongside with all states, export props as TypeScript interface, use design tokens exclusively, and import `cn` from `@/lib/utils` for conditional class merging
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Run PostToolUse hook (`scripts/check_web_design_system.py`) automatically on every Edit/Write to `web/src/` files to catch hardcoded colors, hex values, font-family declarations, missing Storybook stories, duplicate patterns, and complex map blocks. Fix all violations before proceeding

Applied to files:

  • scripts/check_web_design_system.py
🔇 Additional comments (3)
scripts/check_web_design_system.py (3)

92-118: Nice hardening of the Framer-duration matcher.

The multiline regex, relative-path allowlist, and column-preserving block-comment masking make this rule much more reliable without sacrificing useful line reporting.

475-477: Good integration point.

Hooking the new Framer Motion check into check_file() keeps the rule enforced anywhere this validator runs instead of leaving it as a dead helper.

Based on learnings: "Run PostToolUse hook (scripts/check_web_design_system.py) automatically on every Edit/Write to web/src/ files to catch hardcoded colors, hex values, font-family declarations, missing Storybook stories, duplicate patterns, and complex map blocks. Fix all violations before proceeding".

275-279: The review comment references a non-existent function check_hardcoded_framer_transitions and incorrect line numbers (275-279). Lines 275-279 contain code from the _check_avatar() function, not the code shown in the comment. The underlying logic concern about the startswith(_COMMENT_PREFIXES) short-circuit is valid and does appear in the codebase in check_hardcoded_colors() (lines 157-158) and check_hardcoded_fonts() (lines 204-205), but the review is pointing to the wrong location.

			> Likely an incorrect or invalid review comment.

Walkthrough

Adds a Claude design-token audit agent at .claude/agents/design-token-audit.md and wires it into the pre-PR and Aurelio review skill rosters. Extends frontend reviewer prompts with Tailwind/shadcn spacing and Framer Motion animation checks. Implements check_hardcoded_framer_transitions() and related regex/skip logic in scripts/check_web_design_system.py. Introduces a new tweenExitFast preset in web/src/lib/motion.ts. Updates dozens of UI modules/pages to replace hardcoded Tailwind spacing/padding and inline motion durations with density tokens (p-card, space-y-section-gap, gap-grid-gap, gap-section-gap) and shared motion presets.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 7.04% which is insufficient. The required threshold is 40.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The PR title clearly and concisely summarizes the main change: a comprehensive audit of the web dashboard for hardcoded design token violations. This accurately reflects the primary objective of the changeset.
Description check ✅ Passed The PR description is well-structured and directly related to the changeset. It outlines all major changes (design token replacements, new presets, agent creation, script additions) and includes test verification steps. The description clearly documents the work performed.
Linked Issues check ✅ Passed The PR successfully addresses all major objectives from issue #938: (1) audited 49 files in web/src/ [#938], (2) replaced hardcoded card padding with p-card (~20 banners, ~10 card containers) [#938], (3) replaced hardcoded spacing with design tokens (space-y-section-gap, gap-section-gap, gap-grid-gap) [#938], (4) created design-token-audit agent in .claude/agents/ [#938], (5) integrated agent into pre-pr-review and aurelio-review-pr skills [#938], (6) added Framer Motion transition checks to lib/motion.ts and scripts [#938], and (7) updated documentation.
Out of Scope Changes check ✅ Passed All changes are directly within scope of issue #938. The PR covers: design token auditing (the core objective), hardcoded spacing/padding replacements across 49 files (required by scope), motion preset additions (bonus improvement enabling better animation consistency), agent/script creation for enforcement (required acceptance criterion), and documentation updates (supporting the enforcement goal). No out-of-scope changes detected.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Comment @coderabbitai help to get the list of available commands and usage tips.

@Aureliolo Aureliolo temporarily deployed to cloudflare-preview March 31, 2026 09:32 — with GitHub Actions Inactive
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 31, 2026 •
edited
Loading

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Snapshot Warnings

⚠️: No snapshots were found for the head SHA 4c4dba0.
Ensure that dependencies are being submitted on PR branches. Re-running this action after a short time may resolve the issue. See the documentation for more information and troubleshooting advice.

Scanned Files

None

gemini-code-assist[bot]
gemini-code-assist bot reviewed Mar 31, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request implements a comprehensive design token audit system for the web dashboard, including a new audit agent and a Python script to detect hardcoded Framer Motion durations. It also refactors a large number of frontend components and pages to use standardized design tokens for spacing, padding, and animations. Feedback was provided regarding the audit script's regex, which currently processes files line-by-line and may miss multi-line transition definitions.

scripts/check_web_design_system.py
Comment on lines +93 to +101
HARDCODED_FM_DURATION_RE = re.compile(
r"""(?x)
# Variant object exit/animate transitions: exit: { ..., transition: { duration: N } }
transition\s*:\s*\{[^}]*\bduration\s*:\s*[\d.]+
|
# Inline transition prop: transition={{ duration: N }}
transition\s*=\s*\{\s*\{[^}]*\bduration\s*:\s*[\d.]+
""",
)
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 31, 2026

Choose a reason for hiding this comment

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

medium

The HARDCODED_FM_DURATION_RE regex and the subsequent line-by-line processing in check_hardcoded_framer_transitions will miss hardcoded durations in multi-line Framer Motion transition objects. Since multi-line definitions are common in React components for readability, consider processing the full file content with a multi-line regex (using the (?s) flag) and calculating line numbers from match offsets to ensure a more comprehensive audit.

coderabbitai[bot]
coderabbitai bot requested changes Mar 31, 2026
View reviewed changes
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 6

🤖 Prompt for all review comments with AI agents 
Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.claude/agents/design-token-audit.md:
- Line 28: The carve-out text under the "OK to leave" section that permits
`p-6`/`p-8` (the phrase starting "`p-6`/`p-8` on standalone centered forms...")
is too permissive and hard to apply consistently; update this guidance by either
(A) enumerating exact component/file names that are exempt (e.g., list specific
files like Login, SetupWizard, ErrorBoundary) or (B) requiring an explicit
marker for exceptions (e.g., mandate a `/* design-system-exception */` comment
on components using `p-6`/`p-8`), and add a short note showing which option is
enforced so automated checks can reliably detect exceptions.
- Line 22: The skip pattern currently excludes all `.stories.tsx` files from
Framer Motion transition checks (line listing `lib/motion.ts`,
`hooks/useAnimationPreset.ts`, `.stories.tsx` files, `ThemePreview.tsx`); narrow
this to only skip known story-specific demo/wrapper files by updating the skip
list in `.claude/agents/design-token-audit.md` to exclude explicit filenames or
patterns like story files with `Demo`, `Wrapper`, or `Controls` in their names
(and keep `lib/motion.ts`, `hooks/useAnimationPreset.ts`, `ThemePreview.tsx`
as-is) so component implementation stories still get scanned for hardcoded
transitions.

In @.claude/skills/aurelio-review-pr/SKILL.md:
- Line 352: Update the frontend-reviewer checklist wording that currently maps
generic gap-* to gap-section-gap: clarify that page-level section spacing should
use space-y-section-gap or gap-section-gap, but grid layouts must use
gap-grid-gap (not gap-section-gap); replace or augment the mapping that
references gap-* (and examples like space-y-6 / gap-4 / gap-6) to explicitly
call out gap-grid-gap for grid contexts and add a short note to prefer
density-aware tokens (p-card, gap-section-gap, gap-grid-gap) over hardcoded
pixel values. Ensure the edited text mentions the exact tokens
space-y-section-gap, gap-section-gap, and gap-grid-gap so reviewers can find and
enforce the rule.

In @.claude/skills/pre-pr-review/SKILL.md:
- Around line 456-459: The frontend-reviewer checklist in SKILL.md is missing
the "Grid gaps" category present in the design-token-audit agent; update the
checklist to include a new item for grid gap violations (e.g., "Grid layouts
using gap-3/gap-4/gap-6 instead of gap-grid-gap (MEDIUM)") inserted between the
current items for section/page gaps and alert banners (i.e., between the
existing items covering section gaps and alert banners), and renumber the
subsequent items accordingly — alternatively, if you prefer the agent to change,
remove the "Section 4: Grid gaps" entry from
.claude/agents/design-token-audit.md so both sources match. Ensure references to
the grid-token name gap-grid-gap are used verbatim in the new checklist item or
the agent removal is applied consistently.
- Line 261: The roster condition for design-token-audit ("design-token-audit"
triggered on Any `web_src`) includes .ts files but the agent prompt in
.claude/agents/design-token-audit.md only targets `web/src/**/*.tsx`; update the
agent prompt (around the current prompt text line ~16) to also include
`web/src/**/*.ts` so utility files like web/src/lib/motion.ts and
web/src/hooks/useStatusTransition.ts are audited for Framer Motion/Tailwind
token violations, or alternatively tighten the roster condition to only target
.tsx files—choose one and make the prompt and roster consistent.

In `@scripts/check_web_design_system.py`:
- Around line 92-101: The HARDCODED_FM_DURATION_RE currently only matches within
a single line so multiline transition objects are missed; update the regex to
allow newlines between tokens (e.g., replace [^}]* with [\s\S]*? or otherwise
permit \n) and compile it with the re.DOTALL flag (re.compile(..., re.DOTALL)),
and ensure the checker runs this pattern against the whole file content (not
line-by-line) so constructs where "transition" and "duration" are on different
lines are detected; the change should be applied to HARDCODED_FM_DURATION_RE
(and the similar pattern at lines 256-271) and any scanning logic that iterates
per-line.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 79b35e75-5d8d-489e-88f8-433dffb9f49c

📥 Commits

Reviewing files that changed from the base of the PR and between 6a5088c and 0c87d78.

📒 Files selected for processing (50)
  • .claude/agents/design-token-audit.md
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
  • scripts/check_web_design_system.py
  • web/CLAUDE.md
  • web/src/components/ui/animated-presence.tsx
  • web/src/components/ui/drawer.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/lib/motion.ts
  • web/src/pages/AgentDetailPage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/SettingsPage.tsx
  • web/src/pages/SettingsSinksPage.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/agents/AgentDetailSkeleton.tsx
  • web/src/pages/agents/AgentsSkeleton.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/approvals/ApprovalsSkeleton.tsx
  • web/src/pages/approvals/BatchActionBar.tsx
  • web/src/pages/budget/BudgetSkeleton.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/meetings/MeetingDetailSkeleton.tsx
  • web/src/pages/meetings/MeetingsSkeleton.tsx
  • web/src/pages/messages/MessageThread.tsx
  • web/src/pages/messages/MessagesSkeleton.tsx
  • web/src/pages/org-edit/OrgEditSkeleton.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/settings/SettingsSkeleton.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/setup/ProviderProbeResults.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: Dashboard Test
  • GitHub Check: Build Web
  • GitHub Check: Dependency Review
  • GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (6)
!(src/synthorg/observability/setup.py|src/synthorg/observability/sinks.py)

📄 CodeRabbit inference engine (CLAUDE.md)

Never use import logging, logging.getLogger(), or print() in application code. Exception: observability/setup.py and observability/sinks.py may use stdlib logging and print(..., file=sys.stderr) for bootstrap/handler-cleanup code

Files:

  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/messages/MessagesSkeleton.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/SettingsSinksPage.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/approvals/ApprovalsSkeleton.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/agents/AgentsSkeleton.tsx
  • web/src/pages/meetings/MeetingsSkeleton.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/org-edit/OrgEditSkeleton.tsx
  • web/src/pages/agents/AgentDetailSkeleton.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/SettingsPage.tsx
  • web/CLAUDE.md
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/budget/BudgetSkeleton.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/settings/SettingsSkeleton.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/meetings/MeetingDetailSkeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/setup/ProviderProbeResults.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/approvals/BatchActionBar.tsx
  • web/src/components/ui/animated-presence.tsx
  • web/src/components/ui/drawer.tsx
  • web/src/pages/messages/MessageThread.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • scripts/check_web_design_system.py
  • web/src/lib/motion.ts
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
  • .claude/skills/pre-pr-review/SKILL.md
  • web/src/pages/setup/ProvidersStep.tsx
web/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

web/src/**/*.{ts,tsx}: Web dashboard components in web/src/components/ui/ must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules
See web/CLAUDE.md for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

web/src/**/*.{ts,tsx}: Use Tailwind semantic classes (text-foreground, bg-card, text-accent, text-success, bg-danger, etc.) or CSS variables (var(--so-*)) for colors. NEVER hardcode hex values in .tsx/.ts files
Use font-sans or font-mono for typography (maps to Geist tokens). NEVER set fontFamily directly
Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing
Use token variables (var(--so-shadow-card-hover), border-border, border-bright) for shadows and borders. NEVER hardcode values
Do NOT use rgba() with hardcoded values -- use design token variables

Files:

  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/messages/MessagesSkeleton.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/SettingsSinksPage.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/approvals/ApprovalsSkeleton.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/agents/AgentsSkeleton.tsx
  • web/src/pages/meetings/MeetingsSkeleton.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/org-edit/OrgEditSkeleton.tsx
  • web/src/pages/agents/AgentDetailSkeleton.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/SettingsPage.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/budget/BudgetSkeleton.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/settings/SettingsSkeleton.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/meetings/MeetingDetailSkeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/setup/ProviderProbeResults.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/approvals/BatchActionBar.tsx
  • web/src/components/ui/animated-presence.tsx
  • web/src/components/ui/drawer.tsx
  • web/src/pages/messages/MessageThread.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/lib/motion.ts
  • web/src/pages/setup/ProvidersStep.tsx
web/src/{components,pages}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (web/CLAUDE.md)

web/src/{components,pages}/**/*.{ts,tsx}: ALWAYS reuse existing components from web/src/components/ui/ before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)
Do NOT recreate status dots inline -- use <StatusBadge> component
Do NOT build card-with-header layouts from scratch -- use <SectionCard> component
Do NOT create metric displays with text-metric font-bold -- use <MetricCard> component
Do NOT render initials circles manually -- use <Avatar> component
Do NOT create complex (>8 line) JSX inside .map() -- extract to a shared component

Files:

  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/messages/MessagesSkeleton.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/SettingsSinksPage.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/approvals/ApprovalsSkeleton.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/agents/AgentsSkeleton.tsx
  • web/src/pages/meetings/MeetingsSkeleton.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/org-edit/OrgEditSkeleton.tsx
  • web/src/pages/agents/AgentDetailSkeleton.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/SettingsPage.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/budget/BudgetSkeleton.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/settings/SettingsSkeleton.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/meetings/MeetingDetailSkeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/setup/ProviderProbeResults.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/approvals/BatchActionBar.tsx
  • web/src/components/ui/animated-presence.tsx
  • web/src/components/ui/drawer.tsx
  • web/src/pages/messages/MessageThread.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/setup/ProvidersStep.tsx
web/src/components/ui/**/*.{ts,tsx}

📄 CodeRabbit inference engine (web/CLAUDE.md)

When creating new shared components: place in web/src/components/ui/ with kebab-case filename, create .stories.tsx file alongside with all states, export props as TypeScript interface, use design tokens exclusively, and import cn from @/lib/utils for conditional class merging

Files:

  • web/src/components/ui/skeleton.tsx
  • web/src/components/ui/animated-presence.tsx
  • web/src/components/ui/drawer.tsx
**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.py: Do not use from __future__ import annotations -- Python 3.14 has native PEP 649 lazy annotations
Use except A, B: syntax (PEP 758 except syntax, no parentheses) for multiple exception handling in Python 3.14

Files:

  • scripts/check_web_design_system.py
scripts/**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

All Python files in scripts/ may use relaxed ruff rules: print statements and deferred imports are allowed

Files:

  • scripts/check_web_design_system.py
🧠 Learnings (22)
📓 Common learnings 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : ALWAYS reuse existing components from `web/src/components/ui/` before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Do NOT use `rgba()` with hardcoded values -- use design token variables

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use density-aware spacing tokens (`p-card`, `gap-section-gap`, `gap-grid-gap`) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use density-aware spacing tokens (`p-card`, `gap-section-gap`, `gap-grid-gap`) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing

Applied to files:

  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/messages/MessagesSkeleton.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/SettingsSinksPage.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/approvals/ApprovalsSkeleton.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/agents/AgentsSkeleton.tsx
  • web/src/pages/meetings/MeetingsSkeleton.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/org-edit/OrgEditSkeleton.tsx
  • web/src/pages/agents/AgentDetailSkeleton.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/SettingsPage.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/budget/BudgetSkeleton.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/settings/SettingsSkeleton.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/meetings/MeetingDetailSkeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/setup/ProviderProbeResults.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
  • .claude/skills/pre-pr-review/SKILL.md
  • web/src/pages/setup/ProvidersStep.tsx
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT recreate status dots inline -- use `<StatusBadge>` component

Applied to files:

  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/OrgEditPage.tsx
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT build card-with-header layouts from scratch -- use `<SectionCard>` component

Applied to files:

  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/setup/ProvidersStep.tsx
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT create metric displays with `text-metric font-bold` -- use `<MetricCard>` component

Applied to files:

  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/setup/ProvidersStep.tsx
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use Tailwind semantic classes (`text-foreground`, `bg-card`, `text-accent`, `text-success`, `bg-danger`, etc.) or CSS variables (`var(--so-*)`) for colors. NEVER hardcode hex values in `.tsx`/`.ts` files

Applied to files:

  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/CLAUDE.md
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
  • .claude/skills/pre-pr-review/SKILL.md
  • web/src/pages/setup/ProvidersStep.tsx
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Applied to files:

  • web/src/pages/DashboardPage.tsx
  • web/CLAUDE.md
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/components/ui/drawer.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
  • .claude/skills/pre-pr-review/SKILL.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Applied to files:

  • web/src/pages/DashboardPage.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/CLAUDE.md
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
  • .claude/skills/pre-pr-review/SKILL.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : ALWAYS reuse existing components from `web/src/components/ui/` before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)

Applied to files:

  • web/src/pages/DashboardPage.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/CLAUDE.md
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
  • .claude/skills/pre-pr-review/SKILL.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Run PostToolUse hook (`scripts/check_web_design_system.py`) automatically on every Edit/Write to `web/src/` files to catch hardcoded colors, hex values, font-family declarations, missing Storybook stories, duplicate patterns, and complex map blocks. Fix all violations before proceeding

Applied to files:

  • web/CLAUDE.md
  • scripts/check_web_design_system.py
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Pre-commit hooks enforce: trailing-whitespace, end-of-file-fixer, check-yaml, check-toml, check-json, check-merge-conflict, check-added-large-files, no-commit-to-branch (main), ruff check+format, gitleaks, hadolint, golangci-lint+go vet (CLI), no-em-dashes, no-redundant-timeout, eslint-web (zero warnings)

Applied to files:

  • web/CLAUDE.md
📚 Learning: 2026-03-15T18:17:43.675Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:17:43.675Z
Learning: Pre-commit hooks: trailing-whitespace, end-of-file-fixer, check-yaml, check-toml, check-json, check-merge-conflict, check-added-large-files, no-commit-to-branch (main), ruff check+format, gitleaks, hadolint (Dockerfile linting).

Applied to files:

  • web/CLAUDE.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Do NOT use `rgba()` with hardcoded values -- use design token variables

Applied to files:

  • web/CLAUDE.md
  • web/src/pages/tasks/TaskCard.tsx
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use token variables (`var(--so-shadow-card-hover)`, `border-border`, `border-bright`) for shadows and borders. NEVER hardcode values

Applied to files:

  • web/CLAUDE.md
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/components/ui/**/*.{ts,tsx} : When creating new shared components: place in `web/src/components/ui/` with kebab-case filename, create `.stories.tsx` file alongside with all states, export props as TypeScript interface, use design tokens exclusively, and import `cn` from `@/lib/utils` for conditional class merging

Applied to files:

  • web/CLAUDE.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Dependabot: daily updates (uv, github-actions, npm, pre-commit, docker, gomod), all updates grouped into 1 PR per ecosystem, no auto-merge. Review before merge with `/review-dep-pr`

Applied to files:

  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
📚 Learning: 2026-03-19T07:12:14.508Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to src/synthorg/security/**/*.py : Security package (security/): SecOps agent, rule engine (soft-allow/hard-deny, fail-closed), audit log, output scanner, output scan response policies (redact/withhold/log-only/autonomy-tiered), risk classifier, risk tier classifier, action type registry, ToolInvoker security integration, progressive trust (4 strategies), autonomy levels (presets, resolver, change strategy), timeout policies (park/resume)

Applied to files:

  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
📚 Learning: 2026-03-16T06:24:56.341Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-19T07:12:14.508Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-19T07:13:44.964Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:13:44.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue — DESIGN_SPEC.md is a pointer file linking to 7 design pages (Agents, Organization, Communication, Engine, Memory, Operations)

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-15T18:38:44.202Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:38:44.202Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. DESIGN_SPEC.md is a pointer file linking to the 7 design pages (index, agents, organization, communication, engine, memory, operations).

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-14T15:43:05.601Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-14T15:43:05.601Z
Learning: Applies to docs/** : Docs source in docs/ (Markdown, built with Zensical); design spec in docs/design/ (7 pages: index, agents, organization, communication, engine, memory, operations)

Applied to files:

  • .claude/agents/design-token-audit.md
🔇 Additional comments (58)
web/src/components/ui/skeleton.tsx (1)

69-69: Good token migration for skeleton card containers.

Both updates correctly move card padding to p-card without altering component behavior.

As per coding guidelines, “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing.”

Also applies to: 83-83

web/src/lib/motion.ts (1)

85-90: Nice extraction and reuse of fast-exit motion preset.

pageExit now consumes a shared preset, which improves consistency and makes token enforcement easier.

Also applies to: 133-133

web/src/pages/TaskBoardPage.tsx (1)

259-259: Banner padding updates are compliant and consistent.

Both alert containers now use p-card, matching the design-token standard without changing runtime behavior.

Based on learnings, “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap)…”

Also applies to: 266-266

web/src/pages/messages/MessagesSkeleton.tsx (1)

5-5: MessageRowSkeleton padding tokenization looks good.

Using p-card here is the right density-aware replacement for fixed card padding.

As per coding guidelines, “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap)…”

web/src/pages/agents/AgentsSkeleton.tsx (1)

5-5: Section spacing token migration is correct.

space-y-section-gap is the appropriate semantic token for this container.

As per coding guidelines, “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap)…”

web/src/pages/setup/MiniOrgChart.tsx (1)

212-212: Container padding update is aligned with token policy.

Switching to p-card keeps this card wrapper density-aware and consistent.

Based on learnings, “Never hardcode hex colors, font-family, or pixel spacing -- use design tokens.”

web/src/pages/ProviderDetailPage.tsx (1)

43-43: Error-state layout now uses the right section-gap token.

This update improves consistency with the page-level spacing system.

As per coding guidelines, “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap)…”

web/src/pages/setup/SetupAgentCard.tsx (1)

42-42: SetupAgentCard padding token change is correct.

p-card is the expected replacement and keeps this card density-aware.

Based on learnings, “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap)…”

web/src/pages/budget/BudgetSkeleton.tsx (1)

10-10: Design-token spacing migration looks correct.

Line 10 switches to space-y-section-gap, which is consistent with density-aware section spacing.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

web/src/pages/setup/ProvidersStep.tsx (1)

162-162: Banner padding tokenization is correctly applied.

Line 162 uses p-card, which keeps warning-banner padding density-aware instead of fixed spacing.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

web/src/pages/agents/AgentDetailSkeleton.tsx (1)

5-5: Root section spacing token is correctly used.

Line 5 adopts space-y-section-gap, consistent with density-aware page/skeleton spacing.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

web/src/pages/setup/CompanyStep.tsx (1)

78-78: Card container now correctly uses density-aware padding.

Line 78’s p-card update aligns the form container with tokenized card spacing.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

web/src/pages/TaskDetailPage.tsx (1)

113-113: Both spacing updates are consistent with token standards.

Line 113 (space-y-section-gap) and Line 120 (p-card) correctly remove fixed layout/banner spacing in favor of density-aware tokens.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

Also applies to: 120-120

web/CLAUDE.md (1)

113-113: Enforcement docs update is clear and actionable.

Line 113 explicitly codifies the Framer Motion duration rule, which strengthens automated and manual token compliance.

Based on learnings: "Run PostToolUse hook (scripts/check_web_design_system.py) automatically on every Edit/Write to web/src/ files to catch hardcoded colors, hex values, font-family declarations, missing Storybook stories, duplicate patterns, and complex map blocks. Fix all violations before proceeding".

web/src/pages/approvals/ApprovalDetailDrawer.tsx (1)

7-7: Motion preset and spacing token adoption are both correct.

Line 33 now uses shared tweenExitFast (imported on Line 7), and Line 251 uses space-y-section-gap; both align with the token-enforcement direction of this PR.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

Also applies to: 33-33, 251-251

web/src/pages/dashboard/DashboardSkeleton.tsx (1)

5-5: Spacing token update is correctly applied without side effects.

Line 5 uses space-y-section-gap and keeps the existing loading semantics/accessibility intact.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

web/src/pages/approvals/ApprovalCard.tsx (1)

69-69: LGTM: Design token migration correctly applied.

The change from p-4 to p-card correctly implements density-aware spacing for the card container, making the padding responsive to the user's density preference while maintaining the card's visual hierarchy. As per coding guidelines, density-aware spacing tokens must be used instead of hardcoded values.

web/src/pages/SettingsPage.tsx (1)

266-266: LGTM: Section spacing token correctly applied.

The migration from space-y-6 to space-y-section-gap correctly implements density-aware page-level spacing, allowing the vertical gaps between major sections to adapt to the user's density preference. As per coding guidelines, density-aware spacing tokens must be used for layout spacing.

web/src/pages/settings/AdvancedModeBanner.tsx (1)

12-12: LGTM: Banner padding migrated to design token.

The change from px-4 py-2 to p-card correctly migrates the banner to density-aware spacing. Note that this changes the padding from asymmetric (16px horizontal, 8px vertical) to uniform (14px default on all sides), which is consistent with the PR's design decision to standardize banner padding across ~20 alert/warning/status banners. As per coding guidelines, density-aware spacing tokens must be used instead of hardcoded values.

web/src/pages/org-edit/OrgEditSkeleton.tsx (1)

5-5: LGTM: Skeleton spacing token correctly applied.

The migration from space-y-6 to space-y-section-gap correctly implements density-aware spacing for the skeleton sections, ensuring loading states match the density of the actual content. As per coding guidelines, density-aware spacing tokens must be used for layout spacing.

web/src/pages/meetings/MeetingsSkeleton.tsx (1)

5-5: LGTM: Skeleton spacing token correctly applied.

The migration from space-y-6 to space-y-section-gap correctly implements density-aware spacing, ensuring the skeleton's section gaps adapt to the user's density preference. As per coding guidelines, density-aware spacing tokens must be used for layout spacing.

web/src/pages/meetings/MeetingDetailSkeleton.tsx (1)

5-5: LGTM: Skeleton spacing token correctly applied.

The migration from space-y-6 to space-y-section-gap correctly implements density-aware spacing for the skeleton layout. As per coding guidelines, density-aware spacing tokens must be used for layout spacing.

web/src/pages/SettingsSinksPage.tsx (1)

65-65: LGTM: Page-level spacing token correctly applied.

The migration from space-y-6 to space-y-section-gap correctly implements density-aware page-level spacing, consistent with the broader design token migration across all settings pages. As per coding guidelines, density-aware spacing tokens must be used for layout spacing.

web/src/pages/approvals/ApprovalsSkeleton.tsx (1)

5-5: LGTM: Skeleton spacing token correctly applied.

The migration from space-y-6 to space-y-section-gap correctly implements density-aware spacing for the skeleton sections, ensuring loading states respect the user's density preference. As per coding guidelines, density-aware spacing tokens must be used for layout spacing.

web/src/pages/setup/TemplateVariables.tsx (1)

22-22: LGTM!

The change from p-4 to p-card correctly applies the density-aware padding token for this card container, aligning with the design system's spacing guidelines.

web/src/pages/DashboardPage.tsx (2)

31-31: LGTM!

The root container now uses space-y-section-gap instead of hardcoded space-y-6, enabling density-aware vertical spacing that responds to the user's density preference.

34-39: LGTM!

The error alert banner correctly uses p-card for density-aware padding, consistent with the PR-wide standardization of alert/banner styling.

web/src/pages/settings/SettingsSkeleton.tsx (1)

5-5: LGTM!

The skeleton container now uses space-y-section-gap for density-aware vertical spacing while preserving all accessibility attributes.

web/src/pages/ApprovalsPage.tsx (2)

226-226: LGTM!

The page container now uses space-y-section-gap for density-aware vertical spacing.

229-241: LGTM!

Both the error alert (Line 230) and the WebSocket disconnection warning (Line 237) correctly use p-card for density-aware padding, maintaining consistency with the standardized alert/banner styling across the dashboard.

web/src/pages/BudgetForecastPage.tsx (3)

90-90: LGTM!

The loading skeleton container correctly uses space-y-section-gap for density-aware vertical spacing.

104-104: LGTM!

The main content container uses space-y-section-gap, consistent with the loading state and other pages.

116-128: LGTM!

Both the error alert (Line 117) and WebSocket disconnection warning (Line 124) correctly use p-card for density-aware padding.

web/src/pages/MessagesPage.tsx (1)

147-165: LGTM!

All three status banners (error, channels error, and WebSocket disconnection warning) correctly use p-card for density-aware padding, consistent with the standardized alert styling across the dashboard.

web/src/pages/tasks/TaskBoardSkeleton.tsx (1)

21-21: LGTM!

The skeleton container now uses space-y-section-gap for density-aware vertical spacing while preserving accessibility attributes.

web/src/pages/tasks/TaskDetailPanel.tsx (3)

11-11: LGTM!

The import correctly adds tweenExitFast from the shared motion presets.

28-32: LGTM!

The exit transition now uses the shared tweenExitFast preset instead of an inline definition. Per the context snippet from web/src/lib/motion.ts:85-90, this preset provides identical timing values (duration: 0.15, ease: "easeIn"), ensuring no behavioral change while improving maintainability and design token compliance.

132-132: LGTM!

The content container now uses space-y-section-gap for density-aware vertical spacing. As per coding guidelines, density-aware spacing tokens should be used instead of hardcoded values.

web/src/pages/setup/TemplateCard.tsx (1)

53-53: Good token migration on card container.

p-card replacement is clean and keeps the rest of the styling behavior intact.

web/src/pages/OrgEditPage.tsx (1)

101-101: Design-token updates look correct across page and banners.

Spacing and banner padding replacements are consistent and non-invasive.

Also applies to: 108-108, 117-117, 135-135, 143-143

web/src/pages/MeetingsPage.tsx (1)

86-86: Solid token standardization for page rhythm and banners.

The updated classes are consistent with the rest of the PR and preserve existing UI states.

Also applies to: 93-93, 100-100

web/src/pages/MeetingDetailPage.tsx (1)

55-56: Looks good — tokenized spacing/padding applied consistently.

No regressions visible in control flow or state handling around these UI blocks.

Also applies to: 74-74, 76-76, 83-83

web/src/pages/AgentDetailPage.tsx (1)

44-44: Clean migration to spacing/padding tokens.

These updates are consistent with the page’s existing alert patterns and layout.

Also applies to: 52-52, 54-54, 61-61

web/src/pages/BudgetPage.tsx (1)

86-86: Token compliance change is correct and consistent.

Good alignment with the broader spacing/banner standardization in this PR.

Also applies to: 93-93, 100-100

web/src/pages/setup/ProviderProbeResults.tsx (1)

91-91: Nice tokenization update on provider probe container.

p-card integration is straightforward and preserves existing structure.

web/src/pages/approvals/BatchActionBar.tsx (1)

4-4: Good move to shared motion preset for exit animation.

Using tweenExitFast here improves consistency with the rest of the motion system.

Also applies to: 17-17

web/src/pages/AgentsPage.tsx (1)

22-22: Tokenized spacing and banner padding are correctly applied.

Good replacement of hardcoded spacing with space-y-section-gap and p-card while keeping alert/status semantics intact.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

Also applies to: 34-35, 45-46

web/src/pages/SettingsNamespacePage.tsx (1)

75-75: Spacing token migration is consistent and correct.

Both namespace layouts and both banners now use approved density-aware tokens without behavior changes.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

Also applies to: 94-94, 109-110, 120-121

web/src/components/ui/animated-presence.tsx (1)

3-3: Shared motion presets are applied cleanly.

Nice replacement of inline transition objects with tweenDefault/tweenExitFast; this improves consistency and maintainability.

Also applies to: 19-20, 24-25

web/src/pages/messages/MessageThread.tsx (1)

4-4: Exit transition tokenization looks good.

Using tweenFast removes inline timing configuration and keeps motion config centralized in @/lib/motion.

Also applies to: 72-72

web/src/pages/tasks/TaskCard.tsx (1)

46-47: Card padding token usage is correct.

Replacing hardcoded card padding with p-card is exactly the expected design-token migration.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

web/src/components/ui/drawer.tsx (1)

6-6: Drawer motion presets are integrated properly.

Good move to shared motion presets for both overlay and panel exit paths, removing inline transition config.

Also applies to: 40-40, 124-124

scripts/check_web_design_system.py (1)

459-461: Good integration point for the new Framer transition check.

Adding this validator into check_file() keeps enforcement centralized in the existing PostToolUse path.

Based on learnings: "Run PostToolUse hook (scripts/check_web_design_system.py) automatically on every Edit/Write to web/src/ files ...".

.claude/skills/aurelio-review-pr/SKILL.md (1)

169-169: Great expansion of automated and reviewer-side token enforcement.

Adding the dedicated design-token-audit agent and explicit token checks materially improves review coverage for web changes.

Also applies to: 350-351, 353-353

.claude/skills/pre-pr-review/SKILL.md (1)

462-478: LGTM: renumbering is correct.

The renumbering of items 14-24 (previously 10-20) correctly accounts for the four new CSS checklist items inserted above. All item numbers and their content remain consistent.

.claude/agents/design-token-audit.md (3)

1-8: LGTM: agent metadata is well-structured.

The YAML frontmatter correctly defines:

  • name: matches the agent ID used in the skill roster
  • description: clear and specific
  • tools: appropriate for file scanning (Read, Grep, Glob)

46-58: LGTM: report format and filtering rules are clear.

The report format (lines 46-52) is well-defined with file/line, violation, fix, and severity. The filtering rules (lines 54-58) correctly distinguish between design token violations (Framer Motion transition objects) and unrelated patterns (Tailwind duration-* CSS classes).

61-65: All referenced files verified to exist.

Verification confirms all five files referenced in the agent prompt exist at their specified paths:

  • web/src/styles/design-tokens.css ✓
  • web/src/styles/global.css ✓
  • web/src/lib/motion.ts ✓
  • web/src/hooks/useAnimationPreset.ts ✓
  • docs/design/brand-and-ux.md ✓

Each file contains the expected content for its purpose (design token definitions, Tailwind configuration, motion presets, animation hook implementation, and brand guidelines respectively). No action required.

.claude/agents/design-token-audit.md

Hardcoded `transition: { duration: N }` or `transition={{ duration: N }}` instead of importing presets from `@/lib/motion` (`tweenDefault`, `tweenFast`, `tweenExitFast`, `springDefault`, etc.) or using the `useAnimationPreset()` hook.

**Skip:** `lib/motion.ts` (preset definitions), `hooks/useAnimationPreset.ts`, `.stories.tsx` files, `ThemePreview.tsx` (intentional demo).
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 31, 2026

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Skip pattern may be too broad: .stories.tsx files.

Line 22 excludes all .stories.tsx files from Framer Motion transition checks:

Skip: lib/motion.ts (preset definitions), hooks/useAnimationPreset.ts, .stories.tsx files, ThemePreview.tsx (intentional demo).

While Storybook stories often use inline transitions for demonstration purposes, this blanket exclusion means that if a production component is incorrectly using hardcoded transitions, and that pattern is copy-pasted into a story, the agent won't flag it. Storybook stories should ideally demonstrate correct usage of the design system.

Recommendation: Consider narrowing this skip pattern to only exclude transition overrides in story-specific wrapper components (e.g., animation demo controls), not the component implementations themselves within .stories.tsx files.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.claude/agents/design-token-audit.md at line 22, The skip pattern currently
excludes all `.stories.tsx` files from Framer Motion transition checks (line
listing `lib/motion.ts`, `hooks/useAnimationPreset.ts`, `.stories.tsx` files,
`ThemePreview.tsx`); narrow this to only skip known story-specific demo/wrapper
files by updating the skip list in `.claude/agents/design-token-audit.md` to
exclude explicit filenames or patterns like story files with `Demo`, `Wrapper`,
or `Controls` in their names (and keep `lib/motion.ts`,
`hooks/useAnimationPreset.ts`, `ThemePreview.tsx` as-is) so component
implementation stories still get scanned for hardcoded transitions.

@Aureliolo Aureliolo temporarily deployed to cloudflare-preview March 31, 2026 09:59 — with GitHub Actions Inactive
coderabbitai[bot]
coderabbitai bot requested changes Mar 31, 2026
View reviewed changes
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 5

♻️ Duplicate comments (1)
.claude/skills/aurelio-review-pr/SKILL.md (1)

352-352: ⚠️ Potential issue | 🟡 Minor

Section-gap checklist is still too narrow.

Line 352 only lists space-y-6/gap-6; this can miss section-stack violations using space-y-4/gap-4. Expand examples to improve detection coverage.

🛠️ Suggested wording refinement 
-12. Page-level section gaps using `space-y-6`/`gap-6` instead of `space-y-section-gap` or `gap-section-gap` (MEDIUM)
+12. Page-level section gaps using `space-y-4`/`space-y-6` or `gap-4`/`gap-6` instead of `space-y-section-gap` or `gap-section-gap` (MEDIUM)

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.claude/skills/aurelio-review-pr/SKILL.md at line 352, Update the
section-gap examples to cover smaller hardcoded spacing tokens beyond
space-y-6/gap-6 by adding space-y-4, gap-4 (and any other commonly used
hardcoded sizes like space-y-2, gap-2) so the rule detects section-stack
violations using those values; reference the existing examples named "space-y-6"
and "gap-6" (replace/augment them) and explicitly recommend density-aware tokens
such as gap-section-gap, gap-grid-gap, and p-card as the allowed alternatives.
🤖 Prompt for all review comments with AI agents 
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@scripts/check_web_design_system.py`:
- Around line 106-110: The skip set _FM_DURATION_SKIP_FILES currently lists
basenames and the check uses file_path.name (e.g., at the file_path.name usage),
which can incorrectly skip unrelated files; update the skip logic to compare
against the file's relative path instead of basename: change
_FM_DURATION_SKIP_FILES entries to the relative paths you intend to skip and
replace uses of file_path.name with a relative-path value derived from the repo
root (e.g., posix-style relative string via Path(...).relative_to(root) or
os.path.relpath) before membership checks so matching is precise; update every
membership check (including the check currently at file_path.name around lines
248–251) to use that relative-path variable.

In `@web/src/pages/approvals/ApprovalDetailDrawer.tsx`:
- Line 274: In ApprovalDetailDrawer (the metadata grid div whose className
currently reads "grid grid-cols-2 gap-4 rounded-lg border border-border
p-card"), replace the hardcoded Tailwind spacing token gap-4 with the
density-aware token gap-grid-gap so the className becomes "grid grid-cols-2
gap-grid-gap rounded-lg border border-border p-card"; also scan the
ApprovalDetailDrawer component for any other remaining hardcoded gap-* usages
and update them to the appropriate spacing tokens.

In `@web/src/pages/setup/AccountStep.tsx`:
- Line 68: The card in AccountStep still uses the hardcoded padding class "p-6"
which breaks density consistency; update the card container inside the
AccountStep component to use the unified padding token "p-card" instead of "p-6"
(replace the "p-6" class on the card wrapper with "p-card") so the step follows
the migrated wrapper/alert density behavior.

In `@web/src/pages/setup/TemplateStep.tsx`:
- Line 250: The primary render path in the TemplateStep component still uses the
hardcoded utility class "space-y-8" (in the main JSX branch) while the loading
branch was updated to "space-y-section-gap", causing inconsistent page density;
update the main render's container(s) that use "space-y-8" to
"space-y-section-gap" (and any other instances in TemplateStep) so both loading
and primary branches use the same density token; search for "space-y-8" inside
TemplateStep and replace with "space-y-section-gap" to complete the migration.

In `@web/src/pages/tasks/TaskDetailPanel.tsx`:
- Line 222: In TaskDetailPanel replace the hardcoded Tailwind gap class on the
grid container (the div with className containing "grid grid-cols-2 gap-4
rounded-lg border border-border p-card") by swapping "gap-4" for the
density-aware token "gap-grid-gap" so the class list becomes "grid grid-cols-2
gap-grid-gap rounded-lg border border-border p-card"; ensure no other hardcoded
grid spacing remains in the same component.

---

Duplicate comments:
In @.claude/skills/aurelio-review-pr/SKILL.md:
- Line 352: Update the section-gap examples to cover smaller hardcoded spacing
tokens beyond space-y-6/gap-6 by adding space-y-4, gap-4 (and any other commonly
used hardcoded sizes like space-y-2, gap-2) so the rule detects section-stack
violations using those values; reference the existing examples named "space-y-6"
and "gap-6" (replace/augment them) and explicitly recommend density-aware tokens
such as gap-section-gap, gap-grid-gap, and p-card as the allowed alternatives.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 04856b74-88eb-45cf-a73e-f55c7f702d93

📥 Commits

Reviewing files that changed from the base of the PR and between 0c87d78 and a274129.

📒 Files selected for processing (33)
  • .claude/agents/design-token-audit.md
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
  • CLAUDE.md
  • docs/design/brand-and-ux.md
  • docs/design/ux-guidelines.md
  • scripts/check_web_design_system.py
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/meetings/MeetingContributions.tsx
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/src/pages/providers/ProviderFormModal.tsx
  • web/src/pages/settings/FloatingSaveBar.tsx
  • web/src/pages/settings/RestartBanner.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/setup/WizardModeStep.tsx
  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
  • GitHub Check: Build Sandbox
  • GitHub Check: Build Backend
  • GitHub Check: Dashboard Test
  • GitHub Check: Dependency Review
  • GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (7)
!(src/synthorg/observability/setup.py|src/synthorg/observability/sinks.py)

📄 CodeRabbit inference engine (CLAUDE.md)

Never use import logging, logging.getLogger(), or print() in application code. Exception: observability/setup.py and observability/sinks.py may use stdlib logging and print(..., file=sys.stderr) for bootstrap/handler-cleanup code

Files:

  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/meetings/MeetingContributions.tsx
  • web/src/pages/providers/ProviderFormModal.tsx
  • web/src/pages/settings/FloatingSaveBar.tsx
  • web/src/pages/TaskDetailPage.tsx
  • CLAUDE.md
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • docs/design/ux-guidelines.md
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/setup/WizardModeStep.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • docs/design/brand-and-ux.md
  • web/src/pages/settings/RestartBanner.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • scripts/check_web_design_system.py
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
web/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

web/src/**/*.{ts,tsx}: Web dashboard components in web/src/components/ui/ must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules
See web/CLAUDE.md for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

web/src/**/*.{ts,tsx}: Use Tailwind semantic classes (text-foreground, bg-card, text-accent, text-success, bg-danger, etc.) or CSS variables (var(--so-*)) for colors. NEVER hardcode hex values in .tsx/.ts files
Use font-sans or font-mono for typography (maps to Geist tokens). NEVER set fontFamily directly
Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing
Use token variables (var(--so-shadow-card-hover), border-border, border-bright) for shadows and borders. NEVER hardcode values
Do NOT use rgba() with hardcoded values -- use design token variables

Files:

  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/meetings/MeetingContributions.tsx
  • web/src/pages/providers/ProviderFormModal.tsx
  • web/src/pages/settings/FloatingSaveBar.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/setup/WizardModeStep.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/settings/RestartBanner.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
web/src/{components,pages}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (web/CLAUDE.md)

web/src/{components,pages}/**/*.{ts,tsx}: ALWAYS reuse existing components from web/src/components/ui/ before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)
Do NOT recreate status dots inline -- use <StatusBadge> component
Do NOT build card-with-header layouts from scratch -- use <SectionCard> component
Do NOT create metric displays with text-metric font-bold -- use <MetricCard> component
Do NOT render initials circles manually -- use <Avatar> component
Do NOT create complex (>8 line) JSX inside .map() -- extract to a shared component

Files:

  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/meetings/MeetingContributions.tsx
  • web/src/pages/providers/ProviderFormModal.tsx
  • web/src/pages/settings/FloatingSaveBar.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/setup/WizardModeStep.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/settings/RestartBanner.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
docs/**/*.md

📄 CodeRabbit inference engine (CLAUDE.md)

Use Markdown for documentation in docs/ directory, built with Zensical. Config: mkdocs.yml. Do not edit .github/CHANGELOG.md (auto-generated) or release config files manually

Files:

  • docs/design/ux-guidelines.md
  • docs/design/brand-and-ux.md
web/src/components/ui/**/*.{ts,tsx}

📄 CodeRabbit inference engine (web/CLAUDE.md)

When creating new shared components: place in web/src/components/ui/ with kebab-case filename, create .stories.tsx file alongside with all states, export props as TypeScript interface, use design tokens exclusively, and import cn from @/lib/utils for conditional class merging

Files:

  • web/src/components/ui/skeleton.tsx
**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.py: Do not use from __future__ import annotations -- Python 3.14 has native PEP 649 lazy annotations
Use except A, B: syntax (PEP 758 except syntax, no parentheses) for multiple exception handling in Python 3.14

Files:

  • scripts/check_web_design_system.py
scripts/**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

All Python files in scripts/ may use relaxed ruff rules: print statements and deferred imports are allowed

Files:

  • scripts/check_web_design_system.py
🧠 Learnings (21)
📓 Common learnings 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use density-aware spacing tokens (`p-card`, `gap-section-gap`, `gap-grid-gap`) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Do NOT use `rgba()` with hardcoded values -- use design token variables

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : ALWAYS reuse existing components from `web/src/components/ui/` before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/components/ui/**/*.{ts,tsx} : When creating new shared components: place in `web/src/components/ui/` with kebab-case filename, create `.stories.tsx` file alongside with all states, export props as TypeScript interface, use design tokens exclusively, and import `cn` from `@/lib/utils` for conditional class merging
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use density-aware spacing tokens (`p-card`, `gap-section-gap`, `gap-grid-gap`) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing

Applied to files:

  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/meetings/MeetingContributions.tsx
  • web/src/pages/providers/ProviderFormModal.tsx
  • web/src/pages/TaskDetailPage.tsx
  • CLAUDE.md
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/setup/WizardModeStep.tsx
  • docs/design/brand-and-ux.md
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/components/ui/skeleton.tsx
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT create metric displays with `text-metric font-bold` -- use `<MetricCard>` component

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/TaskDetailPage.tsx
  • CLAUDE.md
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • docs/design/brand-and-ux.md
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/components/ui/skeleton.tsx
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use Tailwind semantic classes (`text-foreground`, `bg-card`, `text-accent`, `text-success`, `bg-danger`, etc.) or CSS variables (`var(--so-*)`) for colors. NEVER hardcode hex values in `.tsx`/`.ts` files

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • CLAUDE.md
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • docs/design/brand-and-ux.md
  • web/src/pages/setup/AccountStep.tsx
  • web/src/components/ui/skeleton.tsx
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : ALWAYS reuse existing components from `web/src/components/ui/` before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/TaskDetailPage.tsx
  • CLAUDE.md
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • docs/design/brand-and-ux.md
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT recreate status dots inline -- use `<StatusBadge>` component

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AccountStep.tsx
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT build card-with-header layouts from scratch -- use `<SectionCard>` component

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/components/ui/skeleton.tsx
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use token variables (`var(--so-shadow-card-hover)`, `border-border`, `border-bright`) for shadows and borders. NEVER hardcode values

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • CLAUDE.md
  • web/src/pages/setup/ProvidersStep.tsx
  • docs/design/brand-and-ux.md
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • CLAUDE.md
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • docs/design/brand-and-ux.md
  • web/src/pages/setup/AccountStep.tsx
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/src/pages/TaskDetailPage.tsx
  • CLAUDE.md
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • docs/design/brand-and-ux.md
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Do NOT use `rgba()` with hardcoded values -- use design token variables

Applied to files:

  • CLAUDE.md
  • docs/design/brand-and-ux.md
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/components/ui/**/*.{ts,tsx} : When creating new shared components: place in `web/src/components/ui/` with kebab-case filename, create `.stories.tsx` file alongside with all states, export props as TypeScript interface, use design tokens exclusively, and import `cn` from `@/lib/utils` for conditional class merging

Applied to files:

  • CLAUDE.md
  • docs/design/brand-and-ux.md
  • web/src/pages/setup/AccountStep.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Run PostToolUse hook (`scripts/check_web_design_system.py`) automatically on every Edit/Write to `web/src/` files to catch hardcoded colors, hex values, font-family declarations, missing Storybook stories, duplicate patterns, and complex map blocks. Fix all violations before proceeding

Applied to files:

  • CLAUDE.md
  • scripts/check_web_design_system.py
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Dependabot: daily updates (uv, github-actions, npm, pre-commit, docker, gomod), all updates grouped into 1 PR per ecosystem, no auto-merge. Review before merge with `/review-dep-pr`

Applied to files:

  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
📚 Learning: 2026-03-19T07:12:14.508Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to src/synthorg/security/**/*.py : Security package (security/): SecOps agent, rule engine (soft-allow/hard-deny, fail-closed), audit log, output scanner, output scan response policies (redact/withhold/log-only/autonomy-tiered), risk classifier, risk tier classifier, action type registry, ToolInvoker security integration, progressive trust (4 strategies), autonomy levels (presets, resolver, change strategy), timeout policies (park/resume)

Applied to files:

  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: When review agents find valid issues (including pre-existing issues in surrounding code, suggestions, and adjacent findings), fix them all. No deferring or 'out of scope' skipping

Applied to files:

  • .claude/skills/pre-pr-review/SKILL.md
📚 Learning: 2026-03-16T06:24:56.341Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-19T07:12:14.508Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/{**/*.stories.tsx,.storybook/preview.tsx} : In Storybook stories: use `parameters.a11y.test: 'error' | 'todo' | 'off'` for a11y testing (replaces old `.element` and `.manual`). Set globally in `preview.tsx` to enforce WCAG compliance on all stories

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: In tsconfig.json for Storybook: omit explicit `"strict": true` (defaults to true in TypeScript 6) but ensure Vite config includes `/// <reference types="vite/client" />` for CSS side-effect imports

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/**/*.stories.{ts,tsx} : In Storybook stories: import test utilities from `storybook/test` (not `storybook/test`), and actions from `storybook/actions` (not `storybook/addon-actions`)

Applied to files:

  • .claude/agents/design-token-audit.md
🔇 Additional comments (35)
web/src/pages/meetings/MeetingContributions.tsx (1)

38-38: Good tokenization update for section spacing.

Switching to space-y-section-gap is consistent with the density-aware design system and keeps this page responsive to density mode changes.

As per coding guidelines: “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing”.

web/src/pages/OrgChartPage.tsx (2)

456-474: Good tokenization of banner padding and status blocks.

These replacements correctly standardize alert/status containers on p-card and keep semantic token classes intact.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing."

569-569: Top-level page spacing update is correct.

Using gap-section-gap here is consistent with section-level spacing token rules.

Based on learnings: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing."

web/src/pages/providers/ProviderFormModal.tsx (1)

272-275: Good tokenization update for modal spacing and error-banner padding.

Both changes correctly replace fixed spacing with density-aware design tokens (gap-section-gap, p-card) and align with the PR objective for token compliance.

As per coding guidelines: “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing”.

web/src/pages/org-edit/AgentsTab.tsx (1)

211-211: LGTM! Correct density-aware spacing token.

The migration from space-y-6 to space-y-section-gap correctly applies the density-aware section gap token, allowing the vertical spacing to respond to user density preferences (dense/medium/sparse). This aligns with the DepartmentsTab pattern and eliminates hardcoded spacing.

Based on learnings: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

web/src/pages/org-edit/DepartmentsTab.tsx (1)

182-182: LGTM! Correct density-aware spacing token.

The migration from space-y-6 to space-y-section-gap correctly applies the density-aware section gap token. This change ensures consistent vertical spacing across the org-edit tabs (matches AgentsTab line 211) and allows the layout to respond to user density preferences.

Based on learnings: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

web/src/pages/approvals/ApprovalDetailDrawer.tsx (2)

7-7: Good move to shared exit motion preset.

Using tweenExitFast centralizes exit timing and keeps this drawer aligned with the motion system.

Also applies to: 33-33

251-251: Section spacing token applied correctly.

Line 251 uses space-y-section-gap, which matches the density-aware spacing system.

web/src/pages/tasks/TaskDetailPanel.tsx (2)

11-11: Motion preset adoption looks correct.

PANEL_VARIANTS.exit now uses the shared tweenExitFast preset, which improves consistency and maintainability.

Also applies to: 31-31

132-132: Correct tokenized section gap usage.

Line 132’s space-y-section-gap aligns this panel content with density-aware spacing rules.

web/src/pages/LoginPage.tsx (1)

180-190: Good token migration for alert padding.

Both alert banners now use p-card and keep existing semantic color classes and role="alert" behavior intact.

As per coding guidelines: “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing.”

web/src/pages/setup/SetupSummary.tsx (1)

41-41: Spacing token update looks correct.

Using space-y-section-gap here aligns with the density-aware spacing standard and keeps the existing SectionCard-based layout intact.

As per coding guidelines: “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing.”

web/src/pages/budget/ThresholdAlerts.tsx (1)

33-33: Nice replacement of hardcoded banner padding.

p-card keeps this alert token-compliant without changing behavior or severity styling logic.

As per coding guidelines: “Never hardcode hex colors, font-family, or pixel spacing -- use design tokens.”

web/src/pages/setup/WizardModeStep.tsx (1)

91-91: Grid spacing token migration is good.

gap-grid-gap is the right tokenized class for this two-column option grid.

As per coding guidelines: “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing.”

web/src/pages/setup/SkipWizardForm.tsx (1)

48-48: Both spacing updates are aligned with the design system.

Using space-y-section-gap for the container and p-card for the error alert is consistent and keeps the form behavior unchanged.

As per coding guidelines: “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing.”

Also applies to: 67-67

web/src/pages/TaskDetailPage.tsx (1)

113-113: Token replacements are solid across layout, banner, and metadata card.

space-y-section-gap and p-card are applied consistently and preserve the existing structure/UX.

As per coding guidelines: “Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing.”

Also applies to: 120-120, 203-203

web/src/pages/settings/FloatingSaveBar.tsx (1)

3-3: Good move to centralized motion preset.

Switching to springDefault removes inline transition tuning and keeps motion behavior consistent with shared presets.

Also applies to: 33-33

web/src/pages/setup/WizardSkeleton.tsx (1)

18-18: No changes needed—spacing utility is correctly registered.

The space-y-section-gap class is properly defined via Tailwind v4's @theme inline mechanism in web/src/styles/global.css, which maps --spacing-section-gap to the density-aware --so-density-section-gap variable. This approach is used throughout the codebase (80+ instances) and complies with the density-aware spacing token guideline.

			> Likely an incorrect or invalid review comment.
web/src/components/ui/skeleton.tsx (1)

69-69: Good token migration in skeleton containers.

These class updates are consistent with the density-aware spacing rollout and preserve semantic color/border tokens.

Also applies to: 83-83, 110-110

web/src/pages/setup/CompanyStep.tsx (1)

61-61: Looks good — spacing and alert tokenization are consistent.

Also applies to: 78-78, 147-147

web/src/pages/setup/CompleteStep.tsx (1)

46-46: LGTM for CompleteStep token updates.

Also applies to: 66-66

web/src/pages/setup/ThemeStep.tsx (1)

94-94: Good consistency update for density-aware layout spacing.

Also applies to: 102-102, 104-104

web/src/pages/setup/AgentsStep.tsx (1)

104-104: All changed spacing/alert class updates look correct.

Also applies to: 125-125, 134-134, 141-141

web/src/pages/setup/AccountStep.tsx (1)

122-122: Nice update on the inline error banner tokenization.

web/src/pages/setup/ProvidersStep.tsx (1)

141-141: LGTM — providers step token migration is consistent and clean.

Also applies to: 151-151, 162-162, 172-172

web/src/pages/ProvidersPage.tsx (1)

34-34: Design-token padding update looks correct.

Line 34 correctly replaces hardcoded banner padding with p-card while preserving semantics and styling intent.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

web/src/pages/ProviderDetailPage.tsx (1)

43-45: Token migration is consistent in both error states.

Lines 43-45 and Line 66 correctly use gap-section-gap/p-card for density-aware spacing in fallback and partial-error banners.

As per coding guidelines: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing".

Also applies to: 66-66

docs/design/brand-and-ux.md (1)

95-96: Density guidance clarification is strong and actionable.

The new token-usage note makes implementation intent explicit and reduces ambiguity between documented raw values and required component classes.

CLAUDE.md (1)

116-116: Policy update correctly includes motion-token enforcement.

Line 116 now matches the new review/enforcement scope for Framer Motion transitions and preset usage.

docs/design/ux-guidelines.md (1)

386-386: Motion guideline update is consistent with preset-based usage.

The new tweenExitFast entry and Line 392 reference keep the transition spec aligned with shared preset usage.

Also applies to: 392-392

.claude/skills/aurelio-review-pr/SKILL.md (1)

169-169: Good addition: dedicated design-token audit agent trigger.

Line 169 strengthens PR review coverage for web_src token violations.

scripts/check_web_design_system.py (1)

92-103: Multiline Framer-duration detection is integrated correctly.

Running the regex across full file content and wiring it into check_file() resolves the prior line-by-line detection gap.

Also applies to: 259-277, 465-467

web/src/pages/settings/RestartBanner.tsx (1)

2-2: > Likely an incorrect or invalid review comment.

.claude/skills/pre-pr-review/SKILL.md (1)

261-261: LGTM! Previous review issues addressed.

The design-token-audit agent integration and frontend-reviewer checklist expansion are well-structured:

  • Line 261: Agent roster entry correctly triggers on web_src changes and references the proper agent prompt path.
  • Lines 456-460: The five new design token checklist items (Framer Motion transitions, card padding, section gaps, grid gaps, alert padding) comprehensively cover the violation categories defined in the companion agent, with appropriate severity (MEDIUM).
  • Lines 463-479: Renumbering of subsequent items (15-25) is correct.

Notably, this addresses two issues from previous reviews:

  1. The scope mismatch has been resolved—the agent prompt now explicitly includes both .tsx and .ts files (.claude/agents/design-token-audit.md line 16).
  2. The missing grid gap checklist item has been added (item 13 at line 459).

The checklist-to-agent alignment is complete: all five agent violation categories map 1:1 to checklist items 10-14.

Also applies to: 456-460, 463-479

.claude/agents/design-token-audit.md (1)

1-66: LGTM! Well-structured agent configuration.

This agent effectively enforces design token compliance for density and animation axes:

  • Lines 16, 18-44: The five violation categories (Framer Motion transitions, card padding, section gaps, grid gaps, alert padding) are clearly defined with actionable detection criteria and appropriate skip patterns.
  • Lines 54-58: The "HIGH confidence" threshold and explicit exclusions (Tailwind duration-* classes, internal component padding, table cells, Storybook wrappers) strike a good balance—minimizing false positives while catching genuine violations.
  • Lines 60-66: Reference documentation paths are correct and comprehensive.

The scope at line 16 (web/src/**/*.{tsx,ts}) correctly includes both .tsx and .ts files, resolving the previous scope mismatch noted in earlier reviews.

This agent complements the existing check_web_design_system.py PostToolUse hook well: the hook catches color/hex/font-family violations, while this agent handles spacing and Framer Motion patterns that require deeper semantic analysis.

Aureliolo and others added 4 commits March 31, 2026 12:17
@Aureliolo @claude
chore: audit full web dashboard for hardcoded design token violations
dfc93d4 
- Add tweenExitFast motion preset to lib/motion.ts
- Replace hardcoded Framer Motion transitions in 6 component files
  with presets (tweenDefault, tweenExitFast, tweenFast)
- Replace hardcoded px-4 py-2 with p-card on ~20 alert banners
- Replace hardcoded p-3/p-4 with p-card on ~10 card containers
- Replace hardcoded space-y-6 with space-y-section-gap on ~27
  page-level containers and skeletons
- Replace gap-4 with gap-section-gap on ProviderDetailPage
- Add check_hardcoded_framer_transitions to design system hook
- Create .claude/agents/design-token-audit.md audit agent
- Integrate design-token-audit agent into pre-pr-review and
  aurelio-review-pr skill rosters (condition: any web_src)
- Add density/animation token items to frontend-reviewer prompts

Closes #938

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@Aureliolo @claude
fix: drawer exit easing, pageExit preset ref, CLAUDE.md enforcement list
3a2cdeb 
- Drawer exit transition: tweenDefault (easeOut) -> tweenExitFast (easeIn)
  to correctly accelerate panel out of view on dismiss
- motion.ts pageExit: inline { duration: 0.15, easeIn } -> tweenExitFast
  reference for internal consistency
- web/CLAUDE.md: add Framer Motion transition check to Enforcement list

Pre-reviewed by 4 agents, 3 findings addressed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@Aureliolo @claude
fix: address 27 PR review items from 5 local agents + CodeRabbit + Ge…
9617aa7 
…mini

- docs: add tweenExitFast to ux-guidelines tween presets table
- docs: add density-aware token name note to brand-and-ux density table
- docs: add Framer Motion to CLAUDE.md "NEVER hardcode" bullet
- script: make Framer Motion regex multiline-aware (re.DOTALL + full-content scan)
- skills: add grid gap category (gap-grid-gap) to frontend-reviewer checklist
- skills: fix item numbering in both skill files
- agent: expand design-token-audit scope to include .ts files
- web: replace hardcoded spring transitions with springDefault import (2 files)
- web: replace px-4 py-3 with p-card on alert banners (5 files)
- web: replace px-3 py-2 with p-card on alert banners (8 files)
- web: replace space-y-6 with space-y-section-gap on root containers (13 files)
- web: replace gap-4/gap-6 with gap-section-gap/gap-grid-gap (4 files)
- web: replace p-3/p-4 with p-card on metadata grids (3 files)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@Aureliolo @claude
fix: address 6 CodeRabbit round-2 findings
e6951c4 
- script: use relative paths instead of basenames in _FM_DURATION_SKIP_PATHS
  to prevent incorrect skips on files with the same name in different dirs
- web: replace gap-4 with gap-grid-gap on metadata grids in
  ApprovalDetailDrawer, TaskDetailPanel, TaskDetailPage
- web: replace p-6 with p-card on AccountStep card for density consistency
- web: replace space-y-8 with space-y-section-gap on TemplateStep main render
  to match loading branch

Skipped 1 duplicate: expanding section-gap rule to include space-y-4/gap-2
would cause false positives on internal component spacing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@Aureliolo Aureliolo force-pushed the chore/audit-design-tokens branch from a274129 to e6951c4 Compare March 31, 2026 10:22
@Aureliolo Aureliolo temporarily deployed to cloudflare-preview March 31, 2026 10:23 — with GitHub Actions Inactive
coderabbitai[bot]
coderabbitai bot requested changes Mar 31, 2026
View reviewed changes
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
web/src/pages/setup/WizardSkeleton.tsx (1)

6-6: 🧹 Nitpick | 🔵 Trivial

Consider using space-y-section-gap for consistency.

While space-y-8 is acceptable standard Tailwind spacing, consider replacing it with space-y-section-gap for consistency with the design token approach applied to the content wrapper (line 18). If a larger gap is needed at this level, the design token could be extended or this intentional difference could be documented.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@web/src/pages/setup/WizardSkeleton.tsx` at line 6, Replace the hardcoded
Tailwind spacing on the outer wrapper div by swapping the class token space-y-8
with the design-token class space-y-section-gap in the JSX element that renders
the container (the div with className "w-full max-w-4xl space-y-8 px-4" in
WizardSkeleton component) so the component uses the same design token as the
inner content wrapper; if a larger gap is required, extend the design tokens
instead or add a brief comment explaining the intentional difference.
web/src/pages/TaskBoardPage.tsx (1)

233-233: 🧹 Nitpick | 🔵 Trivial

Note: Page uses space-y-4 while other pages use space-y-section-gap.

This may be intentional for tighter spacing on the task board's dense UI. If consistency across pages is desired, consider aligning with space-y-section-gap. Standard Tailwind spacing is permitted by the guidelines, so this isn't a violation.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@web/src/pages/TaskBoardPage.tsx` at line 233, The TaskBoardPage component
currently uses the Tailwind utility "space-y-4" on the container div, which
differs from other pages that use the design system token "space-y-section-gap";
to align spacing, change the div className from "space-y-4" to
"space-y-section-gap" in the TaskBoardPage (locate the div with
className="space-y-4" inside the TaskBoardPage component) or, if the denser
spacing is intentional, add a comment near that div explaining why "space-y-4"
is used to prevent accidental future changes.
🤖 Prompt for all review comments with AI agents 
Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.claude/agents/design-token-audit.md:
- Line 3: Update the agent metadata "description" field so it accurately
reflects what the audit enforces: remove claims like "all 5 theme axes" and "ALL
visual properties" and instead state the specific axes currently checked
(animation and density/spacing) and any limitations; also update the checklist
headers referenced around lines 12-16 to avoid implying coverage of color,
typography, or sidebar. Locate and edit the "description" entry and the
checklist section in .claude/agents/design-token-audit.md (the description field
and checklist block) to use precise wording such as "Audits web dashboard files
for design token violations for animation and density/spacing only — other axes
(color, typography, sidebar) are not yet enforced."

In @.claude/skills/aurelio-review-pr/SKILL.md:
- Around line 350-354: Update the checklist entries so the section-gap examples
match the dedicated design-token audit by adding gap-4 alongside gap-6 and
referencing the canonical tokens (space-y-section-gap and gap-section-gap);
specifically, modify the lines that call out "Page-level section gaps using
`space-y-6`/`gap-6`" to include `space-y-4`/`gap-4` or explicitly state "include
gap-4" and ensure the wording points reviewers to use the design-token tokens
`space-y-section-gap` and `gap-section-gap` as the canonical replacements to
catch both gap-4 and gap-6 cases.

In @.claude/skills/pre-pr-review/SKILL.md:
- Around line 456-460: Update the "Page-level section gaps" checklist item in
SKILL.md (the line mentioning gap-6) to also call out gap-4 so reviewers catch
both sizes; specifically edit the checklist text that currently reads about
"space-y-section-gap" or "gap-section-gap" / "gap-6" to mention "gap-4" as well
(and any variant like "space-y-4") so entries using gap-4 don't slip through the
prompt while keeping the reference to the design-token classes
(space-y-section-gap / gap-section-gap).

In `@docs/design/brand-and-ux.md`:
- Around line 95-96: Update the token usage note to also mention the
section-stack spacing token: add `space-y-section-gap` alongside
`gap-section-gap`, `p-card`, and `gap-grid-gap` so readers know to prefer the
density-aware `space-y-section-gap` for vertical spacing in stacked section
containers; ensure the sentence clarifies that `space-y-section-gap` is the
standardized token for section stacks and that these tokens replace raw Tailwind
spacing utilities.

In `@scripts/check_web_design_system.py`:
- Around line 260-270: The regex scan over the whole file
(HARDCODED_FM_DURATION_RE.finditer(content)) can match spans that are entirely
inside multiline/block comments, but the current check only looks at the first
physical line; update the guard so matches inside block comments are ignored by
either (a) masking/removing all block comments from content before running the
full-file regex, or (b) verifying the entire match span is not inside a comment
by using _is_in_comment_context for each physical line/offset covered by the
match (using content and lines to compute offsets) and still skipping matches
whose first non-whitespace line starts with _COMMENT_PREFIXES; apply this change
around the for m in HARDCODED_FM_DURATION_RE.finditer(content) loop to ensure /*
... */-wrapped matches are not reported.

---

Outside diff comments:
In `@web/src/pages/setup/WizardSkeleton.tsx`:
- Line 6: Replace the hardcoded Tailwind spacing on the outer wrapper div by
swapping the class token space-y-8 with the design-token class
space-y-section-gap in the JSX element that renders the container (the div with
className "w-full max-w-4xl space-y-8 px-4" in WizardSkeleton component) so the
component uses the same design token as the inner content wrapper; if a larger
gap is required, extend the design tokens instead or add a brief comment
explaining the intentional difference.

In `@web/src/pages/TaskBoardPage.tsx`:
- Line 233: The TaskBoardPage component currently uses the Tailwind utility
"space-y-4" on the container div, which differs from other pages that use the
design system token "space-y-section-gap"; to align spacing, change the div
className from "space-y-4" to "space-y-section-gap" in the TaskBoardPage (locate
the div with className="space-y-4" inside the TaskBoardPage component) or, if
the denser spacing is intentional, add a comment near that div explaining why
"space-y-4" is used to prevent accidental future changes.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: eb750504-ac7f-42eb-97e2-95296258276e

📥 Commits

Reviewing files that changed from the base of the PR and between a274129 and e6951c4.

📒 Files selected for processing (72)
  • .claude/agents/design-token-audit.md
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
  • CLAUDE.md
  • docs/design/brand-and-ux.md
  • docs/design/ux-guidelines.md
  • scripts/check_web_design_system.py
  • web/CLAUDE.md
  • web/src/components/ui/animated-presence.tsx
  • web/src/components/ui/drawer.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/lib/motion.ts
  • web/src/pages/AgentDetailPage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/SettingsPage.tsx
  • web/src/pages/SettingsSinksPage.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/agents/AgentDetailSkeleton.tsx
  • web/src/pages/agents/AgentsSkeleton.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/approvals/ApprovalsSkeleton.tsx
  • web/src/pages/approvals/BatchActionBar.tsx
  • web/src/pages/budget/BudgetSkeleton.tsx
  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/meetings/MeetingContributions.tsx
  • web/src/pages/meetings/MeetingDetailSkeleton.tsx
  • web/src/pages/meetings/MeetingsSkeleton.tsx
  • web/src/pages/messages/MessageThread.tsx
  • web/src/pages/messages/MessagesSkeleton.tsx
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/src/pages/org-edit/OrgEditSkeleton.tsx
  • web/src/pages/providers/ProviderFormModal.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/settings/FloatingSaveBar.tsx
  • web/src/pages/settings/RestartBanner.tsx
  • web/src/pages/settings/SettingsSkeleton.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/setup/ProviderProbeResults.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/setup/WizardModeStep.tsx
  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: Dashboard Test
  • GitHub Check: Build Backend
  • GitHub Check: Build Web
  • GitHub Check: Build Sandbox
  • GitHub Check: Dependency Review
  • GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (7)
!(src/synthorg/observability/setup.py|src/synthorg/observability/sinks.py)

📄 CodeRabbit inference engine (CLAUDE.md)

Never use import logging, logging.getLogger(), or print() in application code. Exception: observability/setup.py and observability/sinks.py may use stdlib logging and print(..., file=sys.stderr) for bootstrap/handler-cleanup code

Files:

  • web/src/pages/agents/AgentDetailSkeleton.tsx
  • web/src/pages/meetings/MeetingDetailSkeleton.tsx
  • web/src/pages/setup/WizardModeStep.tsx
  • web/src/pages/agents/AgentsSkeleton.tsx
  • web/src/pages/SettingsSinksPage.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/messages/MessagesSkeleton.tsx
  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/meetings/MeetingsSkeleton.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/meetings/MeetingContributions.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/CLAUDE.md
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/budget/BudgetSkeleton.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/SettingsPage.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/providers/ProviderFormModal.tsx
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/setup/ProviderProbeResults.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/messages/MessageThread.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/approvals/ApprovalsSkeleton.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • docs/design/ux-guidelines.md
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/org-edit/OrgEditSkeleton.tsx
  • web/src/pages/AgentDetailPage.tsx
  • docs/design/brand-and-ux.md
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • web/src/pages/settings/RestartBanner.tsx
  • CLAUDE.md
  • web/src/pages/approvals/BatchActionBar.tsx
  • web/src/pages/settings/FloatingSaveBar.tsx
  • web/src/components/ui/drawer.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • web/src/components/ui/animated-presence.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/lib/motion.ts
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • scripts/check_web_design_system.py
  • web/src/pages/settings/SettingsSkeleton.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
web/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

web/src/**/*.{ts,tsx}: Web dashboard components in web/src/components/ui/ must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules
See web/CLAUDE.md for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

web/src/**/*.{ts,tsx}: Use Tailwind semantic classes (text-foreground, bg-card, text-accent, text-success, bg-danger, etc.) or CSS variables (var(--so-*)) for colors. NEVER hardcode hex values in .tsx/.ts files
Use font-sans or font-mono for typography (maps to Geist tokens). NEVER set fontFamily directly
Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing
Use token variables (var(--so-shadow-card-hover), border-border, border-bright) for shadows and borders. NEVER hardcode values
Do NOT use rgba() with hardcoded values -- use design token variables

Files:

  • web/src/pages/agents/AgentDetailSkeleton.tsx
  • web/src/pages/meetings/MeetingDetailSkeleton.tsx
  • web/src/pages/setup/WizardModeStep.tsx
  • web/src/pages/agents/AgentsSkeleton.tsx
  • web/src/pages/SettingsSinksPage.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/messages/MessagesSkeleton.tsx
  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/meetings/MeetingsSkeleton.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/meetings/MeetingContributions.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/budget/BudgetSkeleton.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/SettingsPage.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/providers/ProviderFormModal.tsx
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/setup/ProviderProbeResults.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/messages/MessageThread.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/approvals/ApprovalsSkeleton.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/org-edit/OrgEditSkeleton.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • web/src/pages/settings/RestartBanner.tsx
  • web/src/pages/approvals/BatchActionBar.tsx
  • web/src/pages/settings/FloatingSaveBar.tsx
  • web/src/components/ui/drawer.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • web/src/components/ui/animated-presence.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/lib/motion.ts
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/settings/SettingsSkeleton.tsx
  • web/src/pages/BudgetForecastPage.tsx
web/src/{components,pages}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (web/CLAUDE.md)

web/src/{components,pages}/**/*.{ts,tsx}: ALWAYS reuse existing components from web/src/components/ui/ before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)
Do NOT recreate status dots inline -- use <StatusBadge> component
Do NOT build card-with-header layouts from scratch -- use <SectionCard> component
Do NOT create metric displays with text-metric font-bold -- use <MetricCard> component
Do NOT render initials circles manually -- use <Avatar> component
Do NOT create complex (>8 line) JSX inside .map() -- extract to a shared component

Files:

  • web/src/pages/agents/AgentDetailSkeleton.tsx
  • web/src/pages/meetings/MeetingDetailSkeleton.tsx
  • web/src/pages/setup/WizardModeStep.tsx
  • web/src/pages/agents/AgentsSkeleton.tsx
  • web/src/pages/SettingsSinksPage.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/messages/MessagesSkeleton.tsx
  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/meetings/MeetingsSkeleton.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/meetings/MeetingContributions.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/budget/BudgetSkeleton.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/SettingsPage.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/providers/ProviderFormModal.tsx
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/setup/ProviderProbeResults.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/messages/MessageThread.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/approvals/ApprovalsSkeleton.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/org-edit/OrgEditSkeleton.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • web/src/pages/settings/RestartBanner.tsx
  • web/src/pages/approvals/BatchActionBar.tsx
  • web/src/pages/settings/FloatingSaveBar.tsx
  • web/src/components/ui/drawer.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • web/src/components/ui/animated-presence.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/settings/SettingsSkeleton.tsx
  • web/src/pages/BudgetForecastPage.tsx
docs/**/*.md

📄 CodeRabbit inference engine (CLAUDE.md)

Use Markdown for documentation in docs/ directory, built with Zensical. Config: mkdocs.yml. Do not edit .github/CHANGELOG.md (auto-generated) or release config files manually

Files:

  • docs/design/ux-guidelines.md
  • docs/design/brand-and-ux.md
web/src/components/ui/**/*.{ts,tsx}

📄 CodeRabbit inference engine (web/CLAUDE.md)

When creating new shared components: place in web/src/components/ui/ with kebab-case filename, create .stories.tsx file alongside with all states, export props as TypeScript interface, use design tokens exclusively, and import cn from @/lib/utils for conditional class merging

Files:

  • web/src/components/ui/skeleton.tsx
  • web/src/components/ui/drawer.tsx
  • web/src/components/ui/animated-presence.tsx
**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.py: Do not use from __future__ import annotations -- Python 3.14 has native PEP 649 lazy annotations
Use except A, B: syntax (PEP 758 except syntax, no parentheses) for multiple exception handling in Python 3.14

Files:

  • scripts/check_web_design_system.py
scripts/**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

All Python files in scripts/ may use relaxed ruff rules: print statements and deferred imports are allowed

Files:

  • scripts/check_web_design_system.py
🧠 Learnings (25)
📓 Common learnings 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Do NOT use `rgba()` with hardcoded values -- use design token variables

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : ALWAYS reuse existing components from `web/src/components/ui/` before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use density-aware spacing tokens (`p-card`, `gap-section-gap`, `gap-grid-gap`) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/components/ui/**/*.{ts,tsx} : When creating new shared components: place in `web/src/components/ui/` with kebab-case filename, create `.stories.tsx` file alongside with all states, export props as TypeScript interface, use design tokens exclusively, and import `cn` from `@/lib/utils` for conditional class merging

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use token variables (`var(--so-shadow-card-hover)`, `border-border`, `border-bright`) for shadows and borders. NEVER hardcode values

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use Tailwind semantic classes (`text-foreground`, `bg-card`, `text-accent`, `text-success`, `bg-danger`, etc.) or CSS variables (`var(--so-*)`) for colors. NEVER hardcode hex values in `.tsx`/`.ts` files
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use density-aware spacing tokens (`p-card`, `gap-section-gap`, `gap-grid-gap`) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing

Applied to files:

  • web/src/pages/agents/AgentDetailSkeleton.tsx
  • web/src/pages/setup/WizardModeStep.tsx
  • web/src/pages/agents/AgentsSkeleton.tsx
  • web/src/pages/SettingsSinksPage.tsx
  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/messages/MessagesSkeleton.tsx
  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/meetings/MeetingsSkeleton.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/meetings/MeetingContributions.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/budget/BudgetSkeleton.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/SettingsPage.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/providers/ProviderFormModal.tsx
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/setup/ProviderProbeResults.tsx
  • web/src/pages/setup/CompanyStep.tsx
  • web/src/pages/SettingsNamespacePage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/approvals/ApprovalsSkeleton.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/org-edit/OrgEditSkeleton.tsx
  • web/src/pages/AgentDetailPage.tsx
  • docs/design/brand-and-ux.md
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/MeetingDetailPage.tsx
  • CLAUDE.md
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/ProviderDetailPage.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/settings/SettingsSkeleton.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT create metric displays with `text-metric font-bold` -- use `<MetricCard>` component

Applied to files:

  • web/src/pages/ProvidersPage.tsx
  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/AgentDetailPage.tsx
  • docs/design/brand-and-ux.md
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • CLAUDE.md
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use Tailwind semantic classes (`text-foreground`, `bg-card`, `text-accent`, `text-success`, `bg-danger`, etc.) or CSS variables (`var(--so-*)`) for colors. NEVER hardcode hex values in `.tsx`/`.ts` files

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/CLAUDE.md
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/tasks/TaskBoardSkeleton.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • docs/design/brand-and-ux.md
  • web/src/components/ui/skeleton.tsx
  • CLAUDE.md
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT recreate status dots inline -- use `<StatusBadge>` component

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/BudgetForecastPage.tsx
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : ALWAYS reuse existing components from `web/src/components/ui/` before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/CLAUDE.md
  • web/src/pages/org-edit/AgentsTab.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/approvals/ApprovalsSkeleton.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • CLAUDE.md
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/CLAUDE.md
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • docs/design/brand-and-ux.md
  • web/src/pages/BudgetPage.tsx
  • CLAUDE.md
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/src/pages/dashboard/DashboardSkeleton.tsx
  • web/src/pages/org-edit/DepartmentsTab.tsx
  • web/CLAUDE.md
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/AgentsPage.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/setup/ThemeStep.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • docs/design/brand-and-ux.md
  • web/src/pages/BudgetPage.tsx
  • CLAUDE.md
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/BudgetForecastPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use token variables (`var(--so-shadow-card-hover)`, `border-border`, `border-bright`) for shadows and borders. NEVER hardcode values

Applied to files:

  • web/src/pages/budget/ThresholdAlerts.tsx
  • web/CLAUDE.md
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • docs/design/brand-and-ux.md
  • CLAUDE.md
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT build card-with-header layouts from scratch -- use `<SectionCard>` component

Applied to files:

  • web/src/pages/setup/CompleteStep.tsx
  • web/src/pages/settings/AdvancedModeBanner.tsx
  • web/src/pages/DashboardPage.tsx
  • web/src/pages/setup/MiniOrgChart.tsx
  • web/src/pages/setup/SkipWizardForm.tsx
  • web/src/pages/approvals/ApprovalCard.tsx
  • web/src/pages/setup/TemplateVariables.tsx
  • web/src/pages/setup/SetupAgentCard.tsx
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/MeetingsPage.tsx
  • web/src/pages/setup/SetupSummary.tsx
  • web/src/pages/MessagesPage.tsx
  • web/src/pages/LoginPage.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/pages/OrgEditPage.tsx
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • web/src/pages/setup/ProvidersStep.tsx
  • web/src/pages/setup/TemplateCard.tsx
  • web/src/pages/ApprovalsPage.tsx
  • web/src/pages/TaskDetailPage.tsx
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • web/src/pages/AgentDetailPage.tsx
  • web/src/components/ui/skeleton.tsx
  • web/src/pages/BudgetPage.tsx
  • web/src/pages/OrgChartPage.tsx
  • web/src/pages/setup/AgentsStep.tsx
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • web/src/pages/BudgetForecastPage.tsx
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Run PostToolUse hook (`scripts/check_web_design_system.py`) automatically on every Edit/Write to `web/src/` files to catch hardcoded colors, hex values, font-family declarations, missing Storybook stories, duplicate patterns, and complex map blocks. Fix all violations before proceeding

Applied to files:

  • web/CLAUDE.md
  • CLAUDE.md
  • scripts/check_web_design_system.py
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Pre-commit hooks enforce: trailing-whitespace, end-of-file-fixer, check-yaml, check-toml, check-json, check-merge-conflict, check-added-large-files, no-commit-to-branch (main), ruff check+format, gitleaks, hadolint, golangci-lint+go vet (CLI), no-em-dashes, no-redundant-timeout, eslint-web (zero warnings)

Applied to files:

  • web/CLAUDE.md
📚 Learning: 2026-03-15T18:17:43.675Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:17:43.675Z
Learning: Pre-commit hooks: trailing-whitespace, end-of-file-fixer, check-yaml, check-toml, check-json, check-merge-conflict, check-added-large-files, no-commit-to-branch (main), ruff check+format, gitleaks, hadolint (Dockerfile linting).

Applied to files:

  • web/CLAUDE.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Do NOT use `rgba()` with hardcoded values -- use design token variables

Applied to files:

  • web/CLAUDE.md
  • web/src/pages/tasks/TaskDetailPanel.tsx
  • docs/design/brand-and-ux.md
  • CLAUDE.md
  • web/src/pages/approvals/ApprovalDetailDrawer.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/components/ui/**/*.{ts,tsx} : When creating new shared components: place in `web/src/components/ui/` with kebab-case filename, create `.stories.tsx` file alongside with all states, export props as TypeScript interface, use design tokens exclusively, and import `cn` from `@/lib/utils` for conditional class merging

Applied to files:

  • web/CLAUDE.md
  • web/src/pages/tasks/TaskCard.tsx
  • web/src/pages/setup/AccountStep.tsx
  • web/src/pages/setup/TemplateStep.tsx
  • CLAUDE.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT create complex (>8 line) JSX inside `.map()` -- extract to a shared component

Applied to files:

  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/TemplateStep.tsx
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: When review agents find valid issues (including pre-existing issues in surrounding code, suggestions, and adjacent findings), fix them all. No deferring or 'out of scope' skipping

Applied to files:

  • .claude/skills/pre-pr-review/SKILL.md
📚 Learning: 2026-03-15T21:49:53.264Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T21:49:53.264Z
Learning: Fix everything valid — never skip when review agents find valid issues (including pre-existing issues in surrounding code, suggestions, and findings adjacent to the PR's changes). No deferring, no 'out of scope' skipping.

Applied to files:

  • .claude/skills/pre-pr-review/SKILL.md
📚 Learning: 2026-03-19T07:12:14.508Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to src/synthorg/security/**/*.py : Security package (security/): SecOps agent, rule engine (soft-allow/hard-deny, fail-closed), audit log, output scanner, output scan response policies (redact/withhold/log-only/autonomy-tiered), risk classifier, risk tier classifier, action type registry, ToolInvoker security integration, progressive trust (4 strategies), autonomy levels (presets, resolver, change strategy), timeout policies (park/resume)

Applied to files:

  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/skills/aurelio-review-pr/SKILL.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Dependabot: daily updates (uv, github-actions, npm, pre-commit, docker, gomod), all updates grouped into 1 PR per ecosystem, no auto-merge. Review before merge with `/review-dep-pr`

Applied to files:

  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/skills/aurelio-review-pr/SKILL.md
📚 Learning: 2026-03-16T06:24:56.341Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-19T07:12:14.508Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/{**/*.stories.tsx,.storybook/preview.tsx} : In Storybook stories: use `parameters.a11y.test: 'error' | 'todo' | 'off'` for a11y testing (replaces old `.element` and `.manual`). Set globally in `preview.tsx` to enforce WCAG compliance on all stories

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: In tsconfig.json for Storybook: omit explicit `"strict": true` (defaults to true in TypeScript 6) but ensure Vite config includes `/// <reference types="vite/client" />` for CSS side-effect imports

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/**/*.stories.{ts,tsx} : In Storybook stories: import test utilities from `storybook/test` (not `storybook/test`), and actions from `storybook/actions` (not `storybook/addon-actions`)

Applied to files:

  • .claude/agents/design-token-audit.md

@Aureliolo @claude
fix: address 7 CodeRabbit round-3 findings
d1353ea 
- agent: fix misleading description claiming "all 5 theme axes" -- now
  accurately states animation + density/spacing only
- skills: expand section-gap rule to include space-y-4/gap-4 alongside
  space-y-6/gap-6 in both skill files
- docs: add space-y-section-gap to brand-and-ux token usage note
- script: strip block comments before full-content regex scan to prevent
  false positives inside /* ... */ blocks
- web: replace space-y-8 with space-y-section-gap on WizardSkeleton outer
  wrapper for consistency with inner content
- web: replace space-y-4 with space-y-section-gap on TaskBoardPage to
  match all other pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@Aureliolo Aureliolo temporarily deployed to cloudflare-preview March 31, 2026 10:43 — with GitHub Actions Inactive
coderabbitai[bot]
coderabbitai bot requested changes Mar 31, 2026
View reviewed changes
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents 
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@scripts/check_web_design_system.py`:
- Around line 264-276: The line and column calculations use m.start() from
stripped but compute offsets against content, causing mismatch; update the logic
to compute both line_num and column using the stripped string (e.g., use
stripped[:m.start()].count("\n")+1 for line_num and column = m.start() -
stripped.rfind("\n", 0, m.start()) - 1) and then use lines[line_num-1] (original
source line text) for prefix checks and pass that column value into
_is_in_comment_context so both checks are derived from the same masked-offset
space (refer to stripped, content, HARDCODED_FM_DURATION_RE,
_is_in_comment_context, lines, and m.start()).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 6ff8a3e8-35bd-42c9-b7eb-f292525208dd

📥 Commits

Reviewing files that changed from the base of the PR and between e6951c4 and d1353ea.

📒 Files selected for processing (7)
  • .claude/agents/design-token-audit.md
  • .claude/skills/aurelio-review-pr/SKILL.md
  • .claude/skills/pre-pr-review/SKILL.md
  • docs/design/brand-and-ux.md
  • scripts/check_web_design_system.py
  • web/src/pages/TaskBoardPage.tsx
  • web/src/pages/setup/WizardSkeleton.tsx
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: Build Backend
  • GitHub Check: Build Web
  • GitHub Check: Build Sandbox
  • GitHub Check: Dashboard Test
  • GitHub Check: Dependency Review
  • GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (6)
!(src/synthorg/observability/setup.py|src/synthorg/observability/sinks.py)

📄 CodeRabbit inference engine (CLAUDE.md)

Never use import logging, logging.getLogger(), or print() in application code. Exception: observability/setup.py and observability/sinks.py may use stdlib logging and print(..., file=sys.stderr) for bootstrap/handler-cleanup code

Files:

  • web/src/pages/setup/WizardSkeleton.tsx
  • docs/design/brand-and-ux.md
  • web/src/pages/TaskBoardPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • scripts/check_web_design_system.py
  • .claude/agents/design-token-audit.md
  • .claude/skills/aurelio-review-pr/SKILL.md
web/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

web/src/**/*.{ts,tsx}: Web dashboard components in web/src/components/ui/ must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules
See web/CLAUDE.md for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

web/src/**/*.{ts,tsx}: Use Tailwind semantic classes (text-foreground, bg-card, text-accent, text-success, bg-danger, etc.) or CSS variables (var(--so-*)) for colors. NEVER hardcode hex values in .tsx/.ts files
Use font-sans or font-mono for typography (maps to Geist tokens). NEVER set fontFamily directly
Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing
Use token variables (var(--so-shadow-card-hover), border-border, border-bright) for shadows and borders. NEVER hardcode values
Do NOT use rgba() with hardcoded values -- use design token variables

Files:

  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/TaskBoardPage.tsx
web/src/{components,pages}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (web/CLAUDE.md)

web/src/{components,pages}/**/*.{ts,tsx}: ALWAYS reuse existing components from web/src/components/ui/ before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)
Do NOT recreate status dots inline -- use <StatusBadge> component
Do NOT build card-with-header layouts from scratch -- use <SectionCard> component
Do NOT create metric displays with text-metric font-bold -- use <MetricCard> component
Do NOT render initials circles manually -- use <Avatar> component
Do NOT create complex (>8 line) JSX inside .map() -- extract to a shared component

Files:

  • web/src/pages/setup/WizardSkeleton.tsx
  • web/src/pages/TaskBoardPage.tsx
docs/**/*.md

📄 CodeRabbit inference engine (CLAUDE.md)

Use Markdown for documentation in docs/ directory, built with Zensical. Config: mkdocs.yml. Do not edit .github/CHANGELOG.md (auto-generated) or release config files manually

Files:

  • docs/design/brand-and-ux.md
**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.py: Do not use from __future__ import annotations -- Python 3.14 has native PEP 649 lazy annotations
Use except A, B: syntax (PEP 758 except syntax, no parentheses) for multiple exception handling in Python 3.14

Files:

  • scripts/check_web_design_system.py
scripts/**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

All Python files in scripts/ may use relaxed ruff rules: print statements and deferred imports are allowed

Files:

  • scripts/check_web_design_system.py
🧠 Learnings (24)
📓 Common learnings 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use density-aware spacing tokens (`p-card`, `gap-section-gap`, `gap-grid-gap`) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Do NOT use `rgba()` with hardcoded values -- use design token variables

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : ALWAYS reuse existing components from `web/src/components/ui/` before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use density-aware spacing tokens (`p-card`, `gap-section-gap`, `gap-grid-gap`) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing

Applied to files:

  • web/src/pages/setup/WizardSkeleton.tsx
  • docs/design/brand-and-ux.md
  • web/src/pages/TaskBoardPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
  • .claude/skills/aurelio-review-pr/SKILL.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Applied to files:

  • docs/design/brand-and-ux.md
  • web/src/pages/TaskBoardPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
  • .claude/skills/aurelio-review-pr/SKILL.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT create metric displays with `text-metric font-bold` -- use `<MetricCard>` component

Applied to files:

  • docs/design/brand-and-ux.md
  • web/src/pages/TaskBoardPage.tsx
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT build card-with-header layouts from scratch -- use `<SectionCard>` component

Applied to files:

  • web/src/pages/TaskBoardPage.tsx
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : ALWAYS reuse existing components from `web/src/components/ui/` before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)

Applied to files:

  • web/src/pages/TaskBoardPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
  • .claude/skills/aurelio-review-pr/SKILL.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use Tailwind semantic classes (`text-foreground`, `bg-card`, `text-accent`, `text-success`, `bg-danger`, etc.) or CSS variables (`var(--so-*)`) for colors. NEVER hardcode hex values in `.tsx`/`.ts` files

Applied to files:

  • web/src/pages/TaskBoardPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
  • .claude/skills/aurelio-review-pr/SKILL.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Applied to files:

  • web/src/pages/TaskBoardPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • scripts/check_web_design_system.py
  • .claude/agents/design-token-audit.md
  • .claude/skills/aurelio-review-pr/SKILL.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT recreate status dots inline -- use `<StatusBadge>` component

Applied to files:

  • web/src/pages/TaskBoardPage.tsx
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use token variables (`var(--so-shadow-card-hover)`, `border-border`, `border-bright`) for shadows and borders. NEVER hardcode values

Applied to files:

  • web/src/pages/TaskBoardPage.tsx
  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : Do NOT create complex (>8 line) JSX inside `.map()` -- extract to a shared component

Applied to files:

  • web/src/pages/TaskBoardPage.tsx
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Do NOT use `rgba()` with hardcoded values -- use design token variables

Applied to files:

  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: When review agents find valid issues (including pre-existing issues in surrounding code, suggestions, and adjacent findings), fix them all. No deferring or 'out of scope' skipping

Applied to files:

  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-15T21:49:53.264Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T21:49:53.264Z
Learning: Fix everything valid — never skip when review agents find valid issues (including pre-existing issues in surrounding code, suggestions, and findings adjacent to the PR's changes). No deferring, no 'out of scope' skipping.

Applied to files:

  • .claude/skills/pre-pr-review/SKILL.md
📚 Learning: 2026-03-19T07:12:14.508Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to src/synthorg/security/**/*.py : Security package (security/): SecOps agent, rule engine (soft-allow/hard-deny, fail-closed), audit log, output scanner, output scan response policies (redact/withhold/log-only/autonomy-tiered), risk classifier, risk tier classifier, action type registry, ToolInvoker security integration, progressive trust (4 strategies), autonomy levels (presets, resolver, change strategy), timeout policies (park/resume)

Applied to files:

  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/skills/aurelio-review-pr/SKILL.md
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Dependabot: daily updates (uv, github-actions, npm, pre-commit, docker, gomod), all updates grouped into 1 PR per ecosystem, no auto-merge. Review before merge with `/review-dep-pr`

Applied to files:

  • .claude/skills/pre-pr-review/SKILL.md
  • .claude/skills/aurelio-review-pr/SKILL.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Run PostToolUse hook (`scripts/check_web_design_system.py`) automatically on every Edit/Write to `web/src/` files to catch hardcoded colors, hex values, font-family declarations, missing Storybook stories, duplicate patterns, and complex map blocks. Fix all violations before proceeding

Applied to files:

  • scripts/check_web_design_system.py
  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-16T06:24:56.341Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-19T07:12:14.508Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/components/ui/**/*.{ts,tsx} : When creating new shared components: place in `web/src/components/ui/` with kebab-case filename, create `.stories.tsx` file alongside with all states, export props as TypeScript interface, use design tokens exclusively, and import `cn` from `@/lib/utils` for conditional class merging

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/{**/*.stories.tsx,.storybook/preview.tsx} : In Storybook stories: use `parameters.a11y.test: 'error' | 'todo' | 'off'` for a11y testing (replaces old `.element` and `.manual`). Set globally in `preview.tsx` to enforce WCAG compliance on all stories

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: In tsconfig.json for Storybook: omit explicit `"strict": true` (defaults to true in TypeScript 6) but ensure Vite config includes `/// <reference types="vite/client" />` for CSS side-effect imports

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/**/*.stories.{ts,tsx} : In Storybook stories: import test utilities from `storybook/test` (not `storybook/test`), and actions from `storybook/actions` (not `storybook/addon-actions`)

Applied to files:

  • .claude/agents/design-token-audit.md
📚 Learning: 2026-03-18T08:23:08.912Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-18T08:23:08.912Z
Learning: When approved deviations occur, update the relevant `docs/design/` page to reflect the new reality.

Applied to files:

  • .claude/agents/design-token-audit.md
🔇 Additional comments (11)
web/src/pages/setup/WizardSkeleton.tsx (1)

6-6: No changes needed — space-y-section-gap is a valid Tailwind utility class.

The class is correctly defined in web/src/styles/global.css (line 52) within the @theme block:

`@theme` inline {
  --spacing-section-gap: var(--so-density-section-gap);
  ...
}

Tailwind CSS v4's @theme feature automatically generates utility classes from custom spacing tokens, so space-y-section-gap is a valid generated class. This is the standard pattern used throughout the codebase (45+ files), and it functions correctly.

The alternative bracket notation (space-y-[var(--spacing-section-gap)]) is also valid but unnecessary when the token is already defined in the @theme block.

			> Likely an incorrect or invalid review comment.
web/src/pages/TaskBoardPage.tsx (1)

233-233: Design token migration looks correct.

The changes properly replace hardcoded spacing utilities with density-aware tokens:

  • space-y-section-gap for page-level vertical spacing (Line 233)
  • p-card for alert/banner padding (Lines 259, 266)

These align with the @theme inline definitions in global.css and will respond correctly to density preference changes. Based on learnings: "Use density-aware spacing tokens (p-card, gap-section-gap, gap-grid-gap) or standard Tailwind spacing."

Also applies to: 259-259, 266-266

scripts/check_web_design_system.py (3)

92-103: Regex handles multiline transitions correctly with DOTALL.

The re.DOTALL flag and [^}]* pattern now correctly match transition objects split across multiple lines. This addresses the prior review feedback about multiline patterns being missed.

105-110: Skip paths now use full relative paths.

Using _FM_DURATION_SKIP_PATHS with full relative paths (e.g., "web/src/lib/motion.ts") instead of basenames prevents accidental suppression of unrelated files with the same name. This aligns with the skip specification in .claude/agents/design-token-audit.md.

472-474: Integration of Framer Motion check into the file checker is clean.

The new check is properly integrated alongside existing design system validations.

docs/design/brand-and-ux.md (1)

95-96: Token usage documentation is accurate and complete.

The admonition correctly lists all four density-aware spacing tokens (p-card, space-y-section-gap, gap-section-gap, gap-grid-gap) that components must use instead of raw Tailwind utilities. This aligns with the enforcement rules in the design-token-audit agent and the Python checker script.

.claude/skills/aurelio-review-pr/SKILL.md (2)

169-169: Design-token-audit agent correctly added to roster.

The agent is properly triggered on web_src changes and references the correct prompt file at .claude/agents/design-token-audit.md.

350-374: Frontend-reviewer checklist now covers all design token categories.

The five new items (10-14) align with the design-token-audit agent's violation categories:

  • Item 10: Framer Motion transitions
  • Item 11: Card container padding
  • Item 12: Page-level section gaps (includes gap-4 as requested in prior feedback)
  • Item 13: Grid gaps (dedicated item with gap-grid-gap)
  • Item 14: Alert/banner padding

Subsequent items are correctly renumbered. This ensures the frontend-reviewer checklist and the dedicated design-token-audit agent have consistent coverage.

.claude/skills/pre-pr-review/SKILL.md (2)

261-261: Design-token-audit agent integration is consistent with aurelio-review-pr.

The roster entry correctly triggers on web_src changes and references the same agent prompt file.

456-479: Frontend-reviewer checklist updates are complete and consistent.

The five new design token items (10-14) match the aurelio-review-pr/SKILL.md checklist exactly, including:

  • gap-4 in the section-gap examples (Line 458)
  • Dedicated grid gap item (Line 459)
  • Alert banner padding item (Line 460)

Renumbering is correct through items 15-25.

.claude/agents/design-token-audit.md (1)

1-66: Agent specification is well-structured and accurately scoped.

The agent correctly:

  • Limits scope to animation and density/spacing axes (Line 3, 12)
  • Targets both .tsx and .ts files (Line 16)
  • Specifies five violation categories that align with frontend-reviewer checklist items 10-14
  • Documents skip patterns for preset files and intentional demos
  • Excludes common false-positive patterns (Lines 54-58)
  • References the correct design token sources

The "OK to leave" carve-outs (Lines 28, 34, 40) provide reasonable exceptions for component-internal spacing while enforcing density-aware tokens at page and card container levels.

@Aureliolo @claude
fix: use stripped offsets for line/column in Framer Motion checker
3c2d3db 
m.start() comes from the block-comment-stripped string, so line_num and
column must also be computed from stripped (not content) to avoid offset
mismatch when single-line block comments shorten the string.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@Aureliolo Aureliolo temporarily deployed to cloudflare-preview March 31, 2026 10:56 — with GitHub Actions Inactive
coderabbitai[bot]
coderabbitai bot requested changes Mar 31, 2026
View reviewed changes
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents 
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@scripts/check_web_design_system.py`:
- Around line 270-276: The column offset calculation currently uses stripped and
sets col = m.start() - stripped.rfind("\n", 0, m.start()) - 1, which can be
incorrect when block comments were removed earlier on the same line; update the
logic so _is_in_comment_context receives a column computed against the original
line text instead of stripped. Locate the original line via lines[line_num - 1],
determine the match's position within that original line (for example by mapping
the m.start() within stripped back to the original line by scanning for the same
matched substring or computing the cumulative length of removed comment segments
before m.start()), then set col from that original_line index and pass it to
_is_in_comment_context (keeping the existing use of m and line_num and
preserving the early continue for _COMMENT_PREFIXES).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: b413e4f1-617e-4a7f-963e-491ec6a1a796

📥 Commits

Reviewing files that changed from the base of the PR and between d1353ea and 3c2d3db.

📒 Files selected for processing (1)
  • scripts/check_web_design_system.py
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: Dashboard Test
  • GitHub Check: Build Backend
  • GitHub Check: Build Sandbox
  • GitHub Check: Dependency Review
  • GitHub Check: Analyze (go)
  • GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.py: Do not use from __future__ import annotations -- Python 3.14 has native PEP 649 lazy annotations
Use except A, B: syntax (PEP 758 except syntax, no parentheses) for multiple exception handling in Python 3.14

Files:

  • scripts/check_web_design_system.py
!(src/synthorg/observability/setup.py|src/synthorg/observability/sinks.py)

📄 CodeRabbit inference engine (CLAUDE.md)

Never use import logging, logging.getLogger(), or print() in application code. Exception: observability/setup.py and observability/sinks.py may use stdlib logging and print(..., file=sys.stderr) for bootstrap/handler-cleanup code

Files:

  • scripts/check_web_design_system.py
scripts/**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

All Python files in scripts/ may use relaxed ruff rules: print statements and deferred imports are allowed

Files:

  • scripts/check_web_design_system.py
🧠 Learnings (4)
📓 Common learnings 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use density-aware spacing tokens (`p-card`, `gap-section-gap`, `gap-grid-gap`) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Do NOT use `rgba()` with hardcoded values -- use design token variables

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : ALWAYS reuse existing components from `web/src/components/ui/` before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Run PostToolUse hook (`scripts/check_web_design_system.py`) automatically on every Edit/Write to `web/src/` files to catch hardcoded colors, hex values, font-family declarations, missing Storybook stories, duplicate patterns, and complex map blocks. Fix all violations before proceeding
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Run PostToolUse hook (`scripts/check_web_design_system.py`) automatically on every Edit/Write to `web/src/` files to catch hardcoded colors, hex values, font-family declarations, missing Storybook stories, duplicate patterns, and complex map blocks. Fix all violations before proceeding

Applied to files:

  • scripts/check_web_design_system.py
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Applied to files:

  • scripts/check_web_design_system.py
📚 Learning: 2026-03-31T08:35:07.813Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Applied to files:

  • scripts/check_web_design_system.py
🔇 Additional comments (4)
scripts/check_web_design_system.py (4)

92-103: LGTM!

The re.DOTALL flag properly enables multiline matching for transition objects spanning multiple lines. The regex covers the two primary Framer Motion duration patterns (variant objects and inline props).

105-110: LGTM!

Correctly uses full relative paths (POSIX-style) for precise skip matching, addressing the prior concern about basename collisions.

117-118: LGTM!

The non-greedy [\s\S]*? pattern correctly matches minimal block comment spans.

472-474: LGTM!

The new Framer Motion check is properly integrated into the check_file pipeline following the existing pattern.

@Aureliolo @claude
fix: map regex column back to original line for comment context check
311ac60 
When block comments are stripped from a line, the column offset in the
stripped string doesn't correspond to the same position in the original
line. Find the matched text in the original line to get an accurate
column for _is_in_comment_context.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@Aureliolo Aureliolo temporarily deployed to cloudflare-preview March 31, 2026 11:07 — with GitHub Actions Inactive
coderabbitai[bot]
coderabbitai bot requested changes Mar 31, 2026
View reviewed changes
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents 
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@scripts/check_web_design_system.py`:
- Around line 263-281: The bug is that block comments are replaced with only
newlines (via _BLOCK_COMMENT_RE.sub(lambda m: "\n" * m.group().count("\n"),
content)), which preserves line numbers but shifts column offsets so
original_line.find(match_snippet) can match the commented occurrence and hide
real violations; update the replacement so block comments are masked with
characters that preserve column positions (e.g., replace each non-newline char
in m.group() with a space while retaining the original newlines) so `stripped`
keeps the same line lengths and offsets used by HARDCODED_FM_DURATION_RE,
ensuring `m.start()`, `original_line`, `orig_col`, and the call to
_is_in_comment_context(...) operate on consistent coordinates.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 1233f562-5901-4100-8788-5fe80a25e2ff

📥 Commits

Reviewing files that changed from the base of the PR and between 3c2d3db and 311ac60.

📒 Files selected for processing (1)
  • scripts/check_web_design_system.py
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: Dashboard Test
  • GitHub Check: Build Backend
  • GitHub Check: Build Web
  • GitHub Check: Build Sandbox
  • GitHub Check: Dependency Review
  • GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.py: Do not use from __future__ import annotations -- Python 3.14 has native PEP 649 lazy annotations
Use except A, B: syntax (PEP 758 except syntax, no parentheses) for multiple exception handling in Python 3.14

Files:

  • scripts/check_web_design_system.py
!(src/synthorg/observability/setup.py|src/synthorg/observability/sinks.py)

📄 CodeRabbit inference engine (CLAUDE.md)

Never use import logging, logging.getLogger(), or print() in application code. Exception: observability/setup.py and observability/sinks.py may use stdlib logging and print(..., file=sys.stderr) for bootstrap/handler-cleanup code

Files:

  • scripts/check_web_design_system.py
scripts/**/*.py

📄 CodeRabbit inference engine (CLAUDE.md)

All Python files in scripts/ may use relaxed ruff rules: print statements and deferred imports are allowed

Files:

  • scripts/check_web_design_system.py
🧠 Learnings (2)
📓 Common learnings 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : See `web/CLAUDE.md` for web dashboard design system, component inventory, design token rules, and TypeScript/React conventions (TS6, Storybook 10 post-training references)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:07.813Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components in `web/src/components/ui/` must be reused before creating new ones. Never hardcode hex colors, font-family, or pixel spacing -- use design tokens. Post-tool-use hook enforces these rules

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Do NOT use `rgba()` with hardcoded values -- use design token variables

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use density-aware spacing tokens (`p-card`, `gap-section-gap`, `gap-grid-gap`) or standard Tailwind spacing. NEVER hardcode pixel values for layout spacing

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/{components,pages}/**/*.{ts,tsx} : ALWAYS reuse existing components from `web/src/components/ui/` before creating new ones (StatusBadge, MetricCard, Sparkline, SectionCard, AgentCard, DeptHealthBar, ProgressGauge, StatPill, Avatar, Button, Toast, Skeleton variants, EmptyState, ErrorBoundary, ConfirmDialog, CommandPalette, InlineEdit, AnimatedPresence, StaggerGroup, Drawer, InputField, SelectField, SliderField, ToggleField, TaskStatusIndicator, PriorityBadge, ProviderHealthBadge, TokenUsageBar, CodeMirrorEditor, SegmentedControl, ThemeToggle, LiveRegion, MobileUnsupportedOverlay, LazyCodeMirrorEditor, TagInput)

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/**/*.{ts,tsx} : Use token variables (`var(--so-shadow-card-hover)`, `border-border`, `border-bright`) for shadows and borders. NEVER hardcode values

Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Applies to web/src/components/ui/**/*.{ts,tsx} : When creating new shared components: place in `web/src/components/ui/` with kebab-case filename, create `.stories.tsx` file alongside with all states, export props as TypeScript interface, use design tokens exclusively, and import `cn` from `@/lib/utils` for conditional class merging
📚 Learning: 2026-03-31T08:35:30.026Z 
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: web/CLAUDE.md:0-0
Timestamp: 2026-03-31T08:35:30.026Z
Learning: Run PostToolUse hook (`scripts/check_web_design_system.py`) automatically on every Edit/Write to `web/src/` files to catch hardcoded colors, hex values, font-family declarations, missing Storybook stories, duplicate patterns, and complex map blocks. Fix all violations before proceeding

Applied to files:

  • scripts/check_web_design_system.py
🔇 Additional comments (1)
scripts/check_web_design_system.py (1)

92-103: Verification found no false positives; this concern is not substantiated by current codebase.

The verification script searched for .ts/.tsx files matching the transition: { duration: ... } pattern but lacking Framer Motion signals (imports, motion., AnimatePresence, etc.). It returned no results, indicating all matches in web/src/ already have Framer context or are properly skipped. While the regex is theoretically generic, it does not flag unrelated code in practice.

@Aureliolo @claude
fix: mask block comments with spaces to preserve column offsets
4c4dba0 
Replace non-newline chars with spaces instead of collapsing to newlines
only. This keeps stripped the same length as content, so m.start()
offsets align directly with the original line positions. Removes the
fragile find(match_snippet) workaround.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@Aureliolo Aureliolo temporarily deployed to cloudflare-preview March 31, 2026 11:22 — with GitHub Actions Inactive
@Aureliolo Aureliolo merged commit a1322cd into main Mar 31, 2026
32 checks passed
@Aureliolo Aureliolo deleted the chore/audit-design-tokens branch March 31, 2026 12:06
@Aureliolo Aureliolo temporarily deployed to cloudflare-preview March 31, 2026 12:06 — with GitHub Actions Inactive
@Aureliolo Aureliolo mentioned this pull request Mar 31, 2026
Merged
Aureliolo added a commit that referenced this pull request Mar 31, 2026
@Aureliolo
chore(main): release 0.5.3 (#945)
7cd1d23 
🤖 I have created a release *beep* *boop*
---


##
[0.5.3](v0.5.2...v0.5.3)
(2026-03-31)


### Features

* implement artifact and project persistence
([#947](#947))
([6dea87a](6dea87a))


### Maintenance

* add allow_inf_nan=False to all remaining ConfigDict declarations
([#943](#943))
([cd7bbca](cd7bbca))
* audit full web dashboard for hardcoded design token violations
([#944](#944))
([a1322cd](a1322cd))

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] requested changes

+1 more reviewer

@gemini-code-assist gemini-code-assist[bot] gemini-code-assist[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

chore: audit full web dashboard for hardcoded design token violations

1 participant

@Aureliolo