React crash when command frontmatter argument-hint contains YAML array syntax

Description

Claude Code crashes with an unhandled React error when a custom command's argument-hint frontmatter field contains YAML array syntax (brackets with a colon inside).

Reproduction Steps

1. Create a custom command file .claude/commands/test-command.md:

---
description: Test command
argument-hint: [scope: full|quick]
---

# Test Command
This is a test.

1. In Claude Code, start typing /test-command
2. Before pressing enter, observe the autocomplete dropdown

Expected Behavior

Either:

• The value is coerced to a string and displayed
• A validation error warns that argument-hint must be a string
• The command is skipped with a warning in the UI

Actual Behavior

Claude Code crashes with:

ERROR  Minified React error #31; visit https://react.dev/errors/31?args[]=object%20with%20keys%20%7Bscope%7D

The error indicates React received an object {scope: "full|quick"} where it expected a string or React element.

Root Cause

YAML interprets [key: value] as shorthand for a single-element array containing a mapping: [{key: "value"}]. This is valid YAML, but Claude Code doesn't validate or sanitize the parsed value before passing it to the React UI component.

Workaround

Quote the argument-hint value to force string interpretation:

argument-hint: "[scope: full|quick]"

Suggested Fix

1. Validate frontmatter types: Check that argument-hint is a string after YAML parsing
2. Graceful degradation: If the value is not a string, either coerce it (String(value)) or skip rendering the hint with a console warning
3. Documentation: Note that frontmatter values should be quoted if they contain YAML special characters

Environment

• Claude Code version: 2.1.2
• OS: macOS (Darwin 24.6.0)
• Model: claude-opus-4-5-20250101