skills.rest
zerx-lab
zerx-labCOMMUNITY
Explore all skills by this author →
GitHub

new-component

Scaffold new GPUI components from existing UI patterns with documentation and stories.

62|1|Updated Feb 5, 2026
Search Tags:#documentation#scaffold#component#GPUI#design-system#UI patterns
One-click install
npx skills add https://github.com/zerx-lab/rmx --skill new-component-zerx-lab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/zerx-lab/rmx/tree/main/.opencode/skills/new-component
Command: npx skills add https://github.com/zerx-lab/rmx --skill new-component-zerx-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams quickly create GPUI components by scaffolding new elements that conform to existing UI patterns and design guidelines.

Core Features & Use Cases

  • Pattern-based scaffolding: Generates a new component implementation aligned with existing crates/ui/src examples (Button, Select) and design system conventions.
  • API consistency & documentation: Ensures the new component follows the same API style and includes component documentation and a story.
  • Use Case: When starting a new GPUI element, such as a custom input or widget, use this Skill to create a consistent, ready-to-extend component scaffold complete with docs and stories.

Quick Start

Follow the described workflow to scaffold a new GPUI component based on crates/ui/src patterns (e.g., Button, Select). Create accompanying documentation and a story to accompany the component.

Frequently Asked Questions about new-component

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

FAQPage Schema
How do I scaffold a new GPUI component that matches my existing design system?▼

To scaffold a new GPUI component, this Skill automates the generation of new UI elements by deriving structural patterns from existing components like Button or Select. This ensures your new component immediately conforms to established design system conventions and API styles.

What is the best way to generate documentation and stories for custom GPUI elements?▼

The best way to generate documentation and stories is through pattern-based scaffolding. This Skill automatically creates accompanying component documentation and ready-to-extend stories alongside the new GPUI element implementation.

How do I ensure API consistency when creating multiple UI patterns in GPUI?▼

You ensure API consistency by enforcing pattern-based implementation. This Skill analyzes existing crates/ui/src examples to generate new components that follow the exact same API style and structural conventions as your current UI patterns.

Can I use this scaffolding tool to build UI components across different projects?▼

Yes, you can use this scaffolding tool across different projects. It is specifically designed for UI teams building new elements across various codebases, ensuring consistent design system adherence and ready-made documentation everywhere.

Do I need existing UI patterns to start creating a new GPUI component?▼

Yes, you need existing UI patterns. The Skill works by referencing existing crates/ui/src examples, such as Button and Select, to enforce pattern-based implementation and generate a structurally consistent new component scaffold.

Related Skills

Explore More Design & Creative Skills→
1337hero1337hero
1

scaffold-astro

Scaffold and standardize Astro projects with Bun and Tailwind.

Community
Intermediate
WirasmWirasm
65

gpui

Build GPU-accelerated native UIs with gpui and gpui-component libraries.

Community
Intermediate
zerx-labzerx-lab
62

generate-component-documentation

Generate UI component documentation from established patterns and templates.

Community
Basic
longbridgelongbridge
12.5k

new-component

Guides creation of new GPUI components using established Rust patterns.

Official
Intermediate