Skill-specific frontend rendering: display hints on SkillCard

[Par-t]

Problem

Each skill defines its own user-facing output shape (user_output_keys on SkillCard). The frontend currently has no way to know how to render these fields — novelty_score should be a gauge, aligned should be a green/red badge, etc. A generic key-value dump works but provides a poor UX.

Without this, every new skill requires frontend code changes.

Possible directions

1. Generic React renderers — Skill card declares display hints per output key (e.g. {"type": "gauge", "min": 0, "max": 1}). Frontend has a small set of reusable components (gauge, badge, text, score_table) and renders based on hints. New skills = new card config, zero frontend changes.

2. Skill-specific frontends — Each skill ships its own frontend component. Most flexible but partially breaks the open-source contribution model (contributors need to write both Python + React).

3. CopilotKit — Use CopilotKit to dynamically render UI from the skill card metadata. Fully automated — frontend generates itself from the card. Fits the project's automation-first philosophy. May require an API key (needs investigation on pricing/free tier).

Scope

• Add user_display: dict field to SkillCard (core/skill_card.py)
• Expose via GET /skills/{skill_name} metadata endpoint
• Frontend renders based on chosen approach above
• Skill-builder prompt template includes display section

Context

Currently only one skill (hackathon_novelty) exists, so this is not blocking. But the skill-builder prompt and template are being designed now — this needs to be part of the contract before other skills are built.