mirror of
https://github.com/github/awesome-copilot.git
synced 2026-02-20 02:15:12 +00:00
Merge branch 'main' into add-new-skill-clean
This commit is contained in:
白水淳
GitHub
16
.codespellrc
Normal file
16
.codespellrc
Normal file
@@ -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
|
||||
2
.github/copilot-instructions.md
vendored
2
.github/copilot-instructions.md
vendored
@@ -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
|
||||
|
||||
|
||||
22
.github/workflows/codespell.yml
vendored
Normal file
22
.github/workflows/codespell.yml
vendored
Normal file
@@ -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
|
||||
@@ -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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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 |
|
||||
|
||||
@@ -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(),
|
||||
});
|
||||
}
|
||||
|
||||
243
instructions/tailwind-v4-vite.instructions.md
Normal file
243
instructions/tailwind-v4-vite.instructions.md
Normal file
@@ -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 (
|
||||
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
|
||||
<h1 className="text-3xl font-bold text-blue-600 underline">
|
||||
Hello, Tailwind CSS v4!
|
||||
</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 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
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
@@ -155,6 +172,13 @@ const base = import.meta.env.BASE_URL;
|
||||
rel="noopener">MIT License</a
|
||||
>
|
||||
</p>
|
||||
<p class="build-info">
|
||||
Built from <a
|
||||
href={`https://github.com/github/awesome-copilot/commit/${commitSha}`}
|
||||
target="_blank"
|
||||
rel="noopener">{commitSha}</a
|
||||
> on {buildDate}
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user