Format

Author: mcclowes

.claude/skills/docusaurus-config/SKILL.md

@@ -12,20 +12,20 @@ description: Use when working with docusaurus.config.js/ts files to validate or
 Configuration lives in `docusaurus.config.js` or `docusaurus.config.ts` at project root.
 
 ```typescript
-import { Config } from '@docusaurus/types';
+import { Config } from "@docusaurus/types";
 
 const config: Config = {
-  title: 'My Site', // Required
-  url: 'https://example.com', // Required, no trailing /
-  baseUrl: '/', // Required, must start and end with /
+  title: "My Site", // Required
+  url: "https://example.com", // Required, no trailing /
+  baseUrl: "/", // Required, must start and end with /
 
-  favicon: 'img/favicon.ico',
-  organizationName: 'my-org',
-  projectName: 'my-project',
+  favicon: "img/favicon.ico",
+  organizationName: "my-org",
+  projectName: "my-project",
 
   presets: [
     [
-      '@docusaurus/preset-classic',
+      "@docusaurus/preset-classic",
       {
         /* options */
       },

.claude/skills/docusaurus-config/references/detailed-guide.md

@@ -7,8 +7,8 @@ Docusaurus configuration can be in multiple formats:
 ### TypeScript (Recommended)
 
 ```typescript
-import { Config } from '@docusaurus/types';
-import { themes as prismThemes } from 'prism-react-renderer';
+import { Config } from "@docusaurus/types";
+import { themes as prismThemes } from "prism-react-renderer";
 
 const config: Config = {
   // Configuration here
@@ -38,7 +38,7 @@ module.exports = {
 ```typescript
 export default async function createConfig(): Promise<Config> {
   // Import ESM-only packages
-  const mdxMermaid = await import('mdx-mermaid');
+  const mdxMermaid = await import("mdx-mermaid");
 
   return {
     // Configuration here
@@ -204,20 +204,24 @@ function MyComponent() {
 When modifying config, verify:
 
 1. **Required fields present**:
+
    - ✅ `title` exists
    - ✅ `url` exists and has no trailing slash
    - ✅ `baseUrl` exists and starts/ends with `/`
 
 2. **Plugins and themes**:
+
    - ✅ Use proper package names or shorthand
    - ✅ Options passed as second array element
    - ✅ No duplicate plugins
 
 3. **Custom data**:
+
    - ✅ Unknown fields in `customFields` object
    - ✅ No direct custom properties at root level
 
 4. **File format**:
+
    - ✅ Valid JS/TS syntax
    - ✅ Proper export (ESM or CommonJS)
    - ✅ TypeScript types imported if using TS
@@ -256,7 +260,7 @@ plugins: [
 
 ```typescript
 const config: Config = {
-  url: process.env.SITE_URL || 'https://localhost:3000',
+  url: process.env.SITE_URL || "https://localhost:3000",
   customFields: {
     apiEndpoint: process.env.API_ENDPOINT,
   },
@@ -269,7 +273,7 @@ Create `babel.config.js`:
 
 ```javascript
 module.exports = {
-  presets: [require.resolve('@docusaurus/babel/preset')],
+  presets: [require.resolve("@docusaurus/babel/preset")],
   plugins: [
     // Your custom Babel plugins
   ],

.claude/skills/docusaurus-documentation/SKILL.md

@@ -14,8 +14,8 @@ When the user asks about Docusaurus features, configuration, or best practices,
 ```typescript
 // Use WebFetch to access Docusaurus documentation
 WebFetch({
-  url: 'https://docusaurus.io/docs/[topic]',
-  prompt: 'What does this page say about [specific question]?',
+  url: "https://docusaurus.io/docs/[topic]",
+  prompt: "What does this page say about [specific question]?",
 });
 ```
 

.claude/skills/docusaurus-migration/references/breaking-changes.md

@@ -130,14 +130,14 @@ This is _really_ important
 **Old (v1)**:
 
 ```js
-const lightTheme = require('prism-react-renderer/themes/github');
-const darkTheme = require('prism-react-renderer/themes/dracula');
+const lightTheme = require("prism-react-renderer/themes/github");
+const darkTheme = require("prism-react-renderer/themes/dracula");
 ```
 
 **New (v2)**:
 
 ```js
-const { themes } = require('prism-react-renderer');
+const { themes } = require("prism-react-renderer");
 const lightTheme = themes.github;
 const darkTheme = themes.dracula;
 ```
@@ -150,7 +150,7 @@ Prism React Renderer v2 includes fewer languages by default. Add required langua
 module.exports = {
   themeConfig: {
     prism: {
-      additionalLanguages: ['bash', 'diff', 'json'],
+      additionalLanguages: ["bash", "diff", "json"],
     },
   },
 };
@@ -165,7 +165,7 @@ React imports are no longer required in files using JSX:
 **Before**:
 
 ```jsx
-import React from 'react';
+import React from "react";
 
 export default function MyComponent() {
   return <div>Hello</div>;
@@ -261,14 +261,14 @@ Common fixes:
 Update Prism configuration:
 
 ```js
-const { themes } = require('prism-react-renderer');
+const { themes } = require("prism-react-renderer");
 
 module.exports = {
   themeConfig: {
     prism: {
       theme: themes.github,
       darkTheme: themes.dracula,
-      additionalLanguages: ['bash', 'diff', 'json'],
+      additionalLanguages: ["bash", "diff", "json"],
     },
   },
 };
@@ -302,7 +302,7 @@ Fix any build errors before deploying.
 Convert `docusaurus.config.js` to `docusaurus.config.mjs`:
 
 ```js
-import { themes } from 'prism-react-renderer';
+import { themes } from "prism-react-renderer";
 
 export default {
   // config
@@ -314,8 +314,8 @@ export default {
 Rename to `docusaurus.config.ts`:
 
 ```typescript
-import type { Config } from '@docusaurus/types';
-import { themes } from 'prism-react-renderer';
+import type { Config } from "@docusaurus/types";
+import { themes } from "prism-react-renderer";
 
 const config: Config = {
   // config

.claude/skills/docusaurus-plugins/SKILL.md

@@ -13,12 +13,12 @@ description: Use when creating Docusaurus plugins (remark, rehype, theme, conten
 // Remark plugin - transforms markdown AST
 module.exports = function remarkPlugin(options = {}) {
   return async function transformer(ast, vfile) {
-    const { visit } = require('unist-util-visit');
+    const { visit } = require("unist-util-visit");
 
-    visit(ast, 'link', (node) => {
+    visit(ast, "link", (node) => {
       // Transform nodes
       node.data = node.data || {};
-      node.data.hProperties = { className: 'custom' };
+      node.data.hProperties = { className: "custom" };
     });
 
     return ast;