Skip to content

style: Refactor bootstrap and agent profiles with enhanced UI guidelines#172

Merged
yacosta738 merged 6 commits into
mainfrom
ui-skill
Mar 8, 2026
Merged

style: Refactor bootstrap and agent profiles with enhanced UI guidelines#172
yacosta738 merged 6 commits into
mainfrom
ui-skill

Conversation

@yacosta738
Copy link
Copy Markdown
Contributor

This pull request updates the definition and documentation for the frontend-design skill to clarify its intended use, modernize its guidance, and discourage generic AI-generated UI patterns. The changes expand the skill's description, add best practices and anti-patterns, and provide practical examples and decision rules for frontend design work.

Skill documentation improvements:

  • Expanded the description in .agents/skills/frontend-design/SKILL.md to emphasize creating production-grade frontend UI with strong visual direction, while avoiding generic AI-generated patterns. Added license and metadata fields.
  • Rewrote the skill guide to include: when to use the skill, critical design patterns, anti-patterns to avoid, workflow steps, decision rules for common situations, and practical CSS/code examples.
  • Added search commands for discovering existing design tokens and UI primitives in a codebase, encouraging reuse over invention.

Skill registry update:

  • Updated the frontend-design skill entry in .agents/AGENTS.md to match the new description and clarify its scope (including dashboards and UI refinement).

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 8, 2026

📝 Walkthrough

Summary by CodeRabbit

Documentation

  • Updated Frontend Design skill description to clarify scope and usage context
  • Significantly expanded Frontend Design skill documentation with new sections covering: when to use the skill, critical design patterns (design language, AI defaults, interface patterns, visual restraint, color and typography), design workflows, decision rules, code examples, and CLI commands
  • Enhanced guidance on design system alignment and product-specific UI development

Walkthrough

Frontend design skill documentation receives targeted updates. AGENTS.md entry description and target usage are refined, while SKILL.md undergoes substantial restructuring to introduce design system alignment, prescriptive patterns, workflow steps, and code examples.

Changes

Cohort / File(s) Summary
Frontend Design Skill Documentation
.agents/AGENTS.md, .agents/skills/frontend-design/SKILL.md
Description and target usage refined in AGENTS.md. SKILL.md expanded with design system focus: new sections on When to Use, Critical Patterns, Design Workflow, Decision Rules, Code Examples, and terminal commands; emphasizes design tokens and alignment over generic AI aesthetics.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

area:docs, risk:high

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Title check ⚠️ Warning Title follows Conventional Commit style with 'style:' prefix and is 72 characters, but describes bootstrap/agent changes not reflected in the actual file changes shown. Update title to reflect actual changes: 'docs: Enhance frontend-design skill documentation with UI guidelines' or similar to accurately represent the AGENTS.md and SKILL.md updates.
✅ Passed checks (2 passed)
Check name Status Explanation
Description check ✅ Passed Description covers the main changes and objectives comprehensively, clearly stating what was updated in both files and why, addressing all key aspects of the PR.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch ui-skill

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

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 8, 2026

✅ Contributor Report

User: @yacosta738
Status: Passed (12/13 metrics passed)

Metric Description Value Threshold Status
PR Merge Rate PRs merged vs closed 88% >= 30%
Repo Quality Repos with ≥100 stars 0 >= 0
Positive Reactions Positive reactions received 9 >= 1
Negative Reactions Negative reactions received 0 <= 5
Account Age GitHub account age 3054 days >= 30 days
Activity Consistency Regular activity over time 108% >= 0%
Issue Engagement Issues with community engagement 0 >= 0
Code Reviews Code reviews given to others 395 >= 0
Merger Diversity Unique maintainers who merged PRs 2 >= 0
Repo History Merge Rate Merge rate in this repo 91% >= 0%
Repo History Min PRs Previous PRs in this repo 128 >= 0
Profile Completeness Profile richness (bio, followers) 90 >= 0
Suspicious Patterns Spam-like activity detection 1 N/A

Contributor Report evaluates based on public GitHub activity. Analysis period: 2025-03-08 to 2026-03-08

@sentry
Copy link
Copy Markdown

sentry Bot commented Mar 8, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

Copy link
Copy Markdown
Contributor

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

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

Inline comments:
In @.agents/AGENTS.md:
- Line 178: Update the frontend-design registry row in AGENTS.md to include the
skill's version and compatibility/scope metadata from
.agents/skills/frontend-design/SKILL.md (e.g., add version: "2.0" and any
compatibility or scope labels), so the table entry for "frontend-design" exposes
the same version/compatibility details present in the SKILL.md file and
satisfies the agents metadata contract.

In @.agents/skills/frontend-design/SKILL.md:
- Around line 8-10: The metadata block contains a placeholder author value;
replace the author: generic-author entry inside the metadata block with the real
maintainer or owning team name (or a company/organization identifier) so the
registry has a valid contact/owner; update the author field in SKILL.md’s
metadata (alongside existing keys like version) to a meaningful value or
remove/mark it as “TBD” only if intentionally anonymous and documented.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 82e26639-ee3b-4af1-b763-ba8069376ef9

📥 Commits

