Skills
.Work. You
Rest

ui-component-creator

Community

Create Cockpit V2 React UI components faster

Design & Creative#typescript#react#ui components#inertia#tailwind 4#cockpit pattern v2#pest tests
Authorwagnerra23
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It eliminates inconsistent, ad-hoc UI code by guiding you to build or extend React (Inertia) components that follow the Cockpit Pattern V2 canon for the oimpresso.com frontend.

Core Features & Use Cases

  • Cockpit V2-compliant UI generation: Creates React + Inertia v3 + Tailwind 4 components that reuse existing shared UI building blocks instead of inventing new ones.
  • Correct placement and composition: Chooses whether to generate a Page Inertia component, a local sub-component under module _components/, or a shared component under Components/shared/ based on reuse and scope.
  • Design-gated workflow: Enforces reading Design.md §16 and ADR 0110, then validates implementation details like semantic colors, Sheet lateral detail patterns, and persistent AppShellV2 layouts.
  • Structural testing for Page Inertia: Produces Pest structural checks for new Pages to ensure canonical imports/layout and to prevent non-semantic styling regressions.

Quick Start

Use the ui-component-creator skill to create a Cockpit V2-compliant drawer-based detail UI component named SaleSheet inside the correct resources/js/Pages/Sells/_components/ folder, using the existing shared PageHeader and KpiCard patterns and respecting ADR 0110.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-component-creator
Download link: https://github.com/wagnerra23/oimpresso.com/archive/main.zip#ui-component-creator

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.