feat: add design-system implementer and reviewer agents for UI feature development and compliance checks

[akanshaaa19]

Summary

• Adds two subagents: ui-implementer (builds new UI reusing shared components/tokens, with design-fundamentals guidance) and ui-consistency-reviewer (checks MUI-layering/token/reinvention violations before push).
• Adds src/components/UI/README.md, the component catalog both agents read.
• Wires ui-consistency-reviewer into make-branch-ready-for-review's Phase 2 for diffs touching containers//components/UI/.
• 4 files, 336 lines, based directly on master — no dependency on the ci-checks or token-migration branches.

How to use

• Building UI: invoke ui-implementer when starting new feature work.
• Before pushing: ui-consistency-reviewer runs automatically via /make-branch-ready-for-review for UI-touching diffs, or invoke it directly.

Test plan

• Typecheck clean
• No ticket refs, no old agent names, no token files anywhere in the diff
• gh pr diff --name-only confirms exactly the 4 intended files

Summary by CodeRabbit

• Documentation
  • Added guidance for building polished, accessible, and responsive interfaces with consistent interaction states.
  • Added a catalog of reusable UI components, including usage guidance, reuse expectations, and known gaps.
  • Added UI consistency checks for shared interface changes, including design-token usage, component reuse, and accessibility.
  • Documented requirements for complete loading, empty, and error states.
  • Updated review guidance to address blocking UI consistency issues before changes are ready for review.

[github-actions]

🚀 Deployed on https://deploy-preview-4084--glific-frontend.netlify.app

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: a0c2f004-108d-4925-929d-7f74b578ef23

📥 Commits

Reviewing files that changed from the base of the PR and between 049b69c and 723cf06.

📒 Files selected for processing (2)

• .claude/agents/ui-consistency-reviewer.md
• src/components/UI/README.md

🚧 Files skipped from review as they are similar to previous changes (2)

• src/components/UI/README.md
• .claude/agents/ui-consistency-reviewer.md

---

Walkthrough

Added ui-implementer and ui-consistency-reviewer agent definitions. Integrated UI consistency review into the branch-readiness workflow. Added a catalog for reusable UI components, usage guidance, exclusions, and known gaps.

Estimated code review effort: 2 (Simple) | ~10 minutes

Poem

A rabbit checks each button’s hue,
And finds the shared component too.
Tokens guide the spacing trail,
Hooks and states keep views from fail.
The UI catalog marks the way—
Hop, review, and ship today! 🐇

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the primary change: adding UI implementation and consistency-review agents for design-system compliance.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Fix failing CI checks

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch design-system/agents

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.14%. Comparing base (5f2b711) to head (7c88e3a).
⚠️ Report is 2 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4084      +/-   ##
==========================================
+ Coverage   82.12%   82.14%   +0.01%     
==========================================
  Files         345      345              
  Lines       15129    15129              
  Branches     3586     3586              
==========================================
+ Hits        12425    12428       +3     
+ Misses       1641     1639       -2     
+ Partials     1063     1062       -1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cypress]

Glific    Run #12599

Run Properties:   Passed #12599  •  28afb19f5c ℹ️: Merge 7c88e3a5dadee699ee27a9371b3b91b6de9d5ed2 into 5f2b7119ba0223a6ebcff399d4d5...

Project	Glific
Branch Review	design-system/agents
Run status	Passed #12599
Run duration	07m 02s
Commit	28afb19f5c ℹ️: Merge 7c88e3a5dadee699ee27a9371b3b91b6de9d5ed2 into 5f2b7119ba0223a6ebcff399d4d5...
Committer	Akansha Sakhre
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	32
View all changes introduced in this branch ↗︎

[coderabbitai]

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.claude/agents/ui-consistency-reviewer.md:
- Around line 71-85: Update the fenced example block in the UI consistency
review template to include an explicit language identifier, using text or
markdown, while preserving the block’s existing content.
- Around line 23-25: Update the MUI layering rule in the reviewer instructions
to detect the entire `@mui/` import namespace, not just `@mui/material`. Apply the
same restriction to imports such as `@mui/icons-material`, `@mui/system`, and
`@mui/x-date-pickers`, while preserving the existing exceptions for
src/components/UI/** and src/config/theme.tsx.
- Line 11: Resolve the contradiction in the review output instructions by
updating the `Looks good` requirement to match the directive to skip praise:
remove the required section, or explicitly permit brief positive notes. Apply
the same correction to the corresponding instructions near the additional
referenced lines.

In `@src/components/UI/README.md`:
- Around line 7-16: Update the documentation references in the UI README: use
the full `.claude/agents/ui-consistency-reviewer.md` path and the
`src/components/UI/Form/` path, and ensure every quick-lookup link such as
`#dialogbox` and `#input` targets an existing heading or explicit anchor,
removing links that cannot be made valid.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: b1e6d120-1b05-45e2-8593-476714cbe414

📥 Commits

Reviewing files that changed from the base of the PR and between 276778c and 049b69c.

📒 Files selected for processing (4)

• .claude/agents/ui-consistency-reviewer.md
• .claude/agents/ui-implementer.md
• .claude/skills/make-branch-ready-for-review/SKILL.md
• src/components/UI/README.md