feat(skill): make react-clean-architecture-add-component self-contained with local references by tmt823 · Pull Request #1910 · github/awesome-copilot

tmt823 · 2026-06-03T12:42:45Z

Pull Request Checklist

I have read and followed the CONTRIBUTING.md guidelines.
I have read and followed the Guidance for submissions involving paid services.
My contribution adds a new instruction, prompt, agent, skill, or workflow file in the correct directory.
The file follows the required naming convention.
The content is clearly structured and follows the example format.
I have tested my instructions, prompt, agent, skill, or workflow with GitHub Copilot.
I have run npm start and verified that README.md is up to date.
I am targeting the staged branch for this pull request.

Description

Adds a new skill, react-clean-architecture-add-component, to scaffold React components under src/components with clear ui/features boundaries and strict repository conventions.

This contribution includes:

A user-invocable skill definition with required-question flow, classification safeguards, scaffold rules, validation steps, and output contract
Bundled local references for component architecture and TypeScript/SCSS rules
Documentation index update so the skill is discoverable

Validation performed:

npm run build
npm run skill:validate

Type of Contribution

Additional Notes

No breaking changes are expected.
This PR targets staged.
Added skill definition and bundled references.
Updated skills documentation index.

By submitting this pull request, I confirm that my contribution abides by the Code of Conduct and will be licensed under the MIT License.

…ed with local references

github-actions · 2026-06-03T12:43:18Z

🔍 Skill Validator Results

⚠️ Warnings or advisories found

Scope	Checked
Skills	1
Agents	0
Total	1

Severity	Count
❌ Errors	0
⚠️ Warnings	1
ℹ️ Advisories	0

Summary

Level	Finding
ℹ️	Found 1 skill(s)
ℹ️	[react-container-presentation-component] 📊 react-container-presentation-component: 878 BPE tokens [chars/4: 1,034] (detailed ✓), 5 sections, 0 code blocks
ℹ️	[react-container-presentation-component] ⚠ No code blocks — agents perform better with concrete snippets and commands.
ℹ️	✅ All checks passed (1 skill(s))

Full validator output

Found 1 skill(s)
[react-container-presentation-component] 📊 react-container-presentation-component: 878 BPE tokens [chars/4: 1,034] (detailed ✓), 5 sections, 0 code blocks
[react-container-presentation-component]    ⚠  No code blocks — agents perform better with concrete snippets and commands.
✅ All checks passed (1 skill(s))

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds a new /add-component skill with supporting references to standardize how React components are scaffolded under src/components.

Changes:

Introduces the react-clean-architecture-add-component skill definition and procedure.
Adds reference docs for component architecture and TypeScript/SCSS rules used by the skill.
Registers the new skill in docs/README.skills.md.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

File	Description
skills/react-clean-architecture-add-component/references/typescript-and-scss-rules.md	Documents TypeScript + SCSS constraints for the scaffolding skill.
skills/react-clean-architecture-add-component/references/component-architecture.md	Defines component classification, file layout, and dependency rules.
skills/react-clean-architecture-add-component/SKILL.md	Implements the `/add-component` skill workflow and output contract.
docs/README.skills.md	Adds the new skill to the published skills index.

tmt823 · 2026-06-03T22:56:02Z

+
+### Style Constraints
+
+- Prefer Mantine first; use SCSS for gaps only.


Addressed. The fix has been committed as 9b9408c

tmt823 · 2026-06-03T22:57:10Z

+- `presentation.stories.tsx` (when needed)
+- `presentation.module.scss` (when needed)


Addressed. The fix has been committed as 3ef1eb9

…ment usage

…files

…tine

aaronpowell

This skill seems like it might be missing some overall context around "clean architecture" as it really seems to be focusing on a thin slice of how to define a component for React with only somewhat narrow uplift in model skill.

aaronpowell · 2026-06-10T06:02:49Z

+
+## When To Use
+
+- When the user runs `/add-component`


