GitHubCLI
Design system
GitHub

CLI

Install the CLI once from the project root. Then use it to add components, find tokens and check your work.

npm install --save-dev github:anwarlemu/agentcard-brand-cli#release

Build a page

  1. components

    Add components

    Read the component’s usage notes and add it by name. The CLI copies the source and installs its dependencies.

  2. implementation

    Build the page

    Compose the components, use the design tokens for the layout, and connect the controls to real state and actions.

  3. checks

    Verify the result

    Run the project’s checks, test the interactions, and review the page at desktop and phone widths.

Instructions for coding agents

Include this with the page requirements.

agent instructions
Build this page using the Agentcard design system at https://agentcard-ds.vercel.app.
Read the relevant component examples and usage notes before writing code.
Add existing components with the CLI. Use design tokens for custom layout and styling.
Connect every control to its intended behavior. Include validation, loading, empty and error states where needed.
Run the project checks and the CLI token check. Test keyboard interaction and desktop and phone layouts.

Add components

After installation, add the components the page needs. These are examples; choose the names from the library. Adding components also installs their dependencies and the theme.

terminal
npx agentcard-ds add button card field input
npx agentcard-ds add hero section site-header site-footer

Check the implementation

Run the token check after edits. Start the local development server before reviewing a page. Visual review does not replace testing the controls.

terminal
npx agentcard-ds check --changed
npx agentcard-ds review http://localhost:3000 --any

Commands

Run commands with npx agentcard-ds after installing the CLI.

agentcard-ds --help
add <items...>
Copy components, their dependencies and the theme into the project. Requires React and Tailwind 4.
list
List the available components, sections, page templates and visuals.
look <file>
Show the component and token guidance for the elements in a file.
tokens [term]
Find a design token by name or role.
check [files...]
Check style values against the design tokens. Use --changed for files changed in Git.
review <url> --any
Capture and review a page at desktop and phone widths.

Update an existing interface

Running the CLI without a subcommand applies the design system to existing code. It can replace matching components, convert style values and install agent rules and checks. Review the diff before continuing.

terminal
npx agentcard-ds --dry-run
npx agentcard-ds