Template

Files

lmiranda 2d51df7a42 feat(marketplace): command consolidation + 8 new plugins (v8.1.0 → v9.0.0) [BREAKING]

Phase 1b: Rename all ~94 commands across 12 plugins to /<noun> <action>
sub-command pattern. Git-flow consolidated from 8→5 commands (commit
variants absorbed into --push/--merge/--sync flags). Dispatch files,
name: frontmatter, and cross-reference updates for all plugins.

Phase 2: Design documents for 8 new plugins in docs/designs/.

Phase 3: Scaffold 8 new plugins — saas-api-platform, saas-db-migrate,
saas-react-platform, saas-test-pilot, data-seed, ops-release-manager,
ops-deploy-pipeline, debug-mcp. Each with plugin.json, commands, agents,
skills, README, and claude-md-integration. Marketplace grows from 12→20.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-06 14:52:11 -05:00

2.5 KiB

Raw Blame History

name

name
react component

/react component - Scaffold React Component

Skills to Load

skills/component-patterns.md
skills/typescript-patterns.md
skills/visual-header.md

Visual Output

Display header: REACT-PLATFORM - Component

Usage

/react component <ComponentName> [--type <ui|page|layout|form>] [--props <prop1:type,prop2:type>] [--no-test]

Workflow

1. Validate Component Name

Must be PascalCase (e.g., UserProfile, DataTable)
Reject reserved React names (Component, Fragment, Suspense)
Check for existing component with same name — prompt before overwriting

2. Determine Component Type

ui (default): Presentational component — props in, JSX out, no side effects
page: Page-level component with data fetching, loading/error states
layout: Layout wrapper with children prop and optional sidebar/header slots
form: Form component with controlled inputs, validation, submit handler

3. Generate Component File

Using skills/component-patterns.md and skills/typescript-patterns.md:

Create functional component with typed props interface
Apply component type template (ui, page, layout, form)
Use project's CSS approach (Tailwind classes, CSS modules import, styled-components)
Include JSDoc comment block with @component and @example
Export according to project convention (default or named)

4. Generate Test File

Unless --no-test specified:

Create co-located test file (ComponentName.test.tsx)
Include basic render test
Include props variation tests for each required prop
Include accessibility test if @testing-library/jest-dom is available
Use project's test runner (Jest or Vitest)

5. Generate Types File (if complex props)

If more than 5 props or nested types:

Create separate types file (ComponentName.types.ts)
Export props interface and any supporting types
Import types in component file

6. Update Barrel File

If project uses barrel files (index.ts):

Add export to nearest index.ts
Create index.ts if component is in its own directory

7. Summary

Display created files with paths
Show component usage example in JSX

Examples

/react component Button                                 # Basic UI component
/react component UserProfile --type page                # Page with data fetching
/react component DashboardLayout --type layout          # Layout wrapper
/react component LoginForm --type form                  # Form with validation
/react component DataTable --props data:T[],columns:Column[],onSort:Function

2.5 KiB Raw Blame History