docs: update code guidelines and add UI component skill#1220
docs: update code guidelines and add UI component skill#1220bmahabirbu wants to merge 1 commit intokortex-hub:mainfrom
Conversation
Add UI development guidelines covering color-registry usage, Icon component from @podman-desktop/ui-svelte, and component reuse priorities. Adds a new .agents/skills/ui-components/ skill for detailed reference. Addresses feedback from PR kortex-hub#1205 review (benoitf, gastoner). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Signed-off-by: Brian <bmahabir@bu.edu>
bmahabirbu
requested review from
benoitf and
gastoner
and removed request for
a team
|
Had claude try and update our code guidlines and add a new ui skill to better help claude make sure its using podman desktop stuff that we already have first |
📝 WalkthroughWalkthroughThree documentation files are added or updated to establish UI component development guidelines: a new SKILL guide, an AGENTS reference update, and expanded CODE-GUIDELINES sections covering component reuse, color theming via CSS variables, and icon usage patterns. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 markdownlint-cli2 (0.22.0).agents/skills/ui-components/SKILL.mdmarkdownlint-cli2 v0.22.0 (markdownlint v0.40.0) ... [truncated 1151 characters] ... 4:11) AGENTS.mdmarkdownlint-cli2 v0.22.0 (markdownlint v0.40.0) ... [truncated 1123 characters] ... 4:11) CODE-GUIDELINES.mdmarkdownlint-cli2 v0.22.0 (markdownlint v0.40.0) ... [truncated 1132 characters] ... 4:11) 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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 @.agents/skills/ui-components/SKILL.md:
- Around line 126-136: The button prefix examples in SKILL.md are inconsistent
with the actual registered IDs; update the doc to mirror the exact
prefixes/variable names used in the implementation (see initColors(),
initButton(), initInput(), initTable() and the prefix constants such as the one
referenced as const button = 'button-') by checking
packages/main/src/plugin/color-registry.ts and replacing the example
`button-`/`--pd-button-primary-bg` entries with the exact prefixes and CSS
variable names registered there so the docs and code match.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 17241c87-8f8a-44ad-bafc-27c5daafd32b
📒 Files selected for processing (3)
.agents/skills/ui-components/SKILL.mdAGENTS.mdCODE-GUIDELINES.md
| 2. Find the appropriate category in `initColors()` (e.g. `initButton()`, `initInput()`, `initTable()`) | ||
| 3. Each category has a prefix constant (e.g. `const button = 'button-';`) | ||
| 4. The CSS variable name is `--pd-` + prefix + specific name | ||
|
|
||
| ### Common color categories and prefixes | ||
|
|
||
| | Category | Prefix | Example variable | Usage | | ||
| | ---------- | -------------- | ------------------------ | ---------------------- | | ||
| | Content | `content-` | `--pd-content-bg` | Page backgrounds, text | | ||
| | Button | `button-` | `--pd-button-primary-bg` | Button colors | | ||
| | Input | `input-field-` | `--pd-input-field-bg` | Form input colors | |
There was a problem hiding this comment.
Keep color-registry button examples consistent with actual registered IDs.
This section repeats the same button- example naming; once verified in packages/main/src/plugin/color-registry.ts, please mirror the exact prefix/variable names here too, so both docs stay consistent.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.agents/skills/ui-components/SKILL.md around lines 126 - 136, The button
prefix examples in SKILL.md are inconsistent with the actual registered IDs;
update the doc to mirror the exact prefixes/variable names used in the
implementation (see initColors(), initButton(), initInput(), initTable() and the
prefix constants such as the one referenced as const button = 'button-') by
checking packages/main/src/plugin/color-registry.ts and replacing the example
`button-`/`--pd-button-primary-bg` entries with the exact prefixes and CSS
variable names registered there so the docs and code match.
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
gastoner
left a comment
gastoner
left a comment
There was a problem hiding this comment.
Otherwise LGTM lets try :D
| | `Carousel` | `@podman-desktop/ui-svelte` | Carousel | | ||
| | `ListOrganizer` | `@podman-desktop/ui-svelte` | List management | | ||
| | `SettingsNavItem` | `@podman-desktop/ui-svelte` | Settings navigation | | ||
| | `Icon` | `@podman-desktop/ui-svelte/icons` | Unified icon rendering | |
There was a problem hiding this comment.
Maybe I would add some refference here to something more dynamic and not hardcoded, but we can iterate on this
4 participants
Summary
CODE-GUIDELINES.md: always use color-registry CSS variables (var(--pd-*)) instead of raw Tailwind colors, so themes can tune values@podman-desktop/ui-sveltecomponent catalog toCODE-GUIDELINES.md: check the shared library before building custom componentsIconfrom@podman-desktop/ui-svelte/iconsinstead of inline SVGs or direct<Fa>).agents/skills/ui-components/SKILL.mdwith detailed reference for AI assistantsAGENTS.mdto the new skill and guidelinesAddresses feedback from PR #1205 review (benoitf, gastoner).
Test plan
CODE-GUIDELINES.mdrenders correctly on GitHub.agents/skills/ui-components/SKILL.mdrenders correctlyCODE-GUIDELINES.md🤖 Generated with Claude Code