Expert development rules for NAV's K9 case handling system - a React/TypeScript monorepo for case processing applications with strict architectural patterns, V2 modernization, and NAV Design System integration.
Expert development assistant for NAV's K9 case handling system (k9-sak-web), a monorepo containing React/TypeScript frontend applications for case processing.
**NEVER use npm.** This project is locked to [email protected] with yarn workspaces.
```bash
yarn install # Install dependencies
yarn add <package> # Add dependency
yarn workspace <name> add <package> # Add to specific workspace
```
**Directory Structure:**
**V2 Import Rules (CRITICAL):**
**Path Aliases:**
**Before committing:**
```bash
yarn ts-check
```
**CRITICAL**: These dependencies MUST have synchronized versions across all packages:
When updating, ensure all `@navikt/ft-*` packages are compatible or use `resolutions` in package.json.
**CSS Module Workflow:**
```bash
yarn css:modules:typegen # Generate TypeScript types for CSS modules
yarn css:lint # Lint CSS
```
**File naming:**
**Primary approach - Storybook Interaction Tests:**
**Vitest:**
**Playwright:**
**Commands:**
```bash
yarn test # Run tests
yarn test:watch # Watch mode
yarn storybook # Start Storybook
```
```bash
yarn lint # Check linting
yarn lint:fix # Auto-fix issues
yarn ltb # Full check (lint, type-check, build)
```
**Pre-commit:** Husky + lint-staged runs automatically
| Item | Convention | Example |
|------|-----------|---------|
| Components (files + exports) | PascalCase | `MyComponent.tsx`, export `MyComponent` |
| Hooks (files + exports) | camelCase with `use` prefix | `useMyHook.ts`, export `useMyHook` |
| Utilities (files) | camelCase | `myUtils.ts` |
| Types/Interfaces | PascalCase | `type MyType = ...` |
| Constants | SCREAMING_SNAKE_CASE | `const MAX_COUNT = 10` |
| CSS Modules (files) | camelCase | `myComponent.module.css` |
| CSS Modules (classes) | camelCase | `.myClass { }` |
| Tests | Mirror target | `MyComponent.spec.tsx`, `myUtils.spec.ts` |
| Stories | Match component | `MyComponent.stories.tsx` |
```bash
yarn dev # Start K9 dev server
yarn dev:ung # Start Ungdomsytelse dev server
```
```bash
yarn build # Build K9 for production
yarn build:ung # Build Ungdomsytelse for production
```
```bash
yarn ts-check # Type check all code
yarn lint:fix # Fix linting issues
yarn css:lint # Lint CSS
yarn css:modules:typegen # Generate CSS module types
```
```bash
yarn test # Run all tests
yarn test:watch # Watch mode
yarn storybook # Start Storybook
```
```bash
yarn knip # Find unused files/exports
yarn ltb # Full check (lint, type-check, build)
```
```
packages/[package-name]/
├── src/
├── index.ts # Public API
└── package.json
```
**Package categories:**
1. **Code Quality**: Write clean, maintainable, well-typed code
2. **Accessibility**: Always consider a11y in UI components
3. **Performance**: Use React.memo, useMemo, useCallback appropriately
4. **Error Handling**: Proper error boundaries and error states
5. **Documentation**: Update README when adding significant features
6. **Testing**: Write tests for new features and bug fixes
7. **Storybook**: Add stories for new shared components
8. **Backwards Compatibility**: Maintain compatibility when updating shared packages
1. ❌ Using `npm` instead of `yarn`
2. ❌ Importing from non-V2 code in V2 packages
3. ❌ Inconsistent NAV Design System package versions
4. ❌ Ignoring TypeScript errors
5. ❌ Using runtime i18n
6. ❌ Inline styles (use CSS modules or Tailwind)
7. ❌ Missing accessibility attributes
8. ❌ Not running type-check before committing
9. ❌ Introducing MSW in new tests (prefer fixtures and direct mocks)
10. ❌ Using `vi.spyOn` for HTTP in tests (use Storybook instead)
1. Check if code should go in `packages/v2/` (for new/refactored code)
2. Run `yarn ts-check` to verify types
3. Run `yarn lint:fix` to fix style issues
4. Run `yarn test` to ensure tests pass
5. Add/update tests for changed functionality
6. Update Storybook stories if changing shared components
7. Generate CSS types if adding/changing CSS modules: `yarn css:modules:typegen`
This is a NAV (Norwegian Labour and Welfare Administration) project handling sensitive case data. Security and privacy are paramount. The system is used by case workers for processing various benefit types (Pleiepenger, Omsorgspenger, Opplæringspenger, Ungdomsytelse, etc.).
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nav-k9-sak-web-development/raw