← ClaudeAtlas

new-componentlisted

Scaffold a new rialto design system component with all required files (component, CSS module, test, story, barrel export) following established conventions
mattbutlerengineering/mattbutlerengineering · ★ 0 · Web & Frontend · score 69
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>,