CLI
Use the CLI to add Context.dev components, find tokens, and check new pages and interfaces.
npx context-ds listAgent workflow
- 1Read the referenceChoose the product or site surface. Find the components for the task and read their usage notes and source.
- 2Add componentsUse add to copy the required components into the project. Reuse existing components before creating a new one.
- 3Build the interfaceCompose the page with the components and tokens. Follow the reference layout, spacing, typography, states, and interactions.
- 4Verify the resultRun check, test keyboard and pointer interactions, and review desktop and phone layouts against the reference.
Set up the project
Run this from the project root. It installs the design tokens, fonts, agent instructions, and checks for Claude Code, Codex, and Cursor. It also adapts matching components and existing styles to the design system.
npx -y github:anwarlemu/context-dev-brand-cli#releaseCommands
After setup, run these commands from the project root.
- npx context-ds add <items...>
- Add component source files, tokens, and required packages to a React and Tailwind project.
- npx context-ds list
- List the available components, blocks, and visuals.
- npx context-ds look <file>
- Find component and styling guidance for the elements in a file.
- npx context-ds check [files...]
- Find styles that do not use design tokens. Use --changed to check the current changes.
- npx context-ds review [url]
- Capture desktop and phone screenshots and compare them with the reference pages. Use --any for a page outside the current task list.
- npx context-ds tokens [term]
- Find a token by name or value.
Add components
For React and Tailwind 4 projects. The CLI uses the project's src directory and @ alias when present.
terminal
Agent instructions
Include this in the task when asking an agent to build or change a page.
task instructions