Build app interfaces with the UI controls already provided by the project. Choose and compose form fields, menus, dialogs, and other components, following local variants, theme tokens, accessibility patterns, and wrapper APIs.
Using the app's local UI adapter and Toolkit or shadcn primitives. Use when choosing or composing standard controls, implementing dialogs, menus, or forms, or changing component variants and theme tokens.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
Use the components already provided by the app. Read the app's design-system configuration, Toolkit provider, and local UI components before adding or changing a control. Their exports, variants, and props are the contract; do not guess from upstream examples.
Product pages and domain components should import standard controls through the
app's configured local UI alias. In the Chat starter, that is
@/components/ui/*; its app/components/ui/button.tsx is a one-line
re-export of @agent-native/toolkit/ui/button. Follow an adjacent local shim
when the app needs another Toolkit primitive that is already exported there.
Use the app's configured design system and provider mapping for controls passed
to shared Toolkit surfaces. For shared Toolkit feature presentation, use the
semantic components exposed by @agent-native/toolkit/design-system; keep the
feature behavior in its existing controller and customize only its supported
presentation seam.
bg-background, text-muted-foreground, border-border, and bg-primary.
Keep theme values in the app's existing CSS theme file.Switch for a binary setting,
Checkbox for independent multi-select, RadioGroup for one choice from a
short set, and Select or the app's combobox for a longer predefined list.frontend-design for the app's surface-density rules.asChild or render.Use the app's existing field components and validation pattern. Associate errors with their inputs and expose invalid state to assistive technology. Icon-only actions need an accessible name and a usable focus target. Use the icon package already installed by the app.
Do not recreate menus, popovers, dialogs, or confirmations with absolute
positioning and custom click-outside handlers. Never use browser alert,
confirm, or prompt; use the app's dialog primitives. Keep overlay focus,
keyboard, dismissal, and stacking behavior from the existing primitive.
For small visual refinements, use layout classes and semantic tokens. Avoid raw
palette overrides, arbitrary one-off values, and manual overlay z-index unless
you are fixing a reproduced bug. Use gap-* for layout spacing and the app's
class-merging helper when it has one.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Generate, refine, export, and place brand images or videos from an Assets library into another app. The skill covers choosing a library, handling image batches and video runs, and updating selected assets after feedback.
Prepare a customer account health, renewal, or contract usage readout. Verify the account identity, use approved metric definitions, compare contracted capacity with actual usage, and trace findings to sources, time windows, and known gaps.
Create focused app actions that agents can call as tools and frontend code can use through client hooks. Use them to add provider integrations or fetch UI data, with validated inputs and structured results.
Use this checklist when adding a feature or integration to an agent-native app. It covers the user interface, agent-callable actions, instructions, and app-state sync so both the user and agent can work with the capability consistently.
Investigate complex questions by combining data from multiple sources, then summarize patterns, metrics, and evidence in a clear report. Save requested analyses as dashboards with instructions for future refreshes.
Use the Analytics admin surfaces to inspect and change workspace feature flags, review dashboard ownership and usage activity, or browse and edit databases connected from other agent-native apps. The skill guides administrators to the relevant view and actions.