370 implement agentskills

packages/fhi-designsystem/.storybook/preview.ts

@@ -17,6 +17,7 @@ const preview: Preview = {
         order: [
           'Oversikt',
           'Kom i gang',
+          'KI Verktøy',
           'Komponenter',
           [
             '*',

packages/fhi-designsystem/ai/skills/fhi-designsystem/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: 'fhi-designsystem'
+description: 'A simple skill to get information about the FHI Design System.'
+---
+
+# FHI Design System
+
+FHI Design System is a collection of reusable web-components, guidelines, and best practices for design and development. It provides a consistent and cohesive design language that can be used across different projects and platforms.
+
+FHI Designsystem also includes design tokens, which are a set of css properties that define the visual properties of the components, such as colors, typography, spacing, etc. Design tokens ensure consistency and maintainability in design and development.
+
+Use this skill when the user wants to get information about the FHI Design System, including its components, design tokens, guidelines, and best practices for design and development.
+
+Any html element with the prefix "fhi-" in the tagname is a component of the FHI Design System. For example, <fhi-button> is a button component from the FHI Design System. You can use this skill to provide information about specific components, their usage, and how to implement them in design and development projects.
+
+In the npm package @folkehelseinstituttet/designsystem you can find custom element manifests. These files contain useful information about the components, such as their tag names, attributes, properties, methods, and slots. custom-elements.json contains metadata for all the components, while individual manifest files (e.g., fhi-button.manifest.json) contain metadata for their respective components. You can refer to these manifest files to get detailed information about the components and how to use them effectively.
+
+The source code can be found at this GitHub repository: https://github.com/FHIDev/Fhi.Designsystem/tree/main/packages/fhi-designsystem/src/components. Use this repository to explore the source code of the components, understand their structure, and see how they are implemented. This can help you gain a deeper understanding of the FHI Design System and how to use its components and design tokens effectively in your projects.
+
+User friendly documentation for the FHI Design System can be found at https://designsystem.fhi.no. This page is a Storybook instance that contains all the components, design tokens and guidelines for the FHI Design System. You should refer to this documentation to get detailed information about each component, including its attributes, properties, methods, slots and examples of usage.
+
+## Workflow
+
+IMPORTANT: If the user is asking about a specific component, check the appropriate manifest first to find information about the component. Prefer using the component manifest. If you can't find the information needed in the manifests or the user is asking about a more general topic, you should check the documentation page and finally the source code if needed.
+
+IMPORTANT: Always provide a link to the documentation if relevant.
+
+IMPORTANT: Always use the design tokens when providing examples of usage for the components. Prioritize using semantic tokens over primitive tokens.
+
+IMPORTANT: The components may have initial values for some attributes or properties. These values are defined in the manifest files. Do not set these values in the examples of usage unless the user specifically asks for it or if it is necessary to demonstrate a specific feature or behavior of the component.
+
+Provide a concise and accurate answer based on the information found in the manifest, documentation, and source code, including any relevant details about the components, guidelines, and best practices for design and development.
+
+Provide examples of usage to help the user understand how to implement the components in their projects.

packages/fhi-designsystem/src/components/fhi-date-input/fhi-date-input.component.ts

@@ -19,6 +19,7 @@ export type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-
  *
  * @tag fhi-date-input
  * @element fhi-date-input
+ *
  */
 @customElement(FhiDateInputSelector)
 export class FhiDateInput extends LitElement {

packages/fhi-designsystem/src/storybook/ai-tooling.mdx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="KI Verktøy" />
+
+# Agent Skills
+
+<div className="callout-warning">
+  Resultatet av å bruke `SKILL.md`-filen vil variere avhengig av hvilket KI-verktøy du bruker, hvordan prosjektet ditt er satt opp, og hvilke innstillinger du har satt.
+  Det er derfor viktig å teste og evaluere resultatet nøye for å sikre at det oppfyller dine behov og forventninger.
+
+  Alltid gjør en grundig gjennomgang av koden som genereres av ditt KI-verktøy og henvend deg til dokumentasjonen for designsystemet for å sikre at du bruker komponentene riktig og i tråd med beste praksis.
+</div>
+
+FHI Designsystemet tilbyr en [Agent Skill](https://agentskills.io/home) for bruk i KI-verktøy som Github Copilot.
+
+`SKILL.md`-filen inneholder enkle instruksjoner som hjelper KI-verktøyet å forstå hvordan det skal bruke designsystemet og hvor dokumentasjonen finnes.
+Denne filen er nyttig for utviklere som ønsker å dra nytte av KI-assistenter sammen med FHI Designsystemet.
+
+Filen ligger i npm pakken under `@folkehelseinstituttet/designsystem/ai-tooling/SKILL.md`.
+
+Skillen er testet til å fungere med GPT 5.4 og Claude Sonnet 4.6.
+
+Bruker du VSCode med Copilot, skal du kopiere `SKILL.md`-filen inn til `.github/skills/fhi-designsystem/` i prosjektet ditt. Da vil Copilot automatisk finne filen.
+Bruker du en annen IDE bør du sjekke dokumentasjonen for det KI-verktøyet du bruker for å se hvor det forventer at `SKILL.md`-filen skal være plassert.
+
+<style>{`
+  .callout-warning {
+    border-radius: 2px;
+    padding: .25rem 1rem;
+    margin-bottom: 2rem;
+    background-color: #FFE7BA;
+    border-bottom: 4px solid #F1A541;
+  }
+`}</style>

packages/fhi-designsystem/src/storybook/overview.mdx

@@ -68,6 +68,16 @@ FHI Designsystem er et levende system under kontinuerlig, iterativ utvikling. Vi
     </div>
 </div>
 
+## KI Verktøy
+
+<div className="card-group">
+    <div className="card">
+        [Agent Skills](?path=/docs/ki-verktøy--docs)
+
+        Forbered ditt KI-verktøy på FHI Designsystem
+    </div>
+</div>
+
 **Obs:** Disse sidene beskriver FHI Designsystem, med komponenter bygd som webkomponenter. Leter du etter dokumentasjon for komponentene til Angular, samt tilhørende CSS-bibliotek, [finner du det på de gamle sidene](https://old.designsystem.fhi.no)
 
 <style>{`

packages/fhi-designsystem/vite.config.js

@@ -4,8 +4,9 @@ import fs from 'fs';
 import path from 'path';
 
 const OUTPUT_DIRECTORY = 'dist';
+const MANIFEST_LOCATION = '.temp/custom-elements.json';
 
-export default defineConfig(({ mode }) => {
+export default defineConfig(({ command, mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
 
   if (!env.DEPLOY_TARGET) {
@@ -75,6 +76,10 @@ export default defineConfig(({ mode }) => {
    * @returns package.json ready for deployment as an npm package
    */
   const preparedPackageJson = (() => {
+    if (command === 'serve') {
+      return {};
+    }
+
     const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf-8'));
 
     packageJson.exports = packageJson.exports || {};
@@ -101,6 +106,36 @@ export default defineConfig(({ mode }) => {
     return packageJson;
   })();
 
+  /**
+   * Read the custom element manifest generated by the analyser, minify it and create manifests for each component as well.
+   * This will make the manifest more accessible for AI tooling and also make it possible to import the manifest for each component separately if needed.
+   *
+   * @returns the minified manifest and the individual component manifests.
+   */
+  const customElementManifests = (() => {
+    if (command === 'serve') {
+      return {};
+    }
+
+    const sourceManifest = fs.readFileSync(MANIFEST_LOCATION, 'utf-8');
+    const minifiedManifest = JSON.stringify(JSON.parse(sourceManifest));
+
+    const components = JSON.parse(minifiedManifest).modules.reduce(
+      (accumulation, module) => {
+        const tagName = module.declarations[0].tagName;
+        module.exports = undefined; // remove exports to reduce the size of the individual manifests.
+        accumulation[`${tagName}.manifest.json`] = JSON.stringify(module);
+        return accumulation;
+      },
+      {},
+    );
+
+    return {
+      'custom-elements.json': minifiedManifest,
+      ...components,
+    };
+  })();
+
   // https://vite.dev/guide/api-plugin.html#virtual-modules-convention
   function resolveVirtualModule({ moduleId, moduleContent }) {
     const virtualModuleId = moduleId;
@@ -139,6 +174,10 @@ export default defineConfig(({ mode }) => {
             throw Error('"path" is required');
           }
 
+          fs.mkdirSync(path.dirname(`${_outDir}/${file.path}`), {
+            recursive: true,
+          });
+
           fs.writeFileSync(`${_outDir}/${file.path}`, file.content || '');
         }
       },
@@ -164,16 +203,18 @@ export default defineConfig(({ mode }) => {
                 src: 'staticwebapp.config.json',
                 dest: './',
               },
-              {
-                src: '.temp/custom-elements.json',
-                dest: './',
-              },
               {
                 src: '.temp/web-types.json',
                 dest: './',
               },
             ],
           }),
+          writeFileOnCloseBundle([
+            {
+              path: 'custom-elements.json',
+              content: customElementManifests['custom-elements.json'],
+            },
+          ]),
         ],
         build: {
           cssCodeSplit: true,
@@ -211,6 +252,10 @@ export default defineConfig(({ mode }) => {
                 src: '.temp/web-types.json',
                 dest: './',
               },
+              {
+                src: 'ai/skills/fhi-designsystem/SKILL.md',
+                dest: './ai-tooling',
+              },
             ],
           }),
           writeFileOnCloseBundle([
@@ -222,6 +267,12 @@ export default defineConfig(({ mode }) => {
               path: fileName,
               content,
             })),
+            ...Object.entries(customElementManifests).map(
+              ([fileName, content]) => ({
+                path: fileName,
+                content,
+              }),
+            ),
           ]),
         ],
         build: {