Add Component

The add-component skill allows you to dynamically insert new UI elements into an existing application interface. It enables AI agents to modify layouts by placing buttons, forms, or widgets at specific coordinates without requiring a full page reload. This capability supports real-time interaction adjustments based on user context or system events.

When to use it

• Dynamically injecting a "Contact Support" button when a user encounters an error message.
• Adding a temporary data entry form to a dashboard view during a live audit session.
• Inserting a notification banner at the top of the screen to alert users of system maintenance.
• Placing a quick-action widget next to a specific row in a complex data table for immediate edits.

Key capabilities

• Dynamic Insertion: Adds components to the DOM in real-time without restarting the application session.
• Positioning Control: Places elements at precise locations within the current viewport or container.
• Context Awareness: Triggers component addition based on specific user actions or detected system states.

Example prompts

• "Add a 'Save Changes' button to the right side of the current form field."
• "Insert a warning banner at the top of the dashboard indicating that the session will expire in 5 minutes."
• "Place a quick-edit icon next to the third item in the product list table."

Tips & gotchas

Ensure the target container exists and is visible before attempting to add a component, as inserting into non-existent areas may fail. Be mindful of layout shifts; adding elements can push existing content down, potentially breaking responsive designs on smaller screens.