Agent setup

Prepare the project

Complete Installation for Next.js or Vite, including the @siteplane registry entry in components.json. Confirm that the project’s alias and shared CSS import work with a simple Button before requesting a larger composition. The agent prompt on Getting started has your agent do this setup and install the skill.

Enable discovery and instructions

Install the skill into the project. Configure the shadcn CLI or MCP server to use @siteplane. Confirm that searching for a component returns its name and that viewing its demo returns complete code.

Provide a bounded task

Build a team settings page in this project using Siteplane UI.
Use the configured @siteplane registry and the docs at https://ui.siteplane.io.
Read the Team settings example and the referenced component APIs first.
Install the required public components and preserve the existing project setup.
Use the public Form, Field, Input, Select, Switch, and SettingsList parts.
Include editable team name, visibility, notification preferences, save feedback,
and reset to the last saved values. Keep persistence local for this task.
Verify the build and inspect desktop/mobile, keyboard use, and both themes.
Report any integration limitation; do not invent missing component props.

Replace the persistence sentence with your actual service API when one exists. Include the task’s acceptance criteria and boundaries; a visual reference alone does not define validation or data behavior.

Retrieve only what is needed

Use llms.txt to find targeted Markdown pages, then follow their Complete TSX file links to retrieve the relevant examples. On the documentation website, use the component page’s Markdown link to reach these file links, or copy its Code panel directly. Both contain the same complete example source. Follow the page’s installation instructions rather than copying only one implementation file from the source viewer.

An agent can work with these HTTP pages and files without an agent-specific account. The skill points at these same docs and registry. Keep task-specific requirements in the prompt and retrieve API details from the maintained sources.

Verify the result

Run the project’s relevant checks and inspect the actual page in a browser. Verify the user task, not just that imports resolve: labels, validation, state updates, navigation, empty results, focus, and narrow layouts must work.