Add Shadcn Component

# Add Shadcn Component

This command adds a single new shadcn/ui component to `lib/platform-bible-react/src/components/shadcn-ui/` as a clean baseline, then adds the standard project customizations (`pr-twp` and TSDocs with library links) in a second commit. It follows the same two-stage commit pattern as `/upgrade-shadcn` so future upgrades can cleanly diff what shadcn generated vs. what we customized.

**Component parameter**: This command accepts an optional component name argument (e.g. `/add-shadcn-component progress`). If no component is provided, see [Determining the Component Name](#determining-the-component-name) below.

**Before doing anything else**, read [shadcn/ui Guidelines](../../.context/standards/Code-Style-Guide.md#shadcnui-guidelines). It is the authoritative source for all conventions used in this command: folder structure, boilerplate baseline, `// CUSTOM:` annotations, and the standard customizations. If anything in this command conflicts with that section, trust the section.

## Determining the Component Name

If a component argument was provided to this command, record it as `$COMPONENT` and skip to [Pre-flight Checks](#pre-flight-checks).

If no component was provided, ask the user:

> Which shadcn/ui component would you like to add? (e.g. `progress`, `slider`, `toast`)

Record the response as `$COMPONENT`.

## Pre-flight Checks

Perform these checks in sequence. Do not proceed past a failed check.

### Check 1 — No uncommitted working changes

Run:

```bash
git status --porcelain

If any output appears, tell the user:

There are uncommitted working changes. Please commit or stash them before continuing, then let me know when the working tree is clean.

Do not continue until git status --porcelain returns empty output.

Check 2 — Component not already present

Run:

ls lib/platform-bible-react/src/components/shadcn-ui/

If $COMPONENT.tsx appears in the listing, tell the user:

$COMPONENT.tsx already exists in the shadcn-ui folder. This command is for adding new components. To re-document or fix customizations on an existing component, use /shadcn-customizations instead.

Do not continue.

Create Branch

After both checks pass, create a new branch:

FIRST_NAME=$(git config user.name | awk '{print tolower($1)}')
TODAY=$(date +%m-%d-%Y)
git checkout -b "ai/feature/add-shadcn-${COMPONENT}-${FIRST_NAME}-${TODAY}"

Determine Preset

Run the following to detect the most recently used preset:

cd lib/platform-bible-react && npm run get-latest-preset

Record the output as $PRESET. This value is embedded in the baseline commit message so future shadcn tooling — including get-latest-preset itself, which greps git history for npx shadcn apply --preset — can locate this component's baseline even though npx shadcn apply is not literally run.

Step 0 — Verify Standard Customizations Are In Sync

After reading the shadcn/ui Guidelines, compare the standard customizations listed there against the standard customizations this command tracks — named in this Step 0 and in Step 2 below (currently: "TSDocs on all exports?" and "pr-twp on DOM-rendered components?").

If the style guide lists standard customizations that are not represented here, or vice versa, stop immediately and tell the user:

The standard customizations in shadcn/ui Guidelines no longer match what this command tracks. Please update this command, all other shadcn commands, and the shadcn-customization-tracker agent to reflect the current standard customizations before running.

Suggested prompt to fix this:

The shadcn/ui Guidelines section of .context/standards/Code-Style-Guide.md defines these standard customizations: [fill in from what you read in the style guide]. The shadcn commands and `shadcn-customization-tracker` agent are out of date — they still track: [fill in from what you read in the commands]. Read the commands and agent to determine what parts need to be updated, and update them to match the style guide.

Step 1 — Add the Component

Run the following from lib/platform-bible-react/ to add the component and capture output in one step:

cd lib/platform-bible-react
npm run add-shadcn-component -- $COMPONENT $PRESET 2>&1 | tee ../../shadcn-add-output.txt

# Windows (PowerShell):
cd lib\platform-bible-react
npm run add-shadcn-component -- $COMPONENT $PRESET 2>&1 | Tee-Object ..\..\shadcn-add-output.txt

This script internally adds the new component, applies the standard project file transforms, runs formatting and lint-fix, and commits to establish a new baseline. The full output is always saved to shadcn-add-output.txt in the repository root, whether the script succeeds or fails — tell the user it is available there for reference.

If the script succeeds and commits on its own, verify that the commit message contains npx shadcn apply --preset $PRESET. If it does, this is commit 1 of 2 — the fresh shadcn component with no customizations applied. Do not squash or amend it. Proceed to Step 2.

If the script fails:

Do NOT re-run add-shadcn-component — the output captured above gives you all the information you need.

1. Stage changes in lib/platform-bible-react exactly as they came from the script (do not modify anything yet):

   git add lib/platform-bible-react/
   git add package-lock.json
   

2. Dispatch a subagent to fix any simple, obvious problems flagged by the script output. Give it this prompt:

   You are fixing format and lint errors that occurred after running add-shadcn-component for shadcn/ui in lib/platform-bible-react. The script output is saved at shadcn-add-output.txt in the repository root — read that file to understand exactly what problems were flagged.

   Attempt to