Reviewing files that changed from the base of the PR and between 8ff7b22 and 69cb05f.

📒 Files selected for processing (2)
  • .agents/AGENTS.md
  • .agents/skills/frontend-design/SKILL.md
📜 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: pr-checks
  • GitHub Check: sonar
  • GitHub Check: pr-checks
  • GitHub Check: Cloudflare Pages
🧰 Additional context used
📓 Path-based instructions (1)
.agents/AGENTS.md

📄 CodeRabbit inference engine (AGENTS.md)

.agents/AGENTS.md: Document agent configurations and capabilities in AGENTS.md
Maintain comprehensive agent metadata including name, description, purpose, and capabilities
Include version information and compatibility details for agents

Files:

  • .agents/AGENTS.md
🧠 Learnings (4)
📓 Common learnings
Learnt from: CR
Repo: dallay/corvus PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-17T07:28:38.934Z
Learning: Applies to .agents/AGENTS.md : Document agent configurations and capabilities in AGENTS.md
Learnt from: CR
Repo: dallay/corvus PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-17T07:28:38.934Z
Learning: Applies to .agents/AGENTS.md : Maintain comprehensive agent metadata including name, description, purpose, and capabilities
Learnt from: CR
Repo: dallay/corvus PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-17T07:28:38.934Z
Learning: Applies to .agents/AGENTS.md : Include version information and compatibility details for agents
📚 Learning: 2026-02-17T07:28:38.934Z
Learnt from: CR
Repo: dallay/corvus PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-17T07:28:38.934Z
Learning: Applies to .agents/AGENTS.md : Document agent configurations and capabilities in AGENTS.md

Applied to files:

  • .agents/AGENTS.md
📚 Learning: 2026-02-17T07:28:38.934Z
Learnt from: CR
Repo: dallay/corvus PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-17T07:28:38.934Z
Learning: Applies to .agents/AGENTS.md : Maintain comprehensive agent metadata including name, description, purpose, and capabilities

Applied to files:

  • .agents/AGENTS.md
📚 Learning: 2026-02-17T07:28:38.934Z
Learnt from: CR
Repo: dallay/corvus PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-17T07:28:38.934Z
Learning: Applies to .agents/AGENTS.md : Include version information and compatibility details for agents

Applied to files:

  • .agents/AGENTS.md
🪛 LanguageTool
.agents/skills/frontend-design/SKILL.md

[style] ~39-~39: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...ss they serve a real content purpose. - Avoid glassmorphism, floating shell layouts, ...

(ENGLISH_WORD_REPEAT_BEGINNING_RULE)

🔇 Additional comments (1)
.agents/skills/frontend-design/SKILL.md (1)

15-136: LGTM: the guidance is now specific, reuse-first, and hard to misuse.

The added decision rules, anti-patterns, and search commands make the skill much more actionable for real product UI work.

Comment thread .agents/AGENTS.md
| [kotlin-multiplatform](.agents/skills/kotlin-multiplatform/SKILL.md) | KMP patterns, expect/actual | KMP modules |
| [tdd](.agents/skills/tdd/SKILL.md) | Test-Driven Development workflow | Red/Green/Refactor, new behavior |
| [frontend-design](.agents/skills/frontend-design/SKILL.md) | Create distinctive, production-grade frontend interfaces with high design quality | Building web components, pages, or applications |
| [frontend-design](.agents/skills/frontend-design/SKILL.md) | Create production-grade frontend UI with strong visual direction while avoiding generic AI patterns | Building or refining web components, pages, dashboards, or application UI |
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion | 🟠 Major

Add version/compatibility details to this registry entry.

The updated row aligns the description, but the registry still does not expose the skill version or compatibility/scope details now present in SKILL.md (for example, the new version: "2.0" metadata). That keeps AGENTS.md short of the metadata contract for agent entries.

As per coding guidelines, "Include version information and compatibility details for agents."

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

In @.agents/AGENTS.md at line 178, Update the frontend-design registry row in
AGENTS.md to include the skill's version and compatibility/scope metadata from
.agents/skills/frontend-design/SKILL.md (e.g., add version: "2.0" and any
compatibility or scope labels), so the table entry for "frontend-design" exposes
the same version/compatibility details present in the SKILL.md file and
satisfies the agents metadata contract.

Comment on lines +8 to +10
metadata:
author: generic-author
version: "2.0"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Replace the placeholder author metadata.

author: generic-author reads like a stub value. If this metadata is meant to be consumed, it should point to the real maintainer/owner; otherwise it will age poorly and reduce trust in the registry data.

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

In @.agents/skills/frontend-design/SKILL.md around lines 8 - 10, The metadata
block contains a placeholder author value; replace the author: generic-author
entry inside the metadata block with the real maintainer or owning team name (or
a company/organization identifier) so the registry has a valid contact/owner;
update the author field in SKILL.md’s metadata (alongside existing keys like
version) to a meaningful value or remove/mark it as “TBD” only if intentionally
anonymous and documented.

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Mar 8, 2026

@yacosta738 yacosta738 merged commit e58bf4b into main Mar 8, 2026
18 checks passed
@yacosta738 yacosta738 deleted the ui-skill branch March 8, 2026 20:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant