new-componentlisted
Install: claude install-skill mattbutlerengineering/mattbutlerengineering
# /new-component — scaffold a rialto component
Creates a new component directory under `packages/rialto/src/components/<Name>/` with 5 files that follow the exact patterns used by existing rialto components (AppBar, Card, Button, etc.).
## Arguments
The user must provide:
- **Component name** (PascalCase, e.g., `InfoPanel`) — becomes the directory and file prefix
## Steps
1. **Validate the name.** Must be PascalCase (starts with uppercase letter, no hyphens/underscores). If not, ask the user to correct it.
2. **Check for conflicts.** Verify `packages/rialto/src/components/<Name>/` does not already exist. If it does, stop and tell the user.
3. **Create the 5 files** listed below in `packages/rialto/src/components/<Name>/`.
4. **Add the barrel export** to `packages/rialto/src/components/index.ts` — insert `export * from "./<Name>";` in alphabetical order among the existing exports.
5. **Remind the user** to run `pnpm --dir packages/rialto build` to auto-register the component via filesystem discovery in `lib-entrypoints.ts`. No other manual registration is needed.
## File templates
All templates use `<Name>` as a placeholder for the component name provided by the user.
### 1. `<Name>.tsx`
```tsx
import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
import styles from "./<Name>.module.css";
/**
* <Name> component.
*
* @example
* <<Name>>Content</<Name>>
*/
export interface <Name>Props
extends Pick<
HTMLAttributes<HTMLDivElement>,