Skip to content

Fix React error #31 in skills autocomplete#80

Open
0xabstracted wants to merge 1 commit intomainfrom
fix/skills-rendering-error
Open

Fix React error #31 in skills autocomplete#80
0xabstracted wants to merge 1 commit intomainfrom
fix/skills-rendering-error

Conversation

@0xabstracted
Copy link
Copy Markdown
Collaborator

Summary

  • Server: Added safeString() and safeStringArray() helpers in skillRoutes.ts to sanitize all skill API response fields — YAML frontmatter can produce objects/arrays where strings are expected
  • UI: Added defensive type checks in useSkillAutocomplete, TaskDescriptionField, SkillsPanel, and ClaudeCodeSkillsSelector to ensure only strings are rendered as React children
  • Fixes crash when typing / in the task description area to trigger skill autocomplete

Root Cause

Skill YAML frontmatter fields (description, triggers, tags, etc.) can parse as objects instead of strings depending on the YAML structure. The API returned these raw values, and the UI rendered them directly as React children, triggering React error #31: "Objects are not valid as a React child".

Test plan

  • Type / in the task description field with Hannibal project skills loaded — should show skill suggestions without crashing
  • Verify SkillsPanel renders all skills correctly (both project and global)
  • Verify ClaudeCodeSkillsSelector renders skill descriptions, triggers, and tags
  • All existing server tests pass (47/47)
  • All existing UI tests pass (33/33)

🤖 Generated with Claude Code

…omplete)

YAML frontmatter fields from skill files can parse as objects instead of
strings (e.g. description with nested mappings). The skills API returned
these raw values, and the UI rendered them directly as React children,
causing "Objects are not valid as a React child" crash.

Server: add safeString/safeStringArray helpers to coerce all skill API
response fields to proper types. UI: add defensive type checks in
useSkillAutocomplete hook, TaskDescriptionField, SkillsPanel, and
ClaudeCodeSkillsSelector before rendering skill data.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant