From 5433650fb3babb8aa5a1a0f2a73662cf7cc4e88b Mon Sep 17 00:00:00 2001 From: tmt823 Date: Wed, 3 Jun 2026 21:14:04 +0900 Subject: [PATCH 01/10] feat(skill): make react-clean-architecture-add-component self-contained with local references --- docs/README.skills.md | 1 + .../SKILL.md | 82 +++++++++++++++++++ .../references/component-architecture.md | 71 ++++++++++++++++ .../references/typescript-and-scss-rules.md | 28 +++++++ 4 files changed, 182 insertions(+) create mode 100644 skills/react-clean-architecture-add-component/SKILL.md create mode 100644 skills/react-clean-architecture-add-component/references/component-architecture.md create mode 100644 skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md diff --git a/docs/README.skills.md b/docs/README.skills.md index d7e9a764b..ba7132bb9 100644 --- a/docs/README.skills.md +++ b/docs/README.skills.md @@ -298,6 +298,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to | [quality-playbook](../skills/quality-playbook/SKILL.md)
`gh skills install github/awesome-copilot quality-playbook` | Run a complete quality engineering audit on any codebase. Derives behavioral requirements from the code, generates spec-traced functional tests, runs a three-pass code review with regression tests, executes a multi-model spec audit (Council of Three), and produces a consolidated bug report with TDD-verified patches. Finds the 35% of real defects that structural code review alone cannot catch. Works with any language. Trigger on 'quality playbook', 'spec audit', 'Council of Three', 'fitness-to-purpose', or 'coverage theater'. | `LICENSE.txt`
`agents`
`phase_prompts`
`quality_gate.py`
`references/challenge_gate.md`
`references/code-only-mode.md`
`references/constitution.md`
`references/defensive_patterns.md`
`references/exploration_patterns.md`
`references/functional_tests.md`
`references/iteration.md`
`references/orchestrator_protocol.md`
`references/requirements_pipeline.md`
`references/requirements_refinement.md`
`references/requirements_review.md`
`references/review_protocols.md`
`references/run_state_schema.md`
`references/schema_mapping.md`
`references/spec_audit.md`
`references/verification.md` | | [quasi-coder](../skills/quasi-coder/SKILL.md)
`gh skills install github/awesome-copilot quasi-coder` | Expert 10x engineer skill for interpreting and implementing code from shorthand, quasi-code, and natural language descriptions. Use when collaborators provide incomplete code snippets, pseudo-code, or descriptions with potential typos or incorrect terminology. Excels at translating non-technical or semi-technical descriptions into production-quality code. | None | | [react-audit-grep-patterns](../skills/react-audit-grep-patterns/SKILL.md)
`gh skills install github/awesome-copilot react-audit-grep-patterns` | Provides the complete, verified grep scan command library for auditing React codebases before a React 18.3.1 or React 19 upgrade. Use this skill whenever running a migration audit - for both the react18-auditor and react19-auditor agents. Contains every grep pattern needed to find deprecated APIs, removed APIs, unsafe lifecycle methods, batching vulnerabilities, test file issues, dependency conflicts, and React 19 specific removals. Always use this skill when writing audit scan commands - do not rely on memory for grep syntax, especially for the multi-line async setState patterns which require context flags. | `references/dep-scans.md`
`references/react18-scans.md`
`references/react19-scans.md`
`references/test-scans.md` | +| [react-clean-architecture-add-component](../skills/react-clean-architecture-add-component/SKILL.md)
`gh skills install github/awesome-copilot react-clean-architecture-add-component` | Create a new React component in src/components by asking component name and type (ui or features), then scaffold files that follow this repository rules, TypeScript strict typing, and Storybook/SCSS structure. Use when user types /add-component or asks to add a component. | `references/component-architecture.md`
`references/typescript-and-scss-rules.md` | | [react18-batching-patterns](../skills/react18-batching-patterns/SKILL.md)
`gh skills install github/awesome-copilot react18-batching-patterns` | Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components. Use this skill whenever a class component has multiple setState calls in an async method, inside setTimeout, inside a Promise .then() or .catch(), or in a native event handler. Use it before writing any flushSync call - the decision tree here prevents unnecessary flushSync overuse. Also use this skill when fixing test failures caused by intermediate state assertions that break after React 18 upgrade. | `references/batching-categories.md`
`references/flushSync-guide.md` | | [react18-dep-compatibility](../skills/react18-dep-compatibility/SKILL.md)
`gh skills install github/awesome-copilot react18-dep-compatibility` | React 18.3.1 and React 19 dependency compatibility matrix. | `references/apollo-details.md`
`references/router-migration.md` | | [react18-enzyme-to-rtl](../skills/react18-enzyme-to-rtl/SKILL.md)
`gh skills install github/awesome-copilot react18-enzyme-to-rtl` | Provides exact Enzyme → React Testing Library migration patterns for React 18 upgrades. Use this skill whenever Enzyme tests need to be rewritten - shallow, mount, wrapper.find(), wrapper.simulate(), wrapper.prop(), wrapper.state(), wrapper.instance(), Enzyme configure/Adapter calls, or any test file that imports from enzyme. This skill covers the full API mapping and the philosophy shift from implementation testing to behavior testing. Always read this skill before rewriting Enzyme tests - do not translate Enzyme APIs 1:1, that produces brittle RTL tests. | `references/async-patterns.md`
`references/enzyme-api-map.md` | diff --git a/skills/react-clean-architecture-add-component/SKILL.md b/skills/react-clean-architecture-add-component/SKILL.md new file mode 100644 index 000000000..f74c2c83d --- /dev/null +++ b/skills/react-clean-architecture-add-component/SKILL.md @@ -0,0 +1,82 @@ +--- +name: react-clean-architecture-add-component +description: "Create a new React component in src/components by asking component name and type (ui or features), then scaffold files that follow this repository rules, TypeScript strict typing, and Storybook/SCSS structure. Use when user types /add-component or asks to add a component." +argument-hint: "componentName type(ui|features)" +user-invocable: true +--- + +# Add Component + +Use this skill when adding a new component under `src/components`. + +Refer to this skill's bundled references for detailed rules. + +- `references/component-architecture.md` +- `references/typescript-and-scss-rules.md` + +If the `/add-component` input is incomplete, ask questions first before creating files. + +## When To Use + +- When the user runs `/add-component` +- When the user asks to add a new component +- When the user wants to create a component in either `ui` or `features` + +## Required Questions + +If any of the following information is missing, ask using `vscode_askQuestions`. + +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 Mantine usage in existing `features` should be replaced with the new component + +## Procedure + +1. Check existing components + +- Check whether `src/components/ui/` or `src/components/features/` already exists. +- If it exists, do not overwrite; confirm the preferred approach with the user. + +2. Decide target directory + +- `ui`: `src/components/ui/` +- `features`: `src/components/features/` + +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 `vscode_askQuestions` and confirm one of the following before continuing. + - `Create as features` + - `Keep ui and move state/logic to parent or features` + +4. Create required files + +- `ui`: `index.tsx`, `index.module.scss`, `index.stories.tsx` +- `features`: `index.tsx`, `use.tsx`, `presentation.tsx`, `types.ts`, `presentation.module.scss`, `presentation.stories.tsx` + +5. Replace existing usages (only when creating `ui`) + +- Only when the user approves, replace equivalent direct Mantine implementations in existing `features` with the new `ui` component. + +6. Validate + +- Run `npm run build && npm run lint` for added/updated files and confirm whether errors exist. +- Follow `Storybook Minimum` in `references/component-architecture.md` for story state decisions. +- Ask the user via `vscode_askQuestions` whether to run a Storybook check (for example: "Run" / "Skip for now"). +- Run `npm run storybook` only if the user selects "Run". +- If the user selects "Skip for now", explicitly mention in the final report that Storybook execution was skipped. + +## Output Contract + +- Report the list of files created. +- If replacements were performed, report the list of changed files and replacement details. +- Provide one usage example of the created component. +- Report whether Storybook verification was executed (run/skip), and if run, include the command used. +- Clearly state any unresolved items. diff --git a/skills/react-clean-architecture-add-component/references/component-architecture.md b/skills/react-clean-architecture-add-component/references/component-architecture.md new file mode 100644 index 000000000..0b659f8e5 --- /dev/null +++ b/skills/react-clean-architecture-add-component/references/component-architecture.md @@ -0,0 +1,71 @@ +# Component Architecture Reference + +This reference defines classification, file layout, and dependency direction in `src/components`. + +## Classification + +- Place all components under `src/components`. +- Use only two categories: + - `ui`: render-only, stateless components. + - `features`: components that include logic. + +## Reclassification Rule + +If the user requests `ui` but the implementation contains any of the following, treat it as `features` and ask for confirmation before creating files: + +- `useState`, `useReducer`, or `useEffect`. +- Async behavior (API calls, timers, subscriptions). +- Reading from or writing to context/store. +- Business/data transformation logic. + +Ask using these options: + +- `Create as features` +- `Keep ui and move logic/state to parent or features` + +## Implementation Rules + +### ui + +- Keep components stateless. +- Accept data and callbacks via props. +- Do not add side effects or data fetching. +- Prefer Mantine primitives first; use custom JSX/SCSS only when needed. + +### features + +- Use the Container/Presentation pattern. +- Container handles state, side effects, data, and event orchestration. +- Presentation receives props and handles rendering only. +- Keep logic in `use.tsx`. + +## Dependency Direction + +- `features` -> `ui`: allowed. +- `ui` -> `features`: forbidden. + +## File Structure + +### ui + +- `index.tsx` +- `index.stories.tsx` +- `index.module.scss` + +### features + +- `index.tsx` +- `use.tsx` +- `presentation.tsx` +- `types.ts` +- `presentation.stories.tsx` (when needed) +- `presentation.module.scss` (when needed) + +## Storybook Minimum + +- Always create `Default`. +- Add state-specific stories only when distinct states exist. +- Prefer story sets based on behavior: + - Interactive controls: `Hover`. + - Input-like: `Focus`, `Error`, `Disabled`. + - Layout/open-close: `Open`, `Closed`, `Empty`. diff --git a/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md b/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md new file mode 100644 index 000000000..469bf44c7 --- /dev/null +++ b/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md @@ -0,0 +1,28 @@ +# TypeScript and SCSS Rules Reference + +This reference defines coding rules required by the `add-component` skill. + +## TypeScript Rules + +- Do not use `any`. +- Use `type` for props instead of `interface`. +- Explicitly annotate function return types. +- Prefer `@` alias imports and avoid deep relative imports. + +## SCSS Rules + +### Tokens + +- Use color variables from `src/styles/theme.scss`. +- Use animation variables from `src/styles/animation.scss`. +- Do not hardcode z-index values; use variables from `src/styles/z-index.scss`. + +### Style Constraints + +- Prefer Mantine first; use SCSS for gaps only. +- Do not use negative margins. +- Prefer unitless `line-height`. +- Prefer `letter-spacing` in `em`. +- When margin is needed, only `margin-top` and `margin-left` are allowed. +- Do not set `margin` or `position` on root elements. +- Keep z-index values in 50-step scale (100, 150, ...). From 9b9408c490df6ac14528b7a9a922b28c092a7e83 Mon Sep 17 00:00:00 2001 From: tmt823 Date: Thu, 4 Jun 2026 07:42:41 +0900 Subject: [PATCH 02/10] docs(skill): clarify SCSS rules for z-index tokens and Mantine complement usage --- .../references/typescript-and-scss-rules.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md b/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md index 469bf44c7..53e80ddd1 100644 --- a/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md +++ b/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md @@ -15,14 +15,15 @@ This reference defines coding rules required by the `add-component` skill. - Use color variables from `src/styles/theme.scss`. - Use animation variables from `src/styles/animation.scss`. -- Do not hardcode z-index values; use variables from `src/styles/z-index.scss`. +- Define z-index tokens in `src/styles/z-index.scss` and consume those tokens in component styles. +- In component SCSS, do not hardcode z-index values (for example, avoid `z-index: 10;` and use a z-index token instead). ### Style Constraints -- Prefer Mantine first; use SCSS for gaps only. +- Prefer Mantine first; use SCSS only when complementing Mantine styles is necessary. - Do not use negative margins. - Prefer unitless `line-height`. - Prefer `letter-spacing` in `em`. - When margin is needed, only `margin-top` and `margin-left` are allowed. - Do not set `margin` or `position` on root elements. -- Keep z-index values in 50-step scale (100, 150, ...). +- The numeric values inside `src/styles/z-index.scss` must follow a 50-step scale (100, 150, ...). From 3ef1eb9f94d679400526cc979d808b261c537728 Mon Sep 17 00:00:00 2001 From: tmt823 Date: Thu, 4 Jun 2026 07:45:06 +0900 Subject: [PATCH 03/10] docs(skill): remove ambiguous "when needed" wording for presentation files --- .../references/component-architecture.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/skills/react-clean-architecture-add-component/references/component-architecture.md b/skills/react-clean-architecture-add-component/references/component-architecture.md index 0b659f8e5..2969220f8 100644 --- a/skills/react-clean-architecture-add-component/references/component-architecture.md +++ b/skills/react-clean-architecture-add-component/references/component-architecture.md @@ -58,8 +58,8 @@ Ask using these options: - `use.tsx` - `presentation.tsx` - `types.ts` -- `presentation.stories.tsx` (when needed) -- `presentation.module.scss` (when needed) +- `presentation.stories.tsx` +- `presentation.module.scss` ## Storybook Minimum From 2243c971ce43d7c836e8739728dc2daa668d511a Mon Sep 17 00:00:00 2001 From: tmt823 Date: Thu, 4 Jun 2026 07:52:24 +0900 Subject: [PATCH 04/10] docs(skill): generalize build/lint validation wording --- skills/react-clean-architecture-add-component/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/react-clean-architecture-add-component/SKILL.md b/skills/react-clean-architecture-add-component/SKILL.md index f74c2c83d..36014fa44 100644 --- a/skills/react-clean-architecture-add-component/SKILL.md +++ b/skills/react-clean-architecture-add-component/SKILL.md @@ -67,7 +67,7 @@ Question requirements: 6. Validate -- Run `npm run build && npm run lint` for added/updated files and confirm whether errors exist. +- Run build and lint commands, and ensure both pass; if issues are introduced by newly added or updated files, fix them. - Follow `Storybook Minimum` in `references/component-architecture.md` for story state decisions. - Ask the user via `vscode_askQuestions` whether to run a Storybook check (for example: "Run" / "Skip for now"). - Run `npm run storybook` only if the user selects "Run". From 464485f0546c806200c67678a548b6546bb49d8e Mon Sep 17 00:00:00 2001 From: tmt823 Date: Thu, 4 Jun 2026 20:47:01 +0900 Subject: [PATCH 05/10] refactor(skill): generalize component scaffolding guidance beyond Mantine --- skills/react-clean-architecture-add-component/SKILL.md | 4 ++-- .../references/component-architecture.md | 2 +- .../references/typescript-and-scss-rules.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/skills/react-clean-architecture-add-component/SKILL.md b/skills/react-clean-architecture-add-component/SKILL.md index 36014fa44..933396d4c 100644 --- a/skills/react-clean-architecture-add-component/SKILL.md +++ b/skills/react-clean-architecture-add-component/SKILL.md @@ -34,7 +34,7 @@ Question requirements: - Provide the type as options (`ui`, `features`) - Require the component name to be in PascalCase -- For `ui`, ask whether direct Mantine usage in existing `features` should be replaced with the new component +- For `ui`, ask whether direct usage of Mantine or other UI libraries in existing `features` should be replaced with the new component ## Procedure @@ -63,7 +63,7 @@ Question requirements: 5. Replace existing usages (only when creating `ui`) -- Only when the user approves, replace equivalent direct Mantine implementations in existing `features` with the new `ui` component. +- Only when the user approves, replace equivalent direct implementations using Mantine or other UI libraries in existing `features` with the new `ui` component. 6. Validate diff --git a/skills/react-clean-architecture-add-component/references/component-architecture.md b/skills/react-clean-architecture-add-component/references/component-architecture.md index 2969220f8..e0352d5c3 100644 --- a/skills/react-clean-architecture-add-component/references/component-architecture.md +++ b/skills/react-clean-architecture-add-component/references/component-architecture.md @@ -30,7 +30,7 @@ Ask using these options: - Keep components stateless. - Accept data and callbacks via props. - Do not add side effects or data fetching. -- Prefer Mantine primitives first; use custom JSX/SCSS only when needed. +- Prefer primitives from Mantine or other UI libraries first; use custom JSX/SCSS only when needed. ### features diff --git a/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md b/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md index 53e80ddd1..5051f9d41 100644 --- a/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md +++ b/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md @@ -20,7 +20,7 @@ This reference defines coding rules required by the `add-component` skill. ### Style Constraints -- Prefer Mantine first; use SCSS only when complementing Mantine styles is necessary. +- Prefer Mantine or other UI libraries first; use SCSS only when complementing library styles is necessary. - Do not use negative margins. - Prefer unitless `line-height`. - Prefer `letter-spacing` in `em`. From 4717bd0acc820611e2b8059961b22177c50eb410 Mon Sep 17 00:00:00 2001 From: tmt823 Date: Thu, 11 Jun 2026 08:48:58 +0900 Subject: [PATCH 06/10] fix: component-architecture.md --- docs/README.skills.md | 2 +- .../references/component-architecture.md | 71 ---------- .../SKILL.md | 5 +- .../references/component-architecture.md | 130 ++++++++++++++++++ .../references/typescript-and-scss-rules.md | 2 - 5 files changed, 135 insertions(+), 75 deletions(-) delete mode 100644 skills/react-clean-architecture-add-component/references/component-architecture.md rename skills/{react-clean-architecture-add-component => react-container-presentation-component}/SKILL.md (93%) create mode 100644 skills/react-container-presentation-component/references/component-architecture.md rename skills/{react-clean-architecture-add-component => react-container-presentation-component}/references/typescript-and-scss-rules.md (93%) diff --git a/docs/README.skills.md b/docs/README.skills.md index ba7132bb9..e102eb601 100644 --- a/docs/README.skills.md +++ b/docs/README.skills.md @@ -298,7 +298,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to | [quality-playbook](../skills/quality-playbook/SKILL.md)
`gh skills install github/awesome-copilot quality-playbook` | Run a complete quality engineering audit on any codebase. Derives behavioral requirements from the code, generates spec-traced functional tests, runs a three-pass code review with regression tests, executes a multi-model spec audit (Council of Three), and produces a consolidated bug report with TDD-verified patches. Finds the 35% of real defects that structural code review alone cannot catch. Works with any language. Trigger on 'quality playbook', 'spec audit', 'Council of Three', 'fitness-to-purpose', or 'coverage theater'. | `LICENSE.txt`
`agents`
`phase_prompts`
`quality_gate.py`
`references/challenge_gate.md`
`references/code-only-mode.md`
`references/constitution.md`
`references/defensive_patterns.md`
`references/exploration_patterns.md`
`references/functional_tests.md`
`references/iteration.md`
`references/orchestrator_protocol.md`
`references/requirements_pipeline.md`
`references/requirements_refinement.md`
`references/requirements_review.md`
`references/review_protocols.md`
`references/run_state_schema.md`
`references/schema_mapping.md`
`references/spec_audit.md`
`references/verification.md` | | [quasi-coder](../skills/quasi-coder/SKILL.md)
`gh skills install github/awesome-copilot quasi-coder` | Expert 10x engineer skill for interpreting and implementing code from shorthand, quasi-code, and natural language descriptions. Use when collaborators provide incomplete code snippets, pseudo-code, or descriptions with potential typos or incorrect terminology. Excels at translating non-technical or semi-technical descriptions into production-quality code. | None | | [react-audit-grep-patterns](../skills/react-audit-grep-patterns/SKILL.md)
`gh skills install github/awesome-copilot react-audit-grep-patterns` | Provides the complete, verified grep scan command library for auditing React codebases before a React 18.3.1 or React 19 upgrade. Use this skill whenever running a migration audit - for both the react18-auditor and react19-auditor agents. Contains every grep pattern needed to find deprecated APIs, removed APIs, unsafe lifecycle methods, batching vulnerabilities, test file issues, dependency conflicts, and React 19 specific removals. Always use this skill when writing audit scan commands - do not rely on memory for grep syntax, especially for the multi-line async setState patterns which require context flags. | `references/dep-scans.md`
`references/react18-scans.md`
`references/react19-scans.md`
`references/test-scans.md` | -| [react-clean-architecture-add-component](../skills/react-clean-architecture-add-component/SKILL.md)
`gh skills install github/awesome-copilot react-clean-architecture-add-component` | Create a new React component in src/components by asking component name and type (ui or features), then scaffold files that follow this repository rules, TypeScript strict typing, and Storybook/SCSS structure. Use when user types /add-component or asks to add a component. | `references/component-architecture.md`
`references/typescript-and-scss-rules.md` | +| [react-container-presentation-component](../skills/react-container-presentation-component/SKILL.md)
`gh skills install github/awesome-copilot react-container-presentation-component` | Create a new React component in src/components by asking component name and type (ui or features), then scaffold files that follow this repository rules, TypeScript strict typing, and Storybook/SCSS structure. Use when user types /add-component or asks to add a component. | `references/component-architecture.md`
`references/typescript-and-scss-rules.md`
`skill-additions-ja.md` | | [react18-batching-patterns](../skills/react18-batching-patterns/SKILL.md)
`gh skills install github/awesome-copilot react18-batching-patterns` | Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components. Use this skill whenever a class component has multiple setState calls in an async method, inside setTimeout, inside a Promise .then() or .catch(), or in a native event handler. Use it before writing any flushSync call - the decision tree here prevents unnecessary flushSync overuse. Also use this skill when fixing test failures caused by intermediate state assertions that break after React 18 upgrade. | `references/batching-categories.md`
`references/flushSync-guide.md` | | [react18-dep-compatibility](../skills/react18-dep-compatibility/SKILL.md)
`gh skills install github/awesome-copilot react18-dep-compatibility` | React 18.3.1 and React 19 dependency compatibility matrix. | `references/apollo-details.md`
`references/router-migration.md` | | [react18-enzyme-to-rtl](../skills/react18-enzyme-to-rtl/SKILL.md)
`gh skills install github/awesome-copilot react18-enzyme-to-rtl` | Provides exact Enzyme → React Testing Library migration patterns for React 18 upgrades. Use this skill whenever Enzyme tests need to be rewritten - shallow, mount, wrapper.find(), wrapper.simulate(), wrapper.prop(), wrapper.state(), wrapper.instance(), Enzyme configure/Adapter calls, or any test file that imports from enzyme. This skill covers the full API mapping and the philosophy shift from implementation testing to behavior testing. Always read this skill before rewriting Enzyme tests - do not translate Enzyme APIs 1:1, that produces brittle RTL tests. | `references/async-patterns.md`
`references/enzyme-api-map.md` | diff --git a/skills/react-clean-architecture-add-component/references/component-architecture.md b/skills/react-clean-architecture-add-component/references/component-architecture.md deleted file mode 100644 index e0352d5c3..000000000 --- a/skills/react-clean-architecture-add-component/references/component-architecture.md +++ /dev/null @@ -1,71 +0,0 @@ -# Component Architecture Reference - -This reference defines classification, file layout, and dependency direction in `src/components`. - -## Classification - -- Place all components under `src/components`. -- Use only two categories: - - `ui`: render-only, stateless components. - - `features`: components that include logic. - -## Reclassification Rule - -If the user requests `ui` but the implementation contains any of the following, treat it as `features` and ask for confirmation before creating files: - -- `useState`, `useReducer`, or `useEffect`. -- Async behavior (API calls, timers, subscriptions). -- Reading from or writing to context/store. -- Business/data transformation logic. - -Ask using these options: - -- `Create as features` -- `Keep ui and move logic/state to parent or features` - -## Implementation Rules - -### ui - -- Keep components stateless. -- Accept data and callbacks via props. -- Do not add side effects or data fetching. -- Prefer primitives from Mantine or other UI libraries first; use custom JSX/SCSS only when needed. - -### features - -- Use the Container/Presentation pattern. -- Container handles state, side effects, data, and event orchestration. -- Presentation receives props and handles rendering only. -- Keep logic in `use.tsx`. - -## Dependency Direction - -- `features` -> `ui`: allowed. -- `ui` -> `features`: forbidden. - -## File Structure - -### ui - -- `index.tsx` -- `index.stories.tsx` -- `index.module.scss` - -### features - -- `index.tsx` -- `use.tsx` -- `presentation.tsx` -- `types.ts` -- `presentation.stories.tsx` -- `presentation.module.scss` - -## Storybook Minimum - -- Always create `Default`. -- Add state-specific stories only when distinct states exist. -- Prefer story sets based on behavior: - - Interactive controls: `Hover`. - - Input-like: `Focus`, `Error`, `Disabled`. - - Layout/open-close: `Open`, `Closed`, `Empty`. diff --git a/skills/react-clean-architecture-add-component/SKILL.md b/skills/react-container-presentation-component/SKILL.md similarity index 93% rename from skills/react-clean-architecture-add-component/SKILL.md rename to skills/react-container-presentation-component/SKILL.md index 933396d4c..5737f80d8 100644 --- a/skills/react-clean-architecture-add-component/SKILL.md +++ b/skills/react-container-presentation-component/SKILL.md @@ -1,5 +1,5 @@ --- -name: react-clean-architecture-add-component +name: react-container-presentation-component description: "Create a new React component in src/components by asking component name and type (ui or features), then scaffold files that follow this repository rules, TypeScript strict typing, and Storybook/SCSS structure. Use when user types /add-component or asks to add a component." argument-hint: "componentName type(ui|features)" user-invocable: true @@ -79,4 +79,7 @@ Question requirements: - If replacements were performed, report the list of changed files and replacement details. - Provide one usage example of the created component. - Report whether Storybook verification was executed (run/skip), and if run, include the command used. +- Explain why the component was classified as `ui` or `features`. +- Summarize where state, side effects, and rendering responsibilities were placed. +- Confirm whether there were any dependency direction violations. - Clearly state any unresolved items. diff --git a/skills/react-container-presentation-component/references/component-architecture.md b/skills/react-container-presentation-component/references/component-architecture.md new file mode 100644 index 000000000..75e1b2aae --- /dev/null +++ b/skills/react-container-presentation-component/references/component-architecture.md @@ -0,0 +1,130 @@ +# Component Architecture Reference + +This reference defines classification, file layout, and dependency direction in `src/components`. + +## Design Intent and Principles + +The goal of this skill is not only to add React components, but to apply the Container/Presentation pattern consistently with clear separation of responsibilities and dependency direction. + +This reference does not define full application-wide architecture. It focuses on design quality at the component boundary. + +- Separate rendering responsibilities from logic responsibilities. +- Do not place state management, side effects, or business decisions in the presentation layer. +- Avoid mixing responsibilities across boundaries and keep dependency direction explicit. + +## Classification + +- Place all components under `src/components`. +- Use only two categories: + - `ui`: render-only, stateless components. + - `features`: components that include logic. + +## Reclassification Rule + +If the user requests `ui` but the implementation contains any of the following, treat it as `features` and ask for confirmation before creating files: + +- `useState`, `useReducer`, or `useEffect`. +- Async behavior (API calls, timers, subscriptions). +- Reading from or writing to context/store. +- Business/data transformation logic. + +Ask using these options: + +- `Create as features` +- `Keep ui and move logic/state to parent or features` + +## Layer Responsibilities + +This skill defines layers in two stages. + +### 1. Component Type Layer + +| Type | Responsibility | +| ---------- | ------------------------------------------------------------------------------------------------------ | +| `ui` | Reusable render-only component. Must not include business logic, side effects, or state management. | +| `features` | Use-case-oriented component. Handles state transitions, event interpretation, and async orchestration. | + +### 2. Internal Layer in `features` + +| Layer | Responsibility | Primary files | +| -------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | +| `container` | Handles state management, side effects, event handling, and data fetching. | `index.tsx`, `use.tsx`, `types.ts` | +| `presentation` | Receives props and renders UI only. Must not perform external I/O or state updates. | `presentation.tsx`, `presentation.module.scss`, `presentation.stories.tsx` | + +Notes: + +- `ui` is composed of presentation only. +- `features` must separate container and presentation. + +## Implementation Rules + +### ui + +- Keep components stateless. +- Accept data and callbacks via props. +- Do not add side effects or data fetching. +- Prefer primitives from Mantine or other UI libraries first; use custom JSX/SCSS only when needed. + +### features + +- Use the Container/Presentation pattern. +- Keep logic in `use.tsx`. +- Follow `Container/Presentation Separation Rules (Anti-patterns and Decision Examples)` below for detailed responsibility boundaries and anti-patterns. + +### Container/Presentation Separation Rules (Anti-patterns and Decision Examples) + +Principles: + +- Container is responsible for state management, side effects, event interpretation, and async processing. +- Presentation is responsible only for rendering from received props. +- Keep business decisions and data transformation in container-side code, not in presentation. + +Placement rules: + +- Place in container: `useState` / `useReducer` / `useEffect`, API calls, context/store read-write, business rule application. +- Place in presentation: JSX rendering and display-only branching (for example: empty, loading, error views). +- Use `types.ts` to define I/O contracts between container and presentation. + +Anti-patterns: + +- Calling APIs or mutations from presentation. +- Updating context/store directly from presentation. +- Implementing business decisions (authorization checks, state transition decisions, data shaping) in presentation. +- Splitting files formally while keeping practical logic in presentation. + +Good / Bad examples: + +- Bad: `presentation.tsx` fetches data and manages loading state directly. +- Good: `use.tsx` manages data fetching and state, and `presentation.tsx` renders only from props such as `isLoading`, `items`, and `onAction`. + +## Dependency Direction + +- `features` -> `ui`: allowed. +- `ui` -> `features`: forbidden. + +## File Structure + +### ui + +- `index.tsx` +- `presentation.tsx` +- `presentation.stories.tsx` +- `presentation.module.scss` + +### features + +- `index.tsx` +- `use.tsx` +- `presentation.tsx` +- `types.ts` +- `presentation.stories.tsx` +- `presentation.module.scss` + +## Storybook Minimum + +- Always create `Default`. +- Add state-specific stories only when distinct states exist. +- Prefer story sets based on behavior: + - Interactive controls: `Hover`. + - Input-like: `Focus`, `Error`, `Disabled`. + - Layout/open-close: `Open`, `Closed`, `Empty`. diff --git a/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md b/skills/react-container-presentation-component/references/typescript-and-scss-rules.md similarity index 93% rename from skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md rename to skills/react-container-presentation-component/references/typescript-and-scss-rules.md index 5051f9d41..12815e08e 100644 --- a/skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md +++ b/skills/react-container-presentation-component/references/typescript-and-scss-rules.md @@ -1,7 +1,5 @@ # TypeScript and SCSS Rules Reference -This reference defines coding rules required by the `add-component` skill. - ## TypeScript Rules - Do not use `any`. From 1f072dbddcfc07056d1858a17ef123a9eca5a21a Mon Sep 17 00:00:00 2001 From: tmt823 Date: Thu, 11 Jun 2026 21:02:31 +0900 Subject: [PATCH 07/10] feat(skill): rename react component skill and clarify container/presentation guidance --- .../SKILL.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/skills/react-container-presentation-component/SKILL.md b/skills/react-container-presentation-component/SKILL.md index 5737f80d8..6eccb9d79 100644 --- a/skills/react-container-presentation-component/SKILL.md +++ b/skills/react-container-presentation-component/SKILL.md @@ -1,26 +1,26 @@ --- name: react-container-presentation-component -description: "Create a new React component in src/components by asking component name and type (ui or features), then scaffold files that follow this repository rules, TypeScript strict typing, and Storybook/SCSS structure. Use when user types /add-component or asks to add a component." +description: "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." argument-hint: "componentName type(ui|features)" user-invocable: true --- -# Add Component +# Container/Presentation Component -Use this skill when adding a new component under `src/components`. +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 `/add-component` input is incomplete, ask questions first before creating files. +If the `/react-container-presentation-component` input is incomplete, ask questions first before creating files. ## When To Use -- When the user runs `/add-component` -- When the user asks to add a new component -- When the user wants to create a component in either `ui` or `features` +- 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 From 4f454b577dc67704df5d238712f357eafb4a63ed Mon Sep 17 00:00:00 2001 From: tmt823 Date: Thu, 11 Jun 2026 21:12:08 +0900 Subject: [PATCH 08/10] fix(skill): replace vscode_askQuestions with ask_user to remove VS Code specific dependency --- skills/react-container-presentation-component/SKILL.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/skills/react-container-presentation-component/SKILL.md b/skills/react-container-presentation-component/SKILL.md index 6eccb9d79..12e040c78 100644 --- a/skills/react-container-presentation-component/SKILL.md +++ b/skills/react-container-presentation-component/SKILL.md @@ -24,7 +24,7 @@ If the `/react-container-presentation-component` input is incomplete, ask questi ## Required Questions -If any of the following information is missing, ask using `vscode_askQuestions`. +If any of the following information is missing, ask the user using `ask_user`. 1. Component name 2. Type (`ui` or `features`) @@ -52,7 +52,7 @@ Question requirements: - 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 `vscode_askQuestions` and confirm one of the following before continuing. +- If the result is closer to `features`, do not proceed as `ui`; use `ask_user` and confirm one of the following before continuing. - `Create as features` - `Keep ui and move state/logic to parent or features` @@ -69,7 +69,7 @@ Question requirements: - Run build and lint commands, and ensure both pass; if issues are introduced by newly added or updated files, fix them. - Follow `Storybook Minimum` in `references/component-architecture.md` for story state decisions. -- Ask the user via `vscode_askQuestions` whether to run a Storybook check (for example: "Run" / "Skip for now"). +- Ask the user via `ask_user` whether to run a Storybook check (for example: "Run" / "Skip for now"). - Run `npm run storybook` only if the user selects "Run". - If the user selects "Skip for now", explicitly mention in the final report that Storybook execution was skipped. From bae1b9d8bbaf4e6648bdede52692b25954fc53b9 Mon Sep 17 00:00:00 2001 From: tmt823 Date: Thu, 11 Jun 2026 21:25:46 +0900 Subject: [PATCH 09/10] docs(skill): add TypeScript code examples to typescript-and-scss-rules reference --- .../references/typescript-and-scss-rules.md | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/skills/react-container-presentation-component/references/typescript-and-scss-rules.md b/skills/react-container-presentation-component/references/typescript-and-scss-rules.md index 12815e08e..aa3cadeb1 100644 --- a/skills/react-container-presentation-component/references/typescript-and-scss-rules.md +++ b/skills/react-container-presentation-component/references/typescript-and-scss-rules.md @@ -3,9 +3,36 @@ ## TypeScript Rules - Do not use `any`. + + ```ts + // Bad + const handler = (e: any) => {}; + + // Good + const handler = (e: React.ChangeEvent) => {}; + ``` + - Use `type` for props instead of `interface`. + + ```ts + // Bad + interface ButtonProps { + label: string; + } + + // Good + type ButtonProps = { label: string }; + ``` + - Explicitly annotate function return types. -- Prefer `@` alias imports and avoid deep relative imports. + + ```ts + // Bad + const getLabel = () => "hello"; + + // Good + const getLabel = (): string => "hello"; + ``` ## SCSS Rules From 4feeb93b314a066eae1eddbe29ea4a0888aebcc0 Mon Sep 17 00:00:00 2001 From: tmt823 Date: Fri, 12 Jun 2026 19:04:26 +0900 Subject: [PATCH 10/10] fix: README --- docs/README.skills.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.skills.md b/docs/README.skills.md index e102eb601..f57d72cf7 100644 --- a/docs/README.skills.md +++ b/docs/README.skills.md @@ -298,7 +298,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to | [quality-playbook](../skills/quality-playbook/SKILL.md)
`gh skills install github/awesome-copilot quality-playbook` | Run a complete quality engineering audit on any codebase. Derives behavioral requirements from the code, generates spec-traced functional tests, runs a three-pass code review with regression tests, executes a multi-model spec audit (Council of Three), and produces a consolidated bug report with TDD-verified patches. Finds the 35% of real defects that structural code review alone cannot catch. Works with any language. Trigger on 'quality playbook', 'spec audit', 'Council of Three', 'fitness-to-purpose', or 'coverage theater'. | `LICENSE.txt`
`agents`
`phase_prompts`
`quality_gate.py`
`references/challenge_gate.md`
`references/code-only-mode.md`
`references/constitution.md`
`references/defensive_patterns.md`
`references/exploration_patterns.md`
`references/functional_tests.md`
`references/iteration.md`
`references/orchestrator_protocol.md`
`references/requirements_pipeline.md`
`references/requirements_refinement.md`
`references/requirements_review.md`
`references/review_protocols.md`
`references/run_state_schema.md`
`references/schema_mapping.md`
`references/spec_audit.md`
`references/verification.md` | | [quasi-coder](../skills/quasi-coder/SKILL.md)
`gh skills install github/awesome-copilot quasi-coder` | Expert 10x engineer skill for interpreting and implementing code from shorthand, quasi-code, and natural language descriptions. Use when collaborators provide incomplete code snippets, pseudo-code, or descriptions with potential typos or incorrect terminology. Excels at translating non-technical or semi-technical descriptions into production-quality code. | None | | [react-audit-grep-patterns](../skills/react-audit-grep-patterns/SKILL.md)
`gh skills install github/awesome-copilot react-audit-grep-patterns` | Provides the complete, verified grep scan command library for auditing React codebases before a React 18.3.1 or React 19 upgrade. Use this skill whenever running a migration audit - for both the react18-auditor and react19-auditor agents. Contains every grep pattern needed to find deprecated APIs, removed APIs, unsafe lifecycle methods, batching vulnerabilities, test file issues, dependency conflicts, and React 19 specific removals. Always use this skill when writing audit scan commands - do not rely on memory for grep syntax, especially for the multi-line async setState patterns which require context flags. | `references/dep-scans.md`
`references/react18-scans.md`
`references/react19-scans.md`
`references/test-scans.md` | -| [react-container-presentation-component](../skills/react-container-presentation-component/SKILL.md)
`gh skills install github/awesome-copilot react-container-presentation-component` | Create a new React component in src/components by asking component name and type (ui or features), then scaffold files that follow this repository rules, TypeScript strict typing, and Storybook/SCSS structure. Use when user types /add-component or asks to add a component. | `references/component-architecture.md`
`references/typescript-and-scss-rules.md`
`skill-additions-ja.md` | +| [react-container-presentation-component](../skills/react-container-presentation-component/SKILL.md)
`gh skills install github/awesome-copilot 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. | `references/component-architecture.md`
`references/typescript-and-scss-rules.md` | | [react18-batching-patterns](../skills/react18-batching-patterns/SKILL.md)
`gh skills install github/awesome-copilot react18-batching-patterns` | Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components. Use this skill whenever a class component has multiple setState calls in an async method, inside setTimeout, inside a Promise .then() or .catch(), or in a native event handler. Use it before writing any flushSync call - the decision tree here prevents unnecessary flushSync overuse. Also use this skill when fixing test failures caused by intermediate state assertions that break after React 18 upgrade. | `references/batching-categories.md`
`references/flushSync-guide.md` | | [react18-dep-compatibility](../skills/react18-dep-compatibility/SKILL.md)
`gh skills install github/awesome-copilot react18-dep-compatibility` | React 18.3.1 and React 19 dependency compatibility matrix. | `references/apollo-details.md`
`references/router-migration.md` | | [react18-enzyme-to-rtl](../skills/react18-enzyme-to-rtl/SKILL.md)
`gh skills install github/awesome-copilot react18-enzyme-to-rtl` | Provides exact Enzyme → React Testing Library migration patterns for React 18 upgrades. Use this skill whenever Enzyme tests need to be rewritten - shallow, mount, wrapper.find(), wrapper.simulate(), wrapper.prop(), wrapper.state(), wrapper.instance(), Enzyme configure/Adapter calls, or any test file that imports from enzyme. This skill covers the full API mapping and the philosophy shift from implementation testing to behavior testing. Always read this skill before rewriting Enzyme tests - do not translate Enzyme APIs 1:1, that produces brittle RTL tests. | `references/async-patterns.md`
`references/enzyme-api-map.md` |