Claude Code ガイド

Appearance

原文（日本語に翻訳） ​

SKILL.mdのフロントマターでスキルの argument-hint がYAMLシーケンス構文（例: [topic: foo | bar]）を使用している場合にReactクラッシュ（エラー #31）が発生していた問題を修正しました — この値は現在、文字列に適切に変換されます（anthropics/claude-code#25826）

原文（英語） ​

Fixed React crash (error #31) when a skill's argument-hint in SKILL.md frontmatter uses YAML sequence syntax (e.g., [topic: foo | bar]) — the value is now properly coerced to a string (anthropics/claude-code#25826)

概要 ​

Claude Codeのスキル定義ファイル（SKILL.md）のフロントマターに argument-hint を設定する際、YAMLのシーケンス構文（[topic: foo | bar] のような配列形式）を使用するとReactのレンダリングエラー（エラー #31）が発生してClaude Codeがクラッシュしていました。この修正により、YAMLシーケンス構文で書かれた argument-hint が適切に文字列に変換されるようになり、クラッシュが防止されます。

基本的な使い方 ​

スキル定義ファイルで argument-hint を設定する正しい方法。

markdown
<!-- .claude/skills/my-skill.md -->
---
name: my-skill
description: "カスタムスキルの説明"
argument-hint: "topic: foo | bar"
---

スキルの説明内容...

修正後は、YAML配列形式で書いてもクラッシュしなくなります。

markdown
<!-- 修正後は以下でもクラッシュしない（文字列に変換される） -->
---
name: my-skill
description: "カスタムスキルの説明"
argument-hint: [topic: foo | bar]
---

実践例 ​

ユースケース1: 翻訳スキルのargument-hint設定 ​

ユーザーが引数として言語を指定する翻訳スキルの例。

markdown
<!-- .claude/skills/translate.md -->
---
name: translate
description: "テキストを指定した言語に翻訳します"
argument-hint: "language: japanese | english | french | spanish"
---

あなたは翻訳専門家です。指定された言語にテキストを翻訳してください。
翻訳は自然で流暢な表現を使用してください。
bash
# スキルの使用方法
claude
> /translate japanese
> このドキュメントを翻訳してください

ユースケース2: コードレビュースキルの設定 ​

レビューの焦点を引数で指定するスキルの例。

markdown
<!-- .claude/skills/code-review.md -->
---
name: code-review
description: "コードレビューを実行します"
argument-hint: "focus: security | performance | readability | all"
---

あなたは経験豊富なシニアエンジニアです。
指定されたフォーカスエリアに重点を置いてコードレビューを実施してください。
bash
# スキルの使用
claude
> /code-review security
> 以下のコードをセキュリティ観点でレビューしてください：
> [コード内容]

ユースケース3: YAMLシーケンス構文の問題のある書き方と修正後の動作 ​

修正前後の動作の違い。

yaml
# 問題があった書き方（YAML配列構文）
# 修正前: これを使うとReactがクラッシュしていた
argument-hint: [topic: foo | bar]

# 修正後: 上記はnow properly coercedされ、以下と同等に扱われる
argument-hint: "topic: foo | bar"
markdown
<!-- 推奨: 明示的に文字列として記述する -->
---
name: my-skill
description: "スキルの説明"
argument-hint: "topic: AI | ML | DevOps"
---

スキルの内容...

注意点 ​

  • argument-hint はユーザーインターフェースでスキルの引数説明として表示されます。
  • YAML配列構文（[...]）で書いた場合、文字列に変換されますが、元のYAML構造が保持されるわけではありません。
  • 最も安全な方法は、argument-hint の値を常に引用符で囲んだ文字列として記述することです。
  • スキル定義ファイルは .claude/skills/ ディレクトリに配置します。
  • この修正はReactのレンダリングエラーを防ぐためのものですが、スキル自体の動作には影響しません。

関連情報 ​