component-design
Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.
60
70%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./resources/bundled-skills/component-design/SKILL.mdComponent Design
Copyright (c) 2026 KunAgent. Licensed under the MIT License.
Purpose
Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.
Tool routing
| Tool or skill | Use |
|---|---|
design_system | Create or apply project design tokens. |
design_validate | Validate design-system usage. |
design_component | Publish the component prototype. |
generate_image | Create a needed local visual asset. |
Workflow
- Define hierarchy, content density, primary action, and states.
- Choose type, spacing, color, radius, and motion tokens before styling details.
- Design mobile and desktop layouts intentionally.
- Implement hover, focus, active, disabled, loading, empty, success, and error states as relevant.
- Validate contrast, semantics, motion, and responsiveness.
Completion gates
- Use one focal point and avoid nested-card clutter.
- Use color as reinforcement, not the only signal.
- Keep remote resource policy least-privilege.
Boundaries
- Do not depend on undocumented host CSS or runtime globals.
- Do not hide essential text in imagery or animation.
Delivery
Lead with the outcome, name the evidence used for verification, and disclose any real limitation that remains.
- Repository
- KunAgent/Kun
- Commit
ebce7f6
- Last updated
- First committed
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.