new-component

Agent Skills › feigeCode/navop › new-component

new-component

GitHub

用于创建新的GPUI组件，指导开发者遵循现有模式、样式和API规范。涵盖无状态与有状态组件的选择，并包含文档编写及Storybook故事文件生成的指引。

.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