Create DXOS Composer plugin UIs with design-system primitives and layout shells.
npx skills add https://github.com/dxos/plugins --skill composer-ui
Please help me install this Agent Skill. Skill: composer-ui Source: https://github.com/dxos/plugins/tree/main/.agents/skills/composer-ui Command: npx skills add https://github.com/dxos/plugins --skill composer-ui
This Skill helps you build plugin user interfaces for DXOS Composer without fighting the design system, theme tokens, or layout conventions. It reduces rework by steering you toward the right primitives, patterns, and composition rules from the start.
@dxos/react-ui* packages for panels, cards, lists, forms, menus, icons, and dialogs.useObject, and separate settings from view state.Ask for help designing or refactoring a Composer plugin component so it uses the correct DXOS primitives, theme tokens, menu actions, and form patterns.
High-intent search queries and answers about installing and using this skill.
Build DXOS Composer plugin UIs using @dxos/react-ui design-system primitives for panels, lists, forms, and menus. Apply the standard Panel plus ScrollArea shell and wire interactions correctly to ensure your plugin surface matches Composer's visual and interaction standards.
The standard Composer plugin layout pattern uses a Panel combined with a ScrollArea shell. Toolbars are built using menu action composition, while lists, pickers, and stack-based collections are wired following specific container and component separation rules.
Create schema-driven forms in DXOS Composer by reactively reading ECHO objects with the useObject hook. Separate persistent settings from transient view state to maintain clean state management within your plugin surfaces.
Storybook is supported for developing Composer plugin interfaces. You can build and isolate stories for panels, cards, lists, forms, menus, icons, and dialogs using the @dxos/react-ui packages before integrating them into the full Composer environment.
You must use specific Composer theme tokens when styling plugins to avoid visual inconsistencies. Adhering to the design-system primitives and theme tokens from @dxos/react-ui packages reduces rework and ensures your toolbar, editor, or inspector matches Composer standards.
Container and component separation is required to maintain clean architecture in Composer plugins. This pattern ensures layout shells, interaction wiring, and schema-driven editing logic remain modular, making your plugin surfaces easier to refactor and maintain.
dxosGuide implementation and maintenance of DXOS Composer plugins in the plugins repository.
andersnygaardGenerate Storybook stories for React components with TypeScript types and interaction tests.
BintzGavinIntegrate Helios timeline-driven animations into Svelte components using stores.
FAeN399Build a design system with tokens, components, governance, and documentation.