Skip to content
cccskills
FreePublished on GitHub

new-component

Create GPUI UI components that follow the project’s existing implementation and Shadcn UI styling patterns. Choose a stateless or stateful design, keep the component API consistent with other elements, and add documentation and stories for the new component.

OriginalShow the original description

Create new GPUI components. Use when building components, writing UI elements, or creating new component implementations.

feigeCode/navop1,953 stars(GitHub 1,953 + cccskills 0)

Run score Not tested

See how to install

Good for

  • Building a new GPUI UI element
  • Choosing whether a component needs internal state
  • Matching an existing component API and style
  • Writing component documentation and stories

Files included (1)

  • SKILL.md945 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

Instructions

When creating new GPUI components:

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

Component Types

  • Stateless: Pure presentation components without internal state
  • Stateful: Components that manage their own state and data

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Implement and debug onetcli connection importers packaged as WebAssembly components. The skill covers parsing application settings, manifests and packaging, host integration, local visibility, password handling, and import preview issues.

  • Adding an importer for a database application
  • Debugging a WASM importer that is not listed
  • Packaging and installing a composite extension
feigeCode/navop2KUpdated Oct 26, 2026

gpui

FreeSummary

Use this skill while building or maintaining GPUI applications. It provides focused references for framework APIs and patterns, including keybindings, async tasks, state, events, layout, focus, custom elements, and tests.

  • Finding the right GPUI API for a feature
  • Implementing keyboard actions and focus navigation
  • Managing entities, events, or global state
feigeCode/navop2KUpdated Oct 26, 2026

gpui-component

FreeSummary

Build GPUI interfaces with gpui-component by choosing suitable controls, handling component state and themes, and following its design and coding guides. The references also cover layout, interaction states, interface copy, and application structure.

  • Choosing a component for a UI need
  • Setting up gpui-component in a GPUI app
  • Handling component state and theming
feigeCode/navop2KUpdated Oct 26, 2026

Design, implement, review, or debug onetcli IPC database drivers. Work from the `driver.json` manifest and JSON-RPC protocol contract through schema metadata, SQL-building methods, import and export, tests, and packaging, with guidance that applies across implementation languages.

  • Creating or reviewing an onetcli IPC database driver
  • Defining driver.json methods and capabilities
  • Implementing schema metadata and DDL builders
feigeCode/navop2KUpdated Oct 26, 2026

navop

FreeSummary

Use the Navop CLI to discover and operate resources exposed by a running Navop desktop app. The skill checks live tools, permissions, and schemas before commands, then follows Navop’s approval decisions for operations.

  • Checking which Navop tools are currently available
  • Inspecting a tool’s live schema before using it
  • Running a supported read or write operation
feigeCode/navop2KUpdated Oct 26, 2026

Prepare and review bilingual Chinese and English release notes for Navop. Maintain `CHANGELOG.md` as the source of truth, then check that tagged entries provide consistent content for GitHub Releases and the R2 updater manifest when a release is published or synchronized.

  • Drafting bilingual notes for a Navop version
  • Reviewing a CHANGELOG.md release entry
  • Checking release notes before creating a version tag
feigeCode/navop2KUpdated Oct 26, 2026

See all skills by feigeCode

Report a problem with this skill