scaffold-new-react-componentlisted
Install: claude install-skill anchit-choudhry/gryffin-calorai
# New Component Scaffold
You are scaffolding a new React component for Gryffin Calorai. The argument is the PascalCase
component name (e.g. `MealCard`).
If no argument was given, ask the user: "What is the PascalCase name for the new component?"
## Step 1 - Determine placement
Ask if unsure, otherwise infer:
- Business-logic components with their own test: `apps/web/src/components/<Name>.tsx`
- Sub-components scoped to a page: `apps/web/src/components/<page>/<Name>.tsx`
## Step 2 - Generate the component file
Use this exact structure. Adapt props and Zustand selectors to what the user describes.
```tsx
// apps/web/src/components/<Name>.tsx
import type {FC} from "react";
import {cn, EDITORIAL_INPUT_CLS, LABEL_MONO_CLS} from "@/lib/utils";
import {useAppState} from "../state/AppState";
// Add named lucide-react icon imports here, e.g.: import { Pencil } from "lucide-react";
// Add shadcn/ui imports here, e.g.: import { Button } from "@/components/ui/button";
interface
<Name>Props {
// define props here; use branded types from @/types for IDs
className ? : string;
}
const <Name>: FC
<
<Name>Props> = ({className}) => {
// Pull only what you need from the store:
// const { foo, setFoo } = useAppState();
return (
<div className={cn("", className)}>
{/* component markup */}
</div>
);
};
export default <Name>;
```
**Conventions to follow (non-negotiable):**
- Never `import React from "react"` - the automatic J