Agent Skills › kokonut-labs/kokonutui › building-components

building-components

GitHub

指导构建现代、可访问且可组合的 UI 组件。适用于新建组件、实现无障碍功能、设计组合式 API、设置设计令牌、发布至 npm 或编写组件文档等场景。

.agents/skills/building-components/SKILL.md kokonut-labs/kokonutui

Trigger Scenarios

构建新的 UI 组件实现无障碍特性创建可组合的组件 API 设置设计令牌和主题系统将组件发布到 npm 或注册表

Install

npx skills add kokonut-labs/kokonutui --skill building-components -g -y

More Options

Non-standard path

npx skills add https://github.com/kokonut-labs/kokonutui/tree/main/.agents/skills/building-components -g -y

Use without installing

npx skills use kokonut-labs/kokonutui@building-components

指定 Agent (Claude Code)

npx skills add kokonut-labs/kokonutui --skill building-components -a claude-code -g -y

安装 repo 全部 skill

npx skills add kokonut-labs/kokonutui --all -g -y

预览 repo 内 skill

npx skills add kokonut-labs/kokonutui --list

SKILL.md

Frontmatter

{
    "name": "building-components",
    "description": "Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm\/registry, or writing component documentation."
}

Building Components

When to use this skill

Use when the user is:

Building new UI components (primitives, components, blocks, templates)
Implementing accessibility features (ARIA, keyboard navigation, focus management)
Creating composable component APIs (slots, render props, controlled/uncontrolled state)
Setting up design tokens and theming systems
Publishing components to npm or a registry
Writing component documentation
Implementing polymorphism or as-child patterns
Working with data attributes for styling/state