# Component

> Create and publish one focused interactive UI component or choose a governed Kun visualization.

- Skill: `kunagent/component` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kunagent/component`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kunagent/component/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: KunAgent (https://skillmd.com/u/kunagent)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/kunagent/component

---


# Interactive Component
Copyright (c) 2026 KunAgent. Licensed under the MIT License.

## Purpose
Create and publish one focused interactive UI component or choose a governed Kun visualization.

## Tool routing
| Tool or skill | Use |
|---|---|
| `design_component` | Publish one standalone interactive component. |
| `show_visualization` | Show a simple flow, cards, or callout. |
| `render_chart` | Render a trustworthy chart or table. |
| `show_diagram` | Publish a complex explanatory diagram. |

## Workflow
1. Identify whether interaction materially improves the answer.
2. Choose one component, visualization, chart, or diagram tool.
3. For a component, produce complete standalone HTML with one data-kun-component-root.
4. Bundle local resources and declare minimum remote origins.
5. Test responsive behavior and interaction states.

## Completion gates
- Provide labels, keyboard support, visible focus, and reduced-motion behavior.
- Keep the component focused; use production code tools for complete pages or flows.
- State the written conclusion outside the visual when needed.

## Boundaries
- Do not use a component for decoration or ordinary prose.
- Do not request credentials, payments, or sensitive inputs inside prototypes.

## Delivery
Lead with the outcome, name the evidence used for verification, and disclose any real limitation that remains.