RG-2788 Add Ring UI consumption skill - #9366
Andrey Skladchikov (andrey-skl) wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a package-local “Ring UI consumption” Skill (plus reference docs) intended to improve agent-driven consumption of @jetbrains/ring-ui-built, and ensures the Skill is published and validated as part of package publication.
Changes:
- Added
skills/ring-uiSkill definition and two reference documents (page layouts + forms/feedback). - Ensured
skills/is included in both@jetbrains/ring-uiand@jetbrains/ring-ui-builtpublished file sets. - Added
scripts/verify-package-skills.mjsand wired it intoprepublishOnlyto validate the packed artifact includes the Skill files.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| skills/ring-ui/SKILL.md | Adds the Ring UI Skill entrypoint and high-level usage rules for agents. |
| skills/ring-ui/references/page-layouts.md | Provides page shell/layout, responsiveness, and theming/accessibility guidance. |
| skills/ring-ui/references/forms-and-feedback.md | Provides controlled form + feedback/state patterns and accessibility guidance. |
| scripts/verify-package-skills.mjs | Adds a publish-time check to ensure Skill files are included in npm pack. |
| scripts/prepare-built-package.js | Updates built-package publication file list to include skills/. |
| README.md | Documents that Skill guidance is included in the published npm artifacts. |
| package.json | Publishes skills/ and adds/verifies the Skill-file validation script during prepublish. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| const jsonStart = output.search(/^\[\r?$/m); | ||
|
|
||
| if (jsonStart === -1) { | ||
| throw new Error('npm pack output does not contain a top-level JSON array'); | ||
| } | ||
|
|
||
| const [packResult] = JSON.parse(output.slice(jsonStart)); |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 80aa8389dc
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "Codex (@codex) review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "Codex (@codex) address that feedback".
| if (option) updateDraft({...draft, visibility: option.value}); | ||
| }} | ||
| /> | ||
| <p className={styles.help}>Controls who can discover and open this project.</p> |
There was a problem hiding this comment.
When a screen-reader user focuses the visibility Select in this complete reference example, the explanatory text is not announced because this <p> has no ID and the Select receives no aria-describedby. This also contradicts the document's form-state rule to connect help and error IDs; give the help text a stable ID and pass it to the control so consumers copying the example retain the intended context.
Useful? React with 👍 / 👎.
| const NOTIFICATIONS_ID = 'project-settings-notifications'; | ||
|
|
||
| export function ProjectSettingsForm({initialValue, onSave}: ProjectSettingsFormProps) { | ||
| const [saved, setSaved] = useState(initialValue); |
There was a problem hiding this comment.
I'm a little bit sceptical if we need to add the example with the vanilla React form handling.
The problem is that the user may want to use some other library for more complex cases. Maybe even we can have at least mention it.
Also, there is a new hook https://react.dev/reference/react-dom/hooks/useFormStatus, maybe use it?
|
|
||
| ## Guidance for coding agents | ||
|
|
||
| The npm packages include [`skills/ring-ui/SKILL.md`](./skills/ring-ui/SKILL.md), which teaches coding agents to consume Ring UI through `@jetbrains/ring-ui-built` when composing complete pages, responsive layouts, forms, themes, and feedback. The same Skill files are published in both npm artifacts. |
There was a problem hiding this comment.
But those using @jetbrains/ring-ui don't have @jetbrains/ring-ui-built, do they?
Summary
@jetbrains/ring-uiand@jetbrains/ring-ui-built.Benchmark methodology
We use a repeatable clean-room benchmark: a CLI agent receives a fresh Vite React/TypeScript app and may inspect only the installed Ring UI package. It must compose a complete project-settings page with navigation, form states, theming, accessibility, and responsive behavior. The frozen result is built and verified at 1280×800 and 390×844, with interactions and screenshots recorded.
Result
Against 7.0.122, the benchmark remains all-pass, while package consumption improves: the agent discovers the Skill directly and follows the intended semantic layout, token, responsive, typed Select, and saved/draft-state patterns instead of inferring them from declarations.
Validation
npm run verify-package-skillsnpm run lint:js -- scripts/verify-package-skills.mjs scripts/prepare-built-package.js@jetbrains/ring-ui-built@7.0.123-beta.0benchmark: build, wide, narrow, and interactions passRG-2788