React container/presentation component
Create a React component under src/components that follows this repository's Container/Presentation pattern, TypeScript conventions, SCSS module rules, and Storybook minimums.
When to invoke
- "/react-container-presentation-component UserCard ui"
- "
/react-container-presentation-component"
- "Create a Container/Presentation component."
- "Create a Container/Presentation-based component."
- "Scaffold a React component under src/components/features."
- "Help decide whether this component belongs in ui or features."
- "Replace direct Mantine usage with a reusable ui component."
Inputs
Use $ARGUMENTS as componentName type(ui|features). Validate that the component name is PascalCase and the type is exactly ui or features. If arguments are incomplete, ask for missing information before creating files; if the environment has an ask_user interaction primitive, use it.
Required questions when missing:
| Missing input |
Question requirement |
| Component name |
Require PascalCase. |
| Type |
Offer only ui and features. |
Replacement intent for ui |
Ask whether equivalent direct Mantine or other UI-library usage in existing features should be replaced. |
Classification rules
| Type |
Directory |
Use when |
Required files |
ui |
src/components/ui/<ComponentName> |
Pure reusable rendering with no business logic, async processing, context/store update, or feature-specific state management. |
index.tsx, index.module.scss, index.stories.tsx |
features |
src/components/features/<ComponentName> |
Component coordinates state management, side effects, async processing, context/store updates, or business logic. |
index.tsx, use<ComponentName>.tsx, presentation.tsx, types.ts, presentation.module.scss, presentation.stories.tsx |
Even when the user specifies ui, apply Reclassification Rule in references/component-architecture.md before creating files. If the implementation is closer to features, pause and confirm one of these choices: Create as features or Keep ui and move state/logic to parent or features.
Procedure
- Read
references/component-architecture.md and references/typescript-and-scss-rules.md.
- Parse
$ARGUMENTS and ask for any missing component name, type, or ui replacement decision.
- Check whether
src/components/ui/<ComponentName> or src/components/features/<ComponentName> already exists.
- If a target exists, do not overwrite it; confirm whether to stop, extend, or choose a different name.
- Decide the target directory from the classification table.
- Create the required files for
ui or features.
- If creating
ui and the user approved replacements, replace equivalent direct implementations using Mantine or other UI libraries in existing features.
- Run the repository's build and lint commands and fix issues introduced by the new or updated files.
- Follow
Storybook Minimum from references/component-architecture.md. Ask whether to run a Storybook check, with run/skip choices such as Run or Skip for now.
- Run
npm run storybook only if the user selects Run; otherwise report that Storybook execution was skipped.
Responsibility placement
| Concern |
ui location |
features location |
| Rendering markup |
index.tsx |
presentation.tsx |
| Styles |
index.module.scss |
presentation.module.scss |
| Public props |
index.tsx types when small |
types.ts |
| State and effects |
Parent or feature component, not ui |
use<ComponentName>.tsx hook |
| Storybook examples |
index.stories.tsx |
presentation.stories.tsx |
| Business logic |
Not allowed |
Container/hook, not presentation |
Progressive disclosure and bundled resources
| Resource |
Use it when |
references/component-architecture.md |
Classification, Reclassification Rule, Storybook Minimum, dependency direction, and Container/Presentation responsibilities. |
references/typescript-and-scss-rules.md |
TypeScript exports, props, SCSS module naming, and style conventions. |
Gotchas
- Do not overwrite existing components: existing directories require explicit confirmation.
- Do not force
ui: state management, side effects, async processing, context/store updates, or business logic mean features unless logic is moved upward.
- Do not run Storybook without consent: ask first and report
Run or Skip for now.
- Do not violate dependency direction:
ui must not depend on features.
Output template
## React component scaffold result
**Status:** created | needs input | blocked
**Component:** `<ComponentName>`
**Classification:** `ui` | `features`
**Target directory:** `src/components/<ui|features>/<ComponentName>`
### Files created
- `<path>`
### Replacements
- `<changed file>`: <replacement details or none>
### Usage example
```tsx
<<ComponentName> />
Responsibilities
- State and side effects:
- Rendering:
- Styling:
- Dependency direction violations: none |
Validation
- Build: pass | fail | not run
- Lint: pass | fail | not run
- Storybook: run with
npm run storybook | skipped by user
- Unresolved items:
## Quality gate
- [ ] `$ARGUMENTS` was parsed as `componentName type(ui|features)` and missing values were requested.
- [ ] Component name is PascalCase and type is `ui` or `features`.
- [ ] Existing `src/components/ui/<ComponentName>` and `src/components/features/<ComponentName>` were checked before writing.
- [ ] `ui` classification was re-checked against state, side effects, async processing, context/store updates, and business logic.
- [ ] Required files were created for the selected classification.
- [ ] Approved replacements in existing `features` were reported, or none were performed.
- [ ] Build and lint commands were run or a concrete blocker was reported.
- [ ] Storybook execution was run only after user approval or explicitly reported as skipped.
1---2name: react-container-presentation-component-23description: Create a React Container/Presentation component under src/components with TypeScript, Storybook, SCSS module, ui/features classification, optional Mantine replacement, and validation. Use when explicitly asked for a Container/Presentation component or when running /react-container-presentation-component.4---56# React container/presentation component78Create a React component under `src/components` that follows this repository's Container/Presentation pattern, TypeScript conventions, SCSS module rules, and Storybook minimums.910## When to invoke1112- "/react-container-presentation-component UserCard ui"13- "`/react-container-presentation-component`"14- "Create a Container/Presentation component."15- "Create a Container/Presentation-based component."16- "Scaffold a React component under src/components/features."17- "Help decide whether this component belongs in ui or features."18- "Replace direct Mantine usage with a reusable ui component."1920## Inputs2122Use `$ARGUMENTS` as `componentName type(ui|features)`. Validate that the component name is PascalCase and the type is exactly `ui` or `features`. If arguments are incomplete, ask for missing information before creating files; if the environment has an `ask_user` interaction primitive, use it.2324Required questions when missing:2526| Missing input | Question requirement |27| --- | --- |28| Component name | Require PascalCase. |29| Type | Offer only `ui` and `features`. |30| Replacement intent for `ui` | Ask whether equivalent direct Mantine or other UI-library usage in existing `features` should be replaced. |3132## Classification rules3334| Type | Directory | Use when | Required files |35| --- | --- | --- | --- |36| `ui` | `src/components/ui/<ComponentName>` | Pure reusable rendering with no business logic, async processing, context/store update, or feature-specific state management. | `index.tsx`, `index.module.scss`, `index.stories.tsx` |37| `features` | `src/components/features/<ComponentName>` | Component coordinates state management, side effects, async processing, context/store updates, or business logic. | `index.tsx`, `use<ComponentName>.tsx`, `presentation.tsx`, `types.ts`, `presentation.module.scss`, `presentation.stories.tsx` |3839Even when the user specifies `ui`, apply `Reclassification Rule` in `references/component-architecture.md` before creating files. If the implementation is closer to `features`, pause and confirm one of these choices: `Create as features` or `Keep ui and move state/logic to parent or features`.4041## Procedure42431. Read `references/component-architecture.md` and `references/typescript-and-scss-rules.md`.442. Parse `$ARGUMENTS` and ask for any missing component name, type, or `ui` replacement decision.453. Check whether `src/components/ui/<ComponentName>` or `src/components/features/<ComponentName>` already exists.464. If a target exists, do not overwrite it; confirm whether to stop, extend, or choose a different name.475. Decide the target directory from the classification table.486. Create the required files for `ui` or `features`.497. If creating `ui` and the user approved replacements, replace equivalent direct implementations using Mantine or other UI libraries in existing `features`.508. Run the repository's build and lint commands and fix issues introduced by the new or updated files.519. Follow `Storybook Minimum` from `references/component-architecture.md`. Ask whether to run a Storybook check, with run/skip choices such as `Run` or `Skip for now`.5210. Run `npm run storybook` only if the user selects `Run`; otherwise report that Storybook execution was skipped.5354## Responsibility placement5556| Concern | `ui` location | `features` location |57| --- | --- | --- |58| Rendering markup | `index.tsx` | `presentation.tsx` |59| Styles | `index.module.scss` | `presentation.module.scss` |60| Public props | `index.tsx` types when small | `types.ts` |61| State and effects | Parent or feature component, not `ui` | `use<ComponentName>.tsx` hook |62| Storybook examples | `index.stories.tsx` | `presentation.stories.tsx` |63| Business logic | Not allowed | Container/hook, not presentation |6465## Progressive disclosure and bundled resources6667| Resource | Use it when |68| --- | --- |69| `references/component-architecture.md` | Classification, Reclassification Rule, Storybook Minimum, dependency direction, and Container/Presentation responsibilities. |70| `references/typescript-and-scss-rules.md` | TypeScript exports, props, SCSS module naming, and style conventions. |7172## Gotchas7374- **Do not overwrite existing components**: existing directories require explicit confirmation.75- **Do not force `ui`**: state management, side effects, async processing, context/store updates, or business logic mean `features` unless logic is moved upward.76- **Do not run Storybook without consent**: ask first and report `Run` or `Skip for now`.77- **Do not violate dependency direction**: `ui` must not depend on `features`.7879## Output template8081```markdown82## React component scaffold result8384**Status:** created | needs input | blocked85**Component:** `<ComponentName>`86**Classification:** `ui` | `features`87**Target directory:** `src/components/<ui|features>/<ComponentName>`8889### Files created90- `<path>`9192### Replacements93- `<changed file>`: <replacement details or none>9495### Usage example96```tsx97<<ComponentName> />98```99100### Responsibilities101- State and side effects: <where they live>102- Rendering: <where it lives>103- Styling: <where it lives>104- Dependency direction violations: none | <details>105106### Validation107- Build: pass | fail | not run108- Lint: pass | fail | not run109- Storybook: run with `npm run storybook` | skipped by user110- Unresolved items: <none or list>111```112113## Quality gate114115- [ ] `$ARGUMENTS` was parsed as `componentName type(ui|features)` and missing values were requested.116- [ ] Component name is PascalCase and type is `ui` or `features`.117- [ ] Existing `src/components/ui/<ComponentName>` and `src/components/features/<ComponentName>` were checked before writing.118- [ ] `ui` classification was re-checked against state, side effects, async processing, context/store updates, and business logic.119- [ ] Required files were created for the selected classification.120- [ ] Approved replacements in existing `features` were reported, or none were performed.121- [ ] Build and lint commands were run or a concrete blocker was reported.122- [ ] Storybook execution was run only after user approval or explicitly reported as skipped.
paulasilvatech