From 8ceb56bf4280db16c545326a82fc0cc74dc5611e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Mon, 21 Sep 2026 11:27:38 +0200 Subject: [PATCH] Publish agent skills index and ARD manifest in docs (#3078) --- .changeset/docs-agent-discovery.md | 5 + docs/content/ui/getting-started/llms.mdx | 11 ++ docs/lib/agent-skills.ts | 45 ++++++++ docs/lib/agent-skills/tabler/SKILL.md | 103 ++++++++++++++++++ .../.well-known/agent-skills/index.json.ts | 16 +++ .../agent-skills/tabler/SKILL.md.ts | 14 +++ docs/pages/.well-known/ai-catalog.json.ts | 60 ++++++++++ docs/pages/llms.txt.ts | 2 + docs/vercel.json | 7 ++ 9 files changed, 263 insertions(+) create mode 100644 .changeset/docs-agent-discovery.md create mode 100644 docs/lib/agent-skills.ts create mode 100644 docs/lib/agent-skills/tabler/SKILL.md create mode 100644 docs/pages/.well-known/agent-skills/index.json.ts create mode 100644 docs/pages/.well-known/agent-skills/tabler/SKILL.md.ts create mode 100644 docs/pages/.well-known/ai-catalog.json.ts diff --git a/.changeset/docs-agent-discovery.md b/.changeset/docs-agent-discovery.md new file mode 100644 index 000000000..7c2caecfc --- /dev/null +++ b/.changeset/docs-agent-discovery.md @@ -0,0 +1,5 @@ +--- +"@tabler/docs": minor +--- + +Added an agent skill under `/.well-known/agent-skills/` and an `ai-catalog.json` manifest to the docs. diff --git a/docs/content/ui/getting-started/llms.mdx b/docs/content/ui/getting-started/llms.mdx index 2a4b80fb5..0ea874258 100644 --- a/docs/content/ui/getting-started/llms.mdx +++ b/docs/content/ui/getting-started/llms.mdx @@ -69,6 +69,17 @@ A short prompt is usually enough: Read https://docs.tabler.io/ui/components/card.md and build a card with a header, a footer and a table inside. ``` +## Agent skill + +Coding agents that support [Agent Skills](https://agentskills.io) can load a ready-made Tabler skill instead of a prompt. It tells the agent how to install Tabler, how a page is structured, where to read the markup of a component and which rules keep the output consistent. + +- `https://docs.tabler.io/.well-known/agent-skills/index.json` - the discovery index, per the [Agent Skills Discovery RFC](https://github.com/cloudflare/agent-skills-discovery-rfc). +- `https://docs.tabler.io/.well-known/agent-skills/tabler/SKILL.md` - the skill itself. + +To use it in a project, copy `SKILL.md` into your agent's skills directory, for example `.claude/skills/tabler/SKILL.md` for Claude Code. The index carries a `sha256` digest of the file, so a tool can check the copy is intact. + +The same resources are also listed in `https://docs.tabler.io/.well-known/ai-catalog.json`, an [Agentic Resource Discovery](https://agenticresourcediscovery.org) manifest that registries use to index a site. + ## Where the markup comes from The examples are taken from the rendered page, not from the documentation source. A `.md` file gives you the same markup as the copy button on the html page, with every icon and helper already expanded to plain html. diff --git a/docs/lib/agent-skills.ts b/docs/lib/agent-skills.ts new file mode 100644 index 000000000..09a76c906 --- /dev/null +++ b/docs/lib/agent-skills.ts @@ -0,0 +1,45 @@ +// The agent skills the docs publish under /.well-known/agent-skills/ (Agent +// Skills Discovery RFC 0.2.0, https://github.com/cloudflare/agent-skills-discovery-rfc). +// The markdown lives next to this file; the `${site.*}` tokens in it are resolved +// here so the skill and the rest of the docs quote the same urls and cdn version. +import { createHash } from 'node:crypto' +import { site } from '@shared/lib/site' +import { cdnPackageSnippet } from './cdn-snippets.ts' +import tablerSource from './agent-skills/tabler/SKILL.md?raw' + +export const AGENT_SKILLS_SCHEMA = 'https://schemas.agentskills.io/discovery/0.2.0/schema.json' + +const tokens: Record = { + '${site.docsUrl}': site.docsUrl, + '${site.cdnUrl}': site.cdnUrl, + '${site.previewUrl}': site.previewUrl, + // same tags as the docs and llms.txt, with the SRI attributes when the hashes are current + '${cdnPackageSnippet()}': cdnPackageSnippet(), +} + +const resolveTokens = (text: string) => Object.entries(tokens).reduce((result, [token, value]) => result.replaceAll(token, value), text) + +const frontmatterField = (text: string, field: string) => text.match(new RegExp(`^${field}:\\s*(.+)$`, 'm'))?.[1]?.trim() ?? '' + +export type AgentSkill = { + name: string + description: string + /** the exact bytes served at `url`; the digest is computed over them */ + content: string + url: string + digest: string +} + +const define = (source: string): AgentSkill => { + const content = resolveTokens(source) + const name = frontmatterField(content, 'name') + return { + name, + description: frontmatterField(content, 'description'), + content, + url: `/.well-known/agent-skills/${name}/SKILL.md`, + digest: `sha256:${createHash('sha256').update(content).digest('hex')}`, + } +} + +export const agentSkills: AgentSkill[] = [define(tablerSource)] diff --git a/docs/lib/agent-skills/tabler/SKILL.md b/docs/lib/agent-skills/tabler/SKILL.md new file mode 100644 index 000000000..f5214cdcf --- /dev/null +++ b/docs/lib/agent-skills/tabler/SKILL.md @@ -0,0 +1,103 @@ +--- +name: tabler +description: Build admin dashboards and app UIs with Tabler, the open source UI kit built on Bootstrap 5. Use when a project uses Tabler or @tabler/core, or when asked for a dashboard, admin panel, settings page, data table or form styled with Tabler. Covers installation, the page layout, where to read the real component markup and the rules that keep the output consistent. +--- + +# Tabler + +Tabler is a free, MIT-licensed UI kit for admin dashboards built on Bootstrap 5. It ships compiled CSS and JavaScript in the `@tabler/core` npm package, and every Bootstrap 5 class and JavaScript behaviour keeps working underneath it. + +## Read the docs, do not guess class names + +The documentation at ${site.docsUrl} is published for agents: + +- `${site.docsUrl}/llms.txt` lists every page with a one-line summary and a class reference for every component. Read it first to find the right page. +- Append `.md` to any docs url to get that page as markdown, for example `${site.docsUrl}/ui/components/card.md`. The file holds the prose and the exact markup of every example. +- `${site.docsUrl}/llms-full.txt` is the whole documentation in one file. + +Before writing markup for a component, fetch its `.md` page and copy the example that is closest to the task. Only use classes that appear in the docs or in Bootstrap 5. Do not invent `tabler-*` classes. + +## Install + +Plain HTML, from the CDN: + +```html +${cdnPackageSnippet()} +``` + +Put the stylesheet in `` and the script at the end of ``. When the tags carry `integrity` and `crossorigin` attributes, keep them unchanged; the hashes belong to this exact version. In a project with a bundler install the package and import the same files: + +```shell +npm install @tabler/core +``` + +```js +import '@tabler/core/dist/css/tabler.min.css' +import '@tabler/core/dist/js/tabler.min.js' +``` + +Optional plugin stylesheets live next to the core file: `tabler-flags.min.css`, `tabler-socials.min.css`, `tabler-payments.min.css`, `tabler-vendors.min.css`, `tabler-marketing.min.css`, `tabler-themes.min.css`. Framework guides for React, Vue, Next.js, Nuxt, Angular, SvelteKit, Astro, Laravel, Rails, Django and Symfony are at `${site.docsUrl}/ui/getting-started/frameworks`. + +## Page skeleton + +Every app page follows the same structure. `${site.docsUrl}/ui/layout/page-layouts.md` has the complete markup for the horizontal, vertical and combined navigation variants. + +```html +
+
+ +
+
+
+
+
+
+
Overview
+

Dashboard

+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+``` + +- A sidebar is `