You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat: update skills to use existing Nx generators and yarn scripts
- v9-component: use react-component and react-library generators
instead of manually creating files, add generators reference table
- change: use `yarn change` (repo's beachball script) and
`yarn check:change` for verification
- package-info: add useful commands section with Nx executors
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Create a new v9 component named **$ARGUMENTS**following the exact patterns in [docs/architecture/component-patterns.md](docs/architecture/component-patterns.md).
11
+
Create a new v9 component named **$ARGUMENTS**using the repo's Nx generators.
12
12
13
13
## Steps
14
14
15
-
1.**Determine the package path.** If creating inside an existing package, use that path. If creating a new package, the path is `packages/react-components/react-<lowercase-name>/library/src/`.
15
+
### Adding a component to an existing package
16
16
17
-
2.**Read an existing well-structured component** for reference. Good examples:
Read at least the types, hook, styles, render, and main component files from one of these.
19
+
```bash
20
+
yarn nx g @fluentui/workspace-plugin:react-component --name $ARGUMENTS --project <project-name>
21
+
```
22
22
23
-
3.**Generate all required files** under `components/$ARGUMENTS/`:
23
+
Where `<project-name>` is the Nx project (e.g., `react-button`). This generates all required files: component, types, hook, styles, render, index barrel, and conformance test.
|`use$ARGUMENTS.ts`| State hook — processes props/slots into normalized state |
30
-
|`use${ARGUMENTS}Styles.styles.ts`| Griffel styling with `makeStyles` using design tokens from `@fluentui/react-theme`. Never hardcode values. |
31
-
|`render$ARGUMENTS.tsx`| Pure JSX render using `assertSlots`|
32
-
|`$ARGUMENTS.test.tsx`| Unit tests with React Testing Library |
33
-
|`index.ts`| Barrel export for the component |
25
+
### Creating a new package + component
34
26
35
-
4.**Update barrel exports** — add the component to the package's root `index.ts`.
27
+
Use the `react-library` generator first, then add the component:
36
28
37
-
5.**Create conformance test** at `testing/isConformant.ts` if it doesn't exist.
29
+
```bash
30
+
# Create the package (will prompt for owner team)
31
+
yarn create-package
38
32
39
-
6.**Create a default story** at the appropriate stories package location.
33
+
# Or non-interactively:
34
+
yarn nx g @fluentui/workspace-plugin:react-library --name <package-name> --owner "<team>"
35
+
36
+
# Then add the component inside it:
37
+
yarn nx g @fluentui/workspace-plugin:react-component --name $ARGUMENTS --project <package-name>
38
+
```
39
+
40
+
### After scaffolding
41
+
42
+
1.**Review generated files** against [docs/architecture/component-patterns.md](../../../docs/architecture/component-patterns.md) and fill in component-specific logic.
43
+
44
+
2.**Add styles** in `use${ARGUMENTS}Styles.styles.ts` using design tokens:
45
+
46
+
```tsx
47
+
import { makeStyles } from'@griffel/react';
48
+
import { tokens } from'@fluentui/react-theme';
49
+
```
50
+
51
+
3.**Create a default story** at the appropriate stories package location if not generated.
52
+
53
+
4.**Update API docs** after adding exports:
54
+
```bash
55
+
yarn nx run <project>:generate-api
56
+
```
40
57
41
58
## Critical Rules
42
59
@@ -45,4 +62,15 @@ Create a new v9 component named **$ARGUMENTS** following the exact patterns in [
45
62
- Always preserve user `className` as the LAST argument in `mergeClasses()`
46
63
- Use `_unstable` suffix on exported hooks: `use$ARGUMENTS_unstable`, `use${ARGUMENTS}Styles_unstable`, `render${ARGUMENTS}_unstable`
47
64
- Guard any `window`/`document`/`navigator` access with `canUseDOM()` from `@fluentui/react-utilities`
48
-
- Do not add dependencies on other Tier 3 component packages (see [docs/architecture/layers.md](docs/architecture/layers.md))
65
+
- Do not add dependencies on other Tier 3 component packages (see [docs/architecture/layers.md](../../../docs/architecture/layers.md))
0 commit comments