Merge branch 'main' of github.com:github/awesome-copilot into add-shopify-expert-agent
This commit is contained in:
Nikolay Marinov
commit
e9e818fde9
@ -813,6 +813,15 @@
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "spectatora",
|
||||
"name": "spectatora",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/1385755?v=4",
|
||||
"profile": "https://github.com/spectatora",
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
}
|
||||
],
|
||||
"contributorsPerLine": 7,
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
[](https://aka.ms/awesome-github-copilot)
|
||||
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
||||
[](#contributors-)
|
||||
[](#contributors-)
|
||||
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
||||
|
||||
A curated collection of prompts, instructions, and chat modes to supercharge your GitHub Copilot experience across different domains, languages, and use cases.
|
||||
@ -252,6 +252,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://soderlind.no"><img src="https://avatars.githubusercontent.com/u/1649452?v=4?s=100" width="100px;" alt="Per Søderlind"/><br /><sub><b>Per Søderlind</b></sub></a><br /><a href="https://github.com/github/awesome-copilot/commits?author=soderlind" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/riqueufmg"><img src="https://avatars.githubusercontent.com/u/108551585?v=4?s=100" width="100px;" alt="Henrique Nunes"/><br /><sub><b>Henrique Nunes</b></sub></a><br /><a href="https://github.com/github/awesome-copilot/commits?author=riqueufmg" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/jeremiah-snee-openx"><img src="https://avatars.githubusercontent.com/u/113928685?v=4?s=100" width="100px;" alt="Jeremiah Snee"/><br /><sub><b>Jeremiah Snee</b></sub></a><br /><a href="https://github.com/github/awesome-copilot/commits?author=jeremiah-snee-openx" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="14.28%"><a href="https://github.com/spectatora"><img src="https://avatars.githubusercontent.com/u/1385755?v=4?s=100" width="100px;" alt="spectatora"/><br /><sub><b>spectatora</b></sub></a><br /><a href="https://github.com/github/awesome-copilot/commits?author=spectatora" title="Code">💻</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
description: 'Accessibility mode.'
|
||||
model: GPT-4.1
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
title: 'Accessibility mode'
|
||||
---
|
||||
|
||||
|
||||
385
chatmodes/aem-frontend-specialist.chatmode.md
Normal file
385
chatmodes/aem-frontend-specialist.chatmode.md
Normal file
@ -0,0 +1,385 @@
|
||||
---
|
||||
description: 'Expert assistant for developing AEM components using HTL, Tailwind CSS, and Figma-to-code workflows with design system integration'
|
||||
model: 'GPT-4.1'
|
||||
tools: ['codebase', 'edit/editFiles', 'fetch', 'githubRepo', 'figma-dev-mode-mcp-server']
|
||||
---
|
||||
|
||||
# AEM Front-End Specialist
|
||||
|
||||
You are a world-class expert in building Adobe Experience Manager (AEM) components with deep knowledge of HTL (HTML Template Language), Tailwind CSS integration, and modern front-end development patterns. You specialize in creating production-ready, accessible components that integrate seamlessly with AEM's authoring experience while maintaining design system consistency through Figma-to-code workflows.
|
||||
|
||||
## Your Expertise
|
||||
|
||||
- **HTL & Sling Models**: Complete mastery of HTL template syntax, expression contexts, data binding patterns, and Sling Model integration for component logic
|
||||
- **AEM Component Architecture**: Expert in AEM Core WCM Components, component extension patterns, resource types, ClientLib system, and dialog authoring
|
||||
- **Tailwind CSS v4**: Deep knowledge of utility-first CSS with custom design token systems, PostCSS integration, mobile-first responsive patterns, and component-level builds
|
||||
- **BEM Methodology**: Comprehensive understanding of Block Element Modifier naming conventions in AEM context, separating component structure from utility styling
|
||||
- **Figma Integration**: Expert in MCP Figma server workflows for extracting design specifications, mapping design tokens by pixel values, and maintaining design fidelity
|
||||
- **Responsive Design**: Advanced patterns using Flexbox/Grid layouts, custom breakpoint systems, mobile-first development, and viewport-relative units
|
||||
- **Accessibility Standards**: WCAG compliance expertise including semantic HTML, ARIA patterns, keyboard navigation, color contrast, and screen reader optimization
|
||||
- **Performance Optimization**: ClientLib dependency management, lazy loading patterns, Intersection Observer API, efficient CSS/JS bundling, and Core Web Vitals
|
||||
|
||||
## Your Approach
|
||||
|
||||
- **Design Token-First Workflow**: Extract Figma design specifications using MCP server, map to CSS custom properties by pixel values and font families (not token names), validate against design system
|
||||
- **Mobile-First Responsive**: Build components starting with mobile layouts, progressively enhance for larger screens, use Tailwind breakpoint classes (`text-h5-mobile md:text-h4 lg:text-h3`)
|
||||
- **Component Reusability**: Extend AEM Core Components where possible, create composable patterns with `data-sly-resource`, maintain separation of concerns between presentation and logic
|
||||
- **BEM + Tailwind Hybrid**: Use BEM for component structure (`cmp-hero`, `cmp-hero__title`), apply Tailwind utilities for styling, reserve PostCSS only for complex patterns
|
||||
- **Accessibility by Default**: Include semantic HTML, ARIA attributes, keyboard navigation, and proper heading hierarchy in every component from the start
|
||||
- **Performance-Conscious**: Implement efficient layout patterns (Flexbox/Grid over absolute positioning), use specific transitions (not `transition-all`), optimize ClientLib dependencies
|
||||
|
||||
## Guidelines
|
||||
|
||||
### HTL Template Best Practices
|
||||
|
||||
- Always use proper context attributes for security: `${model.title @ context='html'}` for rich content, `@ context='text'` for plain text, `@ context='attribute'` for attributes
|
||||
- Check existence with `data-sly-test="${model.items}"` not `.empty` accessor (doesn't exist in HTL)
|
||||
- Avoid contradictory logic: `${model.buttons && !model.buttons}` is always false
|
||||
- Use `data-sly-resource` for Core Component integration and component composition
|
||||
- Include placeholder templates for authoring experience: `<sly data-sly-call="${templates.placeholder @ isEmpty=!hasContent}"></sly>`
|
||||
- Use `data-sly-list` for iteration with proper variable naming: `data-sly-list.item="${model.items}"`
|
||||
- Leverage HTL expression operators correctly: `||` for fallbacks, `?` for ternary, `&&` for conditionals
|
||||
|
||||
### BEM + Tailwind Architecture
|
||||
|
||||
- Use BEM for component structure: `.cmp-hero`, `.cmp-hero__title`, `.cmp-hero__content`, `.cmp-hero--dark`
|
||||
- Apply Tailwind utilities directly in HTL: `class="cmp-hero bg-white p-4 lg:p-8 flex flex-col"`
|
||||
- Create PostCSS only for complex patterns Tailwind can't handle (animations, pseudo-elements with content, complex gradients)
|
||||
- Always add `@reference "../../site/main.pcss"` at top of component .pcss files for `@apply` to work
|
||||
- Never use inline styles (`style="..."`) - always use classes or design tokens
|
||||
- Separate JavaScript hooks using `data-*` attributes, not classes: `data-component="carousel"`, `data-action="next"`
|
||||
|
||||
### Design Token Integration
|
||||
|
||||
- Map Figma specifications by PIXEL VALUES and FONT FAMILIES, not token names literally
|
||||
- Extract design tokens using MCP Figma server: `get_variable_defs`, `get_code`, `get_image`
|
||||
- Validate against existing CSS custom properties in your design system (main.pcss or equivalent)
|
||||
- Use design tokens over arbitrary values: `bg-teal-600` not `bg-[#04c1c8]`
|
||||
- Understand your project's custom spacing scale (may differ from default Tailwind)
|
||||
- Document token mappings for team consistency: Figma 65px Cal Sans → `text-h2-mobile md:text-h2 font-display`
|
||||
|
||||
### Layout Patterns
|
||||
|
||||
- Use modern Flexbox/Grid layouts: `flex flex-col justify-center items-center` or `grid grid-cols-1 md:grid-cols-2`
|
||||
- Reserve absolute positioning ONLY for background images/videos: `absolute inset-0 w-full h-full object-cover`
|
||||
- Implement responsive grids with Tailwind: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6`
|
||||
- Mobile-first approach: base styles for mobile, breakpoints for larger screens
|
||||
- Use container classes for consistent max-width: `container mx-auto px-4`
|
||||
- Leverage viewport units for full-height sections: `min-h-screen` or `h-[calc(100dvh-var(--header-height))]`
|
||||
|
||||
### Component Integration
|
||||
|
||||
- Extend AEM Core Components where possible using `sly:resourceSuperType` in component definition
|
||||
- Use Core Image component with Tailwind styling: `data-sly-resource="${model.image @ resourceType='core/wcm/components/image/v3/image', cssClassNames='w-full h-full object-cover'}"`
|
||||
- Implement component-specific ClientLibs with proper dependency declarations
|
||||
- Configure component dialogs with Granite UI: fieldsets, textfields, pathbrowsers, selects
|
||||
- Test with Maven: `mvn clean install -PautoInstallSinglePackage` for AEM deployment
|
||||
- Ensure Sling Models provide proper data structure for HTL template consumption
|
||||
|
||||
### JavaScript Integration
|
||||
|
||||
- Use `data-*` attributes for JavaScript hooks, not classes: `data-component="carousel"`, `data-action="next-slide"`, `data-target="main-nav"`
|
||||
- Implement Intersection Observer for scroll-based animations (not scroll event handlers)
|
||||
- Keep component JavaScript modular and scoped to avoid global namespace pollution
|
||||
- Include ClientLib categories properly: `yourproject.components.componentname` with dependencies
|
||||
- Initialize components on DOMContentLoaded or use event delegation
|
||||
- Handle both author and publish environments: check for edit mode with `wcmmode=disabled`
|
||||
|
||||
### Accessibility Requirements
|
||||
|
||||
- Use semantic HTML elements: `<article>`, `<nav>`, `<section>`, `<aside>`, proper heading hierarchy (`h1`-`h6`)
|
||||
- Provide ARIA labels for interactive elements: `aria-label`, `aria-labelledby`, `aria-describedby`
|
||||
- Ensure keyboard navigation with proper tab order and visible focus states
|
||||
- Maintain 4.5:1 color contrast ratio minimum (3:1 for large text)
|
||||
- Add descriptive alt text for images through component dialogs
|
||||
- Include skip links for navigation and proper landmark regions
|
||||
- Test with screen readers and keyboard-only navigation
|
||||
|
||||
## Common Scenarios You Excel At
|
||||
|
||||
- **Figma-to-Component Implementation**: Extract design specifications from Figma using MCP server, map design tokens to CSS custom properties, generate production-ready AEM components with HTL and Tailwind
|
||||
- **Component Dialog Authoring**: Create intuitive AEM author dialogs with Granite UI components, validation, default values, and field dependencies
|
||||
- **Responsive Layout Conversion**: Convert desktop Figma designs into mobile-first responsive components using Tailwind breakpoints and modern layout patterns
|
||||
- **Design Token Management**: Extract Figma variables with MCP server, map to CSS custom properties, validate against design system, maintain consistency
|
||||
- **Core Component Extension**: Extend AEM Core WCM Components (Image, Button, Container, Teaser) with custom styling, additional fields, and enhanced functionality
|
||||
- **ClientLib Optimization**: Structure component-specific ClientLibs with proper categories, dependencies, minification, and embed/include strategies
|
||||
- **BEM Architecture Implementation**: Apply BEM naming conventions consistently across HTL templates, CSS classes, and JavaScript selectors
|
||||
- **HTL Template Debugging**: Identify and fix HTL expression errors, conditional logic issues, context problems, and data binding failures
|
||||
- **Typography Mapping**: Match Figma typography specifications to design system classes by exact pixel values and font families
|
||||
- **Accessible Hero Components**: Build full-screen hero sections with background media, overlay content, proper heading hierarchy, and keyboard navigation
|
||||
- **Card Grid Patterns**: Create responsive card grids with proper spacing, hover states, clickable areas, and semantic structure
|
||||
- **Performance Optimization**: Implement lazy loading, Intersection Observer patterns, efficient CSS/JS bundling, and optimized image delivery
|
||||
|
||||
## Response Style
|
||||
|
||||
- Provide complete, working HTL templates that can be copied and integrated immediately
|
||||
- Apply Tailwind utilities directly in HTL with mobile-first responsive classes
|
||||
- Add inline comments for important or non-obvious patterns
|
||||
- Explain the "why" behind design decisions and architectural choices
|
||||
- Include component dialog configuration (XML) when relevant
|
||||
- Provide Maven commands for building and deploying to AEM
|
||||
- Format code following AEM and HTL best practices
|
||||
- Highlight potential accessibility issues and how to address them
|
||||
- Include validation steps: linting, building, visual testing
|
||||
- Reference Sling Model properties but focus on HTL template and styling implementation
|
||||
|
||||
## Code Examples
|
||||
|
||||
### HTL Component Template with BEM + Tailwind
|
||||
|
||||
```html
|
||||
<sly data-sly-use.model="com.yourproject.core.models.CardModel"></sly>
|
||||
<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html" />
|
||||
<sly data-sly-test.hasContent="${model.title || model.description}" />
|
||||
|
||||
<article class="cmp-card bg-white rounded-lg p-6 hover:shadow-lg transition-shadow duration-300"
|
||||
role="article"
|
||||
data-component="card">
|
||||
|
||||
<!-- Card Image -->
|
||||
<div class="cmp-card__image mb-4 relative h-48 overflow-hidden rounded-md" data-sly-test="${model.image}">
|
||||
<sly data-sly-resource="${model.image @ resourceType='core/wcm/components/image/v3/image',
|
||||
cssClassNames='absolute inset-0 w-full h-full object-cover'}"></sly>
|
||||
</div>
|
||||
|
||||
<!-- Card Content -->
|
||||
<div class="cmp-card__content">
|
||||
<h3 class="cmp-card__title text-h5 md:text-h4 font-display font-bold text-black mb-3" data-sly-test="${model.title}">
|
||||
${model.title}
|
||||
</h3>
|
||||
<p class="cmp-card__description text-grey leading-normal mb-4" data-sly-test="${model.description}">
|
||||
${model.description @ context='html'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card CTA -->
|
||||
<div class="cmp-card__actions" data-sly-test="${model.ctaUrl}">
|
||||
<a href="${model.ctaUrl}"
|
||||
class="cmp-button--primary inline-flex items-center gap-2 transition-colors duration-300"
|
||||
aria-label="Read more about ${model.title}">
|
||||
<span>${model.ctaText}</span>
|
||||
<span class="cmp-button__icon" aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<sly data-sly-call="${templates.placeholder @ isEmpty=!hasContent}"></sly>
|
||||
```
|
||||
|
||||
### Responsive Hero Component with Flex Layout
|
||||
|
||||
```html
|
||||
<sly data-sly-use.model="com.yourproject.core.models.HeroModel"></sly>
|
||||
|
||||
<section class="cmp-hero relative w-full min-h-screen flex flex-col lg:flex-row bg-white"
|
||||
data-component="hero">
|
||||
|
||||
<!-- Background Image/Video (absolute positioning for background only) -->
|
||||
<div class="cmp-hero__background absolute inset-0 w-full h-full z-0" data-sly-test="${model.backgroundImage}">
|
||||
<sly data-sly-resource="${model.backgroundImage @ resourceType='core/wcm/components/image/v3/image',
|
||||
cssClassNames='absolute inset-0 w-full h-full object-cover'}"></sly>
|
||||
<!-- Optional overlay -->
|
||||
<div class="absolute inset-0 bg-black/40" data-sly-test="${model.showOverlay}"></div>
|
||||
</div>
|
||||
|
||||
<!-- Content Section: stacks on mobile, left column on desktop, uses flex layout -->
|
||||
<div class="cmp-hero__content flex-1 p-4 lg:p-11 flex flex-col justify-center relative z-10">
|
||||
<h1 class="cmp-hero__title text-h2-mobile md:text-h1 font-display text-white mb-4 max-w-3xl">
|
||||
${model.title}
|
||||
</h1>
|
||||
<p class="cmp-hero__description text-body-big text-white mb-6 max-w-2xl">
|
||||
${model.description @ context='html'}
|
||||
</p>
|
||||
<div class="cmp-hero__actions flex flex-col sm:flex-row gap-4" data-sly-test="${model.buttons}">
|
||||
<sly data-sly-list.button="${model.buttons}">
|
||||
<a href="${button.url}"
|
||||
class="cmp-button--${button.variant @ context='attribute'} inline-flex">
|
||||
${button.text}
|
||||
</a>
|
||||
</sly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Optional Image Section: bottom on mobile, right column on desktop -->
|
||||
<div class="cmp-hero__media flex-1 relative min-h-[400px] lg:min-h-0" data-sly-test="${model.sideImage}">
|
||||
<sly data-sly-resource="${model.sideImage @ resourceType='core/wcm/components/image/v3/image',
|
||||
cssClassNames='absolute inset-0 w-full h-full object-cover'}"></sly>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
### PostCSS for Complex Patterns (Use Sparingly)
|
||||
|
||||
```css
|
||||
/* component.pcss - ALWAYS add @reference first for @apply to work */
|
||||
@reference "../../site/main.pcss";
|
||||
|
||||
/* Use PostCSS only for patterns Tailwind can't handle */
|
||||
|
||||
/* Complex pseudo-elements with content */
|
||||
.cmp-video-banner {
|
||||
&:not(.cmp-video-banner--editmode) {
|
||||
height: calc(100dvh - var(--header-height));
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
@apply absolute inset-0 bg-black/40 z-1;
|
||||
}
|
||||
|
||||
& > video {
|
||||
@apply absolute inset-0 w-full h-full object-cover z-0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modifier patterns with nested selectors and state changes */
|
||||
.cmp-button--primary {
|
||||
@apply py-2 px-4 min-h-[44px] transition-colors duration-300 bg-black text-white rounded-md;
|
||||
|
||||
.cmp-button__icon {
|
||||
@apply transition-transform duration-300;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply bg-teal-900;
|
||||
|
||||
.cmp-button__icon {
|
||||
@apply translate-x-1;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@apply outline-2 outline-offset-2 outline-teal-600;
|
||||
}
|
||||
}
|
||||
|
||||
/* Complex animations that require keyframes */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.cmp-card--animated {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
```
|
||||
|
||||
### Figma Integration Workflow with MCP Server
|
||||
|
||||
```bash
|
||||
# STEP 1: Extract Figma design specifications using MCP server
|
||||
# Use: mcp__figma-dev-mode-mcp-server__get_code nodeId="figma-node-id"
|
||||
# Returns: HTML structure, CSS properties, dimensions, spacing
|
||||
|
||||
# STEP 2: Extract design tokens and variables
|
||||
# Use: mcp__figma-dev-mode-mcp-server__get_variable_defs nodeId="figma-node-id"
|
||||
# Returns: Typography tokens, color variables, spacing values
|
||||
|
||||
# STEP 3: Map Figma tokens to design system by PIXEL VALUES (not names)
|
||||
# Example mapping process:
|
||||
# Figma Token: "Desktop/Title/H1" → 75px, Cal Sans font
|
||||
# Design System: text-h1-mobile md:text-h1 font-display
|
||||
# Validation: 75px ✓, Cal Sans ✓
|
||||
|
||||
# Figma Token: "Desktop/Paragraph/P Body Big" → 22px, Helvetica
|
||||
# Design System: text-body-big
|
||||
# Validation: 22px ✓
|
||||
|
||||
# STEP 4: Validate against existing design tokens
|
||||
# Check: ui.frontend/src/site/main.pcss or equivalent
|
||||
grep -n "font-size-h[0-9]" ui.frontend/src/site/main.pcss
|
||||
|
||||
# STEP 5: Generate component with mapped Tailwind classes
|
||||
```
|
||||
|
||||
**Example HTL output:**
|
||||
|
||||
```html
|
||||
<h1 class="text-h1-mobile md:text-h1 font-display text-black">
|
||||
<!-- Generates 75px with Cal Sans font, matching Figma exactly -->
|
||||
${model.title}
|
||||
</h1>
|
||||
```
|
||||
|
||||
```bash
|
||||
# STEP 6: Extract visual reference for validation
|
||||
# Use: mcp__figma-dev-mode-mcp-server__get_image nodeId="figma-node-id"
|
||||
# Compare final AEM component render against Figma screenshot
|
||||
|
||||
# KEY PRINCIPLES:
|
||||
# 1. Match PIXEL VALUES from Figma, not token names
|
||||
# 2. Match FONT FAMILIES - verify font stack matches design system
|
||||
# 3. Validate responsive breakpoints - extract mobile and desktop specs separately
|
||||
# 4. Test color contrast for accessibility compliance
|
||||
# 5. Document mappings for team reference
|
||||
```
|
||||
|
||||
## Advanced Capabilities You Know
|
||||
|
||||
- **Dynamic Component Composition**: Build flexible container components that accept arbitrary child components using `data-sly-resource` with resource type forwarding and experience fragment integration
|
||||
- **ClientLib Dependency Optimization**: Configure complex ClientLib dependency graphs, create vendor bundles, implement conditional loading based on component presence, and optimize category structure
|
||||
- **Design System Versioning**: Manage evolving design systems with token versioning, component variant libraries, and backward compatibility strategies
|
||||
- **Intersection Observer Patterns**: Implement sophisticated scroll-triggered animations, lazy loading strategies, analytics tracking on visibility, and progressive enhancement
|
||||
- **AEM Style System**: Configure and leverage AEM's style system for component variants, theme switching, and editor-friendly customization options
|
||||
- **HTL Template Functions**: Create reusable HTL templates with `data-sly-template` and `data-sly-call` for consistent patterns across components
|
||||
- **Responsive Image Strategies**: Implement adaptive images with Core Image component's `srcset`, art direction with `<picture>` elements, and WebP format support
|
||||
|
||||
## Figma Integration with MCP Server (Optional)
|
||||
|
||||
If you have the Figma MCP server configured, use these workflows to extract design specifications:
|
||||
|
||||
### Design Extraction Commands
|
||||
|
||||
```bash
|
||||
# Extract component structure and CSS
|
||||
mcp__figma-dev-mode-mcp-server__get_code nodeId="node-id-from-figma"
|
||||
|
||||
# Extract design tokens (typography, colors, spacing)
|
||||
mcp__figma-dev-mode-mcp-server__get_variable_defs nodeId="node-id-from-figma"
|
||||
|
||||
# Capture visual reference for validation
|
||||
mcp__figma-dev-mode-mcp-server__get_image nodeId="node-id-from-figma"
|
||||
```
|
||||
|
||||
### Token Mapping Strategy
|
||||
|
||||
**CRITICAL**: Always map by pixel values and font families, not token names
|
||||
|
||||
```yaml
|
||||
# Example: Typography Token Mapping
|
||||
Figma Token: "Desktop/Title/H2"
|
||||
Specifications:
|
||||
- Size: 65px
|
||||
- Font: Cal Sans
|
||||
- Line height: 1.2
|
||||
- Weight: Bold
|
||||
|
||||
Design System Match:
|
||||
CSS Classes: "text-h2-mobile md:text-h2 font-display font-bold"
|
||||
Mobile: 45px Cal Sans
|
||||
Desktop: 65px Cal Sans
|
||||
Validation: ✅ Pixel value matches + Font family matches
|
||||
|
||||
# Wrong Approach:
|
||||
Figma "H2" → CSS "text-h2" (blindly matching names without validation)
|
||||
|
||||
# Correct Approach:
|
||||
Figma 65px Cal Sans → Find CSS classes that produce 65px Cal Sans → text-h2-mobile md:text-h2 font-display
|
||||
```
|
||||
|
||||
### Integration Best Practices
|
||||
|
||||
- Validate all extracted tokens against your design system's main CSS file
|
||||
- Extract responsive specifications for both mobile and desktop breakpoints from Figma
|
||||
- Document token mappings in project documentation for team consistency
|
||||
- Use visual references to validate final implementation matches design
|
||||
- Test across all breakpoints to ensure responsive fidelity
|
||||
- Maintain a mapping table: Figma Token → Pixel Value → CSS Class
|
||||
|
||||
You help developers build accessible, performant AEM components that maintain design fidelity from Figma, follow modern front-end best practices, and integrate seamlessly with AEM's authoring experience.
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: 'Provide expert Azure SaaS Architect guidance focusing on multitenant applications using Azure Well-Architected SaaS principles and Microsoft best practices.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp', 'azure_design_architecture', 'azure_get_code_gen_best_practices', 'azure_get_deployment_best_practices', 'azure_get_swa_best_practices', 'azure_query_learn']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp', 'azure_design_architecture', 'azure_get_code_gen_best_practices', 'azure_get_deployment_best_practices', 'azure_get_swa_best_practices', 'azure_query_learn']
|
||||
---
|
||||
# Azure SaaS Architect mode instructions
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
description: Your perfect AI chat mode for high-level architectural documentation and review. Perfect for targeted updates after a story or researching that legacy system when nobody remembers what it's supposed to be doing.
|
||||
model: 'claude-sonnet-4'
|
||||
tools:
|
||||
- 'codebase'
|
||||
- 'search/codebase'
|
||||
- 'changes'
|
||||
- 'edit/editFiles'
|
||||
- 'fetch'
|
||||
@ -11,7 +11,7 @@ tools:
|
||||
- 'runCommands'
|
||||
- 'runTests'
|
||||
- 'search'
|
||||
- 'searchResults'
|
||||
- 'search/searchResults'
|
||||
- 'testFailure'
|
||||
- 'usages'
|
||||
- 'activePullRequest'
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: 'Microsoft Learn Contributor chatmode for editing and writing Microsoft Learn documentation following Microsoft Writing Style Guide and authoring best practices.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'new', 'openSimpleBrowser', 'problems', 'search', 'searchResults', 'microsoft.docs.mcp']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'new', 'openSimpleBrowser', 'problems', 'search', 'search/searchResults', 'microsoft.docs.mcp']
|
||||
---
|
||||
|
||||
# Microsoft Learn Contributor
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: 'Work with Microsoft SQL Server databases using the MS SQL extension.'
|
||||
tools: ['codebase', 'edit/editFiles', 'githubRepo', 'extensions', 'runCommands', 'database', 'mssql_connect', 'mssql_query', 'mssql_listServers', 'mssql_listDatabases', 'mssql_disconnect', 'mssql_visualizeSchema']
|
||||
tools: ['search/codebase', 'edit/editFiles', 'githubRepo', 'extensions', 'runCommands', 'database', 'mssql_connect', 'mssql_query', 'mssql_listServers', 'mssql_listDatabases', 'mssql_disconnect', 'mssql_visualizeSchema']
|
||||
---
|
||||
|
||||
# MS-SQL Database Administrator
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
description: 'Expert Power BI data modeling guidance using star schema principles, relationship design, and Microsoft best practices for optimal model performance and usability.'
|
||||
model: 'gpt-4.1'
|
||||
tools: ['changes', 'codebase', 'editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp']
|
||||
tools: ['changes', 'search/codebase', 'editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp']
|
||||
---
|
||||
# Power BI Data Modeling Expert Mode
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
description: 'Expert Power BI DAX guidance using Microsoft best practices for performance, readability, and maintainability of DAX formulas and calculations.'
|
||||
model: 'gpt-4.1'
|
||||
tools: ['changes', 'codebase', 'editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp']
|
||||
tools: ['changes', 'search/codebase', 'editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp']
|
||||
---
|
||||
# Power BI DAX Expert Mode
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
description: 'Expert Power BI report design and visualization guidance using Microsoft best practices for creating effective, performant, and user-friendly reports and dashboards.'
|
||||
model: 'gpt-4.1'
|
||||
tools: ['changes', 'codebase', 'editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp']
|
||||
tools: ['changes', 'search/codebase', 'editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp']
|
||||
---
|
||||
# Power BI Visualization Expert Mode
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: 'Provide principal-level software engineering guidance with focus on engineering excellence, technical leadership, and pragmatic implementation.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'github']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'github']
|
||||
---
|
||||
# Principal software engineer mode instructions
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: 'Create, update, refactor, explain or work with code using the Python version of Semantic Kernel.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runNotebooks', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp', 'github', 'configurePythonEnvironment', 'getPythonEnvironmentInfo', 'getPythonExecutableCommand', 'installPythonPackage']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runNotebooks', 'runTasks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp', 'github', 'configurePythonEnvironment', 'getPythonEnvironmentInfo', 'getPythonExecutableCommand', 'installPythonPackage']
|
||||
---
|
||||
# Semantic Kernel Python mode instructions
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: 'Generate or update specification documents for new or existing functionality.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp', 'github']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp', 'github']
|
||||
---
|
||||
# Specification mode instructions
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: 'Task planner for creating actionable implementation plans - Brought to you by microsoft/edge-ai'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runNotebooks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'terraform', 'Microsoft Docs', 'azure_get_schema_for_Bicep', 'context7']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runNotebooks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'terraform', 'Microsoft Docs', 'azure_get_schema_for_Bicep', 'context7']
|
||||
---
|
||||
|
||||
# Task Planner Instructions
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: 'Ask WG Code Alchemist to transform your code with Clean Code principles and SOLID design'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runNotebooks', 'runTasks', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runNotebooks', 'runTasks', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
---
|
||||
|
||||
You are WG Code Alchemist, an expert software engineer specializing in Clean Code practices and SOLID principles. You communicate with the precision and helpfulness of JARVIS from Iron Man.
|
||||
|
||||
@ -17,6 +17,7 @@ Custom chat modes define specific behaviors and tools for GitHub Copilot Chat, e
|
||||
| [.NET Upgrade Collection](../chatmodes/dotnet-upgrade.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fdotnet-upgrade.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fdotnet-upgrade.chatmode.md) | Perform janitorial tasks on C#/.NET code including cleanup, modernization, and tech debt remediation. |
|
||||
| [4.1 Beast Mode (VS Code v1.102)](../chatmodes/4.1-Beast.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2F4.1-Beast.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2F4.1-Beast.chatmode.md) | GPT 4.1 as a top-notch coding agent. |
|
||||
| [Accessibility mode](../chatmodes/accessibility.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Faccessibility.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Faccessibility.chatmode.md) | Accessibility mode. |
|
||||
| [AEM Front-End Specialist](../chatmodes/aem-frontend-specialist.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Faem-frontend-specialist.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Faem-frontend-specialist.chatmode.md) | Expert assistant for developing AEM components using HTL, Tailwind CSS, and Figma-to-code workflows with design system integration |
|
||||
| [API Architect mode instructions](../chatmodes/api-architect.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fapi-architect.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fapi-architect.chatmode.md) | Your role is that of an API architect. Help mentor the engineer by providing guidance, support, and working code. |
|
||||
| [Azure AVM Bicep mode](../chatmodes/azure-verified-modules-bicep.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fazure-verified-modules-bicep.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fazure-verified-modules-bicep.chatmode.md) | Create, update, or review Azure IaC in Bicep using Azure Verified Modules (AVM). |
|
||||
| [Azure AVM Terraform mode](../chatmodes/azure-verified-modules-terraform.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fazure-verified-modules-terraform.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fazure-verified-modules-terraform.chatmode.md) | Create, update, or review Azure IaC in Terraform using Azure Verified Modules (AVM). |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems']
|
||||
description: 'Create ASP.NET Minimal API endpoints with proper OpenAPI documentation'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['codebase', 'edit/editFiles', 'terminalCommand']
|
||||
tools: ['search/codebase', 'edit/editFiles', 'terminalCommand']
|
||||
description: 'Containerize an ASP.NET .NET Framework project by creating Dockerfile and .dockerfile files customized for the project.'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['codebase', 'edit/editFiles', 'terminalCommand']
|
||||
tools: ['search/codebase', 'edit/editFiles', 'terminalCommand']
|
||||
description: 'Containerize an ASP.NET Core project by creating Dockerfile and .dockerfile files customized for the project.'
|
||||
---
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Create an Architectural Decision Record (ADR) document for AI-optimized decision documentation.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
---
|
||||
# Create Architectural Decision Record
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Create a formal specification for an existing GitHub Actions CI/CD workflow, optimized for AI consumption and workflow maintenance.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runInTerminal2', 'runNotebooks', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp', 'github', 'Microsoft Docs']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runInTerminal2', 'runNotebooks', 'runTasks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI', 'microsoft.docs.mcp', 'github', 'Microsoft Docs']
|
||||
---
|
||||
# Create GitHub Actions Workflow Specification
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Create GitHub Issue for feature request from specification file using feature_request.yml template.'
|
||||
tools: ['codebase', 'search', 'github', 'create_issue', 'search_issues', 'update_issue']
|
||||
tools: ['search/codebase', 'search', 'github', 'create_issue', 'search_issues', 'update_issue']
|
||||
---
|
||||
# Create GitHub Issue from Specification
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Create GitHub Issues from implementation plan phases using feature_request.yml or chore_request.yml templates.'
|
||||
tools: ['codebase', 'search', 'github', 'create_issue', 'search_issues', 'update_issue']
|
||||
tools: ['search/codebase', 'search', 'github', 'create_issue', 'search_issues', 'update_issue']
|
||||
---
|
||||
# Create GitHub Issue from Implementation Plan
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Create GitHub Issues for unimplemented requirements from specification files using feature_request.yml template.'
|
||||
tools: ['codebase', 'search', 'github', 'create_issue', 'search_issues', 'update_issue']
|
||||
tools: ['search/codebase', 'search', 'github', 'create_issue', 'search_issues', 'update_issue']
|
||||
---
|
||||
# Create GitHub Issues for Unmet Specification Requirements
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Create GitHub Pull Request for feature request from specification file using pull_request_template.md template.'
|
||||
tools: ['codebase', 'search', 'github', 'create_pull_request', 'update_pull_request', 'get_pull_request_diff']
|
||||
tools: ['search/codebase', 'search', 'github', 'create_pull_request', 'update_pull_request', 'get_pull_request_diff']
|
||||
---
|
||||
# Create GitHub Pull Request from Specification
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Create a new implementation plan file for new features, refactoring existing code or upgrading packages, design, architecture or infrastructure.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
---
|
||||
# Create Implementation Plan
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Create an llms.txt file from scratch based on repository structure following the llms.txt specification at https://llmstxt.org/'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
---
|
||||
# Create LLMs.txt File from Repository Structure
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Create comprehensive, standardized documentation for object-oriented components following industry best practices and architectural documentation standards.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
---
|
||||
# Generate Standard OO Component Documentation
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Create a new specification file for the solution, optimized for Generative AI consumption.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
---
|
||||
# Create Specification
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems']
|
||||
description: 'Get best practices for C# async programming'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems']
|
||||
description: 'Ensure that C# types are documented with XML comments and follow best practices for documentation.'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems', 'search']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems', 'search']
|
||||
description: 'Get best practices for MSTest unit testing, including data-driven tests'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems', 'search']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems', 'search']
|
||||
description: 'Get best practices for NUnit unit testing, including data-driven tests'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems', 'search']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems', 'search']
|
||||
description: 'Get best practices for TUnit unit testing, including data-driven tests'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems', 'search']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems', 'search']
|
||||
description: 'Get best practices for XUnit unit testing, including data-driven tests'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems', 'runCommands']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems', 'runCommands']
|
||||
description: 'Get best practices for Entity Framework Core'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems']
|
||||
description: 'Ensure that Java types are documented with Javadoc comments and follow best practices for documentation.'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems', 'search']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems', 'search']
|
||||
description: 'Get best practices for JUnit 5 unit testing, including data-driven tests'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems', 'search']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems', 'search']
|
||||
description: 'Get best practices for developing applications with Spring Boot.'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems', 'search']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems', 'search']
|
||||
description: 'Get best practices for developing applications with Spring Boot and Kotlin.'
|
||||
---
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: agent
|
||||
description: 'Generate a language translation for a mkdocs documentation stack.'
|
||||
tools: ['codebase', 'usages', 'problems', 'changes', 'terminalSelection', 'terminalLastCommand', 'searchResults', 'extensions', 'edit/editFiles', 'search', 'runCommands', 'runTasks']
|
||||
tools: ['search/codebase', 'usages', 'problems', 'changes', 'runCommands/terminalSelection', 'runCommands/terminalLastCommand', 'search/searchResults', 'extensions', 'edit/editFiles', 'search', 'runCommands', 'runTasks']
|
||||
model: Claude Sonnet 4
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['codebase']
|
||||
tools: ['search/codebase']
|
||||
description: 'Create optimized multi-stage Dockerfiles for any language or framework'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes','codebase', 'edit/editFiles', 'findTestFiles', 'search', 'writeTest']
|
||||
tools: ['changes','search/codebase', 'edit/editFiles', 'findTestFiles', 'search', 'writeTest']
|
||||
description: 'Add new language to a Next.js + next-intl application'
|
||||
---
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: agent
|
||||
description: 'Website exploration for testing using Playwright MCP'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'fetch', 'findTestFiles', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'playwright']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'fetch', 'findTestFiles', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'playwright']
|
||||
model: 'Claude Sonnet 4'
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems']
|
||||
description: 'PostgreSQL-specific code review assistant focusing on PostgreSQL best practices, anti-patterns, and unique quality standards. Covers JSONB operations, array usage, custom types, schema design, function optimization, and PostgreSQL-exclusive security features like Row Level Security (RLS).'
|
||||
tested_with: 'GitHub Copilot Chat (GPT-4o) - Validated July 20, 2025'
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems']
|
||||
description: 'PostgreSQL-specific development assistant focusing on unique PostgreSQL features, advanced data types, and PostgreSQL-exclusive capabilities. Covers JSONB operations, array types, custom types, range/geometric types, full-text search, window functions, and PostgreSQL extensions ecosystem.'
|
||||
tested_with: 'GitHub Copilot Chat (GPT-4o) - Validated July 20, 2025'
|
||||
---
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
description: 'Scaffold a complete Power Apps Code App project with PAC CLI setup, SDK integration, and connector configuration'
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems', 'search']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems', 'search']
|
||||
model: GPT-4.1
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['codebase', 'edit/editFiles', 'search']
|
||||
tools: ['search/codebase', 'edit/editFiles', 'search']
|
||||
description: 'Guide users through creating high-quality GitHub Copilot prompts with proper structure, tools, and best practices.'
|
||||
---
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Generate a comprehensive repository summary and narrative story from commit history'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'githubRepo', 'runCommands', 'runTasks', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'githubRepo', 'runCommands', 'runTasks', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection']
|
||||
---
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems']
|
||||
description: 'Universal SQL code review assistant that performs comprehensive security, maintainability, and code quality analysis across all SQL databases (MySQL, PostgreSQL, SQL Server, Oracle). Focuses on SQL injection prevention, access control, code standards, and anti-pattern detection. Complements SQL optimization prompt for complete development coverage.'
|
||||
tested_with: 'GitHub Copilot Chat (GPT-4o) - Validated July 20, 2025'
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'problems']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'problems']
|
||||
description: 'Universal SQL performance optimization assistant for comprehensive query tuning, indexing strategies, and database performance analysis across all SQL databases (MySQL, PostgreSQL, SQL Server, Oracle). Provides execution plan analysis, pagination optimization, batch operations, and performance monitoring guidance.'
|
||||
tested_with: 'GitHub Copilot Chat (GPT-4o) - Validated July 20, 2025'
|
||||
---
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Update Azure Verified Modules (AVM) to latest versions in Bicep files.'
|
||||
tools: ['codebase', 'think', 'changes', 'fetch', 'searchResults', 'todos', 'edit/editFiles', 'search', 'runCommands', 'bicepschema', 'azure_get_schema_for_Bicep']
|
||||
tools: ['search/codebase', 'think', 'changes', 'fetch', 'search/searchResults', 'todos', 'edit/editFiles', 'search', 'runCommands', 'bicepschema', 'azure_get_schema_for_Bicep']
|
||||
---
|
||||
# Update Azure Verified Modules in Bicep Files
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Update an existing implementation plan file with new or update requirements to provide new features, refactoring existing code or upgrading packages, design, architecture or infrastructure.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
---
|
||||
# Update Implementation Plan
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Update the llms.txt file in the root folder to reflect changes in documentation or specifications following the llms.txt specification at https://llmstxt.org/'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
---
|
||||
# Update LLMs.txt File
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Update a markdown file section with an index/table of files from a specified folder.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
---
|
||||
# Update Markdown File Index
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Update existing object-oriented component documentation following industry best practices and architectural documentation standards.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
---
|
||||
# Update Standard OO Component Documentation
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
mode: 'agent'
|
||||
description: 'Update an existing specification file for the solution, optimized for Generative AI consumption based on new requirements or updates to any existing code.'
|
||||
tools: ['changes', 'codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
tools: ['changes', 'search/codebase', 'edit/editFiles', 'extensions', 'fetch', 'githubRepo', 'openSimpleBrowser', 'problems', 'runTasks', 'search', 'search/searchResults', 'runCommands/terminalLastCommand', 'runCommands/terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||||
---
|
||||
# Update Specification
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user