skills.rest
longbridge
longbridgeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

new-component

Guides creation of new GPUI components using established Rust patterns.

12.5k|757|Updated Jun 13, 2024
Search Tags:#documentation#frontend#rust#gpui#stories#component-patterns#ui-component
One-click install
npx skills add https://github.com/longbridge/gpui-component --skill new-component-longbridge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/longbridge/gpui-component/tree/main/.claude/skills/new-component
Command: npx skills add https://github.com/longbridge/gpui-component --skill new-component-longbridge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating new GPUI components requires following established patterns to ensure consistency and reusability across projects.

Core Features & Use Cases

  • Follow existing patterns: Base implementation on components in crates/ui/src (examples: Button, Select)
  • Style consistency: Align with existing component styles and Shadcn UI patterns
  • Component types: Stateless for simple elements; Stateful for components with internal data
  • Documentation & Stories: Add component documentation and story files in the story folder
  • API consistency: Maintain the same API style as other elements; support future extensions
  • Use Case: Build a new UI element by copying and adapting an existing component scaffold

Quick Start

Follow existing GPUI component patterns in crates/ui/src to implement your new component.

Frequently Asked Questions about new-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new GPUI component in Rust?▼

To create a new GPUI component, follow established design and code patterns from crates/ui/src, ensuring style consistency with existing elements like Button and Select. This approach maintains reusability across Rust-based GPUI projects.

What is the difference between stateless and stateful GPUI components?▼

Stateless GPUI components are simple elements without internal data, while stateful components manage internal data. Choosing the right type ensures proper pattern adherence when building UI elements in crates/ui/src.

How do I add documentation and stories for GPUI components?▼

Add component documentation and story files in the story folder. This practice integrates with the component storytelling workflow to ensure new UI elements are properly documented alongside their implementation.

Can I use Shadcn UI patterns when building GPUI components?▼

Yes, new GPUI components should align with existing component styles and Shadcn UI patterns. This ensures visual and structural consistency across the component library within your Rust project.

How do I maintain API consistency for new UI elements in a GPUI component library?▼

Maintain API consistency by basing your implementation on existing components like Button and Select, supporting future extensions. This ensures the new element matches the API style of other elements in crates/ui/src.

Related Skills

Explore More Software Engineering Skills→
walid-moswalid-mos
2

structure-astro

Generates Astro project directory layouts for component types.

Community
Intermediate
BumpyClockBumpyClock
1

gpui

Standardize GPUI component development with builder-style APIs and frontmatter documentation.

Community
Advanced
Quanby-IT-SolutionsQuanby-IT-Solutions
2

tailwind-shadcn

Standardize Tailwind v4 and shadcn/ui styling in apps/web with ThemeProvider theming.

Official
Intermediate
geoffjaygeoffjay
8

gpui-patterns

Guide GPUI component composition, state management, and action dispatching with Rust code fragments.

Community
Intermediate