Skip to content
Development
Command

/component

Create new React component

Boost this command
@assistant-uiassistant-ui@assistant-ui
From plugin
tool-ui
7807 skills5 agents7 commands
Install
$ npx -y skills add assistant-ui/tool-ui --agent claude-code

How it fires

How this command gets triggered: by you, by Claude, or both.

  • Fires itselfClaude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/component

Context preview

What this command does when you run it.

Create new React component

Command definition

component.md
description: Create new React component

Create a new component: $ARGUMENTS

Follow project patterns:

  • **Location**: `apps/www/app/components/` (or specify subdirectory)
  • **Style**: Functional component with TypeScript
  • **Props**: Properly typed interface
  • **Styling**: Tailwind CSS classes
  • **Exports**: Named export (not default)
  • **Accessibility**: ARIA labels, keyboard navigation
  • **Theme**: Support light/dark mode via next-themes

Include: 1. TypeScript interface for props 2. JSDoc comments for complex logic 3. Proper prop validation 4. Responsive design considerations 5. Error boundaries if needed

Check `apps/www/app/components/` for similar patterns to follow.

Read it on GitHub ↗
Ships withtool-ui

UI components for AI interfaces

Get the whole plugin
Stats
TypeScriptReactTailwindshadcn/uiGitHub
781
Stars
30
Forks
Active
Maintenance
TypeScript
Language
MIT
License
14d ago
Last commit
10mo ago
Created

Repo: assistant-ui/tool-ui

In this plugin
7 commands5 agents1 skill
See everything inside

Other commands on tool-ui.