new-component

Name: new-component
Author: gaia-react

20stars3forks

How to install new-component?

gaia-react/gaia/new-component

$npx -y skills add gaia-react/gaia --skill new-component

Installs into the current project.

Summary

Scaffold a new React component with optional Storybook story and Vitest test files. Use this skill whenever the user asks to "create a component", "make a button", "scaffold a card", "add a new component", or asks for a new file under app/components/ following the project's com

Files · 1

View on GitHub

SKILL.md

1	# new-component
2
3	Trigger: user asks to create a component, scaffold a card, etc.
4
5	## Workflow
6
7	1. Confirm with user via AskUserQuestion: name (PascalCase), parent dir (default `app/components`), props (or "none"), story (default yes).
8	2. Run: `.gaia/cli/gaia scaffold component <Name> [flags]`
9	3. Verify: `pnpm typecheck` clean. Open the new files, sanity-check the props.
10	4. If user wants more (variants, conditional rendering, complex children): edit the generated files. The skill does not regenerate.
11
12	## Flags
13
14	- `--no-story`, skip Storybook story
15	- `--parent <dir>`, non-default parent dir (e.g. `app/components/Form`)
16	- `--props "a:string,b:number"`, typed props rendered as a Props alias and destructured in the signature. Only top-level commas separate props, so comma-bearing types (`Record<K, V>`, `(a, b) => void`, tuples) are supported within a single entry.
17
18	## Accessibility assertion
19
20	Scaffolded test files include a `test('a11y')` block that calls `expectNoA11yViolations` from `test/a11y.ts` (axe-core, full default ruleset, no tag filter). Because `axe-core` is incompatible with the project's default `happy-dom` test environment (`Node.prototype.isConnected` is getter-only, capricorn86/happy-dom#978), the scaffolder writes `// @vitest-environment jsdom` as the first line of the test file. The directive is required: `expectNoA11yViolations` throws an actionable error if it detects a non-jsdom runtime. Don't strip the directive when editing the file.
21
22	The a11y block renders a non-degenerate instance so it can fail against a real violation rather than passing vacuously against an empty DOM. With `--props`, the scaffolder fills representative values (`title="title"`, `count={0}`, …) at the render site (in the story `Default` when a story exists, otherwise inline in the test). Replace the placeholder values with realistic ones. The render-only axe pass is a starting point, not complete a11y evidence: add interaction-state and prop-variant assertions as the component grows.

People who liked this also viewed

6 picks

Type

new-component

20stars3forks

View on GitHub

How to install new-component?

gaia-react/gaia/new-component

$npx -y skills add gaia-react/gaia --skill new-component

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# new-component
2
3	Trigger: user asks to create a component, scaffold a card, etc.
4
5	## Workflow
6
7	1. Confirm with user via AskUserQuestion: name (PascalCase), parent dir (default `app/components`), props (or "none"), story (default yes).
8	2. Run: `.gaia/cli/gaia scaffold component <Name> [flags]`
9	3. Verify: `pnpm typecheck` clean. Open the new files, sanity-check the props.
10	4. If user wants more (variants, conditional rendering, complex children): edit the generated files. The skill does not regenerate.
11
12	## Flags
13
14	- `--no-story`, skip Storybook story
15	- `--parent <dir>`, non-default parent dir (e.g. `app/components/Form`)
16	- `--props "a:string,b:number"`, typed props rendered as a Props alias and destructured in the signature. Only top-level commas separate props, so comma-bearing types (`Record<K, V>`, `(a, b) => void`, tuples) are supported within a single entry.
17
18	## Accessibility assertion
19
20	Scaffolded test files include a `test('a11y')` block that calls `expectNoA11yViolations` from `test/a11y.ts` (axe-core, full default ruleset, no tag filter). Because `axe-core` is incompatible with the project's default `happy-dom` test environment (`Node.prototype.isConnected` is getter-only, capricorn86/happy-dom#978), the scaffolder writes `// @vitest-environment jsdom` as the first line of the test file. The directive is required: `expectNoA11yViolations` throws an actionable error if it detects a non-jsdom runtime. Don't strip the directive when editing the file.
21
22	The a11y block renders a non-degenerate instance so it can fail against a real violation rather than passing vacuously against an empty DOM. With `--props`, the scaffolder fills representative values (`title="title"`, `count={0}`, …) at the render site (in the story `Default` when a story exists, otherwise inline in the test). Replace the placeholder values with realistic ones. The render-only axe pass is a starting point, not complete a11y evidence: add interaction-state and prop-variant assertions as the component grows.

People who liked this also viewed

6 picks

Type