{
  "$schema": "https://schemas.agentskills.io/discovery/0.2.0/schema.json",
  "skills": [
    {
      "name": "kesko-overview",
      "type": "skill-md",
      "description": "Compact map of the Kesko Design System. Summarises what each package does (@kesko/tokens, @kesko/color, @kesko/fonts, @kesko/iconography, @kesko/css, @kesko/themes, @kesko/components, @kesko/docs), how the packages depend on each other at build time, the shared naming conventions (the k- prefix, the T-shirt size scale, token naming), and which sibling skill to load for deeper detail. Use this skill whenever the user asks what Kesko Design System is or does, wants an overview / tour / map of the system, is deciding which @kesko/* package to pick up for a task, is bootstrapping a new Kesko project and doesn't know the pieces yet, or asks how the packages relate. Load it first when a broader query could match multiple other Kesko skills so you can decide where to route.",
      "files": [
        "SKILL.md"
      ],
      "url": "/.well-known/agent-skills/kesko-overview/SKILL.md",
      "digest": "sha256:4413c9a02186758c0f8ed28495747aef994d0e741cc6f5844e19faadad89a7df"
    },
    {
      "name": "kesko-naming",
      "type": "skill-md",
      "description": "Naming conventions for the Kesko Design System: the mandatory k- prefix, the T-shirt size scale (4xs through 3xl with md as the default), rules for React component names, CSS class and custom-property names, design token names, and component prop names. Use this skill whenever a user is adding, renaming, or reviewing a Kesko component, CSS class, design token, or prop, or asks what prefix or casing to use — even if they don't mention naming explicitly. Also use when auditing @kesko/* code or a diff for naming consistency.",
      "files": [
        "SKILL.md"
      ],
      "url": "/.well-known/agent-skills/kesko-naming/SKILL.md",
      "digest": "sha256:ba99e53fb69cb26023707d3c756246b50691e76cb23ffbe64f523aae4fe10a20"
    },
    {
      "name": "kesko-colors",
      "type": "skill-md",
      "description": "Contrast-based color palette from @kesko/color: 10 families (neutral, neutral-dark, beige, red, orange, yellow, green, teal, blue, purple), 12 WCAG-targeted steps each (100–1200), light/dark symmetry where step N mirrors to step 1300−N, plus the keskoPalette() and keskoTheme() helpers for building and extending palettes. Use this skill whenever the user picks a Kesko color, asks about brand colors, contrast steps, palette families, dark-mode color mapping, WCAG contrast for @kesko/*, or wants to extend or generate a Kesko palette — even if they only say 'color' without naming the package.",
      "files": [
        "SKILL.md"
      ],
      "url": "/.well-known/agent-skills/kesko-colors/SKILL.md",
      "digest": "sha256:7542363ca1857bd52d05c5a6730166b1b8cb1750360cd27b8b07ffe402768c22"
    },
    {
      "name": "kesko-fonts",
      "type": "skill-md",
      "description": "Webfont package @kesko/fonts: ships the SkattaSansUI typeface as @font-face declarations in CSS, SCSS, and LESS, with all 8 variants (Regular, RegularItalic, Medium, MediumItalic, Bold, BoldNarrow, Black, BlackNarrow) plus a metrics-matched system-ui fallback and configurable $k-font-path / $k-font-display variables. Use this skill whenever the user sets up Kesko typography, asks how to load Skatta Sans UI, configures font-display / subsetting / self-hosting paths, debugs missing or swapped fonts in a Kesko project, or mentions the Kesko typeface by any name. Also use when a user is deciding between bundling @kesko/fonts standalone vs. loading it through @kesko/css.",
      "files": [
        "SKILL.md"
      ],
      "url": "/.well-known/agent-skills/kesko-fonts/SKILL.md",
      "digest": "sha256:ac90c3f45ab69180d16fec5f899c6f0c922cabd6dd048e799640e0ebdf48ca95"
    },
    {
      "name": "kesko-tokens",
      "type": "skill-md",
      "description": "Design tokens from @kesko/tokens: the full token reference, output formats (CSS custom properties, SCSS, LESS, JS, ES module, TypeScript, JSON, iOS Swift, Android XML), and naming conventions. Covers every category — accent/bg/border/fill/overlay/status/text colors, brand colors, font family/weight/size/leading, layer (z-index), motion duration + easing, opacity, radius, shadow, size, space — plus the 120 primitive color palette tokens. Use this skill whenever the user picks a value for color, spacing, typography, radius, shadow, z-index, motion, or opacity in a Kesko project, reaches for a raw hex/px/rem value that should be a token, asks for the token name for a given CSS property, or is migrating hard-coded CSS values to --k-* variables. Also use when writing Style Dictionary YAML for tokens or mapping tokens to a non-web platform.",
      "files": [
        "SKILL.md"
      ],
      "url": "/.well-known/agent-skills/kesko-tokens/SKILL.md",
      "digest": "sha256:cf91143b79ed7b03dd571d2bcedcfd2027ce854d900a211eabd00cfdfad91a6a"
    },
    {
      "name": "kesko-themes",
      "type": "skill-md",
      "description": "Brand themes from @kesko/themes: per-brand CSS overrides layered on top of @kesko/tokens, one stylesheet per brand plus an auto-generated dark variant. Covers the 8 brands (kesko, k-ruoka, k-rauta, kespro, k-business, k-tools, k-auto, onninen), the ~21 themeable tokens (accent, text-on-surface, borders, fills, backgrounds, radii, button spacing), the dark-mode symmetry rule (step N → 1300−N, neutral → neutral-dark), and the theme YAML schema including `dark:` manual overrides. Use this skill whenever the user switches brands in a Kesko app, adds or edits a brand theme, asks how dark mode is derived, why a value differs between brands, how to add a new Kesko brand, or wants to preview a page in a specific brand. Also use when wiring <html data-theme> attributes or importing @kesko/themes CSS.",
      "files": [
        "SKILL.md"
      ],
      "url": "/.well-known/agent-skills/kesko-themes/SKILL.md",
      "digest": "sha256:4e41ea03057c346afddd0dfc259c8636e8fba223582d96d99f4b7fc6c174b115"
    },
    {
      "name": "kesko-components",
      "type": "skill-md",
      "description": "React component library @kesko/components (early alpha) built on react-aria-components, paired with plain-HTML examples styled by @kesko/css. Documents every shipped component — currently Button, Spinner, Stack, VisuallyHidden — with props, events, CSS custom properties, accessibility notes, and paired React + HTML examples. Use this skill whenever the user adds a Kesko Button/Spinner/Stack/VisuallyHidden to a project, asks about props, variants, sizes, loading states, href/anchor usage, event handlers, or CSS overrides for a Kesko component, wants to match a Kesko component in plain HTML, or is checking what components exist today. Also use when reviewing accessibility or keyboard behavior of a Kesko component.",
      "files": [
        "SKILL.md"
      ],
      "url": "/.well-known/agent-skills/kesko-components/SKILL.md",
      "digest": "sha256:1eb6cf0a371ef309a99896a2c44214376014ca8537ff8fdb99f6d67035b0835a"
    },
    {
      "name": "kesko-iconography",
      "type": "skill-md",
      "description": "Icon library @kesko/iconography: 372 SVG icons on a 24×24 grid with categories (action, attention, car, common, communication, grocery, hardware, kesko, location, navigation, people, shopping, social, sustainability, time) and searchable tags. Ships tree-shakeable React components (IconArrowDown, IconCart, …), an `<Icon name=\"…\" />` convenience wrapper, plain ES modules with SVG strings, and raw .svg files for SSR or direct embedding — with size, label, and color props plus proper aria-hidden / role=\"img\" defaults. Use this skill whenever the user wants a Kesko icon, asks what icons exist for a concept (arrow, cart, user, menu, chevron, …), picks between the React component and the raw SVG, wires accessibility labels, sizes an icon, or adds a new icon to the set. Also use when importing @kesko/iconography in React, Next.js, or a non-React project.",
      "files": [
        "SKILL.md"
      ],
      "url": "/.well-known/agent-skills/kesko-iconography/SKILL.md",
      "digest": "sha256:c6016ae41dcbe36205483217bb36766678fbfb2e7bd0adfc6a2a1a4bce850594"
    },
    {
      "name": "kesko-styles",
      "type": "skill-md",
      "description": "CSS framework @kesko/css: a single base stylesheet (kesko.min.css) bundling @kesko/tokens, @kesko/fonts, and k-prefixed Tailwind-style utility classes for colors, typography, spacing, gap, radius, and shadow, plus an optional add-on (components.min.css) with .k-button / .k-spinner / .k-stack / .k-visually-hidden for non-React consumers. Directional utilities use CSS logical properties for RTL. Use this skill whenever the user styles a Kesko UI in plain HTML or a non-React stack, reaches for a utility class like k-text-*, k-bg-*, k-p-*, k-gap-*, k-rounded-*, k-shadow-*, installs or imports @kesko/css, decides between the base-only bundle vs. the components add-on, or needs to match a Kesko component's look without using the React package.",
      "files": [
        "SKILL.md"
      ],
      "url": "/.well-known/agent-skills/kesko-styles/SKILL.md",
      "digest": "sha256:3f861e2ff8eb2e7ff48897cb512c5f6bd8deb057f13ddbda4f1c84c96bc6e732"
    }
  ]
}