Agent skill · software engineering · github
react-container-presentation-component
Create a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui or features), then scaffold files that follow this repository's TypeScript, Storybook, and SCSS conventions. Use when the user explicitly asks for a Container/Presentation-based component or runs /react-container-presentation-component.
Why this skill is useful
Adds a structured approach to creating React components with specific conventions and patterns that the AI wouldn't reliably generate on its own.
What it needs
Requires npm installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.
What this skill does
Container/Presentation Component Use this skill to create a React component under src/components that follows the Container/Presentation pattern. Refer to this skill's bundled references for detailed rules. references/component-architecture.md references/typescript-and-scss-rules.md If the /react-container-presentation-component input is incomplete, ask questions first before creating files. When To Use When the user runs /react-container-presentation-component When the user explicitly asks for a React component that follows the Container/Presentation pattern When the user wants help deciding or implementing ui vs features classification within the Container/Presentation pattern Required Questions If any of the following information is missing, ask the user using askuser. 1. Component name 2. Type (ui or features) 3. Whether to replace existing components (only when creating ui) Question requirements: Provide the type as options (ui, features) Require the component name to be in PascalCase For ui, ask whether direct usage of Mantine or other UI libraries in existing features should be replaced with the new component Procedure 1. Check existing components Check whether src/components/ui/<ComponentName> or src/components/features/<ComponentName> already exists. If it exists, do not overwrite; confirm the preferred approach with the user. 2. Decide target directory ui: src/components/ui/<ComponentName> features: src/components/features/<ComponentName> 3. Re-check classification (only when ui is specified) Even when ui is specified, before creating files, review Reclassification Rule in references/component-architecture.md. If the implementation includes state management, side effects, async processing, context/store updates, or business logic, treat it as features. If the result is closer to features, do not proceed as ui; use askuser and confirm one of the following before continuing. Create as features Keep ui and move state/logic to parent or features 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills github/react-container-presentation-component