From d1c464a9575b943d6dc89eb3a54574fa498f3422 Mon Sep 17 00:00:00 2001 From: Jayan Ratna Date: Tue, 17 Feb 2026 14:45:44 +1300 Subject: [PATCH 1/7] feat: add improved build system --- .../.gitignore | 1 + .../package.json | 25 ++ .../pnpm-lock.yaml | 342 ++++++++++++++++++ .../src/build.ts | 185 ++++++++++ .../src/config.ts | 33 ++ .../src/parser.ts | 182 ++++++++++ .../src/types.ts | 34 ++ .../src/validate.ts | 14 + .../tsconfig.json | 17 + 9 files changed, 833 insertions(+) create mode 100644 packages/blutui-project-guidelines-build/.gitignore create mode 100644 packages/blutui-project-guidelines-build/package.json create mode 100644 packages/blutui-project-guidelines-build/pnpm-lock.yaml create mode 100644 packages/blutui-project-guidelines-build/src/build.ts create mode 100644 packages/blutui-project-guidelines-build/src/config.ts create mode 100644 packages/blutui-project-guidelines-build/src/parser.ts create mode 100644 packages/blutui-project-guidelines-build/src/types.ts create mode 100644 packages/blutui-project-guidelines-build/src/validate.ts create mode 100644 packages/blutui-project-guidelines-build/tsconfig.json diff --git a/packages/blutui-project-guidelines-build/.gitignore b/packages/blutui-project-guidelines-build/.gitignore new file mode 100644 index 0000000..40b878d --- /dev/null +++ b/packages/blutui-project-guidelines-build/.gitignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/packages/blutui-project-guidelines-build/package.json b/packages/blutui-project-guidelines-build/package.json new file mode 100644 index 0000000..42a7b0f --- /dev/null +++ b/packages/blutui-project-guidelines-build/package.json @@ -0,0 +1,25 @@ +{ + "name": "blutui-project-guidelines-build", + "version": "1.0.0", + "description": "Build tooling for Blutui Project Guidelines skills", + "license": "MIT", + "keywords": [ + "blutui", + "guidelines", + "llm", + "agents", + "skills" + ], + "type": "module", + "scripts": { + "build": "pnpm build-agents", + "build-agents": "tsx src/build.ts", + "validate": "tsx src/validate.ts", + "dev": "pnpm build && pnpm validate" + }, + "devDependencies": { + "@types/node": "^25.2.3", + "tsx": "^4.21.0", + "typescript": "^5.9.3" + } +} diff --git a/packages/blutui-project-guidelines-build/pnpm-lock.yaml b/packages/blutui-project-guidelines-build/pnpm-lock.yaml new file mode 100644 index 0000000..b956d85 --- /dev/null +++ b/packages/blutui-project-guidelines-build/pnpm-lock.yaml @@ -0,0 +1,342 @@ +lockfileVersion: '9.0' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + +importers: + + .: + devDependencies: + '@types/node': + specifier: ^25.2.3 + version: 25.2.3 + tsx: + specifier: ^4.21.0 + version: 4.21.0 + typescript: + specifier: ^5.9.3 + version: 5.9.3 + +packages: + + '@esbuild/aix-ppc64@0.27.3': + resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [aix] + + '@esbuild/android-arm64@0.27.3': + resolution: {integrity: sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [android] + + '@esbuild/android-arm@0.27.3': + resolution: {integrity: sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==} + engines: {node: '>=18'} + cpu: [arm] + os: [android] + + '@esbuild/android-x64@0.27.3': + resolution: {integrity: sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [android] + + '@esbuild/darwin-arm64@0.27.3': + resolution: {integrity: sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [darwin] + + '@esbuild/darwin-x64@0.27.3': + resolution: {integrity: sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==} + engines: {node: '>=18'} + cpu: [x64] + os: [darwin] + + '@esbuild/freebsd-arm64@0.27.3': + resolution: {integrity: sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==} + engines: {node: '>=18'} + cpu: [arm64] + os: [freebsd] + + '@esbuild/freebsd-x64@0.27.3': + resolution: {integrity: sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==} + engines: {node: '>=18'} + cpu: [x64] + os: [freebsd] + + '@esbuild/linux-arm64@0.27.3': + resolution: {integrity: sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [linux] + + '@esbuild/linux-arm@0.27.3': + resolution: {integrity: sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==} + engines: {node: '>=18'} + cpu: [arm] + os: [linux] + + '@esbuild/linux-ia32@0.27.3': + resolution: {integrity: sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==} + engines: {node: '>=18'} + cpu: [ia32] + os: [linux] + + '@esbuild/linux-loong64@0.27.3': + resolution: {integrity: sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==} + engines: {node: '>=18'} + cpu: [loong64] + os: [linux] + + '@esbuild/linux-mips64el@0.27.3': + resolution: {integrity: sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==} + engines: {node: '>=18'} + cpu: [mips64el] + os: [linux] + + '@esbuild/linux-ppc64@0.27.3': + resolution: {integrity: sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [linux] + + '@esbuild/linux-riscv64@0.27.3': + resolution: {integrity: sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==} + engines: {node: '>=18'} + cpu: [riscv64] + os: [linux] + + '@esbuild/linux-s390x@0.27.3': + resolution: {integrity: sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==} + engines: {node: '>=18'} + cpu: [s390x] + os: [linux] + + '@esbuild/linux-x64@0.27.3': + resolution: {integrity: sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==} + engines: {node: '>=18'} + cpu: [x64] + os: [linux] + + '@esbuild/netbsd-arm64@0.27.3': + resolution: {integrity: sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==} + engines: {node: '>=18'} + cpu: [arm64] + os: [netbsd] + + '@esbuild/netbsd-x64@0.27.3': + resolution: {integrity: sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==} + engines: {node: '>=18'} + cpu: [x64] + os: [netbsd] + + '@esbuild/openbsd-arm64@0.27.3': + resolution: {integrity: sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openbsd] + + '@esbuild/openbsd-x64@0.27.3': + resolution: {integrity: sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [openbsd] + + '@esbuild/openharmony-arm64@0.27.3': + resolution: {integrity: sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openharmony] + + '@esbuild/sunos-x64@0.27.3': + resolution: {integrity: sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==} + engines: {node: '>=18'} + cpu: [x64] + os: [sunos] + + '@esbuild/win32-arm64@0.27.3': + resolution: {integrity: sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==} + engines: {node: '>=18'} + cpu: [arm64] + os: [win32] + + '@esbuild/win32-ia32@0.27.3': + resolution: {integrity: sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==} + engines: {node: '>=18'} + cpu: [ia32] + os: [win32] + + '@esbuild/win32-x64@0.27.3': + resolution: {integrity: sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==} + engines: {node: '>=18'} + cpu: [x64] + os: [win32] + + '@types/node@25.2.3': + resolution: {integrity: sha512-m0jEgYlYz+mDJZ2+F4v8D1AyQb+QzsNqRuI7xg1VQX/KlKS0qT9r1Mo16yo5F/MtifXFgaofIFsdFMox2SxIbQ==} + + esbuild@0.27.3: + resolution: {integrity: sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==} + engines: {node: '>=18'} + hasBin: true + + fsevents@2.3.3: + resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + + get-tsconfig@4.13.6: + resolution: {integrity: sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==} + + resolve-pkg-maps@1.0.0: + resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==} + + tsx@4.21.0: + resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==} + engines: {node: '>=18.0.0'} + hasBin: true + + typescript@5.9.3: + resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==} + engines: {node: '>=14.17'} + hasBin: true + + undici-types@7.16.0: + resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==} + +snapshots: + + '@esbuild/aix-ppc64@0.27.3': + optional: true + + '@esbuild/android-arm64@0.27.3': + optional: true + + '@esbuild/android-arm@0.27.3': + optional: true + + '@esbuild/android-x64@0.27.3': + optional: true + + '@esbuild/darwin-arm64@0.27.3': + optional: true + + '@esbuild/darwin-x64@0.27.3': + optional: true + + '@esbuild/freebsd-arm64@0.27.3': + optional: true + + '@esbuild/freebsd-x64@0.27.3': + optional: true + + '@esbuild/linux-arm64@0.27.3': + optional: true + + '@esbuild/linux-arm@0.27.3': + optional: true + + '@esbuild/linux-ia32@0.27.3': + optional: true + + '@esbuild/linux-loong64@0.27.3': + optional: true + + '@esbuild/linux-mips64el@0.27.3': + optional: true + + '@esbuild/linux-ppc64@0.27.3': + optional: true + + '@esbuild/linux-riscv64@0.27.3': + optional: true + + '@esbuild/linux-s390x@0.27.3': + optional: true + + '@esbuild/linux-x64@0.27.3': + optional: true + + '@esbuild/netbsd-arm64@0.27.3': + optional: true + + '@esbuild/netbsd-x64@0.27.3': + optional: true + + '@esbuild/openbsd-arm64@0.27.3': + optional: true + + '@esbuild/openbsd-x64@0.27.3': + optional: true + + '@esbuild/openharmony-arm64@0.27.3': + optional: true + + '@esbuild/sunos-x64@0.27.3': + optional: true + + '@esbuild/win32-arm64@0.27.3': + optional: true + + '@esbuild/win32-ia32@0.27.3': + optional: true + + '@esbuild/win32-x64@0.27.3': + optional: true + + '@types/node@25.2.3': + dependencies: + undici-types: 7.16.0 + + esbuild@0.27.3: + optionalDependencies: + '@esbuild/aix-ppc64': 0.27.3 + '@esbuild/android-arm': 0.27.3 + '@esbuild/android-arm64': 0.27.3 + '@esbuild/android-x64': 0.27.3 + '@esbuild/darwin-arm64': 0.27.3 + '@esbuild/darwin-x64': 0.27.3 + '@esbuild/freebsd-arm64': 0.27.3 + '@esbuild/freebsd-x64': 0.27.3 + '@esbuild/linux-arm': 0.27.3 + '@esbuild/linux-arm64': 0.27.3 + '@esbuild/linux-ia32': 0.27.3 + '@esbuild/linux-loong64': 0.27.3 + '@esbuild/linux-mips64el': 0.27.3 + '@esbuild/linux-ppc64': 0.27.3 + '@esbuild/linux-riscv64': 0.27.3 + '@esbuild/linux-s390x': 0.27.3 + '@esbuild/linux-x64': 0.27.3 + '@esbuild/netbsd-arm64': 0.27.3 + '@esbuild/netbsd-x64': 0.27.3 + '@esbuild/openbsd-arm64': 0.27.3 + '@esbuild/openbsd-x64': 0.27.3 + '@esbuild/openharmony-arm64': 0.27.3 + '@esbuild/sunos-x64': 0.27.3 + '@esbuild/win32-arm64': 0.27.3 + '@esbuild/win32-ia32': 0.27.3 + '@esbuild/win32-x64': 0.27.3 + + fsevents@2.3.3: + optional: true + + get-tsconfig@4.13.6: + dependencies: + resolve-pkg-maps: 1.0.0 + + resolve-pkg-maps@1.0.0: {} + + tsx@4.21.0: + dependencies: + esbuild: 0.27.3 + get-tsconfig: 4.13.6 + optionalDependencies: + fsevents: 2.3.3 + + typescript@5.9.3: {} + + undici-types@7.16.0: {} diff --git a/packages/blutui-project-guidelines-build/src/build.ts b/packages/blutui-project-guidelines-build/src/build.ts new file mode 100644 index 0000000..8144ab2 --- /dev/null +++ b/packages/blutui-project-guidelines-build/src/build.ts @@ -0,0 +1,185 @@ +#!/usr/bin/env node + +import { readdir, readFile, writeFile } from 'fs/promises' +import { join } from 'path' + +import { SKILLS, DEFAULT_SKILL, SkillConfig } from './config' +import { parseRuleFile, RuleFile } from './parser' +import { Section } from './types' + +const args = process.argv.slice(2) +const upgradeVersion = args.includes('--upgrade-version') +const skillArg = args.find((arg) => arg.startsWith('--skill=')) +const skillName = skillArg ? skillArg.split('=')[1] : null +const buildAll = args.includes('--all') + +function generateMarkdown( + sections: Section[], + metadata: { + version: string + organization: string + date: string + }, + skillConfig: SkillConfig +): string { + let md = `# ${skillConfig.title}\n\n` + md += `**Version ${metadata.version}** \n` + md += `${metadata.organization} \n` + md += `${metadata.date}\n\n` + md += `---\n\n` + md += `---\n\n` + md += `## Table of Contents\n\n` + + sections.forEach((section) => { + md += `${section.number}. [${section.title}](#${section.number}-${section.title.toLowerCase().replace(/\s+/g, '-')}) - **${section.impact}**\n` + + section.rules.forEach((rule) => { + const anchor = `${rule.id} ${rule.title}` + .toLowerCase() + .replace(/\s+/g, '-') + .replace(/[^\w-]/g, '') + + md += ` - ${rule.id} [${rule.title}](#${anchor})\n` + }) + }) + + md += `\n---\n\n` + + sections.forEach((section) => { + md += `## ${section.number}. ${section.title}\n\n` + md += `**Impact: ${section.impact}**\n\n` + + section.rules.forEach((rule) => { + md += `### ${rule.id} ${rule.title}\n\n` + md += `**Impact: ${rule.impact}**\n\n` + md += `${rule.explanation}\n\n` + + rule.examples.forEach((example) => { + // Only generate code block if there's actual code + if (example.code && example.code.trim()) { + md += `\`\`\`${example.language || 'canvas'}\n` + } + + if (example.additionalText) { + md += `${example.additionalText}\n\n` + } + }) + }) + + md += `---\n\n` + }) + + return md +} + +async function buildSkill(skillConfig: SkillConfig) { + console.log(`\nBuilding ${skillConfig.name}...`) + console.log(` Rules directory: ${skillConfig.rulesDir}`) + console.log(` Output file: ${skillConfig.outputFile}`) + + const files = await readdir(skillConfig.rulesDir) + const ruleFiles = files + .filter((f) => f.endsWith('.md') && !f.startsWith('_') && f !== 'README.md') + .sort() + + const ruleData: RuleFile[] = [] + for (const file of ruleFiles) { + const filePath = join(skillConfig.rulesDir, file) + try { + const parsed = await parseRuleFile(filePath, skillConfig.sectionMap) + ruleData.push(parsed) + } catch (error) { + console.error(` Error parsing ${file}:`, error) + } + } + + const sectionsMap = new Map() + + ruleData.forEach(({ section, rule }) => { + if (!sectionsMap.has(section)) { + sectionsMap.set(section, { + number: section, + title: `Section ${section}`, + impact: rule.impact, + rules: [], + }) + } + sectionsMap.get(section)!.rules.push(rule) + }) + + sectionsMap.forEach((section) => { + section.rules.sort((a, b) => + a.title.localeCompare(b.title, 'en-US', { sensitivity: 'base' }) + ) + + section.rules.forEach((rule, index) => { + rule.id = `${section.number}.${index + 1}` + rule.subsection = index + 1 + }) + }) + + const sections = Array.from(sectionsMap.values()).sort( + (a, b) => a.number - b.number + ) + + const sectionsFile = join(skillConfig.rulesDir, '_sections.md') + try { + const sectionsContent = await readFile(sectionsFile, 'utf-8') + + const sectionBlocks = sectionsContent + .split(/(?=^## \d+\. )/m) + .filter(Boolean) + + for (const block of sectionBlocks) { + const headerMatch = block.match(/^## (\d+)\.\s+(.+?)(?:\s+\([^)]+\))?$/m) + if (!headerMatch) continue + + const sectionNumber = parseInt(headerMatch[1]) + const sectionTitle = headerMatch[2].trim() + + const section = sections.find((s) => s.number === sectionNumber) + if (section) { + section.title = sectionTitle + } + } + } catch (error) { + console.warn(' Warning: Could not read _sections.md, using defaults') + } + + let metadata + metadata = { + version: '1.0.0', + organization: 'Blutui', + date: new Date().toLocaleDateString('en-US', { + month: 'long', + year: 'numeric', + }), + } + + const markdown = generateMarkdown(sections, metadata, skillConfig) + + await writeFile(skillConfig.outputFile, markdown, 'utf-8') + + console.log( + ` Built AGENTS.md with ${sections.length} sections and ${ruleData.length} rules` + ) +} + +async function build() { + try { + console.log('Building AGENTS.md from rules...') + + if (buildAll) { + } else if (skillName) { + } else { + await buildSkill(SKILLS[DEFAULT_SKILL]) + } + + console.log('\nBuild complete ✓') + } catch (error) { + console.error('Build failed:', error) + process.exit(1) + } +} + +build() diff --git a/packages/blutui-project-guidelines-build/src/config.ts b/packages/blutui-project-guidelines-build/src/config.ts new file mode 100644 index 0000000..787341f --- /dev/null +++ b/packages/blutui-project-guidelines-build/src/config.ts @@ -0,0 +1,33 @@ +import { dirname, join } from 'path' +import { fileURLToPath } from 'url' + +const __dirname = dirname(fileURLToPath(import.meta.url)) + +export const SKILLS_DIR = join(__dirname, '../../..', 'skills') +export const BUILD_DIR = join(__dirname, '..') + +export interface SkillConfig { + name: string + title: string + description: string + skillDir: string + rulesDir: string + outputFile: string + sectionMap: Record +} + +export const SKILLS: Record = { + 'blutui-project-guidelines': { + name: 'blutui-project-guidelines', + title: 'Blutui Project Guidelines', + description: 'Blutui project codebase guidelines', + skillDir: join(SKILLS_DIR, 'blutui-project-guidelines'), + rulesDir: join(SKILLS_DIR, 'blutui-project-guidelines/rules'), + outputFile: join(SKILLS_DIR, 'blutui-project-guidelines/AGENTS.md'), + sectionMap: { + foundation: 1, + }, + }, +} + +export const DEFAULT_SKILL = 'blutui-project-guidelines' diff --git a/packages/blutui-project-guidelines-build/src/parser.ts b/packages/blutui-project-guidelines-build/src/parser.ts new file mode 100644 index 0000000..0804d06 --- /dev/null +++ b/packages/blutui-project-guidelines-build/src/parser.ts @@ -0,0 +1,182 @@ +import { basename } from 'path' +import { Example, ImpactLevel, Rule } from './types' +import { readFile } from 'fs/promises' + +export interface RuleFile { + section: number + subsection?: number + rule: Rule +} + +export async function parseRuleFile( + filePath: string, + sectionMap?: Record +): Promise { + const rawContent = await readFile(filePath, 'utf-8') + const content = rawContent.replace(/\r\n/g, '\n') + const lines = content.split('\n') + + let frontmatter: Record = {} + let contentStart = 0 + + if (content.startsWith('---')) { + const frontmatterEnd = content.indexOf('---', 3) + if (frontmatterEnd !== -1) { + const frontmatterText = content.slice(3, frontmatterEnd).trim() + frontmatterText.split('\n').forEach((line) => { + const [key, ...valueParts] = line.split(':') + if (key && valueParts.length) { + const value = valueParts.join(':').trim() + frontmatter[key.trim()] = value.replace(/^["']|["']$/g, '') + } + }) + contentStart = frontmatterEnd + 3 + } + } + + const ruleContent = content.slice(contentStart).trim() + const ruleLines = ruleContent.split('\n') + + let title = '' + let titleLine = 0 + for (let i = 0; i < ruleLines.length; i++) { + if (ruleLines[i].startsWith('##')) { + title = ruleLines[i].replace(/^##+\s*/, '').trim() + titleLine = i + break + } + } + + let impact: Rule['impact'] = 'MEDIUM' + let impactDescription = '' + let explanation = '' + let examples: Rule['examples'] = [] + let reference: string[] = [] + + let currentExample: Example | null = null + let inCodeBlock = false + let codeBlockLanguage = 'canvas' + let codeBlockContent: string[] = [] + let afterCodeBlock = false + let additionalText: string[] = [] + let hasCodeBlockForCurrentExample = false + + for (let i = titleLine + 1; i < ruleLines.length; i++) { + const line = ruleLines[i] + + if (line.includes('**Impact:')) { + const match = line.match( + /\*\*Impact:\s*(\w+(?:-\w+)?)\s*(?:\(([^)]+)\))?/i + ) + if (match) { + impact = match[1].toUpperCase().replace(/-/g, '-') as ImpactLevel + impactDescription = match[2] || '' + } + continue + } + + // Code block start + if (line.startsWith('```')) { + if (inCodeBlock) { + console.log(codeBlockContent) + // End of code block + if (currentExample) { + currentExample.code = codeBlockContent.join('\n') + currentExample.language = codeBlockLanguage + } + codeBlockContent = [] + inCodeBlock = false + afterCodeBlock = true + } else { + // Start of code block + inCodeBlock = true + hasCodeBlockForCurrentExample = true + codeBlockLanguage = line.slice(3).trim() || 'typescript' + codeBlockContent = [] + afterCodeBlock = false + } + continue + } + + if (inCodeBlock) { + codeBlockContent.push(line) + continue + } + + // Example label (Incorrect, Correct, Example, Usage, Implementation, etc.) + // Match pattern: **Label:** or **Label (description):** at end of line + // This distinguishes example labels from inline bold text like "**Trade-off:** some text" + const labelMatch = line.match(/^\*\*([^:]+?):\*?\*?$/) + if (labelMatch) { + const fullLabel = labelMatch[1].trim() + // Try to extract description from parentheses if present (handles simple cases) + // For nested parentheses, we keep the full label + const descMatch = fullLabel.match( + /^([A-Za-z]+(?:\s+[A-Za-z]+)*)\s*\(([^()]+)\)$/ + ) + currentExample = { + label: descMatch ? descMatch[1].trim() : fullLabel, + description: descMatch ? descMatch[2].trim() : undefined, + code: '', + language: codeBlockLanguage, + } + continue + } + + // Regular text (explanation or additional context after examples) + if (line.trim() && !line.startsWith('#')) { + if (!currentExample && !inCodeBlock) { + // Main explanation before any examples + explanation += (explanation ? '\n\n' : '') + line + } else if ( + currentExample && + (afterCodeBlock || !hasCodeBlockForCurrentExample) + ) { + // Text after a code block, or text in a section without a code block + // (e.g., "When NOT to use this pattern:" with bullet points instead of code) + additionalText.push(line) + } + } + } + + // Handle last example if still open + if (currentExample) { + if (additionalText.length > 0) { + currentExample.additionalText = additionalText.join('\n\n') + } + examples.push(currentExample) + } + + const filename = basename(filePath) + + const filenameParts = filename.replace('.md', '').split('-') + let section = 0 + + for (let len = filenameParts.length; len > 0; len--) { + const prefix = filenameParts.slice(0, len).join('-') + if (sectionMap && sectionMap[prefix] !== undefined) { + section = sectionMap[prefix] + break + } + } + + const rule: Rule = { + id: '', + title: frontmatter.title || title, + section, + subsection: undefined, + impact: frontmatter.impact || impact, + impactDescription: frontmatter.impactDescription || impactDescription, + explanation: frontmatter.explanation || explanation.trim(), + examples, + tags: frontmatter.tags + ? frontmatter.tags.split(',').map((t: string) => t.trim()) + : undefined, + } + + return { + section, + subsection: 0, + rule, + } +} diff --git a/packages/blutui-project-guidelines-build/src/types.ts b/packages/blutui-project-guidelines-build/src/types.ts new file mode 100644 index 0000000..3344675 --- /dev/null +++ b/packages/blutui-project-guidelines-build/src/types.ts @@ -0,0 +1,34 @@ +export type ImpactLevel = + | 'CRITICAL' + | 'HIGH' + | 'MEDIUM-HIGH' + | 'MEDIUM' + | 'LOW-MEDIUM' + | 'LOW' + +export interface Example { + label: string + description?: string + code: string + language?: string + additionalText?: string +} + +export interface Rule { + id: string + title: string + section: number + subsection?: number + impact: ImpactLevel + impactDescription?: string + explanation: string + examples: Example[] + tags?: string[] +} + +export interface Section { + number: number + title: string + impact: ImpactLevel + rules: Rule[] +} diff --git a/packages/blutui-project-guidelines-build/src/validate.ts b/packages/blutui-project-guidelines-build/src/validate.ts new file mode 100644 index 0000000..55a2224 --- /dev/null +++ b/packages/blutui-project-guidelines-build/src/validate.ts @@ -0,0 +1,14 @@ +#!/usr/bin/env node + +async function validate() { + try { + console.log('Validating rule files...') + + console.log('\nAll rule files are valid ✓') + } catch (error) { + console.error('Validation failed:', error) + process.exit(1) + } +} + +validate() diff --git a/packages/blutui-project-guidelines-build/tsconfig.json b/packages/blutui-project-guidelines-build/tsconfig.json new file mode 100644 index 0000000..ee20039 --- /dev/null +++ b/packages/blutui-project-guidelines-build/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "es2020", + "module": "esnext", + "lib": ["es2022"], + "moduleResolution": "node", + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "outDir": "./dist", + "rootDir": "./src" + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "dist"] +} From e94dd0f971c15a1c31840e57c837f5718859a66b Mon Sep 17 00:00:00 2001 From: Jayan Ratna Date: Tue, 17 Feb 2026 14:46:37 +1300 Subject: [PATCH 2/7] feat: add improved build system --- .github/build-agents-md/build.js | 48 --- .github/build-agents-md/main.js | 74 ---- .github/workflows/build-agents-rule-file.yml | 57 +-- .gitignore | 1 + .vscode/extensions.json | 3 + .vscode/settings.json | 11 + CLAUDE.md | 1 + skills/blutui-project-guidelines/AGENTS.md | 344 ++++++++++++++++++ .../rules/_sections.md | 10 +- .../rules/{_templates.md => _template.md} | 4 +- .../rules/{foundation-form.md => forms.md} | 0 .../rules/foundation-configuration.md | 19 +- ...ion-route-pattern.md => route-patterns.md} | 0 13 files changed, 410 insertions(+), 162 deletions(-) delete mode 100644 .github/build-agents-md/build.js delete mode 100644 .github/build-agents-md/main.js create mode 100644 .gitignore create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json create mode 120000 CLAUDE.md create mode 100644 skills/blutui-project-guidelines/AGENTS.md rename skills/blutui-project-guidelines/rules/{_templates.md => _template.md} (63%) rename skills/blutui-project-guidelines/rules/{foundation-form.md => forms.md} (100%) rename skills/blutui-project-guidelines/rules/{foundation-route-pattern.md => route-patterns.md} (100%) diff --git a/.github/build-agents-md/build.js b/.github/build-agents-md/build.js deleted file mode 100644 index 87bc3b6..0000000 --- a/.github/build-agents-md/build.js +++ /dev/null @@ -1,48 +0,0 @@ -#!/usr/bin/env node - -const fs = require('fs'); -const path = require('path'); -const { getMetadataContent, getRulesContent } = require('./main.js'); - -function buildAgentsMd() { - try { - console.log('Starting AGENTS.md build process...\n'); - - const rootDir = path.join(__dirname, '../..'); - const skillPath = path.join(rootDir, 'skills/blutui-project-guidelines'); - const rulesPath = path.join(skillPath, '/rules'); - const rootAgentsMdPath = path.join(rootDir, 'AGENTS.md'); - - console.log('Step 1: Generating metadata content...'); - let agentsContent = getMetadataContent(skillPath); - - console.log('\nStep 2: Adding rules content...'); - const rulesContent = getRulesContent(rulesPath); - agentsContent += '\n\n' + rulesContent; - - console.log('\nStep 3: Writing AGENTS.md to root directory...'); - const agentsExists = fs.existsSync(rootAgentsMdPath); - fs.writeFileSync(rootAgentsMdPath, agentsContent, 'utf8'); - console.log(`AGENTS.md ${agentsExists ? 'updated' : 'created'} at ${rootAgentsMdPath}`); - - console.log('\nBuild completed successfully!\n'); - - console.log('Summary:'); - console.log(` - AGENTS.md: ${rootAgentsMdPath}`); - console.log(` - Total size: ${(agentsContent.length / 1024).toFixed(2)} KB\n`); - - return 0; - - } catch (error) { - console.error('\nBuild failed:', error.message); - console.error(error.stack); - return 1; - } -} - -if (require.main === module) { - const exitCode = buildAgentsMd(); - process.exit(exitCode); -} - -module.exports = { buildAgentsMd }; diff --git a/.github/build-agents-md/main.js b/.github/build-agents-md/main.js deleted file mode 100644 index 8cab43e..0000000 --- a/.github/build-agents-md/main.js +++ /dev/null @@ -1,74 +0,0 @@ -const fs = require('fs'); -const path = require('path'); - -function getMetadataContent(skillPath) { - const metadataPath = path.join(skillPath, 'metadata.json'); - - if (!fs.existsSync(metadataPath)) { - throw new Error(`Metadata file not found at ${metadataPath}`); - } - - const metadata = JSON.parse(fs.readFileSync(metadataPath, 'utf8')); - - let agentsContent = `# ${metadata.title}\n\n`; - - if (metadata.abstract) { - agentsContent += `${metadata.abstract}\n\n`; - } - - agentsContent += `* Version: ${metadata.version}\n`; - agentsContent += `* Organization: ${metadata.organization}\n`; - agentsContent += `* Date: ${metadata.date}\n`; - - if (metadata.references && metadata.references.length > 0) { - agentsContent += '* References:\n'; - metadata.references.forEach(ref => { - agentsContent += ` - ${ref}\n`; - }); - agentsContent += '\n'; - } - - return agentsContent; -} - -function getRulesContent(rulesPath) { - const sectionPrefixMap = { - 'Foundation': 'foundation', - 'Model Context Protocol (MCP)': 'mcp', - 'Canvas': 'canvas', - 'Courier': 'courier', - 'Cassettes': 'cassettes', - 'Collections': 'collections', - 'Canopy': 'canopy' - }; - - const sections = Object.keys(sectionPrefixMap); - - let rulesContent = ""; - - const allFiles = fs.readdirSync(rulesPath) - .filter(file => file.endsWith('.md') && !file.startsWith('_') ); - - sections.forEach(sectionName => { - const prefix = sectionPrefixMap[sectionName]; - if (!prefix) return; - - const sectionFiles = allFiles.filter(file => file.startsWith(prefix)); - - if (sectionFiles.length > 0) { - sectionFiles.forEach(file => { - const filePath = path.join(rulesPath, file); - const content = fs.readFileSync(filePath, 'utf8'); - rulesContent += content + '\n\n'; - // rulesContent += `\n\n`; - }); - } - }); - - return rulesContent; -} - -module.exports = { - getMetadataContent, - getRulesContent -}; diff --git a/.github/workflows/build-agents-rule-file.yml b/.github/workflows/build-agents-rule-file.yml index 9b17e11..98a29ca 100644 --- a/.github/workflows/build-agents-rule-file.yml +++ b/.github/workflows/build-agents-rule-file.yml @@ -1,37 +1,46 @@ -name: Build AGENTS.md Rule File +name: Blutui Project Guidelines CI on: - workflow_dispatch: push: - branches: - - main + branches: [main] paths: - - 'skills/**/rules/**' + - "skills/blutui-project-guidelines/**" + - "packages/blutui-project-guidelines-build/**" + pull_request: + branches: [main] + paths: + - "skills/blutui-project-guidelines/**" + - "packages/blutui-project-guidelines-build/**" jobs: - build-agents-rule-file: + validate: runs-on: ubuntu-latest - permissions: - contents: write - + + defaults: + run: + working-directory: packages/blutui-project-guidelines-build + steps: - - name: Checkout repository + - name: Checkout uses: actions/checkout@v4 + + - name: Setup PNPM + uses: pnpm/action-setup@v2 with: - token: ${{ secrets.GITHUB_TOKEN }} - + version: 10.24.0 + - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version: '20' - - - name: Build AGENTS.md - run: | - node .github/build-agents-md/build.js - - - name: Commit and push if changed - run: | - git config --local user.email "github-actions[bot]@users.noreply.github.com" - git config --local user.name "github-actions[bot]" - git add AGENTS.md - git diff --quiet && git diff --staged --quiet || (git commit -m "chore: auto-update AGENTS.md" && git push) \ No newline at end of file + node-version: "20" + cache: "pnpm" + cache-dependency-path: packages/blutui-project-guidelines-build/pnpm-lock.yaml + + - name: Install Dependencies + run: pnpm install + + - name: Validate Guidelines + run: pnpm validate + + - name: Build Guidelines + run: pnpm build diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..c83e263 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["esbenp.prettier-vscode"] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..03c4e4f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,11 @@ +{ + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "explorer.fileNesting.enabled": true, + + // Prettier Config... + "prettier.trailingComma": "es5", + "prettier.tabWidth": 2, + "prettier.singleQuote": true, + "prettier.semi": false +} diff --git a/CLAUDE.md b/CLAUDE.md new file mode 120000 index 0000000..47dc3e3 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1 @@ +AGENTS.md \ No newline at end of file diff --git a/skills/blutui-project-guidelines/AGENTS.md b/skills/blutui-project-guidelines/AGENTS.md new file mode 100644 index 0000000..4beee38 --- /dev/null +++ b/skills/blutui-project-guidelines/AGENTS.md @@ -0,0 +1,344 @@ +# Blutui Project Guidelines + +**Version 1.0.0** +Blutui +February 2026 + +--- + +--- + +## Table of Contents + +0. [Section 0](#0-section-0) - **MEDIUM** + - 0.1 [Blutui Form standards and examples](#01-blutui-form-standards-and-examples) + - 0.2 [Blutui MCP](#02-blutui-mcp) + - 0.3 [Canopy](#03-canopy) + - 0.4 [Canvas - Template Engine](#04-canvas---template-engine) + - 0.5 [Cassettes](#05-cassettes) + - 0.6 [Collections](#06-collections) + - 0.7 [Courier](#07-courier) + - 0.8 [Routing Pattern Standard](#08-routing-pattern-standard) +1. [Foundation](#1-foundation) - **CRITICAL** + - 1.1 [Configuration](#11-configuration) + - 1.2 [File structure](#12-file-structure) + - 1.3 [Layouts and Templates](#13-layouts-and-templates) + +--- + +## 0. Section 0 + +**Impact: MEDIUM** + +### 0.1 Blutui Form standards and examples + +**Impact: MEDIUM** + +Ensure your `views` directory is organized as follows: + +- `views/` + + - `components/` + + - `form.html` (Macro definitions) + + - `forms/` + + - `contact.html` (Form implementation) + +- **Allowed Types:** "text", "textarea", "radio", "select", "checkbox", "url", "email", "phone", "hidden", "time", "date", "number" + +- Do not attempt to use custom field types. If a type is not on this list, default to `text` and notify the user. + +- Always transmit field types to the MCP in lowercase format. + +Reference: [Link to documentation](https://dev.blutui.com/guides/create-form) + +### 0.2 Blutui MCP + +**Impact: MEDIUM** + +- The `list_*` tools (such as `list_pages`, `list_forms`, etc.) can be used to list all the different resources available within the project. + +- The `retrieve_*` tools (such as `retrieve_page`, `retrieve_forms`, etc.) can be used to retrieve a single resources within the project. + +- The `create_*` tools (such as `create_page`, `create_form`, etc.) can be used to create new resources within the project. + +When creating a new page, the agent must follow this exact sequence: + +1. **Create the layout file** in `views/layouts/` (e.g., `views/layouts/about.html`). The layout should extend a template and include components. + +2. **Run `list_pages`** to check for existing pages and avoid duplicates. + +3. **Use the `create_page` MCP tool** to register the page in the Blutui dashboard, setting the layout path relative to `views/` (e.g., `layouts/about.html`). + +The agent must never skip the MCP step. A layout file without a corresponding page in the dashboard will not be accessible on the site. + +- Blutui Courier MCP comes with a powerful `search_blutui_documentation` tool you should use before any other approaches. + +- You must use this tool to search the Blutui documentation before falling back to other approaches. + +- Search the documentation before making code changes to ensure we are taking the correct approach. + +- **Pre-flight Check:** For the `create_page`, `create_form` or `create_menu` tool, always execute the corresponding `list_*` tool first. + +- **Validation:** Compare the user's desired `handle` against the `handle` properties in the retrieved list. + +- **Error Prevention:** If a match is found, do not call the creation tool. Instead, notify the user of the conflict. + +- **Offline Mode:** If the `blutui` MCP tools are unreachable, you must ask the user for the specific `handle` property in the before suggesting a configuration. + +Reference: + +- [Link to documentation - Connect to Blutui MCP](https://docs.blutui.com/docs/getting-started/agentic-development) + +- [Link to documentation - Connect to Figma MCP](https://dev.blutui.com/guides/figma-to-blutui) + +### 0.3 Canopy + +**Impact: MEDIUM** + +Canopy is Blutui's in-page editor that enables developers to construct the website's structure and allow content managers to edit pages directly within the interface. + +Canopy functions enable a developer to add editing capabilities for a variety of elements in a project. For example editing text, lists, images, videos, buttons, audios and headings. + +Use the search_blutui_documentation mcp tool to access the canopy functions that can be used in a project. + +Reference: [Link to documentation](https://docs.blutui.com/docs/canopy/getting-started) + +### 0.4 Canvas - Template Engine + +**Impact: MEDIUM** + +Canvas serves as the template engine for Blutui, combining HTML, CSS, and JavaScript with unique Canvas logic to create fully customized project designs. + +- The template is a regular text file. It can generate any text-based format (HTML, XML, CSV, LaTeX, etc.). The file extension is ".canvas". + +- A template contains variables, tags, filters, functions, tests, expressions and other templating festures, which get replaced with values when the template is evaluated, and tags, which control the template's logic. + +**Example** + +- There are two kinds of delimiters: + + - {% ... %}: Used for executing statements. + + - {{ ... }} : Used for printing values to the rendered page. + +The `include` function is useful to include a template and return the rendered content of that template into the current one. + +Included templates automatically inherit the data context of their parent. This ensures that any variables defined in your main template are immediately accessible within the included file without extra configuration. + +Templates in subdirectories can be accessed with a slash: + +Use `include` to pull reusable components from the `views/components/` directory into layouts: + +Blocks are used for inheritance and act as placeholders and replacements at the same time. + +A block provides a way to change how a certain part of a template is rendered but it does not interfere in any way with the logic around it. + +Canvas allows to add the name of the block after the end tag for better readability. + +**Example:** Incorrect way to use blocks + +**Example:** Correct way to use blocks + +A child template looks like this + +A parent template looks like this + +**Example:** a block included within an if statement + +Maximize your workflow with template inheritance. Instead of duplicating code, build a single base template for common site features in `views/templates/defualt.html`. Use `blocks` to define areas where child templates can inject specific content, ensuring a consistent structure across every page. + +**Example**: Define a base.html template for a two-column page. + +In this example, the block tags define four blocks that child templates can fill in. All the block tag does is to tell the template engine that a child template may override those portions of the template. + +A child template might look like this: + +The `extends` tag can be used to extend a template from another one. Canvas does not support multiple inheritance. + +- Use the search_blutui_documentation tool in Blutui MCP to find more information on available tags, filters, functions, tests, expressions and other templating festures. + +Always follow the 3-tier pattern when building pages: + +1. **Template** (`templates/default.html`) — Defines the overall HTML structure with `block` placeholders. + +2. **Layout** (`layouts/about.html`) — Extends the template using `{% extends %}`, fills `block` content, and includes components. + +3. **Component** (`components/hero.html`) — A reusable UI fragment included via `{{ include() }}`. + +**Example:** Complete 3-tier composition + +Template (`views/templates/default.html`): + +Component (`views/components/hero.html`): + +Layout (`views/layouts/about.html`): + +Reference: [Link to documentation](https://dev.blutui.com/guides/what-is-blutui-canvas) + +### 0.5 Cassettes + +**Impact: MEDIUM** + +Blutui Cassettes function as a version control system for your front-end logic, allowing you to manage and toggle between various website designs within a single project. + +Each project can have multiple cassettes. + +To switch cassettes, update the cassette property within the `courier.json` file. If this property is missing or undefined, prompt the user to provide the specific cassette handle. + +Reference: [Link to documentation](https://dev.blutui.com/docs/cassettes/getting-started) + +### 0.6 Collections + +**Impact: MEDIUM** + +Collections are the primary method for managing structured data within Blutui that define reusable data schemas using a wide range of field types. + +- Unique handles are mandatory for all collections. The agent must validate handle availability before initiating the creation process. + +- The available field types are: "text", "textarea", "richtext", "checkbox", "radio", "select", "email", "phone", "url", "date", "time", "date-time", "color", "file", "number" + +- Do not add custom field types. + +Collections are designed for structured data modeling. Implement a Collection whenever you need to store multiple entries that share a consistent architecture (e.g., matching keys or data types) to ensure efficient querying and rendering. + +In the case, when a collection has a some connection to another collection, the agent can look into linking collections using the search_blutui_documentation mcp tool. + +To create, retreive and list collection or collection entries or links, the agent must utilize the tools present in Blutui MCP. + +Reference: [Link to documentation](https://dev.blutui.com/docs/collections/getting-started) + +### 0.7 Courier + +**Impact: MEDIUM** + +Courier is a command-line interface tool to interact with a project. It allows user's to easily push code to their project and pull code down to their machine. + +- Courier includes the Blutui MCP server that comes with powerful tools designed specifically for this project. + +Courier must be installed and configured on the user's machine to enable full functionality. `courier version` command can be used to check if the user has courier installed. + +Reference: [Link to documentation](https://dev.blutui.com/docs/courier/getting-started) + +### 0.8 Routing Pattern Standard + +**Impact: MEDIUM** + +The agent must pay attention to route patterns when the project would require to build many pages that will include more than one nested page. + +- A route pattern could include parameter(s) (e.g., `/team/:name`), which is accessed in code via `route.data.name`. + +- The supported parameter types: string, slug, date, time, number. + +- Each unique route pattern is mapped to a single template file. + +Route patterns can be utilised to filter collections as shown below: + +Use Blutui MCP tools to create, retreive and list route patterns. + +When using the create_route-pattern tool, the agent must use the list_route-patterns tool and determine a unique route pattern. + +Reference: [Link to documentation - How do I use route patterns in my project?](https://docs.blutui.com/guides/add-route-patterns) + +--- + +## 1. Foundation + +**Impact: CRITICAL** + +### 1.1 Configuration + +**Impact: CRITICAL** + +The handle is a required property in the `courier.json` file located in the root directory of the project. It specifies the unique identifier for the Blutui project. The agent must always prompt the user to provide the `handle` property. The agent must not attempt to guess or fabricate a handle. A missing handle could be one of the reasons for failure of Blutui mcp tool calls. + +The cassette specified in the `courier.json` file determines which version of the project is active. + +**Prior to making any changes to the `courier.json` file, the agent must confirm if the user has logged in using + +the command below and add the token.txt file to the root directory of the project. If the user has not done this, the agent must instruct the user to complete this step first.** + +**After making any changes to the `courier.json` file, the agent must instruct the user to restart the Blutui MCP server.** + +Reference: [Link to documentation](https://dev.blutui.com/docs/courier/configuration) + +### 1.2 File structure + +**Impact: MEDIUM** + +Store assets including compiled JS/CSS, images and static PDFs. + +This folder is the primary environment for UI development. Follow these sub-directory conventions: + +* "templates/": Has files with reusable design bases and system views. + + * "default.html": The foundational template for a Blutui project. This file forms the outermost structure of a Blutui project. It features essential sections like the head, where style definitions reside, and the body, where content gets placed. The most efficient way to build upon this file is by using inheritance, capitalising on the block tag. + + * "404.html": A template for handling "Page Not Found" errors. + +* "layouts/": The layouts folder is the **only** way to create pages in a project. Each layout file maps to a page registered via the Blutui dashboard or MCP tools. **Do not create a `pages/` directory.** All page content belongs in layout files. + +* "components/": Contains atomic, reusable UI fragments. Always create components for repeated UI elements (headers, footers, hero sections, CTAs, cards, etc.) and include them in layouts using `{{ include('components/filename.html') }}`. + +Develop the project using a **component-first approach**. Always break the UI into reusable components in `views/components/`. Include components in layouts using `{{ include() }}` and use `{% block %}` tags for template inheritance. This minimizes duplicate work and ensures design updates stay consistent across all project views. + +Hierarchy: + +* Parent: templates/default.html (Defines the overall structure). + +* Child: layouts/index.html (Extends the template and provides specific page content). + +To implement this, ensure the child layout file begins with the `{% extends 'templates/default.html' %}` declaration. Map your content to the parent's placeholders by wrapping your HTML in matching `block` names. Include reusable components within those blocks. + +Before generating any HTML or component code, the agent must detect the project's existing style system: + +1. Check for `tailwind.config.*` or `postcss.config.*` files in the project root. + +2. Check for CSS framework CDN links (e.g., Bootstrap, Bulma) in `views/templates/default.html`. + +3. Check for CSS files in the `/public` directory. + +- If a style system is found (e.g., TailwindCSS), **always use its utility classes and conventions** in all generated HTML and components. + +- If no style system is detected, **ask the user** which style approach they want before generating any HTML. + +- Never generate unstyled or bare HTML when a style system is available in the project. + +Reference: [Link to documentation](https://docs.blutui.com/docs/getting-started/folder-structure) + +### 1.3 Layouts and Templates + +**Impact: MEDIUM** + +- A template defines the overall structure of the project, including common elements like headers, footers, and navigation menus used to provide a consistent look and feel across multiple pages in a project. + +- A template can be extended by another template file but not a layout. + +- Layouts are the **only** way to create pages in Blutui. Each layout file in `views/layouts/` corresponds to a page created via the Blutui dashboard or MCP tools. + +- **Never create files in a `pages/` directory.** The `pages/` directory must be ignored entirely. All page content lives in layout files. + +- When using the `layout`, `template`, `post_layout` or `blog_layout` parameters in any Blutui MCP tool, make sure the layout file path is relative to the `views` directory (e.g., `layouts/about.html`, not `views/layouts/about.html`). + +- Always place layout files in the `views/layouts` directory. + +Follow these steps every time a new page is needed: + +1. **Check for the layouts folder:** If `views/layouts/` does not exist, create it. If it already exists, proceed. + +2. **Create the layout file:** Create a new `.html` file inside `views/layouts/` (e.g., `views/layouts/about.html`). + +3. **Extend a template:** The layout must extend a template using `{% extends 'templates/default.html' %}`. + +4. **Build with components:** Create reusable UI fragments in `views/components/` and include them in the layout using `{{ include('components/hero.html') }}`. + +5. **Register the page via MCP:** Use the Blutui MCP `create_page` tool to create the page in the dashboard, setting the layout path relative to `views/` (e.g., `layouts/about.html`). + +**Example:** A layout file at `views/layouts/about.html` + +Reference: [Link to documentation - How to create a Layout](https://docs.blutui.com/guides/create-layout) + +--- + diff --git a/skills/blutui-project-guidelines/rules/_sections.md b/skills/blutui-project-guidelines/rules/_sections.md index e2705f2..c03ec99 100644 --- a/skills/blutui-project-guidelines/rules/_sections.md +++ b/skills/blutui-project-guidelines/rules/_sections.md @@ -7,12 +7,12 @@ The section ID (in parentheses) is the filename prefix used to group rules. ## 1. Foundation -**Impact:** CRITICAL +**Impact:** CRITICAL **Description:** The essential configuration, file structure, and standards required for every Blutui project. ## 2. Model Context Protocol (MCP) -**Impact:** HIGH +**Impact:** HIGH **Description:** Standards and tooling for leveraging Blutui MCP to streamline development workflows and access project-specific resources. ## 3. Canvas @@ -22,12 +22,12 @@ The section ID (in parentheses) is the filename prefix used to group rules. ## 4. Courier -**Impact:** CRITICAL +**Impact:** CRITICAL **Description:** Command-line interface for pushing, pulling, and synchronizing project code with the Blutui platform. ## 5. Cassettes -**Impact:** LOW +**Impact:** LOW **Description:** Version control system for managing multiple project versions and environment configurations. ## 6. Collections @@ -38,4 +38,4 @@ The section ID (in parentheses) is the filename prefix used to group rules. ## 7. Canopy **Impact:** MEDIUM -**Description:** In-page editor integration for enabling content managers to edit text, images, and other elements directly in the browser. \ No newline at end of file +**Description:** In-page editor integration for enabling content managers to edit text, images, and other elements directly in the browser. diff --git a/skills/blutui-project-guidelines/rules/_templates.md b/skills/blutui-project-guidelines/rules/_template.md similarity index 63% rename from skills/blutui-project-guidelines/rules/_templates.md rename to skills/blutui-project-guidelines/rules/_template.md index fae559d..26870fe 100644 --- a/skills/blutui-project-guidelines/rules/_templates.md +++ b/skills/blutui-project-guidelines/rules/_template.md @@ -9,6 +9,4 @@ tags: tag1, tag2 Explanatory text with examples. -Reference: [Link to documentation](https://dev.blutui.com) - -or a list of links referencing Blutui documentation \ No newline at end of file +Reference: [Link to documentation or resource](https://example.com) diff --git a/skills/blutui-project-guidelines/rules/foundation-form.md b/skills/blutui-project-guidelines/rules/forms.md similarity index 100% rename from skills/blutui-project-guidelines/rules/foundation-form.md rename to skills/blutui-project-guidelines/rules/forms.md diff --git a/skills/blutui-project-guidelines/rules/foundation-configuration.md b/skills/blutui-project-guidelines/rules/foundation-configuration.md index a28cb8b..c596b7b 100644 --- a/skills/blutui-project-guidelines/rules/foundation-configuration.md +++ b/skills/blutui-project-guidelines/rules/foundation-configuration.md @@ -1,19 +1,22 @@ -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Configuration | CRITICAL | This configuration file is the core dependency for all Courier operations, Blutui MCP connectivity, and Cassette management. Loss or corruption will halt development workflows and severely degrade system performance. | config, handle, cassette, courier.json, login, mcp | +--- +title: Configuration +impact: CRITICAL +impactDescription: This configuration file is the core dependency for all Courier operations, Blutui MCP connectivity, and Cassette management. Loss or corruption will halt development workflows and severely degrade system performance. +tags: config, handle, cassette, courier.json, login, mcp +--- -## Configuration (`courier.json`) +## Configuring Courier The handle is a required property in the `courier.json` file located in the root directory of the project. It specifies the unique identifier for the Blutui project. The agent must always prompt the user to provide the `handle` property. The agent must not attempt to guess or fabricate a handle. A missing handle could be one of the reasons for failure of Blutui mcp tool calls. -The cassette specified in the `courier.json` file determines which version of the project is active. +The cassette specified in the `courier.json` file determines which version of the project is active. **Prior to making any changes to the `courier.json` file, the agent must confirm if the user has logged in using the command below and add the token.txt file to the root directory of the project. If the user has not done this, the agent must instruct the user to complete this step first.** -```bash +```bash courier login --token < token.txt -``` +``` ```json { @@ -22,6 +25,6 @@ courier login --token < token.txt } ``` -**After making any changes to the `courier.json` file, the agent must instruct the user to restart the Blutui MCP server.** +**After making any changes to the `courier.json` file, the agent must instruct the user to restart the Blutui MCP server.** Reference: [Link to documentation](https://dev.blutui.com/docs/courier/configuration) diff --git a/skills/blutui-project-guidelines/rules/foundation-route-pattern.md b/skills/blutui-project-guidelines/rules/route-patterns.md similarity index 100% rename from skills/blutui-project-guidelines/rules/foundation-route-pattern.md rename to skills/blutui-project-guidelines/rules/route-patterns.md From bda64f019bbd10e776e91817770c8314daead470 Mon Sep 17 00:00:00 2001 From: Jayan Ratna Date: Thu, 19 Feb 2026 13:57:34 +1300 Subject: [PATCH 3/7] fix: simplify build script --- .agents/skills/skill-creator/LICENSE.txt | 202 ++++++ .agents/skills/skill-creator/SKILL.md | 357 +++++++++++ .../references/output-patterns.md | 82 +++ .../skill-creator/references/workflows.md | 28 + .../skill-creator/scripts/init_skill.py | 303 +++++++++ .../skill-creator/scripts/package_skill.py | 110 ++++ .../skill-creator/scripts/quick_validate.py | 103 ++++ ...uild-agents-rule-file.yml => validate.yml} | 0 .gitignore | 4 +- AGENTS.md | 583 ------------------ CLAUDE.md | 1 - package.json | 11 + .../.gitignore | 1 - .../package.json | 25 - .../src/build.ts | 185 ------ .../src/config.ts | 33 - .../src/parser.ts | 182 ------ .../src/types.ts | 34 - .../src/validate.ts | 14 - .../pnpm-lock.yaml => pnpm-lock.yaml | 0 skills/blutui-project-guidelines/AGENTS.md | 577 +++++++++++------ skills/blutui-project-guidelines/README.md | 78 --- skills/blutui-project-guidelines/SKILL.md | 73 +-- .../blutui-project-guidelines/metadata.json | 10 - .../rules/_sections.md | 12 +- .../rules/_template.md | 12 - .../blutui-project-guidelines/rules/canopy.md | 9 +- .../rules/cassettes.md | 15 +- .../rules/collections.md | 15 +- .../rules/courier.md | 9 +- .../blutui-project-guidelines/rules/forms.md | 10 +- .../rules/foundation-configuration.md | 30 - .../rules/foundation-courier-configuration.md | 23 + .../rules/foundation-file-structure.md | 23 +- .../rules/foundation-templates-and-layouts.md | 11 +- skills/blutui-project-guidelines/rules/mcp.md | 11 +- .../rules/route-patterns.md | 9 +- .../rules/{canvas.md => templating-canvas.md} | 26 +- skills/blutui-project-guidelines/skill.json | 11 + src/build.ts | 383 ++++++++++++ src/config.ts | 6 + src/types.ts | 56 ++ .../tsconfig.json => tsconfig.json | 4 +- 43 files changed, 2199 insertions(+), 1472 deletions(-) create mode 100644 .agents/skills/skill-creator/LICENSE.txt create mode 100644 .agents/skills/skill-creator/SKILL.md create mode 100644 .agents/skills/skill-creator/references/output-patterns.md create mode 100644 .agents/skills/skill-creator/references/workflows.md create mode 100755 .agents/skills/skill-creator/scripts/init_skill.py create mode 100755 .agents/skills/skill-creator/scripts/package_skill.py create mode 100755 .agents/skills/skill-creator/scripts/quick_validate.py rename .github/workflows/{build-agents-rule-file.yml => validate.yml} (100%) delete mode 100644 AGENTS.md delete mode 120000 CLAUDE.md create mode 100644 package.json delete mode 100644 packages/blutui-project-guidelines-build/.gitignore delete mode 100644 packages/blutui-project-guidelines-build/package.json delete mode 100644 packages/blutui-project-guidelines-build/src/build.ts delete mode 100644 packages/blutui-project-guidelines-build/src/config.ts delete mode 100644 packages/blutui-project-guidelines-build/src/parser.ts delete mode 100644 packages/blutui-project-guidelines-build/src/types.ts delete mode 100644 packages/blutui-project-guidelines-build/src/validate.ts rename packages/blutui-project-guidelines-build/pnpm-lock.yaml => pnpm-lock.yaml (100%) delete mode 100644 skills/blutui-project-guidelines/README.md delete mode 100644 skills/blutui-project-guidelines/metadata.json delete mode 100644 skills/blutui-project-guidelines/rules/_template.md delete mode 100644 skills/blutui-project-guidelines/rules/foundation-configuration.md create mode 100644 skills/blutui-project-guidelines/rules/foundation-courier-configuration.md rename skills/blutui-project-guidelines/rules/{canvas.md => templating-canvas.md} (86%) create mode 100644 skills/blutui-project-guidelines/skill.json create mode 100644 src/build.ts create mode 100644 src/config.ts create mode 100644 src/types.ts rename packages/blutui-project-guidelines-build/tsconfig.json => tsconfig.json (88%) diff --git a/.agents/skills/skill-creator/LICENSE.txt b/.agents/skills/skill-creator/LICENSE.txt new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/.agents/skills/skill-creator/LICENSE.txt @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/.agents/skills/skill-creator/SKILL.md b/.agents/skills/skill-creator/SKILL.md new file mode 100644 index 0000000..1589797 --- /dev/null +++ b/.agents/skills/skill-creator/SKILL.md @@ -0,0 +1,357 @@ +--- +name: skill-creator +description: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations. +license: Complete terms in LICENSE.txt +--- + +# Skill Creator + +This skill provides guidance for creating effective skills. + +## About Skills + +Skills are modular, self-contained packages that extend Claude's capabilities by providing +specialized knowledge, workflows, and tools. Think of them as "onboarding guides" for specific +domains or tasks—they transform Claude from a general-purpose agent into a specialized agent +equipped with procedural knowledge that no model can fully possess. + +### What Skills Provide + +1. Specialized workflows - Multi-step procedures for specific domains +2. Tool integrations - Instructions for working with specific file formats or APIs +3. Domain expertise - Company-specific knowledge, schemas, business logic +4. Bundled resources - Scripts, references, and assets for complex and repetitive tasks + +## Core Principles + +### Concise is Key + +The context window is a public good. Skills share the context window with everything else Claude needs: system prompt, conversation history, other Skills' metadata, and the actual user request. + +**Default assumption: Claude is already very smart.** Only add context Claude doesn't already have. Challenge each piece of information: "Does Claude really need this explanation?" and "Does this paragraph justify its token cost?" + +Prefer concise examples over verbose explanations. + +### Set Appropriate Degrees of Freedom + +Match the level of specificity to the task's fragility and variability: + +**High freedom (text-based instructions)**: Use when multiple approaches are valid, decisions depend on context, or heuristics guide the approach. + +**Medium freedom (pseudocode or scripts with parameters)**: Use when a preferred pattern exists, some variation is acceptable, or configuration affects behavior. + +**Low freedom (specific scripts, few parameters)**: Use when operations are fragile and error-prone, consistency is critical, or a specific sequence must be followed. + +Think of Claude as exploring a path: a narrow bridge with cliffs needs specific guardrails (low freedom), while an open field allows many routes (high freedom). + +### Anatomy of a Skill + +Every skill consists of a required SKILL.md file and optional bundled resources: + +``` +skill-name/ +├── SKILL.md (required) +│ ├── YAML frontmatter metadata (required) +│ │ ├── name: (required) +│ │ ├── description: (required) +│ │ └── compatibility: (optional, rarely needed) +│ └── Markdown instructions (required) +└── Bundled Resources (optional) + ├── scripts/ - Executable code (Python/Bash/etc.) + ├── references/ - Documentation intended to be loaded into context as needed + └── assets/ - Files used in output (templates, icons, fonts, etc.) +``` + +#### SKILL.md (required) + +Every SKILL.md consists of: + +- **Frontmatter** (YAML): Contains `name` and `description` fields (required), plus optional fields like `license`, `metadata`, and `compatibility`. Only `name` and `description` are read by Claude to determine when the skill triggers, so be clear and comprehensive about what the skill is and when it should be used. The `compatibility` field is for noting environment requirements (target product, system packages, etc.) but most skills don't need it. +- **Body** (Markdown): Instructions and guidance for using the skill. Only loaded AFTER the skill triggers (if at all). + +#### Bundled Resources (optional) + +##### Scripts (`scripts/`) + +Executable code (Python/Bash/etc.) for tasks that require deterministic reliability or are repeatedly rewritten. + +- **When to include**: When the same code is being rewritten repeatedly or deterministic reliability is needed +- **Example**: `scripts/rotate_pdf.py` for PDF rotation tasks +- **Benefits**: Token efficient, deterministic, may be executed without loading into context +- **Note**: Scripts may still need to be read by Claude for patching or environment-specific adjustments + +##### References (`references/`) + +Documentation and reference material intended to be loaded as needed into context to inform Claude's process and thinking. + +- **When to include**: For documentation that Claude should reference while working +- **Examples**: `references/finance.md` for financial schemas, `references/mnda.md` for company NDA template, `references/policies.md` for company policies, `references/api_docs.md` for API specifications +- **Use cases**: Database schemas, API documentation, domain knowledge, company policies, detailed workflow guides +- **Benefits**: Keeps SKILL.md lean, loaded only when Claude determines it's needed +- **Best practice**: If files are large (>10k words), include grep search patterns in SKILL.md +- **Avoid duplication**: Information should live in either SKILL.md or references files, not both. Prefer references files for detailed information unless it's truly core to the skill—this keeps SKILL.md lean while making information discoverable without hogging the context window. Keep only essential procedural instructions and workflow guidance in SKILL.md; move detailed reference material, schemas, and examples to references files. + +##### Assets (`assets/`) + +Files not intended to be loaded into context, but rather used within the output Claude produces. + +- **When to include**: When the skill needs files that will be used in the final output +- **Examples**: `assets/logo.png` for brand assets, `assets/slides.pptx` for PowerPoint templates, `assets/frontend-template/` for HTML/React boilerplate, `assets/font.ttf` for typography +- **Use cases**: Templates, images, icons, boilerplate code, fonts, sample documents that get copied or modified +- **Benefits**: Separates output resources from documentation, enables Claude to use files without loading them into context + +#### What to Not Include in a Skill + +A skill should only contain essential files that directly support its functionality. Do NOT create extraneous documentation or auxiliary files, including: + +- README.md +- INSTALLATION_GUIDE.md +- QUICK_REFERENCE.md +- CHANGELOG.md +- etc. + +The skill should only contain the information needed for an AI agent to do the job at hand. It should not contain auxilary context about the process that went into creating it, setup and testing procedures, user-facing documentation, etc. Creating additional documentation files just adds clutter and confusion. + +### Progressive Disclosure Design Principle + +Skills use a three-level loading system to manage context efficiently: + +1. **Metadata (name + description)** - Always in context (~100 words) +2. **SKILL.md body** - When skill triggers (<5k words) +3. **Bundled resources** - As needed by Claude (Unlimited because scripts can be executed without reading into context window) + +#### Progressive Disclosure Patterns + +Keep SKILL.md body to the essentials and under 500 lines to minimize context bloat. Split content into separate files when approaching this limit. When splitting out content into other files, it is very important to reference them from SKILL.md and describe clearly when to read them, to ensure the reader of the skill knows they exist and when to use them. + +**Key principle:** When a skill supports multiple variations, frameworks, or options, keep only the core workflow and selection guidance in SKILL.md. Move variant-specific details (patterns, examples, configuration) into separate reference files. + +**Pattern 1: High-level guide with references** + +```markdown +# PDF Processing + +## Quick start + +Extract text with pdfplumber: +[code example] + +## Advanced features + +- **Form filling**: See [FORMS.md](FORMS.md) for complete guide +- **API reference**: See [REFERENCE.md](REFERENCE.md) for all methods +- **Examples**: See [EXAMPLES.md](EXAMPLES.md) for common patterns +``` + +Claude loads FORMS.md, REFERENCE.md, or EXAMPLES.md only when needed. + +**Pattern 2: Domain-specific organization** + +For Skills with multiple domains, organize content by domain to avoid loading irrelevant context: + +``` +bigquery-skill/ +├── SKILL.md (overview and navigation) +└── reference/ + ├── finance.md (revenue, billing metrics) + ├── sales.md (opportunities, pipeline) + ├── product.md (API usage, features) + └── marketing.md (campaigns, attribution) +``` + +When a user asks about sales metrics, Claude only reads sales.md. + +Similarly, for skills supporting multiple frameworks or variants, organize by variant: + +``` +cloud-deploy/ +├── SKILL.md (workflow + provider selection) +└── references/ + ├── aws.md (AWS deployment patterns) + ├── gcp.md (GCP deployment patterns) + └── azure.md (Azure deployment patterns) +``` + +When the user chooses AWS, Claude only reads aws.md. + +**Pattern 3: Conditional details** + +Show basic content, link to advanced content: + +```markdown +# DOCX Processing + +## Creating documents + +Use docx-js for new documents. See [DOCX-JS.md](DOCX-JS.md). + +## Editing documents + +For simple edits, modify the XML directly. + +**For tracked changes**: See [REDLINING.md](REDLINING.md) +**For OOXML details**: See [OOXML.md](OOXML.md) +``` + +Claude reads REDLINING.md or OOXML.md only when the user needs those features. + +**Important guidelines:** + +- **Avoid deeply nested references** - Keep references one level deep from SKILL.md. All reference files should link directly from SKILL.md. +- **Structure longer reference files** - For files longer than 100 lines, include a table of contents at the top so Claude can see the full scope when previewing. + +## Skill Creation Process + +Skill creation involves these steps: + +1. Understand the skill with concrete examples +2. Plan reusable skill contents (scripts, references, assets) +3. Initialize the skill (run init_skill.py) +4. Edit the skill (implement resources and write SKILL.md) +5. Package the skill (run package_skill.py) +6. Iterate based on real usage + +Follow these steps in order, skipping only if there is a clear reason why they are not applicable. + +### Step 1: Understanding the Skill with Concrete Examples + +Skip this step only when the skill's usage patterns are already clearly understood. It remains valuable even when working with an existing skill. + +To create an effective skill, clearly understand concrete examples of how the skill will be used. This understanding can come from either direct user examples or generated examples that are validated with user feedback. + +For example, when building an image-editor skill, relevant questions include: + +- "What functionality should the image-editor skill support? Editing, rotating, anything else?" +- "Can you give some examples of how this skill would be used?" +- "I can imagine users asking for things like 'Remove the red-eye from this image' or 'Rotate this image'. Are there other ways you imagine this skill being used?" +- "What would a user say that should trigger this skill?" + +To avoid overwhelming users, avoid asking too many questions in a single message. Start with the most important questions and follow up as needed for better effectiveness. + +Conclude this step when there is a clear sense of the functionality the skill should support. + +### Step 2: Planning the Reusable Skill Contents + +To turn concrete examples into an effective skill, analyze each example by: + +1. Considering how to execute on the example from scratch +2. Identifying what scripts, references, and assets would be helpful when executing these workflows repeatedly + +Example: When building a `pdf-editor` skill to handle queries like "Help me rotate this PDF," the analysis shows: + +1. Rotating a PDF requires re-writing the same code each time +2. A `scripts/rotate_pdf.py` script would be helpful to store in the skill + +Example: When designing a `frontend-webapp-builder` skill for queries like "Build me a todo app" or "Build me a dashboard to track my steps," the analysis shows: + +1. Writing a frontend webapp requires the same boilerplate HTML/React each time +2. An `assets/hello-world/` template containing the boilerplate HTML/React project files would be helpful to store in the skill + +Example: When building a `big-query` skill to handle queries like "How many users have logged in today?" the analysis shows: + +1. Querying BigQuery requires re-discovering the table schemas and relationships each time +2. A `references/schema.md` file documenting the table schemas would be helpful to store in the skill + +To establish the skill's contents, analyze each concrete example to create a list of the reusable resources to include: scripts, references, and assets. + +### Step 3: Initializing the Skill + +At this point, it is time to actually create the skill. + +Skip this step only if the skill being developed already exists, and iteration or packaging is needed. In this case, continue to the next step. + +When creating a new skill from scratch, always run the `init_skill.py` script. The script conveniently generates a new template skill directory that automatically includes everything a skill requires, making the skill creation process much more efficient and reliable. + +Usage: + +```bash +scripts/init_skill.py --path +``` + +The script: + +- Creates the skill directory at the specified path +- Generates a SKILL.md template with proper frontmatter and TODO placeholders +- Creates example resource directories: `scripts/`, `references/`, and `assets/` +- Adds example files in each directory that can be customized or deleted + +After initialization, customize or remove the generated SKILL.md and example files as needed. + +### Step 4: Edit the Skill + +When editing the (newly-generated or existing) skill, remember that the skill is being created for another instance of Claude to use. Include information that would be beneficial and non-obvious to Claude. Consider what procedural knowledge, domain-specific details, or reusable assets would help another Claude instance execute these tasks more effectively. + +#### Learn Proven Design Patterns + +Consult these helpful guides based on your skill's needs: + +- **Multi-step processes**: See references/workflows.md for sequential workflows and conditional logic +- **Specific output formats or quality standards**: See references/output-patterns.md for template and example patterns + +These files contain established best practices for effective skill design. + +#### Start with Reusable Skill Contents + +To begin implementation, start with the reusable resources identified above: `scripts/`, `references/`, and `assets/` files. Note that this step may require user input. For example, when implementing a `brand-guidelines` skill, the user may need to provide brand assets or templates to store in `assets/`, or documentation to store in `references/`. + +Added scripts must be tested by actually running them to ensure there are no bugs and that the output matches what is expected. If there are many similar scripts, only a representative sample needs to be tested to ensure confidence that they all work while balancing time to completion. + +Any example files and directories not needed for the skill should be deleted. The initialization script creates example files in `scripts/`, `references/`, and `assets/` to demonstrate structure, but most skills won't need all of them. + +#### Update SKILL.md + +**Writing Guidelines:** Always use imperative/infinitive form. + +##### Frontmatter + +Write the YAML frontmatter with `name` and `description`: + +- `name`: The skill name +- `description`: This is the primary triggering mechanism for your skill, and helps Claude understand when to use the skill. + - Include both what the Skill does and specific triggers/contexts for when to use it. + - Include all "when to use" information here - Not in the body. The body is only loaded after triggering, so "When to Use This Skill" sections in the body are not helpful to Claude. + - Example description for a `docx` skill: "Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. Use when Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks" + +Do not include any other fields in YAML frontmatter. + +##### Body + +Write instructions for using the skill and its bundled resources. + +### Step 5: Packaging a Skill + +Once development of the skill is complete, it must be packaged into a distributable .skill file that gets shared with the user. The packaging process automatically validates the skill first to ensure it meets all requirements: + +```bash +scripts/package_skill.py +``` + +Optional output directory specification: + +```bash +scripts/package_skill.py ./dist +``` + +The packaging script will: + +1. **Validate** the skill automatically, checking: + + - YAML frontmatter format and required fields + - Skill naming conventions and directory structure + - Description completeness and quality + - File organization and resource references + +2. **Package** the skill if validation passes, creating a .skill file named after the skill (e.g., `my-skill.skill`) that includes all files and maintains the proper directory structure for distribution. The .skill file is a zip file with a .skill extension. + +If validation fails, the script will report the errors and exit without creating a package. Fix any validation errors and run the packaging command again. + +### Step 6: Iterate + +After testing the skill, users may request improvements. Often this happens right after using the skill, with fresh context of how the skill performed. + +**Iteration workflow:** + +1. Use the skill on real tasks +2. Notice struggles or inefficiencies +3. Identify how SKILL.md or bundled resources should be updated +4. Implement changes and test again diff --git a/.agents/skills/skill-creator/references/output-patterns.md b/.agents/skills/skill-creator/references/output-patterns.md new file mode 100644 index 0000000..073ddda --- /dev/null +++ b/.agents/skills/skill-creator/references/output-patterns.md @@ -0,0 +1,82 @@ +# Output Patterns + +Use these patterns when skills need to produce consistent, high-quality output. + +## Template Pattern + +Provide templates for output format. Match the level of strictness to your needs. + +**For strict requirements (like API responses or data formats):** + +```markdown +## Report structure + +ALWAYS use this exact template structure: + +# [Analysis Title] + +## Executive summary +[One-paragraph overview of key findings] + +## Key findings +- Finding 1 with supporting data +- Finding 2 with supporting data +- Finding 3 with supporting data + +## Recommendations +1. Specific actionable recommendation +2. Specific actionable recommendation +``` + +**For flexible guidance (when adaptation is useful):** + +```markdown +## Report structure + +Here is a sensible default format, but use your best judgment: + +# [Analysis Title] + +## Executive summary +[Overview] + +## Key findings +[Adapt sections based on what you discover] + +## Recommendations +[Tailor to the specific context] + +Adjust sections as needed for the specific analysis type. +``` + +## Examples Pattern + +For skills where output quality depends on seeing examples, provide input/output pairs: + +```markdown +## Commit message format + +Generate commit messages following these examples: + +**Example 1:** +Input: Added user authentication with JWT tokens +Output: +``` +feat(auth): implement JWT-based authentication + +Add login endpoint and token validation middleware +``` + +**Example 2:** +Input: Fixed bug where dates displayed incorrectly in reports +Output: +``` +fix(reports): correct date formatting in timezone conversion + +Use UTC timestamps consistently across report generation +``` + +Follow this style: type(scope): brief description, then detailed explanation. +``` + +Examples help Claude understand the desired style and level of detail more clearly than descriptions alone. diff --git a/.agents/skills/skill-creator/references/workflows.md b/.agents/skills/skill-creator/references/workflows.md new file mode 100644 index 0000000..a350c3c --- /dev/null +++ b/.agents/skills/skill-creator/references/workflows.md @@ -0,0 +1,28 @@ +# Workflow Patterns + +## Sequential Workflows + +For complex tasks, break operations into clear, sequential steps. It is often helpful to give Claude an overview of the process towards the beginning of SKILL.md: + +```markdown +Filling a PDF form involves these steps: + +1. Analyze the form (run analyze_form.py) +2. Create field mapping (edit fields.json) +3. Validate mapping (run validate_fields.py) +4. Fill the form (run fill_form.py) +5. Verify output (run verify_output.py) +``` + +## Conditional Workflows + +For tasks with branching logic, guide Claude through decision points: + +```markdown +1. Determine the modification type: + **Creating new content?** → Follow "Creation workflow" below + **Editing existing content?** → Follow "Editing workflow" below + +2. Creation workflow: [steps] +3. Editing workflow: [steps] +``` \ No newline at end of file diff --git a/.agents/skills/skill-creator/scripts/init_skill.py b/.agents/skills/skill-creator/scripts/init_skill.py new file mode 100755 index 0000000..c544fc7 --- /dev/null +++ b/.agents/skills/skill-creator/scripts/init_skill.py @@ -0,0 +1,303 @@ +#!/usr/bin/env python3 +""" +Skill Initializer - Creates a new skill from template + +Usage: + init_skill.py --path + +Examples: + init_skill.py my-new-skill --path skills/public + init_skill.py my-api-helper --path skills/private + init_skill.py custom-skill --path /custom/location +""" + +import sys +from pathlib import Path + + +SKILL_TEMPLATE = """--- +name: {skill_name} +description: [TODO: Complete and informative explanation of what the skill does and when to use it. Include WHEN to use this skill - specific scenarios, file types, or tasks that trigger it.] +--- + +# {skill_title} + +## Overview + +[TODO: 1-2 sentences explaining what this skill enables] + +## Structuring This Skill + +[TODO: Choose the structure that best fits this skill's purpose. Common patterns: + +**1. Workflow-Based** (best for sequential processes) +- Works well when there are clear step-by-step procedures +- Example: DOCX skill with "Workflow Decision Tree" → "Reading" → "Creating" → "Editing" +- Structure: ## Overview → ## Workflow Decision Tree → ## Step 1 → ## Step 2... + +**2. Task-Based** (best for tool collections) +- Works well when the skill offers different operations/capabilities +- Example: PDF skill with "Quick Start" → "Merge PDFs" → "Split PDFs" → "Extract Text" +- Structure: ## Overview → ## Quick Start → ## Task Category 1 → ## Task Category 2... + +**3. Reference/Guidelines** (best for standards or specifications) +- Works well for brand guidelines, coding standards, or requirements +- Example: Brand styling with "Brand Guidelines" → "Colors" → "Typography" → "Features" +- Structure: ## Overview → ## Guidelines → ## Specifications → ## Usage... + +**4. Capabilities-Based** (best for integrated systems) +- Works well when the skill provides multiple interrelated features +- Example: Product Management with "Core Capabilities" → numbered capability list +- Structure: ## Overview → ## Core Capabilities → ### 1. Feature → ### 2. Feature... + +Patterns can be mixed and matched as needed. Most skills combine patterns (e.g., start with task-based, add workflow for complex operations). + +Delete this entire "Structuring This Skill" section when done - it's just guidance.] + +## [TODO: Replace with the first main section based on chosen structure] + +[TODO: Add content here. See examples in existing skills: +- Code samples for technical skills +- Decision trees for complex workflows +- Concrete examples with realistic user requests +- References to scripts/templates/references as needed] + +## Resources + +This skill includes example resource directories that demonstrate how to organize different types of bundled resources: + +### scripts/ +Executable code (Python/Bash/etc.) that can be run directly to perform specific operations. + +**Examples from other skills:** +- PDF skill: `fill_fillable_fields.py`, `extract_form_field_info.py` - utilities for PDF manipulation +- DOCX skill: `document.py`, `utilities.py` - Python modules for document processing + +**Appropriate for:** Python scripts, shell scripts, or any executable code that performs automation, data processing, or specific operations. + +**Note:** Scripts may be executed without loading into context, but can still be read by Claude for patching or environment adjustments. + +### references/ +Documentation and reference material intended to be loaded into context to inform Claude's process and thinking. + +**Examples from other skills:** +- Product management: `communication.md`, `context_building.md` - detailed workflow guides +- BigQuery: API reference documentation and query examples +- Finance: Schema documentation, company policies + +**Appropriate for:** In-depth documentation, API references, database schemas, comprehensive guides, or any detailed information that Claude should reference while working. + +### assets/ +Files not intended to be loaded into context, but rather used within the output Claude produces. + +**Examples from other skills:** +- Brand styling: PowerPoint template files (.pptx), logo files +- Frontend builder: HTML/React boilerplate project directories +- Typography: Font files (.ttf, .woff2) + +**Appropriate for:** Templates, boilerplate code, document templates, images, icons, fonts, or any files meant to be copied or used in the final output. + +--- + +**Any unneeded directories can be deleted.** Not every skill requires all three types of resources. +""" + +EXAMPLE_SCRIPT = '''#!/usr/bin/env python3 +""" +Example helper script for {skill_name} + +This is a placeholder script that can be executed directly. +Replace with actual implementation or delete if not needed. + +Example real scripts from other skills: +- pdf/scripts/fill_fillable_fields.py - Fills PDF form fields +- pdf/scripts/convert_pdf_to_images.py - Converts PDF pages to images +""" + +def main(): + print("This is an example script for {skill_name}") + # TODO: Add actual script logic here + # This could be data processing, file conversion, API calls, etc. + +if __name__ == "__main__": + main() +''' + +EXAMPLE_REFERENCE = """# Reference Documentation for {skill_title} + +This is a placeholder for detailed reference documentation. +Replace with actual reference content or delete if not needed. + +Example real reference docs from other skills: +- product-management/references/communication.md - Comprehensive guide for status updates +- product-management/references/context_building.md - Deep-dive on gathering context +- bigquery/references/ - API references and query examples + +## When Reference Docs Are Useful + +Reference docs are ideal for: +- Comprehensive API documentation +- Detailed workflow guides +- Complex multi-step processes +- Information too lengthy for main SKILL.md +- Content that's only needed for specific use cases + +## Structure Suggestions + +### API Reference Example +- Overview +- Authentication +- Endpoints with examples +- Error codes +- Rate limits + +### Workflow Guide Example +- Prerequisites +- Step-by-step instructions +- Common patterns +- Troubleshooting +- Best practices +""" + +EXAMPLE_ASSET = """# Example Asset File + +This placeholder represents where asset files would be stored. +Replace with actual asset files (templates, images, fonts, etc.) or delete if not needed. + +Asset files are NOT intended to be loaded into context, but rather used within +the output Claude produces. + +Example asset files from other skills: +- Brand guidelines: logo.png, slides_template.pptx +- Frontend builder: hello-world/ directory with HTML/React boilerplate +- Typography: custom-font.ttf, font-family.woff2 +- Data: sample_data.csv, test_dataset.json + +## Common Asset Types + +- Templates: .pptx, .docx, boilerplate directories +- Images: .png, .jpg, .svg, .gif +- Fonts: .ttf, .otf, .woff, .woff2 +- Boilerplate code: Project directories, starter files +- Icons: .ico, .svg +- Data files: .csv, .json, .xml, .yaml + +Note: This is a text placeholder. Actual assets can be any file type. +""" + + +def title_case_skill_name(skill_name): + """Convert hyphenated skill name to Title Case for display.""" + return ' '.join(word.capitalize() for word in skill_name.split('-')) + + +def init_skill(skill_name, path): + """ + Initialize a new skill directory with template SKILL.md. + + Args: + skill_name: Name of the skill + path: Path where the skill directory should be created + + Returns: + Path to created skill directory, or None if error + """ + # Determine skill directory path + skill_dir = Path(path).resolve() / skill_name + + # Check if directory already exists + if skill_dir.exists(): + print(f"❌ Error: Skill directory already exists: {skill_dir}") + return None + + # Create skill directory + try: + skill_dir.mkdir(parents=True, exist_ok=False) + print(f"✅ Created skill directory: {skill_dir}") + except Exception as e: + print(f"❌ Error creating directory: {e}") + return None + + # Create SKILL.md from template + skill_title = title_case_skill_name(skill_name) + skill_content = SKILL_TEMPLATE.format( + skill_name=skill_name, + skill_title=skill_title + ) + + skill_md_path = skill_dir / 'SKILL.md' + try: + skill_md_path.write_text(skill_content) + print("✅ Created SKILL.md") + except Exception as e: + print(f"❌ Error creating SKILL.md: {e}") + return None + + # Create resource directories with example files + try: + # Create scripts/ directory with example script + scripts_dir = skill_dir / 'scripts' + scripts_dir.mkdir(exist_ok=True) + example_script = scripts_dir / 'example.py' + example_script.write_text(EXAMPLE_SCRIPT.format(skill_name=skill_name)) + example_script.chmod(0o755) + print("✅ Created scripts/example.py") + + # Create references/ directory with example reference doc + references_dir = skill_dir / 'references' + references_dir.mkdir(exist_ok=True) + example_reference = references_dir / 'api_reference.md' + example_reference.write_text(EXAMPLE_REFERENCE.format(skill_title=skill_title)) + print("✅ Created references/api_reference.md") + + # Create assets/ directory with example asset placeholder + assets_dir = skill_dir / 'assets' + assets_dir.mkdir(exist_ok=True) + example_asset = assets_dir / 'example_asset.txt' + example_asset.write_text(EXAMPLE_ASSET) + print("✅ Created assets/example_asset.txt") + except Exception as e: + print(f"❌ Error creating resource directories: {e}") + return None + + # Print next steps + print(f"\n✅ Skill '{skill_name}' initialized successfully at {skill_dir}") + print("\nNext steps:") + print("1. Edit SKILL.md to complete the TODO items and update the description") + print("2. Customize or delete the example files in scripts/, references/, and assets/") + print("3. Run the validator when ready to check the skill structure") + + return skill_dir + + +def main(): + if len(sys.argv) < 4 or sys.argv[2] != '--path': + print("Usage: init_skill.py --path ") + print("\nSkill name requirements:") + print(" - Kebab-case identifier (e.g., 'my-data-analyzer')") + print(" - Lowercase letters, digits, and hyphens only") + print(" - Max 64 characters") + print(" - Must match directory name exactly") + print("\nExamples:") + print(" init_skill.py my-new-skill --path skills/public") + print(" init_skill.py my-api-helper --path skills/private") + print(" init_skill.py custom-skill --path /custom/location") + sys.exit(1) + + skill_name = sys.argv[1] + path = sys.argv[3] + + print(f"🚀 Initializing skill: {skill_name}") + print(f" Location: {path}") + print() + + result = init_skill(skill_name, path) + + if result: + sys.exit(0) + else: + sys.exit(1) + + +if __name__ == "__main__": + main() diff --git a/.agents/skills/skill-creator/scripts/package_skill.py b/.agents/skills/skill-creator/scripts/package_skill.py new file mode 100755 index 0000000..5cd36cb --- /dev/null +++ b/.agents/skills/skill-creator/scripts/package_skill.py @@ -0,0 +1,110 @@ +#!/usr/bin/env python3 +""" +Skill Packager - Creates a distributable .skill file of a skill folder + +Usage: + python utils/package_skill.py [output-directory] + +Example: + python utils/package_skill.py skills/public/my-skill + python utils/package_skill.py skills/public/my-skill ./dist +""" + +import sys +import zipfile +from pathlib import Path +from quick_validate import validate_skill + + +def package_skill(skill_path, output_dir=None): + """ + Package a skill folder into a .skill file. + + Args: + skill_path: Path to the skill folder + output_dir: Optional output directory for the .skill file (defaults to current directory) + + Returns: + Path to the created .skill file, or None if error + """ + skill_path = Path(skill_path).resolve() + + # Validate skill folder exists + if not skill_path.exists(): + print(f"❌ Error: Skill folder not found: {skill_path}") + return None + + if not skill_path.is_dir(): + print(f"❌ Error: Path is not a directory: {skill_path}") + return None + + # Validate SKILL.md exists + skill_md = skill_path / "SKILL.md" + if not skill_md.exists(): + print(f"❌ Error: SKILL.md not found in {skill_path}") + return None + + # Run validation before packaging + print("🔍 Validating skill...") + valid, message = validate_skill(skill_path) + if not valid: + print(f"❌ Validation failed: {message}") + print(" Please fix the validation errors before packaging.") + return None + print(f"✅ {message}\n") + + # Determine output location + skill_name = skill_path.name + if output_dir: + output_path = Path(output_dir).resolve() + output_path.mkdir(parents=True, exist_ok=True) + else: + output_path = Path.cwd() + + skill_filename = output_path / f"{skill_name}.skill" + + # Create the .skill file (zip format) + try: + with zipfile.ZipFile(skill_filename, 'w', zipfile.ZIP_DEFLATED) as zipf: + # Walk through the skill directory + for file_path in skill_path.rglob('*'): + if file_path.is_file(): + # Calculate the relative path within the zip + arcname = file_path.relative_to(skill_path.parent) + zipf.write(file_path, arcname) + print(f" Added: {arcname}") + + print(f"\n✅ Successfully packaged skill to: {skill_filename}") + return skill_filename + + except Exception as e: + print(f"❌ Error creating .skill file: {e}") + return None + + +def main(): + if len(sys.argv) < 2: + print("Usage: python utils/package_skill.py [output-directory]") + print("\nExample:") + print(" python utils/package_skill.py skills/public/my-skill") + print(" python utils/package_skill.py skills/public/my-skill ./dist") + sys.exit(1) + + skill_path = sys.argv[1] + output_dir = sys.argv[2] if len(sys.argv) > 2 else None + + print(f"📦 Packaging skill: {skill_path}") + if output_dir: + print(f" Output directory: {output_dir}") + print() + + result = package_skill(skill_path, output_dir) + + if result: + sys.exit(0) + else: + sys.exit(1) + + +if __name__ == "__main__": + main() diff --git a/.agents/skills/skill-creator/scripts/quick_validate.py b/.agents/skills/skill-creator/scripts/quick_validate.py new file mode 100755 index 0000000..ed8e1dd --- /dev/null +++ b/.agents/skills/skill-creator/scripts/quick_validate.py @@ -0,0 +1,103 @@ +#!/usr/bin/env python3 +""" +Quick validation script for skills - minimal version +""" + +import sys +import os +import re +import yaml +from pathlib import Path + +def validate_skill(skill_path): + """Basic validation of a skill""" + skill_path = Path(skill_path) + + # Check SKILL.md exists + skill_md = skill_path / 'SKILL.md' + if not skill_md.exists(): + return False, "SKILL.md not found" + + # Read and validate frontmatter + content = skill_md.read_text() + if not content.startswith('---'): + return False, "No YAML frontmatter found" + + # Extract frontmatter + match = re.match(r'^---\n(.*?)\n---', content, re.DOTALL) + if not match: + return False, "Invalid frontmatter format" + + frontmatter_text = match.group(1) + + # Parse YAML frontmatter + try: + frontmatter = yaml.safe_load(frontmatter_text) + if not isinstance(frontmatter, dict): + return False, "Frontmatter must be a YAML dictionary" + except yaml.YAMLError as e: + return False, f"Invalid YAML in frontmatter: {e}" + + # Define allowed properties + ALLOWED_PROPERTIES = {'name', 'description', 'license', 'allowed-tools', 'metadata', 'compatibility'} + + # Check for unexpected properties (excluding nested keys under metadata) + unexpected_keys = set(frontmatter.keys()) - ALLOWED_PROPERTIES + if unexpected_keys: + return False, ( + f"Unexpected key(s) in SKILL.md frontmatter: {', '.join(sorted(unexpected_keys))}. " + f"Allowed properties are: {', '.join(sorted(ALLOWED_PROPERTIES))}" + ) + + # Check required fields + if 'name' not in frontmatter: + return False, "Missing 'name' in frontmatter" + if 'description' not in frontmatter: + return False, "Missing 'description' in frontmatter" + + # Extract name for validation + name = frontmatter.get('name', '') + if not isinstance(name, str): + return False, f"Name must be a string, got {type(name).__name__}" + name = name.strip() + if name: + # Check naming convention (kebab-case: lowercase with hyphens) + if not re.match(r'^[a-z0-9-]+$', name): + return False, f"Name '{name}' should be kebab-case (lowercase letters, digits, and hyphens only)" + if name.startswith('-') or name.endswith('-') or '--' in name: + return False, f"Name '{name}' cannot start/end with hyphen or contain consecutive hyphens" + # Check name length (max 64 characters per spec) + if len(name) > 64: + return False, f"Name is too long ({len(name)} characters). Maximum is 64 characters." + + # Extract and validate description + description = frontmatter.get('description', '') + if not isinstance(description, str): + return False, f"Description must be a string, got {type(description).__name__}" + description = description.strip() + if description: + # Check for angle brackets + if '<' in description or '>' in description: + return False, "Description cannot contain angle brackets (< or >)" + # Check description length (max 1024 characters per spec) + if len(description) > 1024: + return False, f"Description is too long ({len(description)} characters). Maximum is 1024 characters." + + # Validate compatibility field if present (optional) + compatibility = frontmatter.get('compatibility', '') + if compatibility: + if not isinstance(compatibility, str): + return False, f"Compatibility must be a string, got {type(compatibility).__name__}" + if len(compatibility) > 500: + return False, f"Compatibility is too long ({len(compatibility)} characters). Maximum is 500 characters." + + return True, "Skill is valid!" + +if __name__ == "__main__": + if len(sys.argv) != 2: + print("Usage: python quick_validate.py ") + sys.exit(1) + + valid, message = validate_skill(sys.argv[1]) + print(message) + sys.exit(0 if valid else 1) \ No newline at end of file diff --git a/.github/workflows/build-agents-rule-file.yml b/.github/workflows/validate.yml similarity index 100% rename from .github/workflows/build-agents-rule-file.yml rename to .github/workflows/validate.yml diff --git a/.gitignore b/.gitignore index 496ee2c..8226ac4 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ -.DS_Store \ No newline at end of file +.DS_Store + +node_modules/ \ No newline at end of file diff --git a/AGENTS.md b/AGENTS.md deleted file mode 100644 index a795ada..0000000 --- a/AGENTS.md +++ /dev/null @@ -1,583 +0,0 @@ -# Blutui Project Guidelines - -The Blutui Project guidelines are specifically curated by Blutui maintainers for this project. These guidelines should be followed closely to enhance the user's satisfaction in building a Blutui project. - -* Version: 1.0.0 -* Organization: Blutui -* Date: January 2026 -* References: - - https://dev.blutui.com - - - -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Configuration | CRITICAL | This configuration file is the core dependency for all Courier operations, Blutui MCP connectivity, and Cassette management. Loss or corruption will halt development workflows and severely degrade system performance. | config, handle, cassette, courier.json, login, mcp | - -## Configuration (`courier.json`) - -The handle is a required property in the `courier.json` file located in the root directory of the project. It specifies the unique identifier for the Blutui project. The agent must always prompt the user to provide the `handle` property. The agent must not attempt to guess or fabricate a handle. A missing handle could be one of the reasons for failure of Blutui mcp tool calls. - -The cassette specified in the `courier.json` file determines which version of the project is active. - -**Prior to making any changes to the `courier.json` file, the agent must confirm if the user has logged in using -the command below and add the token.txt file to the root directory of the project. If the user has not done this, the agent must instruct the user to complete this step first.** - -```bash -courier login --token < token.txt -``` - -```json -{ - "cassette": "default", - "handle": "project-handle" -} -``` - -**After making any changes to the `courier.json` file, the agent must instruct the user to restart the Blutui MCP server.** - -Reference: [Link to documentation](https://dev.blutui.com/docs/courier/configuration) - - -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| File Structure | CRITICAL | Structural Integrity - Adherence to the Blutui file structure is mandatory. Deviating from these conventions breaks core system compatibility, rendering the project non-functional and preventing deployment. | project, file structure, public, views, assets, layouts, templates, components | - -## File structure - -### "/public" directory - -Store assets including compiled JS/CSS, images and static PDFs. - -### "/views" directory - -This folder is the primary environment for UI development. Follow these sub-directory conventions: - -* "templates/": Has files with reusable design bases and system views. - * "default.html": The foundational template for a Blutui project. This file forms the outermost structure of a Blutui project. It features essential sections like the head, where style definitions reside, and the body, where content gets placed. The most efficient way to build upon this file is by using inheritance, capitalising on the block tag. - * "404.html": A template for handling "Page Not Found" errors. -* "layouts/": The layouts folder is the **only** way to create pages in a project. Each layout file maps to a page registered via the Blutui dashboard or MCP tools. **Do not create a `pages/` directory.** All page content belongs in layout files. -* "components/": Contains atomic, reusable UI fragments. Always create components for repeated UI elements (headers, footers, hero sections, CTAs, cards, etc.) and include them in layouts using `{{ include('components/filename.html') }}`. - -Develop the project using a **component-first approach**. Always break the UI into reusable components in `views/components/`. Include components in layouts using `{{ include() }}` and use `{% block %}` tags for template inheritance. This minimizes duplicate work and ensures design updates stay consistent across all project views. - -#### Understanding inheritance in Blutui - -Hierarchy: - -* Parent: templates/default.html (Defines the overall structure). -* Child: layouts/index.html (Extends the template and provides specific page content). - -To implement this, ensure the child layout file begins with the `{% extends 'templates/default.html' %}` declaration. Map your content to the parent's placeholders by wrapping your HTML in matching `block` names. Include reusable components within those blocks. - -#### Style System Detection - -Before generating any HTML or component code, the agent must detect the project's existing style system: - -1. Check for `tailwind.config.*` or `postcss.config.*` files in the project root. -2. Check for CSS framework CDN links (e.g., Bootstrap, Bulma) in `views/templates/default.html`. -3. Check for CSS files in the `/public` directory. - -- If a style system is found (e.g., TailwindCSS), **always use its utility classes and conventions** in all generated HTML and components. -- If no style system is detected, **ask the user** which style approach they want before generating any HTML. -- Never generate unstyled or bare HTML when a style system is available in the project. - -Reference: [Link to documentation](https://docs.blutui.com/docs/getting-started/folder-structure) - - -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Form Standards | CRITICAL | Strict adherence to Blutui Form Syntax is mandatory. Non-compliant syntax causes silent failures or data submission errors, preventing the form from processing correctly within the ecosystem. | form | - -## Blutui Form standards and examples - -### Directory Structure - -Ensure your `views` directory is organized as follows: -- `views/` - - `components/` - - `form.html` (Macro definitions) - - `forms/` - - `contact.html` (Form implementation) - -#### Usage Example (in `views/components/form.html`): - -```canvas -{% macro input(data) %} - -{% endmacro %} - -{% macro field(data) %} -
- - {% if data.type == 'textarea' %} - {{ _self.textarea(data) }} - {% else %} - {{ _self.input(data) }} - {% endif %} -
-{% endmacro %} -``` - -#### Usage Example (in `views/forms/contact.html`): - -```canvas -{% import 'components/form' as ui %} - -{% form 'contact' %} - {% for field in form.fields %} - {{ ui.field(field) }} - {% endfor %} - - -{% endform %} -``` - -### Form Field Constraints - -- **Allowed Types:** "text", "textarea", "radio", "select", "checkbox", "url", "email", "phone", "hidden", "time", "date", "number" -- Do not attempt to use custom field types. If a type is not on this list, default to `text` and notify the user. -- Always transmit field types to the MCP in lowercase format. - -Reference: [Link to documentation](https://dev.blutui.com/guides/create-form) - - -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Routing Pattern Standards | CRITICAL | Strict adherence to Blutui Route Pattern standards is mandatory. Non-compliant routing triggers 500 Server Errors and breaks site navigation, leading to total loss of user access. | route, route pattern | - -## Routing Pattern Standard - -The agent must pay attention to route patterns when the project would require to build many pages that will include more than one nested page. - -- A route pattern could include parameter(s) (e.g., `/team/:name`), which is accessed in code via `route.data.name`. -- The supported parameter types: string, slug, date, time, number. -- Each unique route pattern is mapped to a single template file. - -Route patterns can be utilised to filter collections as shown below: - -```canvas -{% set members = cms.collection('team') %} -{% set member = members | filter(entry => (entry.name | slug) == route.data.name) | first %} -

{{ member.name }}

-

{{ member.bio }}

-``` - -Use Blutui MCP tools to create, retreive and list route patterns. - -When using the create_route-pattern tool, the agent must use the list_route-patterns tool and determine a unique route pattern. - -Reference: [Link to documentation - How do I use route patterns in my project?](https://docs.blutui.com/guides/add-route-patterns) - - -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Templates and Layouts | CRITICAL | Functional Impact - Blutui templates and layouts govern core project logic. Deviating from these structures results in broken inheritance and rendering failures, preventing the project from functioning as intended. | project, file structure, views, templates, layouts, components | - -## Layouts and Templates - -### Templates - -- A template defines the overall structure of the project, including common elements like headers, footers, and navigation menus used to provide a consistent look and feel across multiple pages in a project. -- A template can be extended by another template file but not a layout. - -### Layouts - -- Layouts are the **only** way to create pages in Blutui. Each layout file in `views/layouts/` corresponds to a page created via the Blutui dashboard or MCP tools. -- **Never create files in a `pages/` directory.** The `pages/` directory must be ignored entirely. All page content lives in layout files. -- When using the `layout`, `template`, `post_layout` or `blog_layout` parameters in any Blutui MCP tool, make sure the layout file path is relative to the `views` directory (e.g., `layouts/about.html`, not `views/layouts/about.html`). -- Always place layout files in the `views/layouts` directory. - -### Page Creation Workflow - -Follow these steps every time a new page is needed: - -1. **Check for the layouts folder:** If `views/layouts/` does not exist, create it. If it already exists, proceed. -2. **Create the layout file:** Create a new `.html` file inside `views/layouts/` (e.g., `views/layouts/about.html`). -3. **Extend a template:** The layout must extend a template using `{% extends 'templates/default.html' %}`. -4. **Build with components:** Create reusable UI fragments in `views/components/` and include them in the layout using `{{ include('components/hero.html') }}`. -5. **Register the page via MCP:** Use the Blutui MCP `create_page` tool to create the page in the dashboard, setting the layout path relative to `views/` (e.g., `layouts/about.html`). - -**Example:** A layout file at `views/layouts/about.html` - -```canvas -{% extends 'templates/default.html' %} - -{% block content %} - {{ include('components/hero.html') }} - -
-

About Us

-

Welcome to our about page.

-
- - {{ include('components/cta.html') }} -{% endblock %} -``` - -Reference: [Link to documentation - How to create a Layout](https://docs.blutui.com/guides/create-layout) - - -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| MCP | HIGH | Efficiency Multiplier - The Blutui MCP grants agents direct access to project-specific tooling, streamlining complex workflows and increasing development velocity by up to 300%. | mcp, tools, search, documentation | - -## Blutui MCP - -### Available MCP tools - -- The `list_*` tools (such as `list_pages`, `list_forms`, etc.) can be used to list all the different resources available within the project. -- The `retrieve_*` tools (such as `retrieve_page`, `retrieve_forms`, etc.) can be used to retrieve a single resources within the project. -- The `create_*` tools (such as `create_page`, `create_form`, etc.) can be used to create new resources within the project. - -### Page Creation Workflow - -When creating a new page, the agent must follow this exact sequence: - -1. **Create the layout file** in `views/layouts/` (e.g., `views/layouts/about.html`). The layout should extend a template and include components. -2. **Run `list_pages`** to check for existing pages and avoid duplicates. -3. **Use the `create_page` MCP tool** to register the page in the Blutui dashboard, setting the layout path relative to `views/` (e.g., `layouts/about.html`). - -The agent must never skip the MCP step. A layout file without a corresponding page in the dashboard will not be accessible on the site. - -### Search Documentation (Critically Important) - -- Blutui Courier MCP comes with a powerful `search_blutui_documentation` tool you should use before any other approaches. -- You must use this tool to search the Blutui documentation before falling back to other approaches. -- Search the documentation before making code changes to ensure we are taking the correct approach. - -### Handle Property Standards - -- **Pre-flight Check:** For the `create_page`, `create_form` or `create_menu` tool, always execute the corresponding `list_*` tool first. -- **Validation:** Compare the user's desired `handle` against the `handle` properties in the retrieved list. -- **Error Prevention:** If a match is found, do not call the creation tool. Instead, notify the user of the conflict. -- **Offline Mode:** If the `blutui` MCP tools are unreachable, you must ask the user for the specific `handle` property in the before suggesting a configuration. - -Reference: - -- [Link to documentation - Connect to Blutui MCP](https://docs.blutui.com/docs/getting-started/agentic-development) -- [Link to documentation - Connect to Figma MCP](https://dev.blutui.com/guides/figma-to-blutui) - - -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Canvas - Template Engine | CRITICAL | High Impact (90%) - The Template Engine serves as the critical logic layer, binding HTML elements to Blutui-specific concepts. Strict adherence to this syntax is mandatory for data interactivity; without it, the project will fail to render or process dynamic data. | canvas, variables, tags, filters, functions, tests, expressions, templating festures | - -## Canvas - Template Engine - -Canvas serves as the template engine for Blutui, combining HTML, CSS, and JavaScript with unique Canvas logic to create fully customized project designs. - -- The template is a regular text file. It can generate any text-based format (HTML, XML, CSV, LaTeX, etc.). The file extension is ".canvas". -- A template contains variables, tags, filters, functions, tests, expressions and other templating festures, which get replaced with values when the template is evaluated, and tags, which control the template's logic. - -**Example** - -```canvas - - - - My Webpage - - - - - -

My Webpage

- {{ a_variable }} - - -``` - -- There are two kinds of delimiters: - - {% ... %}: Used for executing statements. - - {{ ... }} : Used for printing values to the rendered page. - -### Including other templates - -The `include` function is useful to include a template and return the rendered content of that template into the current one. - -```canvas -{{ include('sidebar.html') }} -``` - -Included templates automatically inherit the data context of their parent. This ensures that any variables defined in your main template are immediately accessible within the included file without extra configuration. - -```canvas -{% for box in boxes %} - {{ include('render_box.html') }} -{% endfor %} -// The included template render_box.html is able to access the box variable. -``` - -Templates in subdirectories can be accessed with a slash: - -```canvas -{{ include('sections/articles/sidebar.html') }} -``` - -Use `include` to pull reusable components from the `views/components/` directory into layouts: - -```canvas -{{ include('components/header.html') }} -{{ include('components/hero.html') }} -{{ include('components/footer.html') }} -``` - -### Blocks tag: `blocks` - -Blocks are used for inheritance and act as placeholders and replacements at the same time. - -A block provides a way to change how a certain part of a template is rendered but it does not interfere in any way with the logic around it. - -Canvas allows to add the name of the block after the end tag for better readability. - -**Example:** Incorrect way to use blocks - -```canvas -{# base.html #} - -{% for post in posts %} - {% block post %} -

{{ post.title }}

-

{{ post.body }}

- {% endblock %} -{% endfor %} -``` - -**Example:** Correct way to use blocks - -A child template looks like this - -```canvas -{# child.html #} - -{% extends 'base.html' %} - -{% block post %} -
-
{{ post.title }}
-
{{ post.text }}
-
-{% endblock %} -``` - -A parent template looks like this - -```canvas -{% for post in posts %} -
-
{{ post.title }}
-
{{ post.text }}
-
-{% endfor %} -``` - -**Example:** a block included within an if statement - -```canvas -{% if posts is empty %} - {% block head %} - {{ parent() }} - // parent function renders contents in the parent block - - - {% endblock head %} -{% endif %} -``` - -### Template Inheritence - -Maximize your workflow with template inheritance. Instead of duplicating code, build a single base template for common site features in `views/templates/defualt.html`. Use `blocks` to define areas where child templates can inject specific content, ensuring a consistent structure across every page. - -**Example**: Define a base.html template for a two-column page. - -```canvas - - - - {% block head %} - - {% block title %}{% endblock %} - My Webpage - {% endblock %} - - - -
{% block content %}{% endblock %}
- - - -``` - -In this example, the block tags define four blocks that child templates can fill in. All the block tag does is to tell the template engine that a child template may override those portions of the template. - -A child template might look like this: - -```canvas -{% extends 'base.html' %} - -{% block title %}Index{% endblock %} - -{% block head %} - {{ parent() }} - -{% endblock %} - -{% block content %} -

Index

-

- Welcome to my awesome homepage. -

-{% endblock %} -``` - -The `extends` tag can be used to extend a template from another one. Canvas does not support multiple inheritance. - -- Use the search_blutui_documentation tool in Blutui MCP to find more information on available tags, filters, functions, tests, expressions and other templating festures. - -### Composing Layouts with Components - -Always follow the 3-tier pattern when building pages: - -1. **Template** (`templates/default.html`) — Defines the overall HTML structure with `block` placeholders. -2. **Layout** (`layouts/about.html`) — Extends the template using `{% extends %}`, fills `block` content, and includes components. -3. **Component** (`components/hero.html`) — A reusable UI fragment included via `{{ include() }}`. - -**Example:** Complete 3-tier composition - -Template (`views/templates/default.html`): -```canvas - - - - {% block head %} - {% block title %}{% endblock %} - {% endblock %} - - - {{ include('components/header.html') }} - {% block content %}{% endblock %} - {{ include('components/footer.html') }} - - -``` - -Component (`views/components/hero.html`): -```canvas -
-

{{ heading }}

-

{{ subheading }}

-
-``` - -Layout (`views/layouts/about.html`): -```canvas -{% extends 'templates/default.html' %} - -{% block title %}About Us{% endblock %} - -{% block content %} - {{ include('components/hero.html') }} -
-

Page content goes here.

-
-{% endblock %} -``` - -Reference: [Link to documentation](https://dev.blutui.com/guides/what-is-blutui-canvas) - - -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Courier | CRITICAL | Without Courier CLI, project updates cannot be pushed to the Blutui platform. It is essential for continuous integration, version synchronization, and maintaining a functional development lifecycle. | courier, command-line interface tool | - -## Courier - -Courier is a command-line interface tool to interact with a project. It allows user's to easily push code to their project and pull code down to their machine. - -- Courier includes the Blutui MCP server that comes with powerful tools designed specifically for this project. - -Courier must be installed and configured on the user's machine to enable full functionality. `courier version` command can be used to check if the user has courier installed. - -Reference: [Link to documentation](https://dev.blutui.com/docs/courier/getting-started) - - -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Cassettes - Project Version Control | LOW | Version Control Impact - High. This configuration is critical only during project version transitions. Incorrect setup will block the ability to switch versions or result in environment mismatches during a migration. | cassette, version control | - -## Cassettes - -Blutui Cassettes function as a version control system for your front-end logic, allowing you to manage and toggle between various website designs within a single project. - -Each project can have multiple cassettes. - -To switch cassettes, update the cassette property within the `courier.json` file. If this property is missing or undefined, prompt the user to provide the specific cassette handle. - -Reference: [Link to documentation](https://dev.blutui.com/docs/cassettes/getting-started) - - -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Collections | CRITICAL | High Impact (90%) - This section governs the binding between frontend elements and Blutui Data Collections. Failure to configure this correctly results in broken dynamic content and prevents the UI from interacting with stored project data. | data, dynamic, data structure, collections | - -## Collections - -Collections are the primary method for managing structured data within Blutui that define reusable data schemas using a wide range of field types. - -- Unique handles are mandatory for all collections. The agent must validate handle availability before initiating the creation process. -- The available field types are: "text", "textarea", "richtext", "checkbox", "radio", "select", "email", "phone", "url", "date", "time", "date-time", "color", "file", "number" -- Do not add custom field types. - -Collections are designed for structured data modeling. Implement a Collection whenever you need to store multiple entries that share a consistent architecture (e.g., matching keys or data types) to ensure efficient querying and rendering. - -In the case, when a collection has a some connection to another collection, the agent can look into linking collections using the search_blutui_documentation mcp tool. - -To create, retreive and list collection or collection entries or links, the agent must utilize the tools present in Blutui MCP. - -### Connect collection data in a template - -```canvas -{% set authors = cms.collection('authors') %} -{% set author = authors | first %} -
- {{ author.name }} -

- {{ author.name }} -

-
- {{ author.bio | raw }} -
-
-``` - -Reference: [Link to documentation](https://dev.blutui.com/docs/collections/getting-started) - - -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Canopy | MEDIUM | Editor Integration - Critical for CMS-to-Frontend interactivity. Canopy allows developers to register components as editable assets; failure to implement correctly disables the in-page editing interface for the user. | in-page editor | - -## Canopy - -Canopy is Blutui's in-page editor that enables developers to construct the website's structure and allow content managers to edit pages directly within the interface. - -Canopy functions enable a developer to add editing capabilities for a variety of elements in a project. For example editing text, lists, images, videos, buttons, audios and headings. - -Use the search_blutui_documentation mcp tool to access the canopy functions that can be used in a project. - -Reference: [Link to documentation](https://docs.blutui.com/docs/canopy/getting-started) - - diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 120000 index 47dc3e3..0000000 --- a/CLAUDE.md +++ /dev/null @@ -1 +0,0 @@ -AGENTS.md \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..c602051 --- /dev/null +++ b/package.json @@ -0,0 +1,11 @@ +{ + "name": "@blutui/skills", + "scripts": { + "build": "tsx src/build.ts" + }, + "devDependencies": { + "@types/node": "^25.2.3", + "tsx": "^4.21.0", + "typescript": "^5.9.3" + } +} diff --git a/packages/blutui-project-guidelines-build/.gitignore b/packages/blutui-project-guidelines-build/.gitignore deleted file mode 100644 index 40b878d..0000000 --- a/packages/blutui-project-guidelines-build/.gitignore +++ /dev/null @@ -1 +0,0 @@ -node_modules/ \ No newline at end of file diff --git a/packages/blutui-project-guidelines-build/package.json b/packages/blutui-project-guidelines-build/package.json deleted file mode 100644 index 42a7b0f..0000000 --- a/packages/blutui-project-guidelines-build/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "blutui-project-guidelines-build", - "version": "1.0.0", - "description": "Build tooling for Blutui Project Guidelines skills", - "license": "MIT", - "keywords": [ - "blutui", - "guidelines", - "llm", - "agents", - "skills" - ], - "type": "module", - "scripts": { - "build": "pnpm build-agents", - "build-agents": "tsx src/build.ts", - "validate": "tsx src/validate.ts", - "dev": "pnpm build && pnpm validate" - }, - "devDependencies": { - "@types/node": "^25.2.3", - "tsx": "^4.21.0", - "typescript": "^5.9.3" - } -} diff --git a/packages/blutui-project-guidelines-build/src/build.ts b/packages/blutui-project-guidelines-build/src/build.ts deleted file mode 100644 index 8144ab2..0000000 --- a/packages/blutui-project-guidelines-build/src/build.ts +++ /dev/null @@ -1,185 +0,0 @@ -#!/usr/bin/env node - -import { readdir, readFile, writeFile } from 'fs/promises' -import { join } from 'path' - -import { SKILLS, DEFAULT_SKILL, SkillConfig } from './config' -import { parseRuleFile, RuleFile } from './parser' -import { Section } from './types' - -const args = process.argv.slice(2) -const upgradeVersion = args.includes('--upgrade-version') -const skillArg = args.find((arg) => arg.startsWith('--skill=')) -const skillName = skillArg ? skillArg.split('=')[1] : null -const buildAll = args.includes('--all') - -function generateMarkdown( - sections: Section[], - metadata: { - version: string - organization: string - date: string - }, - skillConfig: SkillConfig -): string { - let md = `# ${skillConfig.title}\n\n` - md += `**Version ${metadata.version}** \n` - md += `${metadata.organization} \n` - md += `${metadata.date}\n\n` - md += `---\n\n` - md += `---\n\n` - md += `## Table of Contents\n\n` - - sections.forEach((section) => { - md += `${section.number}. [${section.title}](#${section.number}-${section.title.toLowerCase().replace(/\s+/g, '-')}) - **${section.impact}**\n` - - section.rules.forEach((rule) => { - const anchor = `${rule.id} ${rule.title}` - .toLowerCase() - .replace(/\s+/g, '-') - .replace(/[^\w-]/g, '') - - md += ` - ${rule.id} [${rule.title}](#${anchor})\n` - }) - }) - - md += `\n---\n\n` - - sections.forEach((section) => { - md += `## ${section.number}. ${section.title}\n\n` - md += `**Impact: ${section.impact}**\n\n` - - section.rules.forEach((rule) => { - md += `### ${rule.id} ${rule.title}\n\n` - md += `**Impact: ${rule.impact}**\n\n` - md += `${rule.explanation}\n\n` - - rule.examples.forEach((example) => { - // Only generate code block if there's actual code - if (example.code && example.code.trim()) { - md += `\`\`\`${example.language || 'canvas'}\n` - } - - if (example.additionalText) { - md += `${example.additionalText}\n\n` - } - }) - }) - - md += `---\n\n` - }) - - return md -} - -async function buildSkill(skillConfig: SkillConfig) { - console.log(`\nBuilding ${skillConfig.name}...`) - console.log(` Rules directory: ${skillConfig.rulesDir}`) - console.log(` Output file: ${skillConfig.outputFile}`) - - const files = await readdir(skillConfig.rulesDir) - const ruleFiles = files - .filter((f) => f.endsWith('.md') && !f.startsWith('_') && f !== 'README.md') - .sort() - - const ruleData: RuleFile[] = [] - for (const file of ruleFiles) { - const filePath = join(skillConfig.rulesDir, file) - try { - const parsed = await parseRuleFile(filePath, skillConfig.sectionMap) - ruleData.push(parsed) - } catch (error) { - console.error(` Error parsing ${file}:`, error) - } - } - - const sectionsMap = new Map() - - ruleData.forEach(({ section, rule }) => { - if (!sectionsMap.has(section)) { - sectionsMap.set(section, { - number: section, - title: `Section ${section}`, - impact: rule.impact, - rules: [], - }) - } - sectionsMap.get(section)!.rules.push(rule) - }) - - sectionsMap.forEach((section) => { - section.rules.sort((a, b) => - a.title.localeCompare(b.title, 'en-US', { sensitivity: 'base' }) - ) - - section.rules.forEach((rule, index) => { - rule.id = `${section.number}.${index + 1}` - rule.subsection = index + 1 - }) - }) - - const sections = Array.from(sectionsMap.values()).sort( - (a, b) => a.number - b.number - ) - - const sectionsFile = join(skillConfig.rulesDir, '_sections.md') - try { - const sectionsContent = await readFile(sectionsFile, 'utf-8') - - const sectionBlocks = sectionsContent - .split(/(?=^## \d+\. )/m) - .filter(Boolean) - - for (const block of sectionBlocks) { - const headerMatch = block.match(/^## (\d+)\.\s+(.+?)(?:\s+\([^)]+\))?$/m) - if (!headerMatch) continue - - const sectionNumber = parseInt(headerMatch[1]) - const sectionTitle = headerMatch[2].trim() - - const section = sections.find((s) => s.number === sectionNumber) - if (section) { - section.title = sectionTitle - } - } - } catch (error) { - console.warn(' Warning: Could not read _sections.md, using defaults') - } - - let metadata - metadata = { - version: '1.0.0', - organization: 'Blutui', - date: new Date().toLocaleDateString('en-US', { - month: 'long', - year: 'numeric', - }), - } - - const markdown = generateMarkdown(sections, metadata, skillConfig) - - await writeFile(skillConfig.outputFile, markdown, 'utf-8') - - console.log( - ` Built AGENTS.md with ${sections.length} sections and ${ruleData.length} rules` - ) -} - -async function build() { - try { - console.log('Building AGENTS.md from rules...') - - if (buildAll) { - } else if (skillName) { - } else { - await buildSkill(SKILLS[DEFAULT_SKILL]) - } - - console.log('\nBuild complete ✓') - } catch (error) { - console.error('Build failed:', error) - process.exit(1) - } -} - -build() diff --git a/packages/blutui-project-guidelines-build/src/config.ts b/packages/blutui-project-guidelines-build/src/config.ts deleted file mode 100644 index 787341f..0000000 --- a/packages/blutui-project-guidelines-build/src/config.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { dirname, join } from 'path' -import { fileURLToPath } from 'url' - -const __dirname = dirname(fileURLToPath(import.meta.url)) - -export const SKILLS_DIR = join(__dirname, '../../..', 'skills') -export const BUILD_DIR = join(__dirname, '..') - -export interface SkillConfig { - name: string - title: string - description: string - skillDir: string - rulesDir: string - outputFile: string - sectionMap: Record -} - -export const SKILLS: Record = { - 'blutui-project-guidelines': { - name: 'blutui-project-guidelines', - title: 'Blutui Project Guidelines', - description: 'Blutui project codebase guidelines', - skillDir: join(SKILLS_DIR, 'blutui-project-guidelines'), - rulesDir: join(SKILLS_DIR, 'blutui-project-guidelines/rules'), - outputFile: join(SKILLS_DIR, 'blutui-project-guidelines/AGENTS.md'), - sectionMap: { - foundation: 1, - }, - }, -} - -export const DEFAULT_SKILL = 'blutui-project-guidelines' diff --git a/packages/blutui-project-guidelines-build/src/parser.ts b/packages/blutui-project-guidelines-build/src/parser.ts deleted file mode 100644 index 0804d06..0000000 --- a/packages/blutui-project-guidelines-build/src/parser.ts +++ /dev/null @@ -1,182 +0,0 @@ -import { basename } from 'path' -import { Example, ImpactLevel, Rule } from './types' -import { readFile } from 'fs/promises' - -export interface RuleFile { - section: number - subsection?: number - rule: Rule -} - -export async function parseRuleFile( - filePath: string, - sectionMap?: Record -): Promise { - const rawContent = await readFile(filePath, 'utf-8') - const content = rawContent.replace(/\r\n/g, '\n') - const lines = content.split('\n') - - let frontmatter: Record = {} - let contentStart = 0 - - if (content.startsWith('---')) { - const frontmatterEnd = content.indexOf('---', 3) - if (frontmatterEnd !== -1) { - const frontmatterText = content.slice(3, frontmatterEnd).trim() - frontmatterText.split('\n').forEach((line) => { - const [key, ...valueParts] = line.split(':') - if (key && valueParts.length) { - const value = valueParts.join(':').trim() - frontmatter[key.trim()] = value.replace(/^["']|["']$/g, '') - } - }) - contentStart = frontmatterEnd + 3 - } - } - - const ruleContent = content.slice(contentStart).trim() - const ruleLines = ruleContent.split('\n') - - let title = '' - let titleLine = 0 - for (let i = 0; i < ruleLines.length; i++) { - if (ruleLines[i].startsWith('##')) { - title = ruleLines[i].replace(/^##+\s*/, '').trim() - titleLine = i - break - } - } - - let impact: Rule['impact'] = 'MEDIUM' - let impactDescription = '' - let explanation = '' - let examples: Rule['examples'] = [] - let reference: string[] = [] - - let currentExample: Example | null = null - let inCodeBlock = false - let codeBlockLanguage = 'canvas' - let codeBlockContent: string[] = [] - let afterCodeBlock = false - let additionalText: string[] = [] - let hasCodeBlockForCurrentExample = false - - for (let i = titleLine + 1; i < ruleLines.length; i++) { - const line = ruleLines[i] - - if (line.includes('**Impact:')) { - const match = line.match( - /\*\*Impact:\s*(\w+(?:-\w+)?)\s*(?:\(([^)]+)\))?/i - ) - if (match) { - impact = match[1].toUpperCase().replace(/-/g, '-') as ImpactLevel - impactDescription = match[2] || '' - } - continue - } - - // Code block start - if (line.startsWith('```')) { - if (inCodeBlock) { - console.log(codeBlockContent) - // End of code block - if (currentExample) { - currentExample.code = codeBlockContent.join('\n') - currentExample.language = codeBlockLanguage - } - codeBlockContent = [] - inCodeBlock = false - afterCodeBlock = true - } else { - // Start of code block - inCodeBlock = true - hasCodeBlockForCurrentExample = true - codeBlockLanguage = line.slice(3).trim() || 'typescript' - codeBlockContent = [] - afterCodeBlock = false - } - continue - } - - if (inCodeBlock) { - codeBlockContent.push(line) - continue - } - - // Example label (Incorrect, Correct, Example, Usage, Implementation, etc.) - // Match pattern: **Label:** or **Label (description):** at end of line - // This distinguishes example labels from inline bold text like "**Trade-off:** some text" - const labelMatch = line.match(/^\*\*([^:]+?):\*?\*?$/) - if (labelMatch) { - const fullLabel = labelMatch[1].trim() - // Try to extract description from parentheses if present (handles simple cases) - // For nested parentheses, we keep the full label - const descMatch = fullLabel.match( - /^([A-Za-z]+(?:\s+[A-Za-z]+)*)\s*\(([^()]+)\)$/ - ) - currentExample = { - label: descMatch ? descMatch[1].trim() : fullLabel, - description: descMatch ? descMatch[2].trim() : undefined, - code: '', - language: codeBlockLanguage, - } - continue - } - - // Regular text (explanation or additional context after examples) - if (line.trim() && !line.startsWith('#')) { - if (!currentExample && !inCodeBlock) { - // Main explanation before any examples - explanation += (explanation ? '\n\n' : '') + line - } else if ( - currentExample && - (afterCodeBlock || !hasCodeBlockForCurrentExample) - ) { - // Text after a code block, or text in a section without a code block - // (e.g., "When NOT to use this pattern:" with bullet points instead of code) - additionalText.push(line) - } - } - } - - // Handle last example if still open - if (currentExample) { - if (additionalText.length > 0) { - currentExample.additionalText = additionalText.join('\n\n') - } - examples.push(currentExample) - } - - const filename = basename(filePath) - - const filenameParts = filename.replace('.md', '').split('-') - let section = 0 - - for (let len = filenameParts.length; len > 0; len--) { - const prefix = filenameParts.slice(0, len).join('-') - if (sectionMap && sectionMap[prefix] !== undefined) { - section = sectionMap[prefix] - break - } - } - - const rule: Rule = { - id: '', - title: frontmatter.title || title, - section, - subsection: undefined, - impact: frontmatter.impact || impact, - impactDescription: frontmatter.impactDescription || impactDescription, - explanation: frontmatter.explanation || explanation.trim(), - examples, - tags: frontmatter.tags - ? frontmatter.tags.split(',').map((t: string) => t.trim()) - : undefined, - } - - return { - section, - subsection: 0, - rule, - } -} diff --git a/packages/blutui-project-guidelines-build/src/types.ts b/packages/blutui-project-guidelines-build/src/types.ts deleted file mode 100644 index 3344675..0000000 --- a/packages/blutui-project-guidelines-build/src/types.ts +++ /dev/null @@ -1,34 +0,0 @@ -export type ImpactLevel = - | 'CRITICAL' - | 'HIGH' - | 'MEDIUM-HIGH' - | 'MEDIUM' - | 'LOW-MEDIUM' - | 'LOW' - -export interface Example { - label: string - description?: string - code: string - language?: string - additionalText?: string -} - -export interface Rule { - id: string - title: string - section: number - subsection?: number - impact: ImpactLevel - impactDescription?: string - explanation: string - examples: Example[] - tags?: string[] -} - -export interface Section { - number: number - title: string - impact: ImpactLevel - rules: Rule[] -} diff --git a/packages/blutui-project-guidelines-build/src/validate.ts b/packages/blutui-project-guidelines-build/src/validate.ts deleted file mode 100644 index 55a2224..0000000 --- a/packages/blutui-project-guidelines-build/src/validate.ts +++ /dev/null @@ -1,14 +0,0 @@ -#!/usr/bin/env node - -async function validate() { - try { - console.log('Validating rule files...') - - console.log('\nAll rule files are valid ✓') - } catch (error) { - console.error('Validation failed:', error) - process.exit(1) - } -} - -validate() diff --git a/packages/blutui-project-guidelines-build/pnpm-lock.yaml b/pnpm-lock.yaml similarity index 100% rename from packages/blutui-project-guidelines-build/pnpm-lock.yaml rename to pnpm-lock.yaml diff --git a/skills/blutui-project-guidelines/AGENTS.md b/skills/blutui-project-guidelines/AGENTS.md index 4beee38..bb5a95f 100644 --- a/skills/blutui-project-guidelines/AGENTS.md +++ b/skills/blutui-project-guidelines/AGENTS.md @@ -1,344 +1,569 @@ # Blutui Project Guidelines -**Version 1.0.0** -Blutui -February 2026 - ---- - --- ## Table of Contents -0. [Section 0](#0-section-0) - **MEDIUM** - - 0.1 [Blutui Form standards and examples](#01-blutui-form-standards-and-examples) - - 0.2 [Blutui MCP](#02-blutui-mcp) - - 0.3 [Canopy](#03-canopy) - - 0.4 [Canvas - Template Engine](#04-canvas---template-engine) - - 0.5 [Cassettes](#05-cassettes) - - 0.6 [Collections](#06-collections) - - 0.7 [Courier](#07-courier) - - 0.8 [Routing Pattern Standard](#08-routing-pattern-standard) -1. [Foundation](#1-foundation) - **CRITICAL** - - 1.1 [Configuration](#11-configuration) - - 1.2 [File structure](#12-file-structure) - - 1.3 [Layouts and Templates](#13-layouts-and-templates) +0. [Section 0](#0-section-0) + - 0.1 [Canopy](#01-canopy) + - 0.2 [Cassettes - Project Version Control](#02-cassettes---project-version-control) + - 0.3 [Collections](#03-collections) + - 0.4 [Courier](#04-courier) + - 0.5 [Form Standards](#05-form-standards) + - 0.6 [MCP](#06-mcp) + - 0.7 [Routing Pattern Standards](#07-routing-pattern-standards) +1. [Foundation](#1-foundation) + - 1.1 [Courier Configuration](#11-courier-configuration) + - 1.2 [File Structure](#12-file-structure) + - 1.3 [Templates and Layouts](#13-templates-and-layouts) +2. [Templating](#2-templating) + - 2.1 [Canvas](#21-canvas) --- ## 0. Section 0 -**Impact: MEDIUM** +### 0.1 Canopy -### 0.1 Blutui Form standards and examples +## Canopy -**Impact: MEDIUM** +Canopy is Blutui's in-page editor that enables developers to construct the website's structure and allow content managers to edit pages directly within the interface. -Ensure your `views` directory is organized as follows: +Canopy functions enable a developer to add editing capabilities for a variety of elements in a project. For example editing text, lists, images, videos, buttons, audios and headings. -- `views/` +Use the search_blutui_documentation mcp tool to access the canopy functions that can be used in a project. - - `components/` +Reference: [Link to documentation](https://docs.blutui.com/docs/canopy/getting-started) - - `form.html` (Macro definitions) +### 0.2 Cassettes - Project Version Control - - `forms/` +## Cassettes - - `contact.html` (Form implementation) +Blutui Cassettes function as a version control system for your front-end logic, allowing you to manage and toggle between various website designs within a single project. -- **Allowed Types:** "text", "textarea", "radio", "select", "checkbox", "url", "email", "phone", "hidden", "time", "date", "number" +Each project can have multiple cassettes. -- Do not attempt to use custom field types. If a type is not on this list, default to `text` and notify the user. +To switch cassettes, update the cassette property within the `courier.json` file. If this property is missing or undefined, prompt the user to provide the specific cassette handle. -- Always transmit field types to the MCP in lowercase format. +Reference: [Link to documentation](https://dev.blutui.com/docs/cassettes/getting-started) -Reference: [Link to documentation](https://dev.blutui.com/guides/create-form) +### 0.3 Collections -### 0.2 Blutui MCP +## Collections -**Impact: MEDIUM** +Collections are the primary method for managing structured data within Blutui that define reusable data schemas using a wide range of field types. -- The `list_*` tools (such as `list_pages`, `list_forms`, etc.) can be used to list all the different resources available within the project. +- Unique handles are mandatory for all collections. The agent must validate handle availability before initiating the creation process. +- The available field types are: "text", "textarea", "richtext", "checkbox", "radio", "select", "email", "phone", "url", "date", "time", "date-time", "color", "file", "number" +- Do not add custom field types. -- The `retrieve_*` tools (such as `retrieve_page`, `retrieve_forms`, etc.) can be used to retrieve a single resources within the project. +Collections are designed for structured data modeling. Implement a Collection whenever you need to store multiple entries that share a consistent architecture (e.g., matching keys or data types) to ensure efficient querying and rendering. -- The `create_*` tools (such as `create_page`, `create_form`, etc.) can be used to create new resources within the project. +In the case, when a collection has a some connection to another collection, the agent can look into linking collections using the search_blutui_documentation mcp tool. -When creating a new page, the agent must follow this exact sequence: +To create, retreive and list collection or collection entries or links, the agent must utilize the tools present in Blutui MCP. + +### Connect collection data in a template + +```canvas +{% set authors = cms.collection('authors') %} +{% set author = authors | first %} +
+ {{ author.name }} +

+ {{ author.name }} +

+
+ {{ author.bio | raw }} +
+
+``` -1. **Create the layout file** in `views/layouts/` (e.g., `views/layouts/about.html`). The layout should extend a template and include components. +Reference: [Link to documentation](https://dev.blutui.com/docs/collections/getting-started) -2. **Run `list_pages`** to check for existing pages and avoid duplicates. +### 0.4 Courier -3. **Use the `create_page` MCP tool** to register the page in the Blutui dashboard, setting the layout path relative to `views/` (e.g., `layouts/about.html`). +## Courier -The agent must never skip the MCP step. A layout file without a corresponding page in the dashboard will not be accessible on the site. +Courier is a command-line interface tool to interact with a project. It allows user's to easily push code to their project and pull code down to their machine. -- Blutui Courier MCP comes with a powerful `search_blutui_documentation` tool you should use before any other approaches. +- Courier includes the Blutui MCP server that comes with powerful tools designed specifically for this project. -- You must use this tool to search the Blutui documentation before falling back to other approaches. +Courier must be installed and configured on the user's machine to enable full functionality. `courier version` command can be used to check if the user has courier installed. -- Search the documentation before making code changes to ensure we are taking the correct approach. +Reference: [Link to documentation](https://dev.blutui.com/docs/courier/getting-started) -- **Pre-flight Check:** For the `create_page`, `create_form` or `create_menu` tool, always execute the corresponding `list_*` tool first. +### 0.5 Form Standards -- **Validation:** Compare the user's desired `handle` against the `handle` properties in the retrieved list. +## Blutui Form standards and examples -- **Error Prevention:** If a match is found, do not call the creation tool. Instead, notify the user of the conflict. +### Directory Structure -- **Offline Mode:** If the `blutui` MCP tools are unreachable, you must ask the user for the specific `handle` property in the before suggesting a configuration. +Ensure your `views` directory is organized as follows: -Reference: +- `views/` + - `components/` + - `form.html` (Macro definitions) + - `forms/` + - `contact.html` (Form implementation) -- [Link to documentation - Connect to Blutui MCP](https://docs.blutui.com/docs/getting-started/agentic-development) +#### Usage Example (in `views/components/form.html`): -- [Link to documentation - Connect to Figma MCP](https://dev.blutui.com/guides/figma-to-blutui) +```canvas +{% macro input(data) %} + +{% endmacro %} -### 0.3 Canopy +{% macro field(data) %} +
+ + {% if data.type == 'textarea' %} + {{ _self.textarea(data) }} + {% else %} + {{ _self.input(data) }} + {% endif %} +
+{% endmacro %} +``` -**Impact: MEDIUM** +#### Usage Example (in `views/forms/contact.html`): -Canopy is Blutui's in-page editor that enables developers to construct the website's structure and allow content managers to edit pages directly within the interface. +```canvas +{% import 'components/form' as ui %} -Canopy functions enable a developer to add editing capabilities for a variety of elements in a project. For example editing text, lists, images, videos, buttons, audios and headings. +{% form 'contact' %} + {% for field in form.fields %} + {{ ui.field(field) }} + {% endfor %} -Use the search_blutui_documentation mcp tool to access the canopy functions that can be used in a project. + +{% endform %} +``` -Reference: [Link to documentation](https://docs.blutui.com/docs/canopy/getting-started) +### Form Field Constraints -### 0.4 Canvas - Template Engine +- **Allowed Types:** "text", "textarea", "radio", "select", "checkbox", "url", "email", "phone", "hidden", "time", "date", "number" +- Do not attempt to use custom field types. If a type is not on this list, default to `text` and notify the user. +- Always transmit field types to the MCP in lowercase format. -**Impact: MEDIUM** +Reference: [Link to documentation](https://dev.blutui.com/guides/create-form) -Canvas serves as the template engine for Blutui, combining HTML, CSS, and JavaScript with unique Canvas logic to create fully customized project designs. +### 0.6 MCP -- The template is a regular text file. It can generate any text-based format (HTML, XML, CSV, LaTeX, etc.). The file extension is ".canvas". +## Blutui MCP -- A template contains variables, tags, filters, functions, tests, expressions and other templating festures, which get replaced with values when the template is evaluated, and tags, which control the template's logic. +### Available MCP tools -**Example** +- The `list_*` tools (such as `list_pages`, `list_forms`, etc.) can be used to list all the different resources available within the project. +- The `retrieve_*` tools (such as `retrieve_page`, `retrieve_forms`, etc.) can be used to retrieve a single resources within the project. +- The `create_*` tools (such as `create_page`, `create_form`, etc.) can be used to create new resources within the project. -- There are two kinds of delimiters: +### Page Creation Workflow - - {% ... %}: Used for executing statements. +When creating a new page, the agent must follow this exact sequence: - - {{ ... }} : Used for printing values to the rendered page. +1. **Create the layout file** in `views/layouts/` (e.g., `views/layouts/about.html`). The layout should extend a template and include components. +2. **Run `list_pages`** to check for existing pages and avoid duplicates. +3. **Use the `create_page` MCP tool** to register the page in the Blutui dashboard, setting the layout path relative to `views/` (e.g., `layouts/about.html`). -The `include` function is useful to include a template and return the rendered content of that template into the current one. +The agent must never skip the MCP step. A layout file without a corresponding page in the dashboard will not be accessible on the site. -Included templates automatically inherit the data context of their parent. This ensures that any variables defined in your main template are immediately accessible within the included file without extra configuration. +### Search Documentation (Critically Important) -Templates in subdirectories can be accessed with a slash: +- Blutui Courier MCP comes with a powerful `search_blutui_documentation` tool you should use before any other approaches. +- You must use this tool to search the Blutui documentation before falling back to other approaches. +- Search the documentation before making code changes to ensure we are taking the correct approach. -Use `include` to pull reusable components from the `views/components/` directory into layouts: +### Handle Property Standards -Blocks are used for inheritance and act as placeholders and replacements at the same time. +- **Pre-flight Check:** For the `create_page`, `create_form` or `create_menu` tool, always execute the corresponding `list_*` tool first. +- **Validation:** Compare the user's desired `handle` against the `handle` properties in the retrieved list. +- **Error Prevention:** If a match is found, do not call the creation tool. Instead, notify the user of the conflict. +- **Offline Mode:** If the `blutui` MCP tools are unreachable, you must ask the user for the specific `handle` property in the before suggesting a configuration. -A block provides a way to change how a certain part of a template is rendered but it does not interfere in any way with the logic around it. +Reference: -Canvas allows to add the name of the block after the end tag for better readability. +- [Link to documentation - Connect to Blutui MCP](https://docs.blutui.com/docs/getting-started/agentic-development) +- [Link to documentation - Connect to Figma MCP](https://dev.blutui.com/guides/figma-to-blutui) -**Example:** Incorrect way to use blocks +### 0.7 Routing Pattern Standards -**Example:** Correct way to use blocks +## Routing Pattern Standard -A child template looks like this +The agent must pay attention to route patterns when the project would require to build many pages that will include more than one nested page. -A parent template looks like this +- A route pattern could include parameter(s) (e.g., `/team/:name`), which is accessed in code via `route.data.name`. +- The supported parameter types: string, slug, date, time, number. +- Each unique route pattern is mapped to a single template file. -**Example:** a block included within an if statement +Route patterns can be utilised to filter collections as shown below: -Maximize your workflow with template inheritance. Instead of duplicating code, build a single base template for common site features in `views/templates/defualt.html`. Use `blocks` to define areas where child templates can inject specific content, ensuring a consistent structure across every page. +```canvas +{% set members = cms.collection('team') %} +{% set member = members | filter(entry => (entry.name | slug) == route.data.name) | first %} +

{{ member.name }}

+

{{ member.bio }}

+``` -**Example**: Define a base.html template for a two-column page. +Use Blutui MCP tools to create, retreive and list route patterns. -In this example, the block tags define four blocks that child templates can fill in. All the block tag does is to tell the template engine that a child template may override those portions of the template. +When using the create_route-pattern tool, the agent must use the list_route-patterns tool and determine a unique route pattern. -A child template might look like this: +Reference: [Link to documentation - How do I use route patterns in my project?](https://docs.blutui.com/guides/add-route-patterns) -The `extends` tag can be used to extend a template from another one. Canvas does not support multiple inheritance. +--- -- Use the search_blutui_documentation tool in Blutui MCP to find more information on available tags, filters, functions, tests, expressions and other templating festures. +## 1. Foundation -Always follow the 3-tier pattern when building pages: +### 1.1 Courier Configuration -1. **Template** (`templates/default.html`) — Defines the overall HTML structure with `block` placeholders. +The `handle` property is **required** and specifies the unique identifier for the Blutui project. Always prompt the user for it, never guess or fabricate. -2. **Layout** (`layouts/about.html`) — Extends the template using `{% extends %}`, fills `block` content, and includes components. +The `cassette` property determines which project version is active. -3. **Component** (`components/hero.html`) — A reusable UI fragment included via `{{ include() }}`. +**Minimal config:** -**Example:** Complete 3-tier composition +```json +{ + "cassette": "default", + "handle": "project-handle" +} +``` -Template (`views/templates/default.html`): +After making changes to the `courier.json`, instruct user to restart their `courier dev` session or the Blutui MCP server if it's running. -Component (`views/components/hero.html`): +Reference: [Courier configuration](https://dev.blutui.com/docs/courier/configuration) -Layout (`views/layouts/about.html`): +### 1.2 File Structure -Reference: [Link to documentation](https://dev.blutui.com/guides/what-is-blutui-canvas) +## File structure -### 0.5 Cassettes +### "/public" directory -**Impact: MEDIUM** +Store assets including compiled JS/CSS, images and static PDFs. -Blutui Cassettes function as a version control system for your front-end logic, allowing you to manage and toggle between various website designs within a single project. +### "/views" directory -Each project can have multiple cassettes. +This folder is the primary environment for UI development. Follow these sub-directory conventions: -To switch cassettes, update the cassette property within the `courier.json` file. If this property is missing or undefined, prompt the user to provide the specific cassette handle. +- "templates/": Has files with reusable design bases and system views. + - "default.html": The foundational template for a Blutui project. This file forms the outermost structure of a Blutui project. It features essential sections like the head, where style definitions reside, and the body, where content gets placed. The most efficient way to build upon this file is by using inheritance, capitalising on the block tag. + - "404.html": A template for handling "Page Not Found" errors. +- "layouts/": The layouts folder is the **only** way to create pages in a project. Each layout file maps to a page registered via the Blutui dashboard or MCP tools. **Do not create a `pages/` directory.** All page content belongs in layout files. +- "components/": Contains atomic, reusable UI fragments. Always create components for repeated UI elements (headers, footers, hero sections, CTAs, cards, etc.) and include them in layouts using `{{ include('components/filename.html') }}`. -Reference: [Link to documentation](https://dev.blutui.com/docs/cassettes/getting-started) +Develop the project using a **component-first approach**. Always break the UI into reusable components in `views/components/`. Include components in layouts using `{{ include() }}` and use `{% block %}` tags for template inheritance. This minimizes duplicate work and ensures design updates stay consistent across all project views. -### 0.6 Collections +#### Understanding inheritance in Blutui -**Impact: MEDIUM** +Hierarchy: -Collections are the primary method for managing structured data within Blutui that define reusable data schemas using a wide range of field types. +- Parent: templates/default.html (Defines the overall structure). +- Child: layouts/index.html (Extends the template and provides specific page content). -- Unique handles are mandatory for all collections. The agent must validate handle availability before initiating the creation process. +To implement this, ensure the child layout file begins with the `{% extends 'templates/default.html' %}` declaration. Map your content to the parent's placeholders by wrapping your HTML in matching `block` names. Include reusable components within those blocks. -- The available field types are: "text", "textarea", "richtext", "checkbox", "radio", "select", "email", "phone", "url", "date", "time", "date-time", "color", "file", "number" +#### Style System Detection -- Do not add custom field types. +Before generating any HTML or component code, the agent must detect the project's existing style system: -Collections are designed for structured data modeling. Implement a Collection whenever you need to store multiple entries that share a consistent architecture (e.g., matching keys or data types) to ensure efficient querying and rendering. +1. Check for `tailwind.config.*` or `postcss.config.*` files in the project root. +2. Check for CSS framework CDN links (e.g., Bootstrap, Bulma) in `views/templates/default.html`. +3. Check for CSS files in the `/public` directory. -In the case, when a collection has a some connection to another collection, the agent can look into linking collections using the search_blutui_documentation mcp tool. +- If a style system is found (e.g., TailwindCSS), **always use its utility classes and conventions** in all generated HTML and components. +- If no style system is detected, **ask the user** which style approach they want before generating any HTML. +- Never generate unstyled or bare HTML when a style system is available in the project. -To create, retreive and list collection or collection entries or links, the agent must utilize the tools present in Blutui MCP. +Reference: [Link to documentation](https://docs.blutui.com/docs/getting-started/folder-structure) -Reference: [Link to documentation](https://dev.blutui.com/docs/collections/getting-started) +### 1.3 Templates and Layouts -### 0.7 Courier +## Layouts and Templates -**Impact: MEDIUM** +### Templates -Courier is a command-line interface tool to interact with a project. It allows user's to easily push code to their project and pull code down to their machine. +- A template defines the overall structure of the project, including common elements like headers, footers, and navigation menus used to provide a consistent look and feel across multiple pages in a project. +- A template can be extended by another template file but not a layout. -- Courier includes the Blutui MCP server that comes with powerful tools designed specifically for this project. +### Layouts -Courier must be installed and configured on the user's machine to enable full functionality. `courier version` command can be used to check if the user has courier installed. +- Layouts are the **only** way to create pages in Blutui. Each layout file in `views/layouts/` corresponds to a page created via the Blutui dashboard or MCP tools. +- **Never create files in a `pages/` directory.** The `pages/` directory must be ignored entirely. All page content lives in layout files. +- When using the `layout`, `template`, `post_layout` or `blog_layout` parameters in any Blutui MCP tool, make sure the layout file path is relative to the `views` directory (e.g., `layouts/about.html`, not `views/layouts/about.html`). +- Always place layout files in the `views/layouts` directory. -Reference: [Link to documentation](https://dev.blutui.com/docs/courier/getting-started) +### Page Creation Workflow -### 0.8 Routing Pattern Standard +Follow these steps every time a new page is needed: -**Impact: MEDIUM** +1. **Check for the layouts folder:** If `views/layouts/` does not exist, create it. If it already exists, proceed. +2. **Create the layout file:** Create a new `.html` file inside `views/layouts/` (e.g., `views/layouts/about.html`). +3. **Extend a template:** The layout must extend a template using `{% extends 'templates/default.html' %}`. +4. **Build with components:** Create reusable UI fragments in `views/components/` and include them in the layout using `{{ include('components/hero.html') }}`. +5. **Register the page via MCP:** Use the Blutui MCP `create_page` tool to create the page in the dashboard, setting the layout path relative to `views/` (e.g., `layouts/about.html`). -The agent must pay attention to route patterns when the project would require to build many pages that will include more than one nested page. +**Example:** A layout file at `views/layouts/about.html` -- A route pattern could include parameter(s) (e.g., `/team/:name`), which is accessed in code via `route.data.name`. +```canvas +{% extends 'templates/default.html' %} -- The supported parameter types: string, slug, date, time, number. +{% block content %} + {{ include('components/hero.html') }} -- Each unique route pattern is mapped to a single template file. +
+

About Us

+

Welcome to our about page.

+
-Route patterns can be utilised to filter collections as shown below: + {{ include('components/cta.html') }} +{% endblock %} +``` -Use Blutui MCP tools to create, retreive and list route patterns. +Reference: [How to create a layout](https://docs.blutui.com/guides/create-layout) -When using the create_route-pattern tool, the agent must use the list_route-patterns tool and determine a unique route pattern. +--- -Reference: [Link to documentation - How do I use route patterns in my project?](https://docs.blutui.com/guides/add-route-patterns) +## 2. Templating ---- +### 2.1 Canvas -## 1. Foundation +## Canvas + +Canvas serves as the template engine for Blutui, combining HTML, CSS, and JavaScript with unique Canvas logic to create fully customized project designs. -**Impact: CRITICAL** +- The template is a regular text file. It can generate any text-based format (HTML, XML, CSV, LaTeX, etc.). The file extension is ".canvas". +- A template contains variables, tags, filters, functions, tests, expressions and other templating festures, which get replaced with values when the template is evaluated, and tags, which control the template's logic. -### 1.1 Configuration +**Example** -**Impact: CRITICAL** +```canvas + + + + My Webpage + -The handle is a required property in the `courier.json` file located in the root directory of the project. It specifies the unique identifier for the Blutui project. The agent must always prompt the user to provide the `handle` property. The agent must not attempt to guess or fabricate a handle. A missing handle could be one of the reasons for failure of Blutui mcp tool calls. + + -The cassette specified in the `courier.json` file determines which version of the project is active. +

My Webpage

+ {{ a_variable }} + + +``` -**Prior to making any changes to the `courier.json` file, the agent must confirm if the user has logged in using +- There are two kinds of delimiters: + - {% ... %}: Used for executing statements. + - {{ ... }} : Used for printing values to the rendered page. -the command below and add the token.txt file to the root directory of the project. If the user has not done this, the agent must instruct the user to complete this step first.** +### Including other templates -**After making any changes to the `courier.json` file, the agent must instruct the user to restart the Blutui MCP server.** +The `include` function is useful to include a template and return the rendered content of that template into the current one. -Reference: [Link to documentation](https://dev.blutui.com/docs/courier/configuration) +```canvas +{{ include('sidebar.html') }} +``` -### 1.2 File structure +Included templates automatically inherit the data context of their parent. This ensures that any variables defined in your main template are immediately accessible within the included file without extra configuration. -**Impact: MEDIUM** +```canvas +{% for box in boxes %} + {{ include('render_box.html') }} +{% endfor %} +// The included template render_box.html is able to access the box variable. +``` -Store assets including compiled JS/CSS, images and static PDFs. +Templates in subdirectories can be accessed with a slash: -This folder is the primary environment for UI development. Follow these sub-directory conventions: +```canvas +{{ include('sections/articles/sidebar.html') }} +``` -* "templates/": Has files with reusable design bases and system views. +Use `include` to pull reusable components from the `views/components/` directory into layouts: - * "default.html": The foundational template for a Blutui project. This file forms the outermost structure of a Blutui project. It features essential sections like the head, where style definitions reside, and the body, where content gets placed. The most efficient way to build upon this file is by using inheritance, capitalising on the block tag. +```canvas +{{ include('components/header.html') }} +{{ include('components/hero.html') }} +{{ include('components/footer.html') }} +``` - * "404.html": A template for handling "Page Not Found" errors. +### Blocks tag: `blocks` -* "layouts/": The layouts folder is the **only** way to create pages in a project. Each layout file maps to a page registered via the Blutui dashboard or MCP tools. **Do not create a `pages/` directory.** All page content belongs in layout files. +Blocks are used for inheritance and act as placeholders and replacements at the same time. -* "components/": Contains atomic, reusable UI fragments. Always create components for repeated UI elements (headers, footers, hero sections, CTAs, cards, etc.) and include them in layouts using `{{ include('components/filename.html') }}`. +A block provides a way to change how a certain part of a template is rendered but it does not interfere in any way with the logic around it. -Develop the project using a **component-first approach**. Always break the UI into reusable components in `views/components/`. Include components in layouts using `{{ include() }}` and use `{% block %}` tags for template inheritance. This minimizes duplicate work and ensures design updates stay consistent across all project views. +Canvas allows to add the name of the block after the end tag for better readability. -Hierarchy: +**Example:** Incorrect way to use blocks -* Parent: templates/default.html (Defines the overall structure). +```canvas +{# base.html #} -* Child: layouts/index.html (Extends the template and provides specific page content). +{% for post in posts %} + {% block post %} +

{{ post.title }}

+

{{ post.body }}

+ {% endblock %} +{% endfor %} +``` -To implement this, ensure the child layout file begins with the `{% extends 'templates/default.html' %}` declaration. Map your content to the parent's placeholders by wrapping your HTML in matching `block` names. Include reusable components within those blocks. +**Example:** Correct way to use blocks -Before generating any HTML or component code, the agent must detect the project's existing style system: +A child template looks like this -1. Check for `tailwind.config.*` or `postcss.config.*` files in the project root. +```canvas +{# child.html #} -2. Check for CSS framework CDN links (e.g., Bootstrap, Bulma) in `views/templates/default.html`. +{% extends 'base.html' %} -3. Check for CSS files in the `/public` directory. +{% block post %} +
+
{{ post.title }}
+
{{ post.text }}
+
+{% endblock %} +``` -- If a style system is found (e.g., TailwindCSS), **always use its utility classes and conventions** in all generated HTML and components. +A parent template looks like this -- If no style system is detected, **ask the user** which style approach they want before generating any HTML. +```canvas +{% for post in posts %} +
+
{{ post.title }}
+
{{ post.text }}
+
+{% endfor %} +``` -- Never generate unstyled or bare HTML when a style system is available in the project. +**Example:** a block included within an if statement -Reference: [Link to documentation](https://docs.blutui.com/docs/getting-started/folder-structure) +```canvas +{% if posts is empty %} + {% block head %} + {{ parent() }} + // parent function renders contents in the parent block -### 1.3 Layouts and Templates + + {% endblock head %} +{% endif %} +``` -**Impact: MEDIUM** +### Template Inheritence -- A template defines the overall structure of the project, including common elements like headers, footers, and navigation menus used to provide a consistent look and feel across multiple pages in a project. +Maximize your workflow with template inheritance. Instead of duplicating code, build a single base template for common site features in `views/templates/defualt.html`. Use `blocks` to define areas where child templates can inject specific content, ensuring a consistent structure across every page. -- A template can be extended by another template file but not a layout. +**Example**: Define a base.html template for a two-column page. -- Layouts are the **only** way to create pages in Blutui. Each layout file in `views/layouts/` corresponds to a page created via the Blutui dashboard or MCP tools. +```canvas + + + + {% block head %} + + {% block title %}{% endblock %} - My Webpage + {% endblock %} + + + +
{% block content %}{% endblock %}
+ + + +``` -- **Never create files in a `pages/` directory.** The `pages/` directory must be ignored entirely. All page content lives in layout files. +In this example, the block tags define four blocks that child templates can fill in. All the block tag does is to tell the template engine that a child template may override those portions of the template. -- When using the `layout`, `template`, `post_layout` or `blog_layout` parameters in any Blutui MCP tool, make sure the layout file path is relative to the `views` directory (e.g., `layouts/about.html`, not `views/layouts/about.html`). +A child template might look like this: -- Always place layout files in the `views/layouts` directory. +```canvas +{% extends 'base.html' %} -Follow these steps every time a new page is needed: +{% block title %}Index{% endblock %} -1. **Check for the layouts folder:** If `views/layouts/` does not exist, create it. If it already exists, proceed. +{% block head %} + {{ parent() }} + +{% endblock %} -2. **Create the layout file:** Create a new `.html` file inside `views/layouts/` (e.g., `views/layouts/about.html`). +{% block content %} +

Index

+

+ Welcome to my awesome homepage. +

+{% endblock %} +``` -3. **Extend a template:** The layout must extend a template using `{% extends 'templates/default.html' %}`. +The `extends` tag can be used to extend a template from another one. Canvas does not support multiple inheritance. -4. **Build with components:** Create reusable UI fragments in `views/components/` and include them in the layout using `{{ include('components/hero.html') }}`. +- Use the search_blutui_documentation tool in Blutui MCP to find more information on available tags, filters, functions, tests, expressions and other templating festures. -5. **Register the page via MCP:** Use the Blutui MCP `create_page` tool to create the page in the dashboard, setting the layout path relative to `views/` (e.g., `layouts/about.html`). +### Composing Layouts with Components -**Example:** A layout file at `views/layouts/about.html` +Always follow the 3-tier pattern when building pages: -Reference: [Link to documentation - How to create a Layout](https://docs.blutui.com/guides/create-layout) +1. **Template** (`templates/default.html`) — Defines the overall HTML structure with `block` placeholders. +2. **Layout** (`layouts/about.html`) — Extends the template using `{% extends %}`, fills `block` content, and includes components. +3. **Component** (`components/hero.html`) — A reusable UI fragment included via `{{ include() }}`. ---- +**Example:** Complete 3-tier composition +Template (`views/templates/default.html`): + +```canvas + + + + {% block head %} + {% block title %}{% endblock %} + {% endblock %} + + + {{ include('components/header.html') }} + {% block content %}{% endblock %} + {{ include('components/footer.html') }} + + +``` + +Component (`views/components/hero.html`): + +```canvas +
+

{{ heading }}

+

{{ subheading }}

+
+``` + +Layout (`views/layouts/about.html`): + +```canvas +{% extends 'templates/default.html' %} + +{% block title %}About Us{% endblock %} + +{% block content %} + {{ include('components/hero.html') }} +
+

Page content goes here.

+
+{% endblock %} +``` + +Reference: [Link to documentation](https://dev.blutui.com/guides/what-is-blutui-canvas) + +--- diff --git a/skills/blutui-project-guidelines/README.md b/skills/blutui-project-guidelines/README.md deleted file mode 100644 index 3fd0bca..0000000 --- a/skills/blutui-project-guidelines/README.md +++ /dev/null @@ -1,78 +0,0 @@ -# React Best Practices - -A structured repository for creating and maintaining React Best Practices optimized for agents and LLMs. - -## Structure - -- `rules/` - Individual rule files (one per rule) - - `_sections.md` - Section metadata (titles, impacts, descriptions) - - `_template.md` - Template for creating new rules - - `foundation-file-structure.md` - Individual rule files -- `metadata.json` - Document metadata (version, organization, abstract) -- __`AGENTS.md`__ - Compiled output (generated) - -## Creating a New Rule - -1. Copy `rules/_template.md` to `rules/canvas-description.md` -2. Choose the appropriate area prefix: - - `foundation-` for Eliminating Waterfalls (Section 1) - - `cassettes-` for Bundle Size Optimization (Section 2) - - `collections-` for Server-Side Performance (Section 3) - - `courier-` for Client-Side Data Fetching (Section 4) - - `canvas-` for Re-render Optimization (Section 5) - - `mcp-` for Rendering Performance (Section 6) - - `canopy-` for JavaScript Performance (Section 7) -3. Fill in the frontmatter and content -4. Ensure you have clear examples with explanations - -## Rule File Structure - -Each rule file should follow this structure: - -```markdown ---- -title: Rule Title Here -impact: MEDIUM -impactDescription: Optional description -tags: tag1, tag2, tag3 ---- - -## Rule Title Here - -Brief explanation of the rule and why it matters. - -Explanatory text with examples. - -Reference: [Link to documentation](https://dev.blutui.com) - -or a list of links referencing Blutui documentation - -## File Naming Convention - -- Files starting with `_` are special (excluded from build) -- Rule files: `area-description.md` (e.g., `async-parallel.md`) -- Section is automatically inferred from filename prefix - -## Impact Levels - -- `CRITICAL` - Highest priority -- `HIGH` - Significant performance improvements -- `MEDIUM-HIGH` - Moderate-high gains -- `MEDIUM` - Moderate performance improvements -- `LOW-MEDIUM` - Low-medium gains -- `LOW` - Incremental improvements - -## Contributing - -When adding or modifying rules: - -1. Use the correct filename prefix for your section -2. Follow the `_template.md` structure -3. Include clear bad/good examples with explanations -4. Add appropriate tags -5. Run push the code to the master branch to regenerate AGENTS.md -6. Rules are automatically sorted by title - no need to manage numbers! - -## Acknowledgments - -Originally [Blutui](https://blutui.com). \ No newline at end of file diff --git a/skills/blutui-project-guidelines/SKILL.md b/skills/blutui-project-guidelines/SKILL.md index f1eadaa..d487601 100644 --- a/skills/blutui-project-guidelines/SKILL.md +++ b/skills/blutui-project-guidelines/SKILL.md @@ -1,83 +1,62 @@ --- name: blutui-project-guidelines -description: The Blutui Project guidelines are specifically curated by Blutui maintainers for this project. These guidelines should be followed closely to enhance the user's satisfaction in building a Blutui project. -license: MIT -metadata: - author: Blutui - version: "1.0.0" +description: undefined +license: undefined --- # Blutui Project Guidelines -Comprehensive guide for Blutui projects, maintained by Blutui. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. +Contains 11 rules across 3 categories, prioritized by impact to guide automated refactoring and code generation. ## When to Apply Reference these guidelines when: -- Creating a new Blutui project with/without a template -- Editing an existing Blutui project + +- Writing new Blutui project templates, layouts, components, and more ## Rule Categories by Priority | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| +| 0 | Section 0 | MEDIUM | `undefined-` | | 1 | Foundation | CRITICAL | `foundation-` | -| 2 | Model Context Protocol (MCP) | HIGH | `mcp-` | -| 3 | Canvas | CRITICAL | `canvas-` | -| 4 | Courier | MEDIUM | `courier-` | -| 5 | Cassette | LOW | `cassette-` | -| 6 | Collections | CRITICAL | `collections-` | -| 7 | Canopy | MEDIUM | `canopy-` | +| 2 | Templating | CRITICAL | `templating-` | ## Quick Reference -### 1. Foundation (CRITICAL) - -- `foundation-configuration` - Use to add or update a project configuration file -- `foundation-file-structure` - Use to understand the file structure of the project -- `foundation-templates-and-layouts` - Use to understand what templates, layouts and pages file should contain -- `foundation-form` - Use to create and update forms using Blutui syntax -- `foundation-route-pattern` - Use to create route patterns - -### 2. Model Context Protocol (MCP) (HIGH) - -- `mcp` - Use when utilising or suggested to utilise Blutui MCP - -### 3. Canvas (CRITICAL) - -- `canvas` - Use to write code using Blutui syntax +### 0. Section 0 (MEDIUM) -### 4. Courier (CRITICAL) +- `canopy` - Canopy +- `cassettes` - Cassettes - Project Version Control +- `collections` - Collections +- `courier` - Courier +- `forms` - Form Standards +- `mcp` - MCP +- `route-patterns` - Routing Pattern Standards -- `courier` - Use to understand Blutui CLI capabilities - -### 5. Cassettes (LOW) - -- `cassettes` - Use for project version control - -### 6. Collections (CRITICAL) +### 1. Foundation (CRITICAL) -- `collections` - Use to manage dynamic data +- `foundation-courier-configuration` - Courier Configuration +- `foundation-file-structure` - File Structure +- `foundation-templates-and-layouts` - Templates and Layouts -### 7. Canopy (MEDIUM) +### 2. Templating (CRITICAL) -- `canopy` - Use to define in-page editor functions +- `templating-canvas` - Canvas ## How to Use Read individual rule files for detailed explanations and code examples: ``` -rules/canvas.md -rules/mcp.md -rules/_sections.md +rules/canopy.md +rules/foundation-courier-configuration.md +rules/templating-canvas.md ``` - Each rule file contains: + - Brief explanation of why it matters -- Explanation on what, when or how to use it with examples -- Additional context and references to the documentation ## Full Compiled Document -For the complete guide with all rules expanded: `AGENTS.md` \ No newline at end of file +For the complete guide with all rules expanded: `AGENTS.md` diff --git a/skills/blutui-project-guidelines/metadata.json b/skills/blutui-project-guidelines/metadata.json deleted file mode 100644 index 59cf65f..0000000 --- a/skills/blutui-project-guidelines/metadata.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "version": "1.0.0", - "organization": "Blutui", - "date": "January 2026", - "title": "Blutui Project Guidelines", - "abstract": "The Blutui Project guidelines are specifically curated by Blutui maintainers for this project. These guidelines should be followed closely to enhance the user's satisfaction in building a Blutui project.", - "references": [ - "https://dev.blutui.com" - ] -} \ No newline at end of file diff --git a/skills/blutui-project-guidelines/rules/_sections.md b/skills/blutui-project-guidelines/rules/_sections.md index c03ec99..e00d45d 100644 --- a/skills/blutui-project-guidelines/rules/_sections.md +++ b/skills/blutui-project-guidelines/rules/_sections.md @@ -10,16 +10,16 @@ The section ID (in parentheses) is the filename prefix used to group rules. **Impact:** CRITICAL **Description:** The essential configuration, file structure, and standards required for every Blutui project. -## 2. Model Context Protocol (MCP) - -**Impact:** HIGH -**Description:** Standards and tooling for leveraging Blutui MCP to streamline development workflows and access project-specific resources. - -## 3. Canvas +## 2. Templating **Impact:** CRITICAL **Description:** Guide to using Blutui's template engine for building dynamic, data-driven pages with variables, tags, filters, and expressions. +## 3. Model Context Protocol (MCP) + +**Impact:** HIGH +**Description:** Standards and tooling for leveraging Blutui MCP to streamline development workflows and access project-specific resources. + ## 4. Courier **Impact:** CRITICAL diff --git a/skills/blutui-project-guidelines/rules/_template.md b/skills/blutui-project-guidelines/rules/_template.md deleted file mode 100644 index 26870fe..0000000 --- a/skills/blutui-project-guidelines/rules/_template.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Rule Title Here -impact: MEDIUM -impactDescription: Optional description of impact (e.g., "20-50% improvement") -tags: tag1, tag2 ---- - -## Rule Title Here - -Explanatory text with examples. - -Reference: [Link to documentation or resource](https://example.com) diff --git a/skills/blutui-project-guidelines/rules/canopy.md b/skills/blutui-project-guidelines/rules/canopy.md index f2737f1..8fbf170 100644 --- a/skills/blutui-project-guidelines/rules/canopy.md +++ b/skills/blutui-project-guidelines/rules/canopy.md @@ -1,6 +1,9 @@ -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Canopy | MEDIUM | Editor Integration - Critical for CMS-to-Frontend interactivity. Canopy allows developers to register components as editable assets; failure to implement correctly disables the in-page editing interface for the user. | in-page editor | +--- +title: Canopy +impact: MEDIUM +impactDescription: Editor Integration - Critical for CMS-to-Frontend interactivity. Canopy allows developers to register components as editable assets; failure to implement correctly disables the in-page editing interface for the user. +tags: in-page editor +--- ## Canopy diff --git a/skills/blutui-project-guidelines/rules/cassettes.md b/skills/blutui-project-guidelines/rules/cassettes.md index 52a137a..7238c4d 100644 --- a/skills/blutui-project-guidelines/rules/cassettes.md +++ b/skills/blutui-project-guidelines/rules/cassettes.md @@ -1,12 +1,15 @@ -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Cassettes - Project Version Control | LOW | Version Control Impact - High. This configuration is critical only during project version transitions. Incorrect setup will block the ability to switch versions or result in environment mismatches during a migration. | cassette, version control | +--- +title: Cassettes - Project Version Control +impact: LOW +impactDescription: Version Control Impact - High. This configuration is critical only during project version transitions. Incorrect setup will block the ability to switch versions or result in environment mismatches during a migration. +tags: cassette, version control +--- -## Cassettes +## Cassettes -Blutui Cassettes function as a version control system for your front-end logic, allowing you to manage and toggle between various website designs within a single project. +Blutui Cassettes function as a version control system for your front-end logic, allowing you to manage and toggle between various website designs within a single project. -Each project can have multiple cassettes. +Each project can have multiple cassettes. To switch cassettes, update the cassette property within the `courier.json` file. If this property is missing or undefined, prompt the user to provide the specific cassette handle. diff --git a/skills/blutui-project-guidelines/rules/collections.md b/skills/blutui-project-guidelines/rules/collections.md index 045298a..6bbdc35 100644 --- a/skills/blutui-project-guidelines/rules/collections.md +++ b/skills/blutui-project-guidelines/rules/collections.md @@ -1,20 +1,23 @@ -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Collections | CRITICAL | High Impact (90%) - This section governs the binding between frontend elements and Blutui Data Collections. Failure to configure this correctly results in broken dynamic content and prevents the UI from interacting with stored project data. | data, dynamic, data structure, collections | +--- +title: Collections +impact: CRITICAL +impactDescription: High Impact (90%) - This section governs the binding between frontend elements and Blutui Data Collections. Failure to configure this correctly results in broken dynamic content and prevents the UI from interacting with stored project data. +tags: data, dynamic, data structure, collections +--- ## Collections -Collections are the primary method for managing structured data within Blutui that define reusable data schemas using a wide range of field types. +Collections are the primary method for managing structured data within Blutui that define reusable data schemas using a wide range of field types. - Unique handles are mandatory for all collections. The agent must validate handle availability before initiating the creation process. -- The available field types are: "text", "textarea", "richtext", "checkbox", "radio", "select", "email", "phone", "url", "date", "time", "date-time", "color", "file", "number" +- The available field types are: "text", "textarea", "richtext", "checkbox", "radio", "select", "email", "phone", "url", "date", "time", "date-time", "color", "file", "number" - Do not add custom field types. Collections are designed for structured data modeling. Implement a Collection whenever you need to store multiple entries that share a consistent architecture (e.g., matching keys or data types) to ensure efficient querying and rendering. In the case, when a collection has a some connection to another collection, the agent can look into linking collections using the search_blutui_documentation mcp tool. -To create, retreive and list collection or collection entries or links, the agent must utilize the tools present in Blutui MCP. +To create, retreive and list collection or collection entries or links, the agent must utilize the tools present in Blutui MCP. ### Connect collection data in a template diff --git a/skills/blutui-project-guidelines/rules/courier.md b/skills/blutui-project-guidelines/rules/courier.md index 9d3160d..24b8f22 100644 --- a/skills/blutui-project-guidelines/rules/courier.md +++ b/skills/blutui-project-guidelines/rules/courier.md @@ -1,6 +1,9 @@ -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Courier | CRITICAL | Without Courier CLI, project updates cannot be pushed to the Blutui platform. It is essential for continuous integration, version synchronization, and maintaining a functional development lifecycle. | courier, command-line interface tool | +--- +title: Courier +impact: CRITICAL +impactDescription: Without Courier CLI, project updates cannot be pushed to the Blutui platform. It is essential for continuous integration, version synchronization, and maintaining a functional development lifecycle. +tags: courier, command-line interface tool +--- ## Courier diff --git a/skills/blutui-project-guidelines/rules/forms.md b/skills/blutui-project-guidelines/rules/forms.md index 841fc29..6ae46d4 100644 --- a/skills/blutui-project-guidelines/rules/forms.md +++ b/skills/blutui-project-guidelines/rules/forms.md @@ -1,12 +1,16 @@ -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Form Standards | CRITICAL | Strict adherence to Blutui Form Syntax is mandatory. Non-compliant syntax causes silent failures or data submission errors, preventing the form from processing correctly within the ecosystem. | form | +--- +title: Form Standards +impact: CRITICAL +impactDescription: Strict adherence to Blutui Form Syntax is mandatory. Non-compliant syntax causes silent failures or data submission errors, preventing the form from processing correctly within the ecosystem. +tags: form +--- ## Blutui Form standards and examples ### Directory Structure Ensure your `views` directory is organized as follows: + - `views/` - `components/` - `form.html` (Macro definitions) diff --git a/skills/blutui-project-guidelines/rules/foundation-configuration.md b/skills/blutui-project-guidelines/rules/foundation-configuration.md deleted file mode 100644 index c596b7b..0000000 --- a/skills/blutui-project-guidelines/rules/foundation-configuration.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Configuration -impact: CRITICAL -impactDescription: This configuration file is the core dependency for all Courier operations, Blutui MCP connectivity, and Cassette management. Loss or corruption will halt development workflows and severely degrade system performance. -tags: config, handle, cassette, courier.json, login, mcp ---- - -## Configuring Courier - -The handle is a required property in the `courier.json` file located in the root directory of the project. It specifies the unique identifier for the Blutui project. The agent must always prompt the user to provide the `handle` property. The agent must not attempt to guess or fabricate a handle. A missing handle could be one of the reasons for failure of Blutui mcp tool calls. - -The cassette specified in the `courier.json` file determines which version of the project is active. - -**Prior to making any changes to the `courier.json` file, the agent must confirm if the user has logged in using -the command below and add the token.txt file to the root directory of the project. If the user has not done this, the agent must instruct the user to complete this step first.** - -```bash -courier login --token < token.txt -``` - -```json -{ - "cassette": "default", - "handle": "project-handle" -} -``` - -**After making any changes to the `courier.json` file, the agent must instruct the user to restart the Blutui MCP server.** - -Reference: [Link to documentation](https://dev.blutui.com/docs/courier/configuration) diff --git a/skills/blutui-project-guidelines/rules/foundation-courier-configuration.md b/skills/blutui-project-guidelines/rules/foundation-courier-configuration.md new file mode 100644 index 0000000..d94b5db --- /dev/null +++ b/skills/blutui-project-guidelines/rules/foundation-courier-configuration.md @@ -0,0 +1,23 @@ +--- +title: Courier Configuration +impact: CRITICAL +impactDescription: Core dependency for Courier operations, MCP connectivity, and Cassette management. +tags: config, handle, cassette, courier.json, login, mcp +--- + +The `handle` property is **required** and specifies the unique identifier for the Blutui project. Always prompt the user for it, never guess or fabricate. + +The `cassette` property determines which project version is active. + +**Minimal config:** + +```json +{ + "cassette": "default", + "handle": "project-handle" +} +``` + +After making changes to the `courier.json`, instruct user to restart their `courier dev` session or the Blutui MCP server if it's running. + +Reference: [Courier configuration](https://dev.blutui.com/docs/courier/configuration) diff --git a/skills/blutui-project-guidelines/rules/foundation-file-structure.md b/skills/blutui-project-guidelines/rules/foundation-file-structure.md index 11c122d..6f3606e 100644 --- a/skills/blutui-project-guidelines/rules/foundation-file-structure.md +++ b/skills/blutui-project-guidelines/rules/foundation-file-structure.md @@ -1,6 +1,9 @@ -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| File Structure | CRITICAL | Structural Integrity - Adherence to the Blutui file structure is mandatory. Deviating from these conventions breaks core system compatibility, rendering the project non-functional and preventing deployment. | project, file structure, public, views, assets, layouts, templates, components | +--- +title: File Structure +impact: CRITICAL +impactDescription: Structural Integrity - Adherence to the Blutui file structure is mandatory. Deviating from these conventions breaks core system compatibility, rendering the project non-functional and preventing deployment. +tags: project, file structure, public, views, assets, layouts, templates, components +--- ## File structure @@ -12,11 +15,11 @@ Store assets including compiled JS/CSS, images and static PDFs. This folder is the primary environment for UI development. Follow these sub-directory conventions: -* "templates/": Has files with reusable design bases and system views. - * "default.html": The foundational template for a Blutui project. This file forms the outermost structure of a Blutui project. It features essential sections like the head, where style definitions reside, and the body, where content gets placed. The most efficient way to build upon this file is by using inheritance, capitalising on the block tag. - * "404.html": A template for handling "Page Not Found" errors. -* "layouts/": The layouts folder is the **only** way to create pages in a project. Each layout file maps to a page registered via the Blutui dashboard or MCP tools. **Do not create a `pages/` directory.** All page content belongs in layout files. -* "components/": Contains atomic, reusable UI fragments. Always create components for repeated UI elements (headers, footers, hero sections, CTAs, cards, etc.) and include them in layouts using `{{ include('components/filename.html') }}`. +- "templates/": Has files with reusable design bases and system views. + - "default.html": The foundational template for a Blutui project. This file forms the outermost structure of a Blutui project. It features essential sections like the head, where style definitions reside, and the body, where content gets placed. The most efficient way to build upon this file is by using inheritance, capitalising on the block tag. + - "404.html": A template for handling "Page Not Found" errors. +- "layouts/": The layouts folder is the **only** way to create pages in a project. Each layout file maps to a page registered via the Blutui dashboard or MCP tools. **Do not create a `pages/` directory.** All page content belongs in layout files. +- "components/": Contains atomic, reusable UI fragments. Always create components for repeated UI elements (headers, footers, hero sections, CTAs, cards, etc.) and include them in layouts using `{{ include('components/filename.html') }}`. Develop the project using a **component-first approach**. Always break the UI into reusable components in `views/components/`. Include components in layouts using `{{ include() }}` and use `{% block %}` tags for template inheritance. This minimizes duplicate work and ensures design updates stay consistent across all project views. @@ -24,8 +27,8 @@ Develop the project using a **component-first approach**. Always break the UI in Hierarchy: -* Parent: templates/default.html (Defines the overall structure). -* Child: layouts/index.html (Extends the template and provides specific page content). +- Parent: templates/default.html (Defines the overall structure). +- Child: layouts/index.html (Extends the template and provides specific page content). To implement this, ensure the child layout file begins with the `{% extends 'templates/default.html' %}` declaration. Map your content to the parent's placeholders by wrapping your HTML in matching `block` names. Include reusable components within those blocks. diff --git a/skills/blutui-project-guidelines/rules/foundation-templates-and-layouts.md b/skills/blutui-project-guidelines/rules/foundation-templates-and-layouts.md index f8cc69b..91072ac 100644 --- a/skills/blutui-project-guidelines/rules/foundation-templates-and-layouts.md +++ b/skills/blutui-project-guidelines/rules/foundation-templates-and-layouts.md @@ -1,6 +1,9 @@ -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Templates and Layouts | CRITICAL | Functional Impact - Blutui templates and layouts govern core project logic. Deviating from these structures results in broken inheritance and rendering failures, preventing the project from functioning as intended. | project, file structure, views, templates, layouts, components | +--- +title: Templates and Layouts +impact: CRITICAL +impactDescription: Functional Impact - Blutui templates and layouts govern core project logic. Deviating from these structures results in broken inheritance and rendering failures, preventing the project from functioning as intended. +tags: project, file structure, views, templates, layouts, components +--- ## Layouts and Templates @@ -43,4 +46,4 @@ Follow these steps every time a new page is needed: {% endblock %} ``` -Reference: [Link to documentation - How to create a Layout](https://docs.blutui.com/guides/create-layout) +Reference: [How to create a layout](https://docs.blutui.com/guides/create-layout) diff --git a/skills/blutui-project-guidelines/rules/mcp.md b/skills/blutui-project-guidelines/rules/mcp.md index 204765e..b55a70c 100644 --- a/skills/blutui-project-guidelines/rules/mcp.md +++ b/skills/blutui-project-guidelines/rules/mcp.md @@ -1,6 +1,9 @@ -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| MCP | HIGH | Efficiency Multiplier - The Blutui MCP grants agents direct access to project-specific tooling, streamlining complex workflows and increasing development velocity by up to 300%. | mcp, tools, search, documentation | +--- +title: MCP +impact: HIGH +impactDescription: Efficiency Multiplier - The Blutui MCP grants agents direct access to project-specific tooling, streamlining complex workflows and increasing development velocity by up to 300%. +tags: mcp, tools, search, documentation +--- ## Blutui MCP @@ -33,7 +36,7 @@ The agent must never skip the MCP step. A layout file without a corresponding pa - **Error Prevention:** If a match is found, do not call the creation tool. Instead, notify the user of the conflict. - **Offline Mode:** If the `blutui` MCP tools are unreachable, you must ask the user for the specific `handle` property in the before suggesting a configuration. -Reference: +Reference: - [Link to documentation - Connect to Blutui MCP](https://docs.blutui.com/docs/getting-started/agentic-development) - [Link to documentation - Connect to Figma MCP](https://dev.blutui.com/guides/figma-to-blutui) diff --git a/skills/blutui-project-guidelines/rules/route-patterns.md b/skills/blutui-project-guidelines/rules/route-patterns.md index c7ee05f..e345f9f 100644 --- a/skills/blutui-project-guidelines/rules/route-patterns.md +++ b/skills/blutui-project-guidelines/rules/route-patterns.md @@ -1,6 +1,9 @@ -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Routing Pattern Standards | CRITICAL | Strict adherence to Blutui Route Pattern standards is mandatory. Non-compliant routing triggers 500 Server Errors and breaks site navigation, leading to total loss of user access. | route, route pattern | +--- +title: Routing Pattern Standards +impact: CRITICAL +impactDescription: Strict adherence to Blutui Route Pattern standards is mandatory. Non-compliant routing triggers 500 Server Errors and breaks site navigation, leading to total loss of user access. +tags: route, route pattern +--- ## Routing Pattern Standard diff --git a/skills/blutui-project-guidelines/rules/canvas.md b/skills/blutui-project-guidelines/rules/templating-canvas.md similarity index 86% rename from skills/blutui-project-guidelines/rules/canvas.md rename to skills/blutui-project-guidelines/rules/templating-canvas.md index f75ed5d..c51370d 100644 --- a/skills/blutui-project-guidelines/rules/canvas.md +++ b/skills/blutui-project-guidelines/rules/templating-canvas.md @@ -1,15 +1,18 @@ -| Title | Impact | Impact Description | Tags | -|-------|--------|-------------------|------| -| Canvas - Template Engine | CRITICAL | High Impact (90%) - The Template Engine serves as the critical logic layer, binding HTML elements to Blutui-specific concepts. Strict adherence to this syntax is mandatory for data interactivity; without it, the project will fail to render or process dynamic data. | canvas, variables, tags, filters, functions, tests, expressions, templating festures | +--- +title: Canvas +impact: CRITICAL +impactDescription: High Impact (90%) - The Template Engine serves as the critical logic layer, binding HTML elements to Blutui-specific concepts. Strict adherence to this syntax is mandatory for data interactivity; without it, the project will fail to render or process dynamic data. +tags: canvas, variables, tags, filters, functions, tests, expressions, templating festures +--- -## Canvas - Template Engine +## Canvas Canvas serves as the template engine for Blutui, combining HTML, CSS, and JavaScript with unique Canvas logic to create fully customized project designs. - The template is a regular text file. It can generate any text-based format (HTML, XML, CSV, LaTeX, etc.). The file extension is ".canvas". - A template contains variables, tags, filters, functions, tests, expressions and other templating festures, which get replaced with values when the template is evaluated, and tags, which control the template's logic. -**Example** +**Example** ```canvas @@ -31,9 +34,9 @@ Canvas serves as the template engine for Blutui, combining HTML, CSS, and JavaSc ``` -- There are two kinds of delimiters: - - {% ... %}: Used for executing statements. - - {{ ... }} : Used for printing values to the rendered page. +- There are two kinds of delimiters: + - {% ... %}: Used for executing statements. + - {{ ... }} : Used for printing values to the rendered page. ### Including other templates @@ -87,7 +90,7 @@ Canvas allows to add the name of the block after the end tag for better readabil {% endfor %} ``` -**Example:** Correct way to use blocks +**Example:** Correct way to use blocks A child template looks like this @@ -130,7 +133,7 @@ A parent template looks like this ### Template Inheritence -Maximize your workflow with template inheritance. Instead of duplicating code, build a single base template for common site features in `views/templates/defualt.html`. Use `blocks` to define areas where child templates can inject specific content, ensuring a consistent structure across every page. +Maximize your workflow with template inheritance. Instead of duplicating code, build a single base template for common site features in `views/templates/defualt.html`. Use `blocks` to define areas where child templates can inject specific content, ensuring a consistent structure across every page. **Example**: Define a base.html template for a two-column page. @@ -194,6 +197,7 @@ Always follow the 3-tier pattern when building pages: **Example:** Complete 3-tier composition Template (`views/templates/default.html`): + ```canvas @@ -211,6 +215,7 @@ Template (`views/templates/default.html`): ``` Component (`views/components/hero.html`): + ```canvas

{{ heading }}

@@ -219,6 +224,7 @@ Component (`views/components/hero.html`): ``` Layout (`views/layouts/about.html`): + ```canvas {% extends 'templates/default.html' %} diff --git a/skills/blutui-project-guidelines/skill.json b/skills/blutui-project-guidelines/skill.json new file mode 100644 index 0000000..bf24bd1 --- /dev/null +++ b/skills/blutui-project-guidelines/skill.json @@ -0,0 +1,11 @@ +{ + "name": "blutui-project-guidelines", + "title": "Blutui Project Guidelines", + "sections": { + "foundation": 1, + "templating": 2 + }, + "whenToApply": [ + "Writing new Blutui project templates, layouts, components, and more" + ] +} diff --git a/src/build.ts b/src/build.ts new file mode 100644 index 0000000..8966310 --- /dev/null +++ b/src/build.ts @@ -0,0 +1,383 @@ +#!/usr/bin/env node + +import { access, readdir, readFile, writeFile } from 'fs/promises' +import { basename, join } from 'path' + +import { SKILLS_DIR } from './config' +import type { + ImpactLevel, + Rule, + RuleFile, + RuleFrontmatter, + Section, + Skill, +} from './types' + +function parseFrontmatter( + rawContent: string, + filePath: string +): { + frontmatter: RuleFrontmatter + content: string +} { + const content = rawContent.replace(/\r\n/g, '\n') + const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/) + if (!match) { + throw new Error(`Missing frontmatter in ${filePath}.`) + } + + const raw = match[1] + const body = content.slice(match[0].length).trim() + const parsed: Record = {} + + for (const line of raw.split(/\r?\n/)) { + const colonIdx = line.indexOf(':') + if (colonIdx === -1) continue + + const key = line.slice(0, colonIdx).trim() + const rawVal = line.slice(colonIdx + 1).trim() + + parsed[key] = rawVal.replace(/^["']|["']$/g, '') + } + + return { + frontmatter: { + title: parsed.title as string, + category: '', + impact: parsed.impact as ImpactLevel, + }, + content: body, + } +} + +async function parseRuleFile( + filePath: string, + sectionMap?: Record +) { + const rawContent = await readFile(filePath, 'utf-8') + const { frontmatter, content } = parseFrontmatter(rawContent, filePath) + + let impact: Rule['impact'] = 'MEDIUM' + + const filename = basename(filePath) + const name = filename.replace('.md', '') + + const filenameParts = name.split('-') + let section = 0 + + for (let len = filenameParts.length; len > 0; len--) { + const prefix = filenameParts.slice(0, len).join('-') + if (sectionMap && sectionMap[prefix] !== undefined) { + section = sectionMap[prefix] + break + } + } + + const rule: Rule = { + id: '', + title: frontmatter.title, + name, + section, + impact: frontmatter.impact || impact, + content, + } + + return { + section, + rule, + } +} + +/** + * Load a single skill directory. Returns null if the skill should be skipped. + */ +async function loadSkill(skill: string): Promise { + const skillDir = join(SKILLS_DIR, skill) + const metaPath = join(skillDir, 'skill.json') + const rulesDir = join(skillDir, 'rules') + + // Check required paths exist + const [metaExists, rulesExist] = await Promise.all([ + access(metaPath) + .then(() => true) + .catch(() => false), + access(rulesDir) + .then(() => true) + .catch(() => false), + ]) + + if (!metaExists) { + console.warn(`⚠️ Skipping '${skill}' — missing skill.json`) + return null + } + if (!rulesExist) { + console.warn(`⚠️ Skipping '${skill}' — missing rules/ directory`) + } + + const meta = JSON.parse(await readFile(metaPath, 'utf-8')) + + const files = await readdir(rulesDir) + const ruleFiles = files.filter( + (f) => f.endsWith('.md') && !f.startsWith('_') && f !== 'README.md' + ) + + const ruleData: RuleFile[] = [] + for (const file of ruleFiles) { + const filePath = join(rulesDir, file) + try { + const parsed = await parseRuleFile(filePath, meta.sections) + ruleData.push(parsed) + } catch (error) { + throw error + } + } + + // Group rules by section + const sectionsMap = new Map() + + ruleData.forEach(({ section, rule }) => { + if (!sectionsMap.has(section)) { + sectionsMap.set(section, { + number: section, + title: `Section ${section}`, + impact: rule.impact, + rules: [], + }) + } + sectionsMap.get(section)!.rules.push(rule) + }) + + sectionsMap.forEach((section) => { + section.rules.sort((a, b) => + a.title.localeCompare(b.title, 'en-US', { sensitivity: 'base' }) + ) + + section.rules.forEach((rule, index) => { + rule.id = `${section.number}.${index + 1}` + }) + }) + + // Convert to array and sort + const sections = Array.from(sectionsMap.values()).sort( + (a, b) => a.number - b.number + ) + + // Read section metadata from consolidated _sections.md file + const sectionsPath = join(rulesDir, '_sections.md') + const sectionsContent = await readFile(sectionsPath, 'utf-8') + + const sectionBlocks = sectionsContent.split(/(?=^## \d+\. )/m).filter(Boolean) + + for (const block of sectionBlocks) { + const headerMatch = block.match(/^## (\d+)\.\s+(.+?)(?:\s+\([^)]+\))?$/m) + if (!headerMatch) continue + + const sectionNumber = parseInt(headerMatch[1]) + const sectionTitle = headerMatch[2].trim() + + const section = sections.find((s) => s.number === sectionNumber) + if (section) { + section.title = sectionTitle + } + } + + return { meta, skill, skillDir, sections, rules: ruleData.length } +} + +async function loadSkills() { + const entries = await readdir(SKILLS_DIR, { withFileTypes: true }) + const dirNames = entries.filter((e) => e.isDirectory()).map((e) => e.name) + + const results = await Promise.all( + dirNames.map((dirName) => loadSkill(dirName)) + ) + + return results.filter((s): s is Skill => s !== null) +} + +function buildSkillMd(skill: Skill): string { + const lines: string[] = [] + const { meta, sections } = skill + const totalRules = skill.rules + + lines.push('---') + + lines.push(`name: ${skill.skill}`) + lines.push(`description: ${meta.description}`) + lines.push(`license: ${meta.license}`) + + if (meta.metadata) { + lines.push(`metadata:`) + lines.push(` author: ${meta.metadata.author}`) + lines.push(` version: "${meta.metadata.version}"`) + } + + lines.push('---') + lines.push('') + + lines.push(`# ${meta.title}`) + lines.push('') + lines.push( + `Contains ${totalRules} rule${totalRules !== 1 ? 's' : ''} across ` + + `${sections.length} categor${sections.length !== 1 ? 'ies' : 'y'}, ` + + `prioritized by impact to guide automated refactoring and code generation.` + ) + lines.push('') + + lines.push('## When to Apply') + lines.push('') + lines.push('Reference these guidelines when:') + lines.push('') + for (const item of meta.whenToApply) { + lines.push(`- ${item}`) + } + lines.push('') + + lines.push('## Rule Categories by Priority') + lines.push('') + lines.push('| Priority | Category | Impact | Prefix |') + lines.push('|----------|----------|--------|--------|') + sections.forEach((section) => { + const prefix = Object.keys(meta.sections).find( + (key) => meta.sections[key] === section.number + ) + + lines.push( + `| ${section.number} | ${section.title} | ${section.impact} | \`${prefix}-\` |` + ) + }) + lines.push('') + + lines.push('## Quick Reference') + lines.push('') + sections.forEach((section) => { + lines.push(`### ${section.number}. ${section.title} (${section.impact})`) + lines.push('') + + section.rules.forEach((rule) => { + lines.push(`- \`${rule.name}\` - ${rule.title}`) + }) + + lines.push('') + }) + + lines.push('## How to Use') + lines.push('') + lines.push( + 'Read individual rule files for detailed explanations and code examples:' + ) + lines.push('') + lines.push('```') + sections.forEach((section) => { + const firstRule = section.rules[0] + + lines.push(`rules/${firstRule.name}.md`) + }) + lines.push('```') + + lines.push('Each rule file contains:') + lines.push('') + lines.push('- Brief explanation of why it matters') + lines.push('') + + lines.push('## Full Compiled Document') + lines.push('') + lines.push('For the complete guide with all rules expanded: `AGENTS.md`') + lines.push('') + + return lines.join('\n') +} + +function buildAgentsMd(skill: Skill): string { + const lines: string[] = [] + const { sections } = skill + + lines.push(`# ${skill.meta.title}`) + lines.push('') + + lines.push('---') + lines.push('') + lines.push('## Table of Contents') + lines.push('') + + // Generate TOC + sections.forEach((section) => { + lines.push( + `${section.number}. [${section.title}](#${section.number}-${section.title.toLowerCase().replace(/\s+/g, '-')})` + ) + + section.rules.forEach((rule) => { + const anchor = `${rule.id} ${rule.title}` + .toLowerCase() + .replace(/\s+/g, '-') + .replace(/[^\w-]/g, '') + + lines.push(` - ${rule.id} [${rule.title}](#${anchor})`) + }) + }) + + lines.push('') + lines.push('---') + lines.push('') + + // Generate sections + sections.forEach((section) => { + lines.push(`## ${section.number}. ${section.title}`) + lines.push('') + + section.rules.forEach((rule) => { + lines.push(`### ${rule.id} ${rule.title}`) + lines.push('') + lines.push(rule.content) + lines.push('') + }) + + lines.push('---') + lines.push('') + }) + + return lines.join('\n') +} + +async function writeSkill(skill: Skill): Promise { + const skillMdOut = join(skill.skillDir, 'SKILL.md') + const agentsOut = join(skill.skillDir, 'AGENTS.md') + + await Promise.all([ + writeFile(skillMdOut, buildSkillMd(skill), 'utf-8'), + writeFile(agentsOut, buildAgentsMd(skill), 'utf-8'), + ]) + + console.log(` → ${skillMdOut}`) + console.log(` → ${agentsOut}`) +} + +async function build(): Promise { + console.log('🔨 Building agent skills from rules...') + + const skills = await loadSkills() + + if (skills.length === 0) { + console.warn( + '\n⚠️ No valid skills found. Each skill folder needs a skill.json and a rules/ directory.' + ) + } + + const totalRules = skills.reduce((sum, sk) => sum + sk.rules, 0) + console.log(`\n📊 ${skills.length} skill(s), ${totalRules} total rule(s)\n`) + + await Promise.all( + skills.map(async (skill) => { + console.log(`📝 Writing docs for "${skill.meta.title}"...`) + await writeSkill(skill) + }) + ) + + console.log('\n✅ Done!') +} + +build().catch((error: unknown) => { + const message = error instanceof Error ? error.message : String(error) + console.error(`\n❌ Build failed: ${message}`) + process.exit(1) +}) diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 0000000..0e48776 --- /dev/null +++ b/src/config.ts @@ -0,0 +1,6 @@ +import { dirname, join } from 'path' +import { fileURLToPath } from 'url' + +const __dirname = dirname(fileURLToPath(import.meta.url)) + +export const SKILLS_DIR = join(__dirname, '..', 'skills') diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..534a307 --- /dev/null +++ b/src/types.ts @@ -0,0 +1,56 @@ +export type ImpactLevel = + | 'CRITICAL' + | 'HIGH' + | 'MEDIUM-HIGH' + | 'MEDIUM' + | 'LOW-MEDIUM' + | 'LOW' + +export interface Rule { + id: string + title: string + name: string + section: number + impact: ImpactLevel + content: string +} + +export interface RuleFile { + section: number + rule: Rule +} + +export interface RuleFrontmatter { + title: string + category: string + impact: ImpactLevel +} + +export interface Skill { + meta: SkillMeta + skill: string + skillDir: string + sections: Section[] + rules: number +} + +export interface SkillMeta { + title: string + description: string + sections: Record + whenToApply: string[] + license?: string + metadata?: { + author?: string + version?: string + } +} + +export interface SkillCategory {} + +export interface Section { + number: number + title: string + impact: ImpactLevel + rules: Rule[] +} diff --git a/packages/blutui-project-guidelines-build/tsconfig.json b/tsconfig.json similarity index 88% rename from packages/blutui-project-guidelines-build/tsconfig.json rename to tsconfig.json index ee20039..4eecf9a 100644 --- a/packages/blutui-project-guidelines-build/tsconfig.json +++ b/tsconfig.json @@ -1,8 +1,8 @@ { "compilerOptions": { - "target": "es2020", + "target": "es2022", "module": "esnext", - "lib": ["es2022"], + "lib": ["ES2022"], "moduleResolution": "node", "esModuleInterop": true, "strict": true, From 8252ea190c18ebd95189e0bea8ef1c5c4cb68b2d Mon Sep 17 00:00:00 2001 From: Jayan Ratna Date: Thu, 19 Feb 2026 14:13:33 +1300 Subject: [PATCH 4/7] add validate command --- .github/workflows/validate.yml | 16 +++++----------- package.json | 3 ++- skills/blutui-project-guidelines/SKILL.md | 11 ++++++----- src/build.ts | 2 +- src/validate.ts | 1 + 5 files changed, 15 insertions(+), 18 deletions(-) create mode 100644 src/validate.ts diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml index 98a29ca..8eb9732 100644 --- a/.github/workflows/validate.yml +++ b/.github/workflows/validate.yml @@ -4,22 +4,16 @@ on: push: branches: [main] paths: - - "skills/blutui-project-guidelines/**" - - "packages/blutui-project-guidelines-build/**" + - 'skills/blutui-project-guidelines/**' pull_request: branches: [main] paths: - - "skills/blutui-project-guidelines/**" - - "packages/blutui-project-guidelines-build/**" + - 'skills/blutui-project-guidelines/**' jobs: validate: runs-on: ubuntu-latest - defaults: - run: - working-directory: packages/blutui-project-guidelines-build - steps: - name: Checkout uses: actions/checkout@v4 @@ -32,9 +26,9 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version: "20" - cache: "pnpm" - cache-dependency-path: packages/blutui-project-guidelines-build/pnpm-lock.yaml + node-version: '20' + cache: 'pnpm' + cache-dependency-path: pnpm-lock.yaml - name: Install Dependencies run: pnpm install diff --git a/package.json b/package.json index c602051..afe775f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "name": "@blutui/skills", "scripts": { - "build": "tsx src/build.ts" + "build": "tsx src/build.ts", + "validate": "tsx src/validate.ts" }, "devDependencies": { "@types/node": "^25.2.3", diff --git a/skills/blutui-project-guidelines/SKILL.md b/skills/blutui-project-guidelines/SKILL.md index d487601..0e0f4d5 100644 --- a/skills/blutui-project-guidelines/SKILL.md +++ b/skills/blutui-project-guidelines/SKILL.md @@ -16,11 +16,11 @@ Reference these guidelines when: ## Rule Categories by Priority -| Priority | Category | Impact | Prefix | -|----------|----------|--------|--------| -| 0 | Section 0 | MEDIUM | `undefined-` | -| 1 | Foundation | CRITICAL | `foundation-` | -| 2 | Templating | CRITICAL | `templating-` | +| Priority | Category | Impact | Prefix | +| -------- | ---------- | -------- | ------------- | +| 0 | Section 0 | MEDIUM | `undefined-` | +| 1 | Foundation | CRITICAL | `foundation-` | +| 2 | Templating | CRITICAL | `templating-` | ## Quick Reference @@ -53,6 +53,7 @@ rules/canopy.md rules/foundation-courier-configuration.md rules/templating-canvas.md ``` + Each rule file contains: - Brief explanation of why it matters diff --git a/src/build.ts b/src/build.ts index 8966310..ce3e3ab 100644 --- a/src/build.ts +++ b/src/build.ts @@ -274,7 +274,7 @@ function buildSkillMd(skill: Skill): string { lines.push(`rules/${firstRule.name}.md`) }) lines.push('```') - + lines.push('') lines.push('Each rule file contains:') lines.push('') lines.push('- Brief explanation of why it matters') diff --git a/src/validate.ts b/src/validate.ts new file mode 100644 index 0000000..908ba84 --- /dev/null +++ b/src/validate.ts @@ -0,0 +1 @@ +#!/usr/bin/env node From c6598af0a6d0e3b7cca30ef53cae5c985b28907c Mon Sep 17 00:00:00 2001 From: Jayan Ratna Date: Fri, 20 Feb 2026 12:33:50 +1300 Subject: [PATCH 5/7] wip: implement validation command --- skills/blutui-project-guidelines/SKILL.md | 5 +- skills/blutui-project-guidelines/skill.json | 8 +- src/build.ts | 1 - src/types.ts | 6 +- src/validate.ts | 466 ++++++++++++++++++++ 5 files changed, 477 insertions(+), 9 deletions(-) diff --git a/skills/blutui-project-guidelines/SKILL.md b/skills/blutui-project-guidelines/SKILL.md index 0e0f4d5..03286f8 100644 --- a/skills/blutui-project-guidelines/SKILL.md +++ b/skills/blutui-project-guidelines/SKILL.md @@ -1,7 +1,7 @@ --- name: blutui-project-guidelines -description: undefined -license: undefined +description: Guidelines for building Blutui projects. This skill should be used when writing, reviewing, or refactoring Blutui Canvas code. +license: MIT --- # Blutui Project Guidelines @@ -13,6 +13,7 @@ Contains 11 rules across 3 categories, prioritized by impact to guide automated Reference these guidelines when: - Writing new Blutui project templates, layouts, components, and more +- Refactoring existing frontend code ## Rule Categories by Priority diff --git a/skills/blutui-project-guidelines/skill.json b/skills/blutui-project-guidelines/skill.json index bf24bd1..c84fa1b 100644 --- a/skills/blutui-project-guidelines/skill.json +++ b/skills/blutui-project-guidelines/skill.json @@ -1,11 +1,15 @@ { "name": "blutui-project-guidelines", "title": "Blutui Project Guidelines", + "description": "Guidelines for building Blutui projects. This skill should be used when writing, reviewing, or refactoring Blutui Canvas code.", + "license": "MIT", "sections": { "foundation": 1, "templating": 2 }, "whenToApply": [ - "Writing new Blutui project templates, layouts, components, and more" - ] + "Writing new Blutui project templates, layouts, components, and more", + "Refactoring existing frontend code" + ], + "metadata": {} } diff --git a/src/build.ts b/src/build.ts index ce3e3ab..78061a2 100644 --- a/src/build.ts +++ b/src/build.ts @@ -43,7 +43,6 @@ function parseFrontmatter( return { frontmatter: { title: parsed.title as string, - category: '', impact: parsed.impact as ImpactLevel, }, content: body, diff --git a/src/types.ts b/src/types.ts index 534a307..f5686e3 100644 --- a/src/types.ts +++ b/src/types.ts @@ -22,7 +22,6 @@ export interface RuleFile { export interface RuleFrontmatter { title: string - category: string impact: ImpactLevel } @@ -35,19 +34,18 @@ export interface Skill { } export interface SkillMeta { + name: string title: string description: string + license: string sections: Record whenToApply: string[] - license?: string metadata?: { author?: string version?: string } } -export interface SkillCategory {} - export interface Section { number: number title: string diff --git a/src/validate.ts b/src/validate.ts index 908ba84..2082868 100644 --- a/src/validate.ts +++ b/src/validate.ts @@ -1 +1,467 @@ #!/usr/bin/env node + +import { readdir, readFile } from 'fs/promises' +import { join } from 'path' + +import { SKILLS_DIR } from './config' +import { ImpactLevel, RuleFrontmatter, Section, SkillMeta } from './types' + +interface ValidationError { + skill: string + file?: string + message: string +} + +interface SkillValidationResult { + skillName: string + errors: ValidationError[] + warnings: ValidationError[] +} + +interface ValidatedRule { + filename: string + frontmatter: RuleFrontmatter +} + +interface ParseResult { + parsed: Record + body: string + hasFrontmatter: boolean +} + +function extractFrontmatter(content: string): ParseResult { + const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/) + if (!match) { + return { parsed: {}, body: content.trim(), hasFrontmatter: false } + } + + const raw = match[1] + const body = content.slice(match[0].length).trim() + const parsed: Record = {} + + for (const line of raw.split(/\r?\n/)) { + const colonIdx = line.indexOf(':') + if (colonIdx === -1) continue + const key = line.slice(0, colonIdx).trim() + const rawVal = line.slice(colonIdx + 1).trim() + + parsed[key] = rawVal.replace(/^["']|["']$/g, '') + } + + return { parsed, body, hasFrontmatter: true } +} + +function validateSkillJson( + raw: unknown, + skill: string +): { meta: SkillMeta | null; errors: ValidationError[] } { + const errors: ValidationError[] = [] + const file = 'skill.json' + + if (typeof raw !== 'object' || raw === null || Array.isArray(raw)) { + errors.push({ + skill, + file, + message: 'skill.json must be a JSON object', + }) + return { meta: null, errors } + } + + const obj = raw as Record + + // Required top-level string fields... + for (const key of ['name', 'title', 'description', 'license'] as const) { + if ( + !obj[key] || + typeof obj[key] !== 'string' || + (obj[key] as string).trim() === '' + ) { + errors.push({ + skill, + file, + message: `Missing or empty required field: "${key}"`, + }) + } + } + + // Sections... + if ( + !obj.sections || + typeof obj.sections !== 'object' || + Array.isArray(obj.sections) + ) { + errors.push({ + skill, + file, + message: 'Missing or invalid "sections" object', + }) + } else { + const sections = obj.sections as Record + + for (const [key, value] of Object.entries(sections)) { + if (typeof key !== 'string' || key.trim() === '') { + errors.push({ + skill, + file, + message: 'sections keys must be non-empty strings', + }) + } + if (typeof value !== 'number' || !Number.isInteger(value)) { + errors.push({ + skill, + file, + message: `sections.${key} must be an integer, got ${typeof value}`, + }) + } + } + + const sectionNumbers = Object.values(sections) + const uniqueNumbers = new Set(sectionNumbers) + if (uniqueNumbers.size !== sectionNumbers.length) { + errors.push({ + skill, + file, + message: 'sections values must be unique', + }) + } + + const sortedNumbers = [...sectionNumbers].sort((a, b) => a - b) + for (let i = 0; i < sortedNumbers.length; i++) { + if (sortedNumbers[i] !== i + 1) { + errors.push({ + skill, + file, + message: 'sections values must be sequential starting from 1', + }) + break + } + } + } + + // whenToApply array... + if (!Array.isArray(obj.whenToApply) || obj.whenToApply.length === 0) { + errors.push({ + skill, + file, + message: '"whenToApply" must be a non-empty array', + }) + } + + // metadata object... + if ( + !obj.metadata || + typeof obj.metadata !== 'object' || + Array.isArray(obj.metadata) + ) { + errors.push({ + skill, + file, + message: 'Missing or invalid "metadata" object', + }) + } else { + const meta = obj.metadata as Record + for (const key of ['author', 'version'] as const) { + if (!meta[key]) { + errors.push({ + skill, + file, + message: `Missing or empty "metadata.${key}"`, + }) + } + } + } + + if (errors.length > 0) return { meta: null, errors } + + return { meta: obj as unknown as SkillMeta, errors: [] } +} + +interface RuleValidationResult { + frontmatter: RuleFrontmatter | null + body: string + errors: ValidationError[] + warnings: ValidationError[] +} + +function validateRule( + content: string, + filename: string, + skillName: string, + sections: Record +): RuleValidationResult { + const errors: ValidationError[] = [] + const warnings: ValidationError[] = [] + const { parsed, body, hasFrontmatter } = extractFrontmatter(content) + + if (!hasFrontmatter) { + errors.push({ + skill: skillName, + file: `rules/${filename}`, + message: 'Missing frontmatter block (file must start with ---)', + }) + return { frontmatter: null, body, errors, warnings } + } + + const required = ['title', 'impact', 'impactDescription', 'tags'] as const + for (const key of required) { + const val = parsed[key] + const missing = val === undefined || val === null || val === '' + if (missing) { + errors.push({ + skill: skillName, + file: `rules/${filename}`, + message: `Frontmatter missing required key: "${key}"`, + }) + } + } + + if (errors.length > 0) return { frontmatter: null, body, errors, warnings } + + return { + frontmatter: { + title: parsed.title as string, + impact: parsed.impact as ImpactLevel, + }, + body, + errors: [], + warnings, + } +} + +async function validateSkill( + skillName: string +): Promise { + // skill.json + const skillDir = join(SKILLS_DIR, skillName) + const errors: ValidationError[] = [] + const warnings: ValidationError[] = [] + + let meta: SkillMeta | null = null + try { + const raw = JSON.parse( + await readFile(join(skillDir, 'skill.json'), 'utf-8') + ) + const result = validateSkillJson(raw, skillName) + errors.push(...result.errors) + meta = result.meta + } catch { + errors.push({ + skill: skillName, + file: 'skill.json', + message: 'Could not read or parse skill.json', + }) + } + + // rules/ directory + const rulesDir = join(skillDir, 'rules') + let ruleFilenames: string[] = [] + + try { + ruleFilenames = (await readdir(rulesDir)).filter((f) => f.endsWith('.md')) + } catch { + errors.push({ + skill: skillName, + file: 'rules/', + message: 'Missing rules/ directory', + }) + } + + if (ruleFilenames.length === 0 && !errors.some((e) => e.file === 'rules/')) { + errors.push({ + skill: skillName, + message: 'Skill has no rule files in rules/ directory', + }) + } + + // Individual rule validation (all in parallel) + const validatedRules: ValidatedRule[] = [] + + const ruleResults = await Promise.all( + ruleFilenames.map(async (filename) => { + const filePath = join(rulesDir, filename) + const content = await readFile(filePath, 'utf-8') + return validateRule(content, filename, skillName, meta?.sections ?? {}) + }) + ) + + return { skillName, errors, warnings } +} + +interface TaggedError extends ValidationError { + tag: string + severity: 'error' | 'warning' +} + +const CHECK_GROUPS: Array<{ label: string; tag: string }> = [ + { label: 'skill.json schema', tag: 'skill.json' }, + { label: 'Rule frontmatter', tag: 'frontmatter' }, + { label: 'Naming conventions', tag: 'convention' }, + { label: 'Cross-rule uniqueness', tag: 'uniqueness' }, + { label: 'Build output integrity', tag: 'build' }, +] + +function renderSkillSummary( + result: SkillValidationResult & { tagged: TaggedError[] } +): { errorCount: number; warningCount: number } { + const WIDTH = 62 + const bar = '─'.repeat(WIDTH) + + const hasErrors = result.tagged.some((e) => e.severity === 'error') + const hasWarnings = result.tagged.some((e) => e.severity === 'warning') + + const statusLabel = hasErrors ? 'FAIL' : hasWarnings ? 'WARN' : 'PASS' + const heading = `${statusLabel} ${result.skillName}` + + console.log(`┌${bar}┐`) + console.log(`│ ${heading.padEnd(WIDTH - 2)} │`) + console.log(`├${bar}┤`) + + let errorCount = 0 + let warningCount = 0 + + for (const group of CHECK_GROUPS) { + const groupErrors = result.tagged.filter( + (e) => e.tag === group.tag && e.severity === 'error' + ) + const groupWarnings = result.tagged.filter( + (e) => e.tag === group.tag && e.severity === 'warning' + ) + const groupFailed = groupErrors.length > 0 + const groupWarn = groupWarnings.length > 0 + + const checkIcon = groupFailed ? '✘' : groupWarn ? '△' : '✔' + const checkLine = `${checkIcon} ${group.label}` + console.log(`│ ${checkLine.padEnd(WIDTH - 2)} │`) + + for (const e of [...groupErrors, ...groupWarnings]) { + const loc = e.file ? `${e.file} — ` : '' + const bullet = ` · ${loc}${e.message}` + const chunks = chunkString(bullet, WIDTH - 1) + + for (const chunk of chunks) { + console.log(`│ ${chunk.padEnd(WIDTH - 2)} │`) + } + + if (e.severity === 'error') errorCount++ + else warningCount++ + } + } + + console.log(`└${bar}┘`) + return { errorCount, warningCount } +} + +function chunkString(str: string, maxLen: number): string[] { + if (str.length <= maxLen) return [str] + + const indent = ' '.repeat(4) + const chunks: string[] = [] + let remaining = str + while (remaining.length > maxLen) { + let cut = remaining.lastIndexOf(' ', maxLen) + if (cut <= 0) cut = maxLen + chunks.push(remaining.slice(0, cut)) + remaining = indent + remaining.slice(cut).trimStart() + } + + chunks.push(remaining) + + return chunks +} + +function tagErrors(result: SkillValidationResult): TaggedError[] { + const tag = ( + e: ValidationError, + severity: 'error' | 'warning' + ): TaggedError => { + let t = 'frontmatter' // default + + if (e.file === 'skill.json' || e.message.includes('skill.json')) { + t = 'skill.json' + } else if (e.file === 'rules/') { + t = 'skill.json' // missing rules/ dir is a structural problem + } + + return { ...e, tag: t, severity } + } + + return [ + ...result.errors.map((e) => tag(e, 'error')), + ...result.warnings.map((e) => tag(e, 'warning')), + ] +} + +function renderResults(results: SkillValidationResult[]): { + totalErrors: number + totalWarnings: number +} { + let totalErrors = 0 + let totalWarnings = 0 + + for (const result of results) { + const tagged = tagErrors(result) + const { errorCount, warningCount } = renderSkillSummary({ + ...result, + tagged, + }) + totalErrors += errorCount + totalWarnings += warningCount + } + + return { + totalErrors, + totalWarnings, + } +} + +async function validate(): Promise { + console.log('🔍 Validating agent skills...\n') + + let dirNames: string[] = [] + try { + const entries = await readdir(SKILLS_DIR, { withFileTypes: true }) + dirNames = entries + .filter((e) => e.isDirectory()) + .map((e) => e.name) + .sort() + } catch { + console.error(`❌ Could not read skills directory: ${SKILLS_DIR}`) + process.exit(1) + } + + if (dirNames.length === 0) { + console.warn('⚠️ No skill directories found.') + process.exit(0) + } + + const results = await Promise.all(dirNames.map((d) => validateSkill(d))) + + const { totalErrors, totalWarnings } = renderResults(results) + + const skillCount = results.length + const passCount = results.filter((r) => r.errors.length === 0).length + const failCount = skillCount - passCount + + console.log('') + console.log( + `Skills: ${passCount} passed, ${failCount} failed, ${skillCount} total` + ) + console.log(`Issues: ${totalErrors} error(s), ${totalWarnings} warning(s)`) + + if (totalErrors > 0) { + console.error('\n❌ Validation failed — fix the errors above.') + process.exit(1) + } + + if (totalWarnings > 0) { + console.warn('\n⚠️ Validation passed with warnings.') + } else { + console.log('\n✅ All skills valid.') + } +} + +validate().catch((error: unknown) => { + const message = error instanceof Error ? error.message : String(error) + console.error(`\n❌ Validator crashed: ${message}`) + process.exit(1) +}) From b4e87aa6cd2e84a88c186e85b88b7a9b97b7848b Mon Sep 17 00:00:00 2001 From: Jayan Ratna Date: Fri, 20 Feb 2026 15:14:10 +1300 Subject: [PATCH 6/7] add build checks --- skills/blutui-project-guidelines/AGENTS.md | 65 ++++---- skills/blutui-project-guidelines/SKILL.md | 16 +- .../rules/_sections.md | 4 +- .../rules/templating-canvas.md | 33 ---- .../rules/templating-including-templates.md | 35 +++++ skills/blutui-project-guidelines/skill.json | 5 +- src/validate.ts | 142 +++++++++++++++--- 7 files changed, 203 insertions(+), 97 deletions(-) create mode 100644 skills/blutui-project-guidelines/rules/templating-including-templates.md diff --git a/skills/blutui-project-guidelines/AGENTS.md b/skills/blutui-project-guidelines/AGENTS.md index bb5a95f..7cd4ac3 100644 --- a/skills/blutui-project-guidelines/AGENTS.md +++ b/skills/blutui-project-guidelines/AGENTS.md @@ -18,6 +18,7 @@ - 1.3 [Templates and Layouts](#13-templates-and-layouts) 2. [Templating](#2-templating) - 2.1 [Canvas](#21-canvas) + - 2.2 [Including other templates](#22-including-other-templates) --- @@ -331,8 +332,6 @@ Reference: [How to create a layout](https://docs.blutui.com/guides/create-layout ### 2.1 Canvas -## Canvas - Canvas serves as the template engine for Blutui, combining HTML, CSS, and JavaScript with unique Canvas logic to create fully customized project designs. - The template is a regular text file. It can generate any text-based format (HTML, XML, CSV, LaTeX, etc.). The file extension is ".canvas". @@ -364,37 +363,6 @@ Canvas serves as the template engine for Blutui, combining HTML, CSS, and JavaSc - {% ... %}: Used for executing statements. - {{ ... }} : Used for printing values to the rendered page. -### Including other templates - -The `include` function is useful to include a template and return the rendered content of that template into the current one. - -```canvas -{{ include('sidebar.html') }} -``` - -Included templates automatically inherit the data context of their parent. This ensures that any variables defined in your main template are immediately accessible within the included file without extra configuration. - -```canvas -{% for box in boxes %} - {{ include('render_box.html') }} -{% endfor %} -// The included template render_box.html is able to access the box variable. -``` - -Templates in subdirectories can be accessed with a slash: - -```canvas -{{ include('sections/articles/sidebar.html') }} -``` - -Use `include` to pull reusable components from the `views/components/` directory into layouts: - -```canvas -{{ include('components/header.html') }} -{{ include('components/hero.html') }} -{{ include('components/footer.html') }} -``` - ### Blocks tag: `blocks` Blocks are used for inheritance and act as placeholders and replacements at the same time. @@ -566,4 +534,35 @@ Layout (`views/layouts/about.html`): Reference: [Link to documentation](https://dev.blutui.com/guides/what-is-blutui-canvas) +### 2.2 Including other templates + +The `include` function is useful to include a template and return the rendered content of that template into the current one. + +```canvas +{{ include('sidebar') }} +``` + +Included templates automatically inherit the data context of their parent. This ensures that any variables defined in your main template are immediately accessible within the included file without extra configuration. + +```canvas +{% for box in boxes %} + {{ include('render_box') }} +{% endfor %} +// The included template `render_box` is able to access the box variable. +``` + +Templates in subdirectories can be accessed with a slash: + +```canvas +{{ include('sections/articles/sidebar') }} +``` + +Use `include` to pull reusable components from the `views/components/` directory into layouts: + +```canvas +{{ include('components/header') }} +{{ include('components/hero') }} +{{ include('components/footer') }} +``` + --- diff --git a/skills/blutui-project-guidelines/SKILL.md b/skills/blutui-project-guidelines/SKILL.md index 03286f8..92eddf5 100644 --- a/skills/blutui-project-guidelines/SKILL.md +++ b/skills/blutui-project-guidelines/SKILL.md @@ -2,11 +2,14 @@ name: blutui-project-guidelines description: Guidelines for building Blutui projects. This skill should be used when writing, reviewing, or refactoring Blutui Canvas code. license: MIT +metadata: + author: Blutui + version: "1.0.0" --- # Blutui Project Guidelines -Contains 11 rules across 3 categories, prioritized by impact to guide automated refactoring and code generation. +Contains 12 rules across 3 categories, prioritized by impact to guide automated refactoring and code generation. ## When to Apply @@ -17,11 +20,11 @@ Reference these guidelines when: ## Rule Categories by Priority -| Priority | Category | Impact | Prefix | -| -------- | ---------- | -------- | ------------- | -| 0 | Section 0 | MEDIUM | `undefined-` | -| 1 | Foundation | CRITICAL | `foundation-` | -| 2 | Templating | CRITICAL | `templating-` | +| Priority | Category | Impact | Prefix | +|----------|----------|--------|--------| +| 0 | Section 0 | MEDIUM | `undefined-` | +| 1 | Foundation | CRITICAL | `foundation-` | +| 2 | Templating | CRITICAL | `templating-` | ## Quick Reference @@ -44,6 +47,7 @@ Reference these guidelines when: ### 2. Templating (CRITICAL) - `templating-canvas` - Canvas +- `templating-including-templates` - Including other templates ## How to Use diff --git a/skills/blutui-project-guidelines/rules/_sections.md b/skills/blutui-project-guidelines/rules/_sections.md index e00d45d..2476793 100644 --- a/skills/blutui-project-guidelines/rules/_sections.md +++ b/skills/blutui-project-guidelines/rules/_sections.md @@ -5,12 +5,12 @@ The section ID (in parentheses) is the filename prefix used to group rules. --- -## 1. Foundation +## 1. Foundation (foundation) **Impact:** CRITICAL **Description:** The essential configuration, file structure, and standards required for every Blutui project. -## 2. Templating +## 2. Templating (templating) **Impact:** CRITICAL **Description:** Guide to using Blutui's template engine for building dynamic, data-driven pages with variables, tags, filters, and expressions. diff --git a/skills/blutui-project-guidelines/rules/templating-canvas.md b/skills/blutui-project-guidelines/rules/templating-canvas.md index c51370d..d1806ae 100644 --- a/skills/blutui-project-guidelines/rules/templating-canvas.md +++ b/skills/blutui-project-guidelines/rules/templating-canvas.md @@ -5,8 +5,6 @@ impactDescription: High Impact (90%) - The Template Engine serves as the critica tags: canvas, variables, tags, filters, functions, tests, expressions, templating festures --- -## Canvas - Canvas serves as the template engine for Blutui, combining HTML, CSS, and JavaScript with unique Canvas logic to create fully customized project designs. - The template is a regular text file. It can generate any text-based format (HTML, XML, CSV, LaTeX, etc.). The file extension is ".canvas". @@ -38,37 +36,6 @@ Canvas serves as the template engine for Blutui, combining HTML, CSS, and JavaSc - {% ... %}: Used for executing statements. - {{ ... }} : Used for printing values to the rendered page. -### Including other templates - -The `include` function is useful to include a template and return the rendered content of that template into the current one. - -```canvas -{{ include('sidebar.html') }} -``` - -Included templates automatically inherit the data context of their parent. This ensures that any variables defined in your main template are immediately accessible within the included file without extra configuration. - -```canvas -{% for box in boxes %} - {{ include('render_box.html') }} -{% endfor %} -// The included template render_box.html is able to access the box variable. -``` - -Templates in subdirectories can be accessed with a slash: - -```canvas -{{ include('sections/articles/sidebar.html') }} -``` - -Use `include` to pull reusable components from the `views/components/` directory into layouts: - -```canvas -{{ include('components/header.html') }} -{{ include('components/hero.html') }} -{{ include('components/footer.html') }} -``` - ### Blocks tag: `blocks` Blocks are used for inheritance and act as placeholders and replacements at the same time. diff --git a/skills/blutui-project-guidelines/rules/templating-including-templates.md b/skills/blutui-project-guidelines/rules/templating-including-templates.md new file mode 100644 index 0000000..94ef6c4 --- /dev/null +++ b/skills/blutui-project-guidelines/rules/templating-including-templates.md @@ -0,0 +1,35 @@ +--- +title: Including other templates +impact: HIGH +impactDescription: High Impact (90%) - The Template Engine serves as the critical logic layer, binding HTML elements to Blutui-specific concepts. Strict adherence to this syntax is mandatory for data interactivity; without it, the project will fail to render or process dynamic data. +tags: canvas, variables, tags, filters, functions, tests, expressions, templating festures +--- + +The `include` function is useful to include a template and return the rendered content of that template into the current one. + +```canvas +{{ include('sidebar') }} +``` + +Included templates automatically inherit the data context of their parent. This ensures that any variables defined in your main template are immediately accessible within the included file without extra configuration. + +```canvas +{% for box in boxes %} + {{ include('render_box') }} +{% endfor %} +// The included template `render_box` is able to access the box variable. +``` + +Templates in subdirectories can be accessed with a slash: + +```canvas +{{ include('sections/articles/sidebar') }} +``` + +Use `include` to pull reusable components from the `views/components/` directory into layouts: + +```canvas +{{ include('components/header') }} +{{ include('components/hero') }} +{{ include('components/footer') }} +``` diff --git a/skills/blutui-project-guidelines/skill.json b/skills/blutui-project-guidelines/skill.json index c84fa1b..88f7906 100644 --- a/skills/blutui-project-guidelines/skill.json +++ b/skills/blutui-project-guidelines/skill.json @@ -11,5 +11,8 @@ "Writing new Blutui project templates, layouts, components, and more", "Refactoring existing frontend code" ], - "metadata": {} + "metadata": { + "author": "Blutui", + "version": "1.0.0" + } } diff --git a/src/validate.ts b/src/validate.ts index 2082868..67286d5 100644 --- a/src/validate.ts +++ b/src/validate.ts @@ -13,7 +13,7 @@ interface ValidationError { } interface SkillValidationResult { - skillName: string + skill: string errors: ValidationError[] warnings: ValidationError[] } @@ -186,17 +186,19 @@ interface RuleValidationResult { function validateRule( content: string, filename: string, - skillName: string, + skill: string, sections: Record ): RuleValidationResult { const errors: ValidationError[] = [] const warnings: ValidationError[] = [] const { parsed, body, hasFrontmatter } = extractFrontmatter(content) + const file = `rules/${filename}` + if (!hasFrontmatter) { errors.push({ - skill: skillName, - file: `rules/${filename}`, + skill, + file, message: 'Missing frontmatter block (file must start with ---)', }) return { frontmatter: null, body, errors, warnings } @@ -208,13 +210,32 @@ function validateRule( const missing = val === undefined || val === null || val === '' if (missing) { errors.push({ - skill: skillName, - file: `rules/${filename}`, + skill, + file, message: `Frontmatter missing required key: "${key}"`, }) } } + if (!body || body.trim().length === 0) { + errors.push({ + skill, + file, + message: 'Rule body is empty after frontmatter', + }) + } + + // Check the body doesn't start with a heading (title comes from frontmatter) + const headingMatch = body.match(/^#{1,6}\s+\S/) + if (headingMatch) { + warnings.push({ + skill, + file, + message: + 'Rule body should not start with a heading (title comes from frontmatter)', + }) + } + if (errors.length > 0) return { frontmatter: null, body, errors, warnings } return { @@ -228,11 +249,65 @@ function validateRule( } } -async function validateSkill( - skillName: string -): Promise { +async function validateBuildOutput( + skillDir: string, + skill: string, + rules: ValidatedRule[] +): Promise { + const errors: ValidationError[] = [] + + for (const filename of ['SKILL.md', 'AGENTS.md'] as const) { + const filePath = join(skillDir, filename) + try { + const content = await readFile(filePath, 'utf-8') + if (content.trim().length === 0) { + errors.push({ + skill, + file: filename, + message: `Generated file is empty — run \`pnpm build\` first`, + }) + continue + } + + if (filename === 'SKILL.md') { + for (const rule of rules) { + const slug = rule.filename.replace(/\.md$/, '') + if (!content.includes(`\`${slug}\``)) { + errors.push({ + skill, + file: filename, + message: `Generated SKILL.md is missing slug "\`${slug}\`" — stale output, run \`pnpm build\``, + }) + } + } + } + + if (filename === 'AGENTS.md') { + for (const rule of rules) { + if (!content.includes(rule.frontmatter.title)) { + errors.push({ + skill, + file: filename, + message: `Generated AGENTS.md is missing title "${rule.frontmatter.title}" — stale output, run \`pnpm build\``, + }) + } + } + } + } catch { + errors.push({ + skill, + file: filename, + message: `Generated file not found — run \`pnpm build\` before validating`, + }) + } + } + + return errors +} + +async function validateSkill(skill: string): Promise { // skill.json - const skillDir = join(SKILLS_DIR, skillName) + const skillDir = join(SKILLS_DIR, skill) const errors: ValidationError[] = [] const warnings: ValidationError[] = [] @@ -241,12 +316,12 @@ async function validateSkill( const raw = JSON.parse( await readFile(join(skillDir, 'skill.json'), 'utf-8') ) - const result = validateSkillJson(raw, skillName) + const result = validateSkillJson(raw, skill) errors.push(...result.errors) meta = result.meta } catch { errors.push({ - skill: skillName, + skill, file: 'skill.json', message: 'Could not read or parse skill.json', }) @@ -257,10 +332,12 @@ async function validateSkill( let ruleFilenames: string[] = [] try { - ruleFilenames = (await readdir(rulesDir)).filter((f) => f.endsWith('.md')) + ruleFilenames = (await readdir(rulesDir)).filter( + (f) => f.endsWith('.md') && !f.startsWith('_') && f !== 'README.md' + ) } catch { errors.push({ - skill: skillName, + skill, file: 'rules/', message: 'Missing rules/ directory', }) @@ -268,7 +345,7 @@ async function validateSkill( if (ruleFilenames.length === 0 && !errors.some((e) => e.file === 'rules/')) { errors.push({ - skill: skillName, + skill, message: 'Skill has no rule files in rules/ directory', }) } @@ -280,11 +357,27 @@ async function validateSkill( ruleFilenames.map(async (filename) => { const filePath = join(rulesDir, filename) const content = await readFile(filePath, 'utf-8') - return validateRule(content, filename, skillName, meta?.sections ?? {}) + return validateRule(content, filename, skill, meta?.sections ?? {}) }) ) - return { skillName, errors, warnings } + for (let i = 0; i < ruleResults.length; i++) { + const result = ruleResults[i] + errors.push(...result.errors) + warnings.push(...result.warnings) + if (result.frontmatter) { + validatedRules.push({ + filename: ruleFilenames[i], + frontmatter: result.frontmatter, + }) + } + } + + if (validatedRules.length > 0) { + errors.push(...(await validateBuildOutput(skillDir, skill, validatedRules))) + } + + return { skill, errors, warnings } } interface TaggedError extends ValidationError { @@ -296,7 +389,6 @@ const CHECK_GROUPS: Array<{ label: string; tag: string }> = [ { label: 'skill.json schema', tag: 'skill.json' }, { label: 'Rule frontmatter', tag: 'frontmatter' }, { label: 'Naming conventions', tag: 'convention' }, - { label: 'Cross-rule uniqueness', tag: 'uniqueness' }, { label: 'Build output integrity', tag: 'build' }, ] @@ -310,9 +402,9 @@ function renderSkillSummary( const hasWarnings = result.tagged.some((e) => e.severity === 'warning') const statusLabel = hasErrors ? 'FAIL' : hasWarnings ? 'WARN' : 'PASS' - const heading = `${statusLabel} ${result.skillName}` + const heading = `${statusLabel} — ${result.skill}` - console.log(`┌${bar}┐`) + console.log(`╭${bar}╮`) console.log(`│ ${heading.padEnd(WIDTH - 2)} │`) console.log(`├${bar}┤`) @@ -336,7 +428,7 @@ function renderSkillSummary( for (const e of [...groupErrors, ...groupWarnings]) { const loc = e.file ? `${e.file} — ` : '' const bullet = ` · ${loc}${e.message}` - const chunks = chunkString(bullet, WIDTH - 1) + const chunks = chunkString(bullet, WIDTH - 2) for (const chunk of chunks) { console.log(`│ ${chunk.padEnd(WIDTH - 2)} │`) @@ -347,7 +439,7 @@ function renderSkillSummary( } } - console.log(`└${bar}┘`) + console.log(`╰${bar}╯`) return { errorCount, warningCount } } @@ -378,6 +470,12 @@ function tagErrors(result: SkillValidationResult): TaggedError[] { if (e.file === 'skill.json' || e.message.includes('skill.json')) { t = 'skill.json' + } else if ( + e.message.includes('state output') || + e.message.includes('Generated') || + e.message.includes('pnpm build') + ) { + t = 'build' } else if (e.file === 'rules/') { t = 'skill.json' // missing rules/ dir is a structural problem } From f2738c686fe61c28a6d80a46beda756c9f50cc52 Mon Sep 17 00:00:00 2001 From: Jayan Ratna Date: Mon, 23 Feb 2026 09:08:36 +1300 Subject: [PATCH 7/7] formatting --- skills/blutui-project-guidelines/SKILL.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/skills/blutui-project-guidelines/SKILL.md b/skills/blutui-project-guidelines/SKILL.md index 92eddf5..9427521 100644 --- a/skills/blutui-project-guidelines/SKILL.md +++ b/skills/blutui-project-guidelines/SKILL.md @@ -4,7 +4,7 @@ description: Guidelines for building Blutui projects. This skill should be used license: MIT metadata: author: Blutui - version: "1.0.0" + version: '1.0.0' --- # Blutui Project Guidelines @@ -20,11 +20,11 @@ Reference these guidelines when: ## Rule Categories by Priority -| Priority | Category | Impact | Prefix | -|----------|----------|--------|--------| -| 0 | Section 0 | MEDIUM | `undefined-` | -| 1 | Foundation | CRITICAL | `foundation-` | -| 2 | Templating | CRITICAL | `templating-` | +| Priority | Category | Impact | Prefix | +| -------- | ---------- | -------- | ------------- | +| 0 | Section 0 | MEDIUM | `undefined-` | +| 1 | Foundation | CRITICAL | `foundation-` | +| 2 | Templating | CRITICAL | `templating-` | ## Quick Reference