Fase 3 · Templates

# Copy-paste startere for nye plugins

Hver template er minst mulig HTML som korrekt importerer designsystemet og bruker etablerte mønstre. Forke en plugin? Start fra én av disse, ikke fra blank fil.

Template 01

## Skeleton — minimal HTML-side

Bare designsystemet importert. Container, header, og en tom `main`. Bruk når du vil bygge noe helt eget med tokens og base-styling.

~ 30 linjer
scenarios/<ditt-scenario>.html

    <!doctype html>
    <html lang="nb">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Min plugin — <org></title>
    <link rel="stylesheet" href="../playground-design-system/tokens.css" />
    <link rel="stylesheet" href="../playground-design-system/base.css" />
    <link rel="stylesheet" href="../playground-design-system/components.css" />
    <link rel="stylesheet" href="../playground-design-system/components-tier2.css" />
    <link rel="stylesheet" href="../playground-design-system/print.css" />
    <link rel="stylesheet" href="../playground-design-system/fonts.css" />
    </head>
    <body>
    <header class="app-header">
      <a href="index.html" class="app-header__brand">
        <span class="app-header__brand-mark">P</span>
        <span>Min plugin</span>
      </a>
      <span class="app-header__breadcrumb">/ <org></span>
    </header>
    <main class="container container--wide" style="padding: var(--space-8) 0;">
      <h1>Tittel</h1>
      <p class="text-secondary">Innhold her.</p>
    </main>
    </body>
    </html>

Template 02

## Intake-wizard

Fire-stegs onboarding. Sticky stepper, valideringsgate framover, localStorage-persistens. Brukes for ROS-intake, OKR-onboarding, security-clean.

scenarios/ros-lier-kommune.html (skjerm 1)

→ Se ros-lier-kommune.html#intake for full implementasjon med skjema-felt og validering.

Template 03

## Single-report

Én rapport, fire seksjoner: header med metadata + verdict-pill, hovedinnhold, sidefelt, signatur. Bygd for projector-bruk og PDF-eksport.

scenarios/security-direktorat.html
Eyebrow · scope

### Rapporttittel

Eier Person Dato 02. mai
WARN Manuell gjennomgang

#### Sammendrag

Hovedinnhold går her — typisk 2-4 avsnitt med mellomtitler.

Kort fakta
Sidekontekst, henvisninger, neste-steg.
Template 04

## Findings-review

Posture-grid + filter-bar + finding-kort + tiltaksplan. Strukturen i Scenario C i konsentrert form.

scenarios/security-direktorat.html
Alvorlighet
PROJEKT-123 · F-001

### Funn-tittel

RULE01 Høy

Kort beskrivelse av funnet. Full struktur med kildekontekst, anbefaling og side-felt finnes i Scenario C.

Template 05

## Live-writer

To-pane: editor med inline highlights til venstre, kritikk-stack til høyre. Score-strip øverst. Fire view-modi: skriv / sammenlign / kohort / endelig.

scenarios/okr-baerum.html
Editor

Innhold med inline highlight som lenker til kritikk-kortet til høyre.

Kritikk-tittel

Kort forklaring og forslag til omskriving.

Template 06 · Print

## A4-rapport · offentlig dokument

Skraverings-mønstre i stedet for farge for B/W-utskrift. Header med kommune-logo-slot og signaturfelt. Importer `print.css` og legg innhold i en `.a4`-wrapper for skjerm-preview.

📄 Slik ser dokumentet ut på A4. `Cmd/Ctrl + P` for ekte print-preview.
[logo]
Lier kommune · IT-styring
Risiko- og sårbarhetsanalyse · M365 Copilot
ROS-2026-LIER-COPILOT-01 · 02. mai 2026 · Eier: Eli Bjerke

## Sammendrag

M365 Copilot foreslås innført for 1 850 ansatte. Analysen identifiserte 49 trusler, hvorav 4 ligger i kritisk sone og 12 i høy sone før mitigerende tiltak. Anbefalingen er GO med fire betingelser beskrevet i kap. 6.

## Risiko-matrise (5×5)

Sone | Mønster | Antall trusler
--- | --- | ---
Lav (1–4) |  | 21
Moderat (5–8) |  | 12
Høy (9–12) |  | 12
Kritisk (15–20) |  | 3
Ekstrem (25) |  | 1

## Anbefaling

GO med fire betingelser: (1) DLP-policy aktivert i tenant før utrulling. (2) Sensitivity Labels innført i alle arkivsystem. (3) Schrems II-vurdering ferdigstilt for cross-tenant. (4) Innbygger-tilfredshetsmåling baseline T1.

Datakontrakter

## JSON-skjemaer

Tre skjemaer som lar plugins utveksle data uten gjetting. Validér med vanilig `ajv` eller VS Codes innebygde schema-validator.

Schema finding.schema.json Ett funn fra en skanning. severity, source, evidence, recommendation, status. llm-security · config-audit · ms-ai-review · ultraplan-review Schema okr-set.schema.json Objective + 1–6 nøkkelresultater. baseline/target/stretch, period, score, critiques. OKR live-writer Schema ros-threat.schema.json NS 5814-justert trussel. inherent + residual, controls (M-001…), regulatory_refs. ms-ai-architect

Bruk i HTML/JS: `fetch('/shared/playground-design-system/schemas/finding.schema.json').then(r => r.json())`