This is incorrect based on the name of the skill and could result in the skill running at an incorrect time, or triggering another skill inadvertently.

Fixed in commit 1f072db

aaronpowell · 2026-06-10T06:03:46Z

+
+## Required Questions
+
+If any of the following information is missing, ask using `vscode_askQuestions`.


Use ask_user so it is not VS Code specific.

Fixed in commit 4f454b5

aaronpowell · 2026-06-10T06:05:22Z

+- Do not use `any`.
+- Use `type` for props instead of `interface`.
+- Explicitly annotate function return types.
+- Prefer `@` alias imports and avoid deep relative imports.


These would be better with examples for the agent to follow.

Addressed in bae1b9d . Added code examples to the TypeScript rules reference.

…ntation guidance

…de specific dependency

…s reference

tmt823 · 2026-06-11T12:36:55Z

This skill seems like it might be missing some overall context around "clean architecture" as it really seems to be focusing on a thin slice of how to define a component for React with only somewhat narrow uplift in model skill.

@aaronpowell

Thank you for the feedback. I've renamed the skill to react-container-presentation-component to better reflect its scope, and added design intent, layer responsibilities, and Container/Presentation separation rules (including anti-patterns and examples) to the reference file to provide the broader design context that was missing.
Addressed in 4717bd0

aaronpowell · 2026-06-12T00:06:29Z

The README needs to be updated with the change to the skill description. Run npm run build to update them.

tmt823 · 2026-06-12T10:07:02Z

@aaronpowell
Fixed in commit 4feeb93

feat(skill): make react-clean-architecture-add-component self-contain…

5433650

…ed with local references

Copilot AI review requested due to automatic review settings June 3, 2026 12:42

tmt823 requested a review from aaronpowell as a code owner June 3, 2026 12:42

github-actions Bot added new-submission PR adds at least one new contribution skills PR touches skills skill-check-warning Skill validator reported warnings labels Jun 3, 2026

Copilot AI reviewed Jun 3, 2026

View reviewed changes

tmt823 added 4 commits June 4, 2026 07:42

docs(skill): clarify SCSS rules for z-index tokens and Mantine comple…

9b9408c

…ment usage

docs(skill): remove ambiguous "when needed" wording for presentation …

3ef1eb9

…files

docs(skill): generalize build/lint validation wording

2243c97

refactor(skill): generalize component scaffolding guidance beyond Man…

464485f

…tine

aaronpowell reviewed Jun 10, 2026

View reviewed changes

tmt823 added 4 commits June 11, 2026 21:31

fix: component-architecture.md

4717bd0

feat(skill): rename react component skill and clarify container/prese…

1f072db

…ntation guidance

fix(skill): replace vscode_askQuestions with ask_user to remove VS Co…

4f454b5

…de specific dependency

docs(skill): add TypeScript code examples to typescript-and-scss-rule…

bae1b9d

…s reference

tmt823 force-pushed the feat/react-clean-architecture-add-component-skill branch from 06524d2 to bae1b9d Compare June 11, 2026 12:31

fix: README

4feeb93


		### Style Constraints

		- Prefer Mantine first; use SCSS for gaps only.

		- `presentation.stories.tsx` (when needed)
		- `presentation.module.scss` (when needed)


		## Required Questions

		If any of the following information is missing, ask using `vscode_askQuestions`.

Conversation

tmt823 commented Jun 3, 2026

Pull Request Checklist

Description

Type of Contribution

Additional Notes

Uh oh!

github-actions Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 Skill Validator Results

Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

tmt823 Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tmt823 Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

aaronpowell left a comment

Choose a reason for hiding this comment

Uh oh!

aaronpowell Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

tmt823 Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

aaronpowell Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

tmt823 Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

aaronpowell Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

tmt823 Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

tmt823 commented Jun 11, 2026

Uh oh!

aaronpowell commented Jun 12, 2026

Uh oh!

tmt823 commented Jun 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Jun 3, 2026 •

edited

Loading

tmt823 Jun 3, 2026 •

edited

Loading