How do I install the Oneworks Plugin UI skill?

Run npx skillmds@latest add oneworks-ai/oneworks-plugin-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Oneworks Plugin UI safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Oneworks Plugin UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Oneworks Plugin UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Oneworks Plugin UI?

oneworks-ai (@oneworks-ai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Oneworks Plugin UI by oneworks-ai — Agent Skill

Name: Oneworks Plugin UI
Author: oneworks-ai

Oneworks Plugin UI

Design or revise OneWorks client plugin routes, workspace sidebars, launcher pages, route headers, breadcrumbs, actions, embedded host components, and plugin data loading. Use whenever a task creates or changes a plugin-owned UI so host chrome ownership is decided before markup and duplicate titles, navigation, refresh controls, or padding are avoided.

oneworks-ai d2395f6 2 files · 2.6 KB Updated Sep 17, 2026

File contents

OneWorks Plugin UI

Read apps/client/src/plugins/AGENTS.md, the target plugin's nearest AGENTS.md, and .oo/skills/ui-design-memory/SKILL.md before editing.

Map the host before markup

Write down which layer owns each visible responsibility:

route identity and selected resource name: view.route.setTitle(...);
hierarchy and back navigation: view.route.setBreadcrumb(...);
collection resources and search: view.route.setSidebar(...);
stable collection shortcuts beside the owning sidebar entry: nav.items[].actions;
commands on the object currently named by the header: view.route.setActions(...);
focus/reconnect cache revalidation: view.data.useQuery(...);
embedded shared UI: view.ui.*, using flush/inset options when the route owns outer spacing.

The plugin body starts with actual content. Do not repeat a title already visible in the route header or breadcrumb. Do not place collection navigation in object actions. Do not add a refresh action when query revalidation is sufficient. Do not make both host and embedded content own the same padding.

Extend the host conservatively

If a needed placement or behavior is missing, add a structured, plugin-agnostic host contract and consume it from the plugin. Do not imitate host chrome with plugin-local DOM/CSS and do not add package-name branches to the host.

Verify the whole route

Check the root resource view and every secondary state at desktop and narrow widths. Assert:

one visible owner for page identity;
selected resource title updates in the shared header;
sidebar actions stay beside their owning entry and navigate without reload;
breadcrumbs are the only duplicate-free return path;
header actions operate on the current object only;
no redundant refresh or open-current-view action;
no duplicated outer padding;
focus/reconnect revalidation and post-mutation mutate() work.

Complete the independent revision-bound visual review required by $ui-design-memory before delivery.

---name: oneworks-plugin-uidescription: Design or revise OneWorks client plugin routes, workspace sidebars, launcher pages, route headers, breadcrumbs, actions, embedded host components, and plugin data loading. Use whenever a task creates or changes a plugin-owned UI so host chrome ownership is decided before markup and duplicate titles, navigation, refresh controls, or padding are avoided.---# OneWorks Plugin UIRead `apps/client/src/plugins/AGENTS.md`, the target plugin's nearest `AGENTS.md`, and `.oo/skills/ui-design-memory/SKILL.md` before editing.## Map the host before markupWrite down which layer owns each visible responsibility:- route identity and selected resource name: `view.route.setTitle(...)`;- hierarchy and back navigation: `view.route.setBreadcrumb(...)`;- collection resources and search: `view.route.setSidebar(...)`;- stable collection shortcuts beside the owning sidebar entry: `nav.items[].actions`;- commands on the object currently named by the header: `view.route.setActions(...)`;- focus/reconnect cache revalidation: `view.data.useQuery(...)`;- embedded shared UI: `view.ui.*`, using flush/inset options when the route owns outer spacing.The plugin body starts with actual content. Do not repeat a title already visible in the route header or breadcrumb. Do not place collection navigation in object actions. Do not add a refresh action when query revalidation is sufficient. Do not make both host and embedded content own the same padding.## Extend the host conservativelyIf a needed placement or behavior is missing, add a structured, plugin-agnostic host contract and consume it from the plugin. Do not imitate host chrome with plugin-local DOM/CSS and do not add package-name branches to the host.## Verify the whole routeCheck the root resource view and every secondary state at desktop and narrow widths. Assert:- one visible owner for page identity;- selected resource title updates in the shared header;- sidebar actions stay beside their owning entry and navigate without reload;- breadcrumbs are the only duplicate-free return path;- header actions operate on the current object only;- no redundant refresh or open-current-view action;- no duplicated outer padding;- focus/reconnect revalidation and post-mutation `mutate()` work.Complete the independent revision-bound visual review required by `$ui-design-memory` before delivery.

Frequently asked questions