chore: add ui-skills subagent for interface constraints#25
Conversation
Add opinionated constraints for building better interfaces with agents, based on https://www.ui-skills.com/llms.txt Includes guidance for: - Stack: Tailwind CSS, motion/react, tw-animate-css - Components: Accessible primitives (Base UI, React Aria, Radix) - Animation: Compositor props only, prefers-reduced-motion - Typography: text-balance, tabular-nums - Performance: No large blur/backdrop-filter - Design: No gradients/glows unless requested
WalkthroughUpdated agent catalog docs to expand the UI subagent description and add a Changes
Sequence Diagram(s)(Skipped — changes are documentation and a small script improvement; no new multi-component control flow requiring visualization.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (1).agent/scripts/*.sh⚙️ CodeRabbit configuration file
Files:
🧠 Learnings (3)📓 Common learnings📚 Learning: 2026-01-06T15:57:56.007ZApplied to files:
📚 Learning: 2025-12-22T01:24:53.937ZApplied to files:
⏰ 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). (1)
🔇 Additional comments (3)
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. Comment |
Summary of ChangesHello @marcusquinn, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request integrates a new Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
🔍 Code Quality Report�[0;35m[MONITOR]�[0m Code Review Monitoring Report �[0;34m[INFO]�[0m Latest Quality Status: �[0;34m[INFO]�[0m Recent monitoring activity: 📈 Current Quality Metrics
Generated on: Sat Jan 10 21:03:19 UTC 2026 Generated by AI DevOps Framework Code Review Monitoring |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new ui-skills subagent, providing a set of opinionated constraints for UI development based on an external source. The changes are well-contained, updating the agent documentation and adding the new markdown file with the constraints. The rules are comprehensive and clearly structured. I have a few minor suggestions to improve the clarity and consistency of the instructions in the new ui-skills.md file to ensure they are interpreted correctly by the agent.
|
|
||
| - **Purpose**: Opinionated constraints for building better interfaces with agents | ||
| - **Source**: https://www.ui-skills.com/llms.txt | ||
| - **Stack**: Tailwind CSS, motion/react, tw-animate-css, clsx + tailwind-merge |
There was a problem hiding this comment.
For consistency with the Stack section below (line 46), it would be clearer to refer to the cn utility directly in the quick reference stack.
| - **Stack**: Tailwind CSS, motion/react, tw-animate-css, clsx + tailwind-merge | |
| - **Stack**: Tailwind CSS, motion/react, tw-animate-css, `cn` utility |
|
|
||
| ## Layout | ||
|
|
||
| - MUST use a fixed `z-index` scale (no arbitrary `z-x`) |
There was a problem hiding this comment.
The placeholder z-x could be ambiguous. To make this instruction clearer for an agent, I suggest explicitly mentioning what an "arbitrary" value looks like in Tailwind CSS, such as the z-[value] syntax that should be avoided.
| - MUST use a fixed `z-index` scale (no arbitrary `z-x`) | |
| - MUST use a fixed `z-index` scale (e.g., `z-10`, `z-20`) and avoid arbitrary values (e.g., `z-[99]`) |
| ## Layout | ||
|
|
||
| - MUST use a fixed `z-index` scale (no arbitrary `z-x`) | ||
| - SHOULD use `size-x` for square elements instead of `w-x` + `h-x` |
There was a problem hiding this comment.
The use of x as a placeholder in size-x, w-x, and h-x might be unclear. Using a wildcard * would be more idiomatic and less ambiguous when describing Tailwind utility patterns.
| - SHOULD use `size-x` for square elements instead of `w-x` + `h-x` | |
| - SHOULD use `size-*` for square elements instead of `w-*` and `h-*` |
🤖 Augment PR SummarySummary: Adds a
prefers-reduced-motion, and avoiding expensive effects (blur/backdrop-filter/will-change).
🤖 Was this summary useful? React with 👍 or 👎 |
![augmentcode[bot]](https://avatars.githubusercontent.com/in/1027498?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
.agent/tools/ui/ui-skills.md (2)
23-23: Clarify the "cn utility" terminology upfront.Line 23 introduces
clsx + tailwind-mergewithout defining the pattern, then line 46 labels it as a "cn utility." Readers unfamiliar with this pattern (a common utility export in Next.js projects) may be confused.Consider adding a brief definition in the Stack section:
- "Use
cnutility (a wrapper combiningclsx+tailwind-merge) to safely merge Tailwind classes and override defaults"Or, link to a standard reference or example usage.
Also applies to: 46-46
100-100: Clarify why purple gradients are specifically prohibited.Line 100 states "NEVER use purple or multicolor gradients" — this is unusually specific. Purple is a valid color in most design systems. Is this prohibition tied to:
- A specific brand or design system's color rules?
- A documented accessibility or usability issue with purple gradients?
- A stylistic preference that should be softer (e.g., "SHOULD avoid purple/multicolor gradients unless explicitly requested")?
Clarifying the rationale will help users understand whether this is a hard constraint or a default preference.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.agent/AGENTS.md.agent/tools/ui/ui-skills.md
🧰 Additional context used
🧠 Learnings (8)
📓 Common learnings
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-06T15:57:56.008Z
Learning: Applies to **/AGENTS.md : Limit root AGENTS.md to ~50-100 max instructions with universal applicability to >80% of tasks
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-29T04:34:27.158Z
Learning: All instructions, documentation, and operational guidance should be maintained in AGENTS.md as the single source of truth
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-11-29T04:34:30.742Z
Learning: Maintain all instructions, documentation, and operational guidance in AGENTS.md as the single source of truth
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: AGENT.md:0-0
Timestamp: 2025-11-29T04:34:42.033Z
Learning: Maintain all AI assistant instructions, documentation, and operational guidance in AGENTS.md as the single source of truth
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-06T15:57:56.008Z
Learning: Applies to **/AGENTS.md : Use progressive disclosure in AGENTS.md with pointers to subagents rather than inline content
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: AGENT.md:0-0
Timestamp: 2025-11-29T04:34:42.033Z
Learning: Reference AGENTS.md (authoritative) instead of AGENT.md for AI assistant guidance
📚 Learning: 2025-11-29T04:34:42.033Z
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: AGENT.md:0-0
Timestamp: 2025-11-29T04:34:42.033Z
Learning: Maintain all AI assistant instructions, documentation, and operational guidance in AGENTS.md as the single source of truth
Applied to files:
.agent/tools/ui/ui-skills.md.agent/AGENTS.md
📚 Learning: 2025-11-29T04:34:42.033Z
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: AGENT.md:0-0
Timestamp: 2025-11-29T04:34:42.033Z
Learning: Reference AGENTS.md (authoritative) instead of AGENT.md for AI assistant guidance
Applied to files:
.agent/tools/ui/ui-skills.md.agent/AGENTS.md
📚 Learning: 2025-11-29T04:34:27.158Z
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-29T04:34:27.158Z
Learning: All instructions, documentation, and operational guidance should be maintained in AGENTS.md as the single source of truth
Applied to files:
.agent/tools/ui/ui-skills.md.agent/AGENTS.md
📚 Learning: 2025-11-29T04:34:30.742Z
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-11-29T04:34:30.742Z
Learning: Maintain all instructions, documentation, and operational guidance in AGENTS.md as the single source of truth
Applied to files:
.agent/tools/ui/ui-skills.md.agent/AGENTS.md
📚 Learning: 2026-01-06T15:57:56.008Z
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-06T15:57:56.008Z
Learning: Applies to **/AGENTS.md : Limit root AGENTS.md to ~50-100 max instructions with universal applicability to >80% of tasks
Applied to files:
.agent/tools/ui/ui-skills.md.agent/AGENTS.md
📚 Learning: 2025-11-29T04:34:30.742Z
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-11-29T04:34:30.742Z
Learning: Reference AGENTS.md for authoritative AI assistant guidance instead of GEMINI.md
Applied to files:
.agent/tools/ui/ui-skills.md
📚 Learning: 2026-01-06T15:57:56.008Z
Learnt from: CR
Repo: marcusquinn/aidevops PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-06T15:57:56.008Z
Learning: Applies to **/AGENTS.md : Use progressive disclosure in AGENTS.md with pointers to subagents rather than inline content
Applied to files:
.agent/AGENTS.md
⏰ 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). (1)
- GitHub Check: Codacy Static Code Analysis
🔇 Additional comments (3)
.agent/AGENTS.md (1)
249-249: Perfect alignment with progressive disclosure pattern.The
tools/ui/row update properly expands the description and adds theui-skillstag without inlining constraint details into the root AGENTS.md. This keeps the root guide focused and directs users to the specialized subagent for comprehensive UI/UX guidance.The combination of
shadcnandui-skillstags now surfaces two complementary UI approaches (component library + constraints framework)..agent/tools/ui/ui-skills.md (2)
44-44: No action required —motion/reactis confirmed as the current official animation library name as of January 2026. The migration fromframer-motionis complete and recommended. The documentation at line 44 is accurate and reflects current best practices.
109-114: Correct line range and URL count; all links are valid.The Related Resources section spans lines 109–115 and contains 7 external links (not 5 as stated). All URLs are current and resolve correctly:
- https://www.ui-skills.com/ — UI/tech training
- https://base-ui.com/react/components — Headless React components
- https://react-spectrum.adobe.com/react-aria/ — Actively maintained (v2025 releases)
- https://www.radix-ui.com/primitives — Official Radix primitives docs
- https://motion.dev/ — Motion animation library (formerly Framer Motion)
- https://github.com/Wombosvideo/tw-animate-css — Tailwind CSS v4-compatible animations
- https://ui.shadcn.com/ — shadcn/ui component library (note: correct URL is
ui.shadcn.com, notshadcn.com)No action needed; all resources are live and match their reference titles.
Save original working directory before cd to REPO_ROOT, then use it for git operations. This allows the script to correctly determine the repository when run from a worktree directory.
|
🔍 Code Quality Report�[0;35m[MONITOR]�[0m Code Review Monitoring Report �[0;34m[INFO]�[0m Latest Quality Status: �[0;34m[INFO]�[0m Recent monitoring activity: 📈 Current Quality Metrics
Generated on: Sat Jan 10 21:36:10 UTC 2026 Generated by AI DevOps Framework Code Review Monitoring |
1 participant
Summary
ui-skillssubagent based on https://www.ui-skills.com/llms.txttools/ui/folder description in AGENTS.mdConstraints Included
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.