docs(skill): update library-scaffolder to include architectural tags

- Add Step 4 for automatic library tagging
- Include --prefix parameter in Nx generation commands
- Document tag rules and verification steps
- Update creation report to show tags
- Add references to enforce-module-boundaries config
This commit is contained in:
Lorenz Hilpert
2025-11-20 17:53:47 +01:00
parent b32cc48fd9
commit 5f2cb21c18

View File

@@ -51,6 +51,7 @@ npx nx generate @nx/angular:library \
--name=[domain]-[layer]-[name] \
--directory=libs/[domain]/[layer]/[name] \
--importPath=@isa/[domain]/[layer]/[name] \
--prefix=[domain] \
--style=css \
--unitTestRunner=vitest \
--standalone=true \
@@ -69,13 +70,53 @@ npx nx generate @nx/angular:library \
--name=[domain]-[layer]-[name] \
--directory=libs/[domain]/[layer]/[name] \
--importPath=@isa/[domain]/[layer]/[name] \
--prefix=[domain] \
--style=css \
--unitTestRunner=vitest \
--standalone=true \
--skipTests=false
```
### Step 4: Configure Vitest with JUnit and Cobertura
### Step 4: Add Architectural Tags
**CRITICAL**: Immediately after library generation, add proper tags to `project.json` for `@nx/enforce-module-boundaries`.
Run the tagging script:
```bash
node scripts/add-library-tags.js
```
Or manually add tags to `libs/[domain]/[layer]/[name]/project.json`:
```json
{
"name": "[domain]-[layer]-[name]",
"tags": [
"scope:[domain]",
"type:[layer]"
]
}
```
**Tag Rules:**
- **Scope tag**: `scope:[domain]` (e.g., `scope:oms`, `scope:crm`, `scope:ui`, `scope:shared`)
- **Type tag**: `type:[layer]` (e.g., `type:feature`, `type:data-access`, `type:ui`, `type:util`)
**Examples:**
- `libs/oms/feature/return-search``["scope:oms", "type:feature"]`
- `libs/ui/buttons``["scope:ui", "type:ui"]`
- `libs/shared/scanner``["scope:shared", "type:shared"]`
- `libs/core/auth``["scope:core", "type:core"]`
**Verification:**
```bash
# Check tags were added
cat libs/[domain]/[layer]/[name]/project.json | jq '.tags'
# Should output: ["scope:[domain]", "type:[layer]"]
```
### Step 5: Configure Vitest with JUnit and Cobertura
Update `libs/[path]/vite.config.mts`:
@@ -113,7 +154,7 @@ defineConfig(() => ({
**Critical**: Adjust path depth based on library location.
### Step 5: Verify Configuration
### Step 6: Verify Configuration
1. **Check Path Alias**
- Verify `tsconfig.base.json` was updated
@@ -128,7 +169,7 @@ defineConfig(() => ({
- JUnit XML: `testresults/junit-[library-name].xml`
- Cobertura XML: `coverage/libs/[path]/cobertura-coverage.xml`
### Step 6: Create Library README
### Step 7: Create Library README
Use `docs-researcher` to find similar library READMEs, then create comprehensive documentation including:
- Overview and purpose
@@ -137,7 +178,7 @@ Use `docs-researcher` to find similar library READMEs, then create comprehensive
- Usage examples
- Testing information (Vitest + Angular Testing Utilities)
### Step 7: Update Library Reference
### Step 8: Update Library Reference
Add entry to `docs/library-reference.md` under appropriate domain:
@@ -150,10 +191,10 @@ Add entry to `docs/library-reference.md` under appropriate domain:
[Brief description]
```
### Step 8: Run Full Validation
### Step 9: Run Full Validation
```bash
# Lint
# Lint (includes boundary checks)
npx nx lint [library-name]
# Test with coverage
@@ -166,7 +207,7 @@ npx nx build [library-name]
npx nx graph --focus=[library-name]
```
### Step 9: Generate Creation Report
### Step 10: Generate Creation Report
```
Library Created Successfully
@@ -181,6 +222,7 @@ Import Alias: @isa/[domain]/[layer]/[name]
Test Framework: Vitest with Angular Testing Utilities
Style: CSS
Standalone: Yes
Tags: scope:[domain], type:[layer]
JUnit Reporter: ✅ testresults/junit-[library-name].xml
Cobertura Coverage: ✅ coverage/libs/[path]/cobertura-coverage.xml
@@ -193,12 +235,18 @@ import { Component } from '@isa/[domain]/[layer]/[name]';
npx nx test [library-name] --skip-nx-cache
npx nx test [library-name] --coverage.enabled=true --skip-nx-cache
🏗️ Architecture Compliance
--------------------------
Tags enforce module boundaries via @nx/enforce-module-boundaries
Run lint to check for violations: npx nx lint [library-name]
📝 Next Steps
-------------
1. Develop library features
2. Write tests using Vitest + Angular Testing Utilities
3. Add E2E attributes (data-what, data-which) to templates
4. Update README with usage examples
5. Follow architecture rules (see eslint.config.js for constraints)
```
## Error Handling
@@ -220,4 +268,8 @@ npx nx test [library-name] --coverage.enabled=true --skip-nx-cache
- docs/guidelines/testing.md (Vitest, JUnit, Cobertura sections)
- docs/library-reference.md (domain patterns)
- CLAUDE.md (Library Organization, Testing Framework sections)
- eslint.config.js (@nx/enforce-module-boundaries configuration)
- scripts/add-library-tags.js (automatic tagging script)
- .claude/skills/architecture-enforcer (boundary validation)
- Nx Angular Library Generator: https://nx.dev/nx-api/angular/generators/library
- Nx Enforce Module Boundaries: https://nx.dev/nx-api/eslint-plugin/documents/enforce-module-boundaries