new-component

Agent Skills › feigeCode/navop › new-component

new-component

GitHub

指导创建GPUI组件，遵循现有模式、样式及API规范，区分无状态和有状态组件类型，并生成文档与Stories。

.codex/skills/skills/new-component/SKILL.md feigeCode/navop

Trigger Scenarios

创建新的GPUI组件编写UI元素实现构建符合Shadcn UI模式的组件

Install

npx skills add feigeCode/navop --skill new-component -g -y

More Options

Non-standard path

npx skills add https://github.com/feigeCode/navop/tree/dev/.codex/skills/skills/new-component -g -y

Use without installing

npx skills use feigeCode/navop@new-component

指定 Agent (Claude Code)

npx skills add feigeCode/navop --skill new-component -a claude-code -g -y

安装 repo 全部 skill

npx skills add feigeCode/navop --all -g -y

预览 repo 内 skill

npx skills add feigeCode/navop --list

SKILL.md

Frontmatter

{
    "name": "new-component",
    "description": "Create new GPUI components. Use when building components, writing UI elements, or creating new component implementations."
}

Instructions

When creating new GPUI components:

Follow existing patterns: Base implementation on components in crates/ui/src (examples: Button, Select)
Style consistency: Follow existing component styles and Shadcn UI patterns
Component type decision:
- Use stateless elements for simple components (like Button)
- Use stateful elements for complex components with data (like Select and SelectState)
API consistency: Maintain the same API style as other elements
Documentation: Create component documentation
Stories: Write component stories in the story folder