new-component

Agent Skills › feigeCode/navop › new-component

new-component

GitHub

用于创建 GPUI 组件的指南，指导遵循现有模式、保持样式与 API 一致性，并根据复杂度选择无状态或有状态实现，同时包含文档和 Story 编写要求。

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

Trigger Scenarios

构建新的 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/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