K9 Sak Web Development

Expert development assistant for NAV's K9 case handling system (k9-sak-web), a React/TypeScript monorepo for processing benefits cases with strict architectural patterns and security requirements.

What This Skill Does

Provides comprehensive guidance for developing, testing, and maintaining the K9 Sak Web monorepo, ensuring adherence to NAV's standards, proper package management with yarn, V2 modernization patterns, and accessibility requirements for sensitive case handling applications.

Step-by-Step Instructions

1. Environment Setup and Package Management

**CRITICAL: Always use yarn, never npm**

2. Understanding Monorepo Structure

**V2 Modernization Pattern:**

**Path aliases:**

**Package categories:**

3. TypeScript Configuration

4. Dependency Management

**CRITICAL: These dependencies MUST be synchronized across all packages:**

When updating these, ensure all `@navikt/ft-*` packages are compatible or use `resolutions` in package.json.

5. Styling Approach

6. Testing Strategy

**Priority order:**

1. **Storybook interaction tests** for UI components (primary choice)

2. **Vitest** for pure logic, utilities, and hooks (non-UI)

3. **Playwright** for E2E tests

**Testing rules:**

7. Naming Conventions

8. Language and Text Handling

9. Component Development Patterns

10. Development Workflow Commands

```bash

yarn dev # Start K9 dev server

yarn dev:ung # Start Ungdomsytelse dev server

yarn ts-check # Type check all code

yarn lint:fix # Fix linting issues

yarn test # Run tests

yarn test:watch # Run tests in watch mode

yarn storybook # Start Storybook

yarn ltb # Full check (lint, type, build)

yarn build # Build K9 for production

yarn build:ung # Build Ungdomsytelse for production

yarn css:modules:typegen # Generate CSS module types

yarn css:lint # Lint CSS

yarn knip # Find unused files/exports

```

11. Pre-Commit Checklist

Before committing changes:

1. Run `yarn ts-check` to verify types

2. Run `yarn lint:fix` to fix style issues

3. Run `yarn test` to ensure tests pass

4. Add/update tests for changed functionality

5. Update Storybook stories if changing shared components

6. Generate CSS types if adding/changing CSS modules: `yarn css:modules:typegen`

7. Check V2 dependency rules (V2 cannot import from non-V2)

12. Feature Toggles

13. Build and Deployment

Critical Anti-Patterns to Avoid

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 i18n

6. ❌ Inline styles

7. ❌ Missing accessibility attributes

8. ❌ Not running type-check before committing

9. ❌ Introducing MSW in new tests

10. ❌ Using `vi.spyOn` for HTTP in tests

Important Context

Examples

Starting Development

```bash

yarn install

yarn dev

In another terminal

yarn storybook

```

Creating a New Component in V2

```typescript

// packages/v2/gui/shared/MyComponent.tsx

import React from 'react';

import { Button } from '@navikt/ds-react';

import styles from './myComponent.module.css';

interface MyComponentProps {

title: string;

onSubmit: () => void;

}

export const MyComponent: React.FC<MyComponentProps> = ({ title, onSubmit }) => {

return (

<div className={styles.container}>

<h2>{title}</h2>

<Button onClick={onSubmit}>Send</Button>

</div>

);

};

```

Adding a Storybook Story

```typescript

// packages/v2/gui/shared/MyComponent.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';

import { MyComponent } from './MyComponent';

const meta = {

title: 'Shared/MyComponent',

component: MyComponent,

parameters: {

a11y: {

config: {

rules: [{ id: 'color-contrast', enabled: true }],

},

},

},

} satisfies Meta<typeof MyComponent>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {

args: {

title: 'Eksempel tittel',

onSubmit: () => console.log('Submitted'),

},

};

```

Constraints