Dev Create Component

Create a React component following docs/ARCHITECTURE.md section 5.

Component: $ARGUMENTS

Steps

1. Read docs/ARCHITECTURE.md section 5.

1. Determine the type:

• Feature component -> src/modules/[module]/components/ComponentName.tsx
• Shared component -> src/shared/components/ComponentName.tsx
• Page -> src/modules/[module]/pages/PageName.tsx

1. Create the component with the standard template:

import { useState, useMemo, useCallback } from 'react'

interface ComponentNameProps {
  // type all props
}

export function ComponentName({ /* destructure props */ }: ComponentNameProps) {
  // 1. Stores (selectors)
  // 2. Hooks
  // 3. Local state (useState)
  // 4. Derived state (useMemo)
  // 5. Handlers (useCallback)

  return (
    
      {/* clean JSX, 
  )
}

1. Checklist:

• Functional component (no class)
• TypeScript props interface
• Callback props typed (onSelect, onChange)
• < 200 lines
• PascalCase.tsx

1. Validate: npx tsc --noEmit

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: HerbertJulio
• Source: HerbertJulio/specialist-agent
• License: MIT
• Homepage: https://specialistagent.com.br

Install and usage instructions live in the source repository linked above.