diff --git a/.codespellrc b/.codespellrc
new file mode 100644
index 00000000..7f9b3fa8
--- /dev/null
+++ b/.codespellrc
@@ -0,0 +1,16 @@
+[codespell]
+# Ignore intentional misspellings used as examples and technical terms
+# numer - intentional example typo in add-educational-comments.prompt.md
+# wit - proper technical term/name (sardonic wit, Gilfoyle character trait)
+# aks - Azure Kubernetes Service (AKS) abbreviation
+# edn - Extensible Data Notation (Clojure data format)
+# ser - serialization abbreviation
+# ois - ObjectInputStream abbreviation in Java
+# gir - valid abbreviation/technical term
+# rouge - Rouge is a syntax highlighter (not "rogue")
+# categor - TypeScript template literal in website/src/scripts/pages/skills.ts:70 (categor${...length > 1 ? "ies" : "y"})
+# aline - proper name (Aline Ávila, contributor)
+# ative - part of "Declarative Agents" in TypeSpec M365 Copilot documentation (collections/typespec-m365-copilot.collection.md)
+ignore-words-list = numer,wit,aks,edn,ser,ois,gir,rouge,categor,aline,ative,afterall,deques
+# Skip certain files and directories
+skip = .git,node_modules,package-lock.json,*.lock,website/build,website/.docusaurus
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 4ebf9c97..e74c6fe8 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -25,7 +25,7 @@ The following instructions are only to be applied when performing a code review.
- [ ] The instruction has a `description` field.
- [ ] The `description` field is not empty.
- [ ] The file name is lower case, with words separated by hyphens.
-- [ ] The instruction has an `applyTo` field that specifies the file or files to which the instructions apply. If they wish to specify multiple file paths they should formated like `'**.js, **.ts'`.
+- [ ] The instruction has an `applyTo` field that specifies the file or files to which the instructions apply. If they wish to specify multiple file paths they should formatted like `'**.js, **.ts'`.
## Agent file guide
diff --git a/.github/workflows/codespell.yml b/.github/workflows/codespell.yml
new file mode 100644
index 00000000..fa44e258
--- /dev/null
+++ b/.github/workflows/codespell.yml
@@ -0,0 +1,22 @@
+name: Check Spelling
+
+on:
+ push:
+ branches: [main]
+ pull_request:
+ branches: [main]
+
+permissions:
+ contents: read
+
+jobs:
+ codespell:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+
+ - name: Check spelling with codespell
+ uses: codespell-project/actions-codespell@v2
+ with:
+ check_filenames: true
+ check_hidden: false
diff --git a/docs/README.instructions.md b/docs/README.instructions.md
index eb2d82d3..e9d48839 100644
--- a/docs/README.instructions.md
+++ b/docs/README.instructions.md
@@ -165,6 +165,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for
| [Svelte 5 and SvelteKit Development Instructions](../instructions/svelte.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsvelte.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsvelte.instructions.md) | Svelte 5 and SvelteKit development standards and best practices for component-based user interfaces and full-stack applications |
| [Swift MCP Server Development Guidelines](../instructions/swift-mcp-server.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fswift-mcp-server.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fswift-mcp-server.instructions.md) | Best practices and patterns for building Model Context Protocol (MCP) servers in Swift using the official MCP Swift SDK package. |
| [Symfony Development Instructions](../instructions/php-symfony.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fphp-symfony.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fphp-symfony.instructions.md) | Symfony development standards aligned with official Symfony Best Practices |
+| [Tailwind CSS v4+ Installation with Vite](../instructions/tailwind-v4-vite.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftailwind-v4-vite.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftailwind-v4-vite.instructions.md) | Tailwind CSS v4+ installation and configuration for Vite projects using the official @tailwindcss/vite plugin |
| [Taming Copilot](../instructions/taming-copilot.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftaming-copilot.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftaming-copilot.instructions.md) | Prevent Copilot from wreaking havoc across your codebase, keeping it under control. |
| [TanStack Start with Shadcn/ui Development Guide](../instructions/tanstack-start-shadcn-tailwind.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftanstack-start-shadcn-tailwind.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftanstack-start-shadcn-tailwind.instructions.md) | Guidelines for building TanStack Start applications |
| [Task Plan Implementation Instructions](../instructions/task-implementation.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftask-implementation.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftask-implementation.instructions.md) | Instructions for implementing task plans with progressive tracking and change record - Brought to you by microsoft/edge-ai |
diff --git a/eng/generate-website-data.mjs b/eng/generate-website-data.mjs
index fdd14fc0..05a23eec 100644
--- a/eng/generate-website-data.mjs
+++ b/eng/generate-website-data.mjs
@@ -579,7 +579,7 @@ function generateSearchIndex(
id: skill.id,
title: skill.title,
description: skill.description,
- path: skill.path,
+ path: skill.skillFile,
searchText: `${skill.title} ${skill.description}`.toLowerCase(),
});
}
diff --git a/instructions/tailwind-v4-vite.instructions.md b/instructions/tailwind-v4-vite.instructions.md
new file mode 100644
index 00000000..5f17f01c
--- /dev/null
+++ b/instructions/tailwind-v4-vite.instructions.md
@@ -0,0 +1,243 @@
+---
+description: 'Tailwind CSS v4+ installation and configuration for Vite projects using the official @tailwindcss/vite plugin'
+applyTo: 'vite.config.ts, vite.config.js, **/*.css, **/*.tsx, **/*.ts, **/*.jsx, **/*.js'
+---
+
+# Tailwind CSS v4+ Installation with Vite
+
+Instructions for installing and configuring Tailwind CSS version 4 and above using the official Vite plugin. Tailwind CSS v4 introduces a simplified setup that eliminates the need for PostCSS configuration and tailwind.config.js in most cases.
+
+## Key Changes in Tailwind CSS v4
+
+- **No PostCSS configuration required** when using the Vite plugin
+- **No tailwind.config.js required** - configuration is done via CSS
+- **New @tailwindcss/vite plugin** replaces the PostCSS-based approach
+- **CSS-first configuration** using `@theme` directive
+- **Automatic content detection** - no need to specify content paths
+
+## Installation Steps
+
+### Step 1: Install Dependencies
+
+Install `tailwindcss` and the `@tailwindcss/vite` plugin:
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+
+### Step 2: Configure Vite Plugin
+
+Add the `@tailwindcss/vite` plugin to your Vite configuration file:
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+ plugins: [
+ tailwindcss(),
+ ],
+})
+```
+
+For React projects with Vite:
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+ plugins: [
+ react(),
+ tailwindcss(),
+ ],
+})
+```
+
+### Step 3: Import Tailwind CSS
+
+Add the Tailwind CSS import to your main CSS file (e.g., `src/index.css` or `src/App.css`):
+
+```css
+@import "tailwindcss";
+```
+
+### Step 4: Verify CSS Import in Entry Point
+
+Ensure your main CSS file is imported in your application entry point:
+
+```typescript
+// src/main.tsx or src/main.ts
+import './index.css'
+```
+
+### Step 5: Start Development Server
+
+Run the development server to verify installation:
+
+```bash
+npm run dev
+```
+
+## What NOT to Do in Tailwind v4
+
+### Do NOT Create tailwind.config.js
+
+Tailwind v4 uses CSS-first configuration. Do not create a `tailwind.config.js` file unless you have specific legacy requirements.
+
+```javascript
+// ❌ NOT NEEDED in Tailwind v4
+module.exports = {
+ content: ['./src/**/*.{js,ts,jsx,tsx}'],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+```
+
+### Do NOT Create postcss.config.js for Tailwind
+
+When using the `@tailwindcss/vite` plugin, PostCSS configuration for Tailwind is not required.
+
+```javascript
+// ❌ NOT NEEDED when using @tailwindcss/vite
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
+```
+
+### Do NOT Use Old Directives
+
+The old `@tailwind` directives are replaced by a single import:
+
+```css
+/* ❌ OLD - Do not use in Tailwind v4 */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ✅ NEW - Use this in Tailwind v4 */
+@import "tailwindcss";
+```
+
+## CSS-First Configuration (Tailwind v4)
+
+### Custom Theme Configuration
+
+Use the `@theme` directive in your CSS to customize your design tokens:
+
+```css
+@import "tailwindcss";
+
+@theme {
+ --color-primary: #3b82f6;
+ --color-secondary: #64748b;
+ --font-sans: 'Inter', system-ui, sans-serif;
+ --radius-lg: 0.75rem;
+}
+```
+
+### Adding Custom Utilities
+
+Define custom utilities directly in CSS:
+
+```css
+@import "tailwindcss";
+
+@utility content-auto {
+ content-visibility: auto;
+}
+
+@utility scrollbar-hidden {
+ scrollbar-width: none;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+```
+
+### Adding Custom Variants
+
+Define custom variants in CSS:
+
+```css
+@import "tailwindcss";
+
+@variant hocus (&:hover, &:focus);
+@variant group-hocus (:merge(.group):hover &, :merge(.group):focus &);
+```
+
+## Verification Checklist
+
+After installation, verify:
+
+- [ ] `tailwindcss` and `@tailwindcss/vite` are in `package.json` dependencies
+- [ ] `vite.config.ts` includes the `tailwindcss()` plugin
+- [ ] Main CSS file contains `@import "tailwindcss";`
+- [ ] CSS file is imported in the application entry point
+- [ ] Development server runs without errors
+- [ ] Tailwind utility classes (e.g., `text-blue-500`, `p-4`) render correctly
+
+## Example Usage
+
+Test the installation with a simple component:
+
+```tsx
+export function TestComponent() {
+ return (
+
+
+ Hello, Tailwind CSS v4!
+
+
+ )
+}
+```
+
+## Troubleshooting
+
+### Styles Not Applying
+
+1. Verify CSS import statement is `@import "tailwindcss";` (not old directives)
+2. Ensure CSS file is imported in your entry point
+3. Check Vite config includes the `tailwindcss()` plugin
+4. Clear Vite cache: `rm -rf node_modules/.vite && npm run dev`
+
+### Plugin Not Found Error
+
+If you see "Cannot find module '@tailwindcss/vite'":
+
+```bash
+npm install @tailwindcss/vite
+```
+
+### TypeScript Errors
+
+If TypeScript cannot find types for the Vite plugin, ensure you have the correct import:
+
+```typescript
+import tailwindcss from '@tailwindcss/vite'
+```
+
+## Migration from Tailwind v3
+
+If migrating from Tailwind v3:
+
+1. Remove `tailwind.config.js` (move customizations to CSS `@theme`)
+2. Remove `postcss.config.js` (if only used for Tailwind)
+3. Uninstall old packages: `npm uninstall postcss autoprefixer`
+4. Install new packages: `npm install tailwindcss @tailwindcss/vite`
+5. Replace `@tailwind` directives with `@import "tailwindcss";`
+6. Update Vite config to use `@tailwindcss/vite` plugin
+
+## Reference
+
+- Official Documentation: https://tailwindcss.com/docs/installation/using-vite
+- Tailwind CSS v4 Upgrade Guide: https://tailwindcss.com/docs/upgrade-guide
diff --git a/website/public/styles/global.css b/website/public/styles/global.css
index 81f598c7..55d6244a 100644
--- a/website/public/styles/global.css
+++ b/website/public/styles/global.css
@@ -688,6 +688,12 @@ a:hover {
color: var(--color-accent);
}
+.site-footer .build-info {
+ margin-top: 8px;
+ font-size: 12px;
+ opacity: 0.7;
+}
+
/* Buttons */
.btn {
display: inline-flex;
@@ -1205,22 +1211,25 @@ a:hover {
color: var(--color-text-muted);
}
-.choices__list--dropdown {
- background-color: var(--color-bg-secondary);
- border-color: var(--color-border);
+.choices__list--dropdown,
+.choices__list[aria-expanded] {
+ background-color: var(--color-bg-secondary) !important;
+ border-color: var(--color-border) !important;
border-radius: 0 0 var(--border-radius) var(--border-radius);
z-index: 100;
max-height: 300px;
}
-.choices__list--dropdown .choices__item {
- color: var(--color-text);
+.choices__list--dropdown .choices__item,
+.choices__list[aria-expanded] .choices__item {
+ color: var(--color-text) !important;
font-size: 14px;
padding: 10px 14px;
}
-.choices__list--dropdown .choices__item--selectable.is-highlighted {
- background-color: var(--color-bg-tertiary);
+.choices__list--dropdown .choices__item--selectable.is-highlighted,
+.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
+ background-color: var(--color-bg-tertiary) !important;
}
.choices__list--multiple .choices__item {
@@ -1254,11 +1263,13 @@ a:hover {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
-.is-open .choices__list--dropdown {
+.is-open .choices__list--dropdown,
+.is-open .choices__list[aria-expanded] {
border-color: var(--color-link);
}
-.choices__list--dropdown .choices__item--selectable::after {
+.choices__list--dropdown .choices__item--selectable::after,
+.choices__list[aria-expanded] .choices__item--selectable::after {
display: none;
}
diff --git a/website/src/layouts/BaseLayout.astro b/website/src/layouts/BaseLayout.astro
index a8bc2b5c..74ebf201 100644
--- a/website/src/layouts/BaseLayout.astro
+++ b/website/src/layouts/BaseLayout.astro
@@ -1,4 +1,6 @@
---
+import { execSync } from "child_process";
+
interface Props {
title: string;
description?: string;
@@ -11,6 +13,21 @@ const {
activeNav = "",
} = Astro.props;
const base = import.meta.env.BASE_URL;
+
+// Get git commit SHA and build date at build time
+let commitSha = "unknown";
+let buildDate = new Date().toISOString().split("T")[0];
+try {
+ // Use GITHUB_SHA env var in GitHub Actions, fallback to git command locally
+ const githubSha = process.env.GITHUB_SHA;
+ if (githubSha) {
+ commitSha = githubSha.substring(0, 7);
+ } else {
+ commitSha = execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim();
+ }
+} catch {
+ // Fallback if git is not available
+}
---
@@ -155,6 +172,13 @@ const base = import.meta.env.BASE_URL;
rel="noopener">MIT License
+
+ Built from {commitSha} on {buildDate}
+