feat(ui-kit-ai): Agent Plugins 1.0.0 layout + unified UX/UI guidelines for every component skill - #632
Merged
Conversation
…ery component skill Agent Plugins 1.0.0 conformance (https://agent-plugins.org): - Root plugin.json ($schema 1.0.0, closed manifest) replaces .codex-plugin/plugin.json; Codex data moves to extensions["com.openai"] (Codex's own namespace). - Root mcp.json with $schema and explicit `streamable-http` transports replaces .mcp.json. - Client-specific files move to the com.openai/ extension directory (hooks.json, subagents); the git pre-push gate moves to scripts/git-hooks/. - .claude-plugin/ becomes a generated shim (build-client-manifests.mjs) because Claude Code does not read root plugin.json yet. - New validate-plugin.mjs checks manifest, mcp.json, extension layout, containment and every bundled skill; plugin bumped to 0.2.0. Agent Skills conformance: - Source skills keep TanStack Intent lists (requires/sources) but move scalar keys under `metadata` (current Intent format). sync-skills.mjs rewrites the bundle to strict Agent Skills frontmatter and gains --check; check-skill-sync.mjs compares against that output. The official agentskills validator went from 73 failing bundled skills to 0. UX/UI guidelines: - New `ux-guidelines` skill (+ references) unifies UX writing, save/edit/delete copy, toast and error messages, Intl date/number formatting, numeric alignment, disabled/read-only/ loading/empty states, top-right vs bottom-right action placement, toast placement and component selection, distilled from the Storybook page compositions. - Every <component>-usage skill (59) gets a UX/UI guidelines section: when to use it, what to use instead, do, don't, copy and states. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018RL5WhUHzBdXkfsszgBxRB
- Format fixture dates through Intl (new createFixtureDateFormatter / formatDate) instead of rendering raw ISO strings in tables, detail lists and page descriptions. - Replace `$` + toFixed / `toFixed(2) Kč` with Intl currency formatters (czkUnit for unit prices, usd in the Table stories); money cells in the CRUD grid use tabular figures. - Toast titles follow `<Object> <past participle>` (`Product saved`, `Settings saved`). - Settings: the explicit-save Workspace form ends with `Save changes` bottom-right after its last field instead of the section header. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018RL5WhUHzBdXkfsszgBxRB
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Important Review skippedToo many files! This PR contains 214 files, which is 114 over the limit of 100. To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry. ⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Advanced Run ID: 📒 Files selected for processing (214)
You can disable this status message by setting the 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 |
 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
This comment has been minimized.
This comment has been minimized.
…e gate, empty states - skill-frontmatter: strip YAML inline comments (`"url" # note`) from scalar and list values, so bundled metadata.sources no longer carries the comment and quotes (chart-usage). - check-skill-sync: compare the staged bundle for every touched skill, not only skills paired with a component — a change to ux-guidelines or component-usage-ux alone can no longer pass with a stale plugin copy. - data-table-usage / ux-guidelines states: translations hold one empty message; pick it from app state or use renderEmpty so a load error never reads as "No records". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018RL5WhUHzBdXkfsszgBxRB
…ot the ui- prefix libs/ui/skills also ships ui-kit-* skills, so a deleted source skill whose name starts with "ui-" slipped past the staged bundle check. AUTHORED_SKILLS now lives in lib/skill-frontmatter.mjs and is shared by sync-skills.mjs and check-skill-sync.mjs. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018RL5WhUHzBdXkfsszgBxRB
Storybook A11y Report
Light
By group
Dark
By group
|
|
🎉 This PR is included in version 0.52.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
1. Agent plugin now follows Agent Plugins 1.0.0
The plugin in
libs/ui/agent-pluginis restructured to the Agent Plugins 1.0.0 spec:.codex-plugin/plugin.json(Codex-only fields)plugin.json:$schema1.0.0, a closed field set, Codex data inextensions["com.openai"](the namespace Codex's loader reads).mcp.jsonwithtype: "http"mcp.json:$schema1.0.0,type: "streamable-http"agents/,hooks/hooks.jsonat the rootcom.openai/extension directory (Codex subagents +hooks.json)hooks/pre-pushscripts/git-hooks/pre-push(the installer path is updated).claude-plugin/plugin.jsonscripts/build-client-manifests.mjs. Claude Code doesn't read rootplugin.jsonyet, so MCP servers are inlined and mapped (streamable-http→http)scripts/validate-plugin.mjs(pnpm validate) checks the manifest,mcp.json, extension layout, path containment and every skill. It also confirms the generated files are up to date.0.2.0(breaking layout change).Skills conformance: the bundled skills had non-spec top-level frontmatter (
type,library_version,requires, …). A strict client must skip such skills (§7.1).metadata, which matches current TanStack Intent.sync-skills.mjsrewrites the bundled copies to strict Agent Skills frontmatter and has a new--checkmode.scripts/check-skill-sync.mjsnow compares the bundle against that generated output.agentskills validate, 73 bundled skills failed before; 0 fail now.2. UX/UI guidelines
ux-guidelinesskill with referencesux-writing,formatting,states,feedback-and-actionsandcomponent-selection. It was built from our Storybook page compositions (CRUD workflow, record editor, settings, system states, layouts, checkout), with ui-ux-pro-max used as input. It sets one set of rules for:New/Create <object>,Save changes,Delete <object>,Discard changes, neverOK/Yes/Submit), toast titles as<Object> <past participle>, and error text as what + why + how to fix.Intlwith the app locale. No raw ISO strings and no"$" + toFixed.—for missing values.<Toaster />sits bottom-end, with a table of which feedback surface to use for which event.<component>-usageskills now have a UX/UI guidelines section: when to use it, what to use instead, do, don't, copy and states. Each one also listsux-guidelinesunderrequires.component-usage-ux, the plugin'sui-component-usagerouter, the pluginAGENTS.md/README.md, and the Intent artifacts (skill_tree.yaml,consumer_app_usage_rules.md) all point to the new skill.3. Page stories aligned with the guidelines (separate commit)
Intl(newcreateFixtureDateFormatter/formatDate) in about 17 places that used to render raw ISO strings.$…toFixed(2)andtoFixed(2) Kčare replaced withIntlcurrency formatters.Product saved,Settings saved).Save changesmoves to the bottom-right of the form.Follow-ups (not in this PR — they need component version bumps)
Toastcomponent replaces the title withloading...for theloadingtype. The guidelines use…and keep the caller's title.NumericInputdefaultslocaletocs-CZbutDatePickerdefaults toen-US. The guidelines tell apps to always passlocale; the kit defaults should match.Table'snumericprop could applytabular-numsitself.Testing
node libs/ui/agent-plugin/scripts/validate-plugin.mjs: pass (82 skills, 3 MCP servers)sync-skills.mjs --check,build-client-manifests.mjs --check: in syncnode scripts/check-skill-sync.mjswith everything staged: pass. It fails as expected on a deliberately stale bundle.agentskills validateon every bundled skill: 0 failuresschemas/1.0.0/plugin.schema.jsonandmcp.schema.json: validtsc -p libs/ui/tsconfig.json(includes stories): 0 errorsbiome checkon the authored scripts, JSON and fixture files: clean (infos only)pnpm --dir libs/ui validate:tokens: pass🤖 Generated with Claude Code
https://claude.ai/code/session_018RL5WhUHzBdXkfsszgBxRB
Generated by Claude Code