From d00847a867974a0620c300a4aa1acb3a1e4ca217 Mon Sep 17 00:00:00 2001 From: AIAlchemyForge Date: Thu, 8 Jan 2026 17:17:20 +1300 Subject: [PATCH 01/19] Update dataverse-python-agentic-workflows.instructions.md LogicalName is the key to match against --- instructions/dataverse-python-agentic-workflows.instructions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/instructions/dataverse-python-agentic-workflows.instructions.md b/instructions/dataverse-python-agentic-workflows.instructions.md index 22257154..ca7ada7f 100644 --- a/instructions/dataverse-python-agentic-workflows.instructions.md +++ b/instructions/dataverse-python-agentic-workflows.instructions.md @@ -485,7 +485,7 @@ class SimpleDataAgent: """Agent function: Check table health.""" try: tables = self.client.list_tables() - matching = [t for t in tables if t['table_logical_name'] == table_name] + matching = [t for t in tables if t['LogicalName'] == table_name] if not matching: return {"status": "error", "message": f"Table {table_name} not found"} From 36d550b6da1451567090d97eabe63e091283f527 Mon Sep 17 00:00:00 2001 From: "Gordon Lam (SH)" Date: Thu, 8 Jan 2026 17:46:32 +0800 Subject: [PATCH 02/19] Update to latest standard for prompt writing --- instructions/prompt.instructions.md | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/instructions/prompt.instructions.md b/instructions/prompt.instructions.md index 7ca0432b..a9ef58b9 100644 --- a/instructions/prompt.instructions.md +++ b/instructions/prompt.instructions.md @@ -13,10 +13,25 @@ Instructions for creating effective and maintainable prompt files that guide Git - Primary references: VS Code documentation on prompt files and organization-specific conventions. ## Frontmatter Requirements -- Include `description` (single sentence, actionable outcome), `mode` (explicitly choose `ask`, `edit`, or `agent`), and `tools` (minimal set of tool bundles required to fulfill the prompt). -- Declare `model` when the prompt depends on a specific capability tier; otherwise inherit the active model. -- Preserve any additional metadata (`language`, `tags`, `visibility`, etc.) required by your organization. -- Use consistent quoting (single quotes recommended) and keep one field per line for readability and version control clarity. + +Every prompt file should include YAML frontmatter with the following fields: + +### Required/Recommended Fields + +| Field | Required | Description | +|-------|----------|-------------| +| `description` | Recommended | A short description of the prompt (single sentence, actionable outcome) | +| `name` | Optional | The name shown after typing `/` in chat. Defaults to filename if not specified | +| `agent` | Recommended | The agent to use: `ask`, `edit`, `agent`, or a custom agent name. Defaults to current agent | +| `model` | Optional | The language model to use. Defaults to currently selected model | +| `tools` | Optional | List of tool/tool set names available for this prompt | +| `argument-hint` | Optional | Hint text shown in chat input to guide user interaction | + +### Guidelines + +- Use consistent quoting (single quotes recommended) and keep one field per line for readability and version control clarity +- If `tools` are specified and current agent is `ask` or `edit`, the default agent becomes `agent` +- Preserve any additional metadata (`language`, `tags`, `visibility`, etc.) required by your organization ## File Naming and Placement - Use kebab-case filenames ending with `.prompt.md` and store them under `.github/prompts/` unless your workspace standard specifies another directory. From fc169457012b80629433602f5ea44d140e5cb497 Mon Sep 17 00:00:00 2001 From: Gordon Lam <73506701+yeelam-gordon@users.noreply.github.com> Date: Thu, 8 Jan 2026 18:02:02 +0800 Subject: [PATCH 03/19] Update instructions/prompt.instructions.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- instructions/prompt.instructions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/instructions/prompt.instructions.md b/instructions/prompt.instructions.md index a9ef58b9..ac34d08a 100644 --- a/instructions/prompt.instructions.md +++ b/instructions/prompt.instructions.md @@ -23,7 +23,7 @@ Every prompt file should include YAML frontmatter with the following fields: | `description` | Recommended | A short description of the prompt (single sentence, actionable outcome) | | `name` | Optional | The name shown after typing `/` in chat. Defaults to filename if not specified | | `agent` | Recommended | The agent to use: `ask`, `edit`, `agent`, or a custom agent name. Defaults to current agent | -| `model` | Optional | The language model to use. Defaults to currently selected model | +| `model` | Optional | The language model to use. Defaults to the currently selected model | | `tools` | Optional | List of tool/tool set names available for this prompt | | `argument-hint` | Optional | Hint text shown in chat input to guide user interaction | From 35a690f28e34d878b3e03536d8453decca479e57 Mon Sep 17 00:00:00 2001 From: Gordon Lam <73506701+yeelam-gordon@users.noreply.github.com> Date: Thu, 8 Jan 2026 18:02:10 +0800 Subject: [PATCH 04/19] Update instructions/prompt.instructions.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- instructions/prompt.instructions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/instructions/prompt.instructions.md b/instructions/prompt.instructions.md index ac34d08a..4485d8a8 100644 --- a/instructions/prompt.instructions.md +++ b/instructions/prompt.instructions.md @@ -30,7 +30,7 @@ Every prompt file should include YAML frontmatter with the following fields: ### Guidelines - Use consistent quoting (single quotes recommended) and keep one field per line for readability and version control clarity -- If `tools` are specified and current agent is `ask` or `edit`, the default agent becomes `agent` +- If `tools` are specified and the current agent is `ask` or `edit`, the default agent becomes `agent` - Preserve any additional metadata (`language`, `tags`, `visibility`, etc.) required by your organization ## File Naming and Placement From ed161c3a876ba93e1416b29e2f834904955192e8 Mon Sep 17 00:00:00 2001 From: Tugdual Grall Date: Thu, 8 Jan 2026 15:10:24 +0100 Subject: [PATCH 05/19] Add GitHub Issues skill and issue templates for better management --- docs/README.skills.md | 1 + skills/github-issues/SKILL.md | 132 +++++++++++++++++++ skills/github-issues/references/templates.md | 90 +++++++++++++ 3 files changed, 223 insertions(+) create mode 100644 skills/github-issues/SKILL.md create mode 100644 skills/github-issues/references/templates.md diff --git a/docs/README.skills.md b/docs/README.skills.md index 53e9d296..66190efa 100644 --- a/docs/README.skills.md +++ b/docs/README.skills.md @@ -23,5 +23,6 @@ Skills differ from other primitives by supporting bundled assets (scripts, code | Name | Description | Bundled Assets | | ---- | ----------- | -------------- | | [azure-role-selector](../skills/azure-role-selector/SKILL.md) | When user is asking for guidance for which role to assign to an identity given desired permissions, this agent helps them understand the role that will meet the requirements with least privilege access and how to apply that role. | `LICENSE.txt` | +| [github-issues](../skills/github-issues/SKILL.md) | Create, update, and manage GitHub issues using MCP tools. Use this skill when users want to create bug reports, feature requests, or task issues, update existing issues, add labels/assignees/milestones, or manage issue workflows. Triggers on requests like "create an issue", "file a bug", "request a feature", "update issue X", or any GitHub issue management task. | `references/templates.md` | | [snowflake-semanticview](../skills/snowflake-semanticview/SKILL.md) | Create, alter, and validate Snowflake semantic views using Snowflake CLI (snow). Use when asked to build or troubleshoot semantic views/semantic layer definitions with CREATE/ALTER SEMANTIC VIEW, to validate semantic-view DDL against Snowflake via CLI, or to guide Snowflake CLI installation and connection setup. | None | | [webapp-testing](../skills/webapp-testing/SKILL.md) | Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. | `test-helper.js` | diff --git a/skills/github-issues/SKILL.md b/skills/github-issues/SKILL.md new file mode 100644 index 00000000..c2e88659 --- /dev/null +++ b/skills/github-issues/SKILL.md @@ -0,0 +1,132 @@ +--- +name: github-issues +description: 'Create, update, and manage GitHub issues using MCP tools. Use this skill when users want to create bug reports, feature requests, or task issues, update existing issues, add labels/assignees/milestones, or manage issue workflows. Triggers on requests like "create an issue", "file a bug", "request a feature", "update issue X", or any GitHub issue management task.' +--- + +# GitHub Issues + +Manage GitHub issues using the `@modelcontextprotocol/server-github` MCP server. + +## Available MCP Tools + +| Tool | Purpose | +|------|---------| +| `mcp__github__create_issue` | Create new issues | +| `mcp__github__update_issue` | Update existing issues | +| `mcp__github__get_issue` | Fetch issue details | +| `mcp__github__search_issues` | Search issues | +| `mcp__github__add_issue_comment` | Add comments | +| `mcp__github__list_issues` | List repository issues | + +## Workflow + +1. **Determine action**: Create, update, or query? +2. **Gather context**: Get repo info, existing labels, milestones if needed +3. **Structure content**: Use appropriate template from [references/templates.md](references/templates.md) +4. **Execute**: Call the appropriate MCP tool +5. **Confirm**: Report the issue URL to user + +## Creating Issues + +### Required Parameters + +``` +owner: repository owner (org or user) +repo: repository name +title: clear, actionable title +body: structured markdown content +``` + +### Optional Parameters + +``` +labels: ["bug", "enhancement", "documentation", ...] +assignees: ["username1", "username2"] +milestone: milestone number (integer) +``` + +### Title Guidelines + +- Start with type prefix when useful: `[Bug]`, `[Feature]`, `[Docs]` +- Be specific and actionable +- Keep under 72 characters +- Examples: + - `[Bug] Login fails with SSO enabled` + - `[Feature] Add dark mode support` + - `Add unit tests for auth module` + +### Body Structure + +Always use the templates in [references/templates.md](references/templates.md). Choose based on issue type: + +| User Request | Template | +|--------------|----------| +| Bug, error, broken, not working | Bug Report | +| Feature, enhancement, add, new | Feature Request | +| Task, chore, refactor, update | Task | + +## Updating Issues + +Use `mcp__github__update_issue` with: + +``` +owner, repo, issue_number (required) +title, body, state, labels, assignees, milestone (optional - only changed fields) +``` + +State values: `open`, `closed` + +## Examples + +### Example 1: Bug Report + +**User**: "Create a bug issue - the login page crashes when using SSO" + +**Action**: Call `mcp__github__create_issue` with: +```json +{ + "owner": "github", + "repo": "awesome-copilot", + "title": "[Bug] Login page crashes when using SSO", + "body": "## Description\nThe login page crashes when users attempt to authenticate using SSO.\n\n## Steps to Reproduce\n1. Navigate to login page\n2. Click 'Sign in with SSO'\n3. Page crashes\n\n## Expected Behavior\nSSO authentication should complete and redirect to dashboard.\n\n## Actual Behavior\nPage becomes unresponsive and displays error.\n\n## Environment\n- Browser: [To be filled]\n- OS: [To be filled]\n\n## Additional Context\nReported by user.", + "labels": ["bug"] +} +``` + +### Example 2: Feature Request + +**User**: "Create a feature request for dark mode with high priority" + +**Action**: Call `mcp__github__create_issue` with: +```json +{ + "owner": "github", + "repo": "awesome-copilot", + "title": "[Feature] Add dark mode support", + "body": "## Summary\nAdd dark mode theme option for improved user experience and accessibility.\n\n## Motivation\n- Reduces eye strain in low-light environments\n- Increasingly expected by users\n- Improves accessibility\n\n## Proposed Solution\nImplement theme toggle with system preference detection.\n\n## Acceptance Criteria\n- [ ] Toggle switch in settings\n- [ ] Persists user preference\n- [ ] Respects system preference by default\n- [ ] All UI components support both themes\n\n## Alternatives Considered\nNone specified.\n\n## Additional Context\nHigh priority request.", + "labels": ["enhancement", "high-priority"] +} +``` + +## Common Labels + +Use these standard labels when applicable: + +| Label | Use For | +|-------|---------| +| `bug` | Something isn't working | +| `enhancement` | New feature or improvement | +| `documentation` | Documentation updates | +| `good first issue` | Good for newcomers | +| `help wanted` | Extra attention needed | +| `question` | Further information requested | +| `wontfix` | Will not be addressed | +| `duplicate` | Already exists | +| `high-priority` | Urgent issues | + +## Tips + +- Always confirm the repository context before creating issues +- Ask for missing critical information rather than guessing +- Link related issues when known: `Related to #123` +- For updates, fetch current issue first to preserve unchanged fields diff --git a/skills/github-issues/references/templates.md b/skills/github-issues/references/templates.md new file mode 100644 index 00000000..c05b4087 --- /dev/null +++ b/skills/github-issues/references/templates.md @@ -0,0 +1,90 @@ +# Issue Templates + +Copy and customize these templates for issue bodies. + +## Bug Report Template + +```markdown +## Description +[Clear description of the bug] + +## Steps to Reproduce +1. [First step] +2. [Second step] +3. [And so on...] + +## Expected Behavior +[What should happen] + +## Actual Behavior +[What actually happens] + +## Environment +- Browser: [e.g., Chrome 120] +- OS: [e.g., macOS 14.0] +- Version: [e.g., v1.2.3] + +## Screenshots/Logs +[If applicable] + +## Additional Context +[Any other relevant information] +``` + +## Feature Request Template + +```markdown +## Summary +[One-line description of the feature] + +## Motivation +[Why is this feature needed? What problem does it solve?] + +## Proposed Solution +[How should this feature work?] + +## Acceptance Criteria +- [ ] [Criterion 1] +- [ ] [Criterion 2] +- [ ] [Criterion 3] + +## Alternatives Considered +[Other approaches considered and why they weren't chosen] + +## Additional Context +[Mockups, examples, or related issues] +``` + +## Task Template + +```markdown +## Objective +[What needs to be accomplished] + +## Details +[Detailed description of the work] + +## Checklist +- [ ] [Subtask 1] +- [ ] [Subtask 2] +- [ ] [Subtask 3] + +## Dependencies +[Any blockers or related work] + +## Notes +[Additional context or considerations] +``` + +## Minimal Template + +For simple issues: + +```markdown +## Description +[What and why] + +## Tasks +- [ ] [Task 1] +- [ ] [Task 2] +``` From 8c4cb6af4f35ba971abe9f1aabbcbf7faafb519a Mon Sep 17 00:00:00 2001 From: ks6088ts Date: Fri, 9 Jan 2026 09:27:12 +0900 Subject: [PATCH 06/19] add web-design-reviewer skill --- skills/web-design-reviewer/SKILL.md | 368 ++++++++++++++ .../references/framework-fixes.md | 475 ++++++++++++++++++ .../references/visual-checklist.md | 236 +++++++++ 3 files changed, 1079 insertions(+) create mode 100644 skills/web-design-reviewer/SKILL.md create mode 100644 skills/web-design-reviewer/references/framework-fixes.md create mode 100644 skills/web-design-reviewer/references/visual-checklist.md diff --git a/skills/web-design-reviewer/SKILL.md b/skills/web-design-reviewer/SKILL.md new file mode 100644 index 00000000..b0f2f6db --- /dev/null +++ b/skills/web-design-reviewer/SKILL.md @@ -0,0 +1,368 @@ +--- +name: web-design-reviewer +description: 'This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.' +--- + +# Web Design Reviewer + +This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level. + +## Scope of Application + +- Static sites (HTML/CSS/JS) +- SPA frameworks such as React / Vue / Angular / Svelte +- Full-stack frameworks such as Next.js / Nuxt / SvelteKit +- CMS platforms such as WordPress / Drupal +- Any other web application + +## Prerequisites + +### Required + +1. **Target website must be running** + - Local development server (e.g., `http://localhost:3000`) + - Staging environment + - Production environment (for read-only reviews) + +2. **Browser automation must be available** + - Screenshot capture + - Page navigation + - DOM information retrieval + +3. **Access to source code (when making fixes)** + - Project must exist within the workspace + +## Workflow Overview + +```mermaid +flowchart TD + A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection] + B --> C[Step 3: Issue Fixing] + C --> D[Step 4: Re-verification] + D --> E{Issues Remaining?} + E -->|Yes| B + E -->|No| F[Completion Report] +``` + +--- + +## Step 1: Information Gathering Phase + +### 1.1 URL Confirmation + +If the URL is not provided, ask the user: + +> Please provide the URL of the website to review (e.g., `http://localhost:3000`) + +### 1.2 Understanding Project Structure + +When making fixes, gather the following information: + +| Item | Example Question | +|------|------------------| +| Framework | Are you using React / Vue / Next.js, etc.? | +| Styling Method | CSS / SCSS / Tailwind / CSS-in-JS, etc. | +| Source Location | Where are style files and components located? | +| Review Scope | Specific pages only or entire site? | + +### 1.3 Automatic Project Detection + +Attempt automatic detection from files in the workspace: + +``` +Detection targets: +├── package.json → Framework and dependencies +├── tsconfig.json → TypeScript usage +├── tailwind.config → Tailwind CSS +├── next.config → Next.js +├── vite.config → Vite +├── nuxt.config → Nuxt +└── src/ or app/ → Source directory +``` + +### 1.4 Identifying Styling Method + +| Method | Detection | Edit Target | +|--------|-----------|-------------| +| Pure CSS | `*.css` files | Global CSS or component CSS | +| SCSS/Sass | `*.scss`, `*.sass` | SCSS files | +| CSS Modules | `*.module.css` | Module CSS files | +| Tailwind CSS | `tailwind.config.*` | className in components | +| styled-components | `styled.` in code | JS/TS files | +| Emotion | `@emotion/` imports | JS/TS files | +| CSS-in-JS (other) | Inline styles | JS/TS files | + +--- + +## Step 2: Visual Inspection Phase + +### 2.1 Page Traversal + +1. Navigate to the specified URL +2. Capture screenshots +3. Retrieve DOM structure/snapshot (if possible) +4. If additional pages exist, traverse through navigation + +### 2.2 Inspection Items + +#### Layout Issues + +| Issue | Description | Severity | +|-------|-------------|----------| +| Element Overflow | Content overflows from parent element or viewport | High | +| Element Overlap | Unintended overlapping of elements | High | +| Alignment Issues | Grid or flex alignment problems | Medium | +| Inconsistent Spacing | Padding/margin inconsistencies | Medium | +| Text Clipping | Long text not handled properly | Medium | + +#### Responsive Issues + +| Issue | Description | Severity | +|-------|-------------|----------| +| Non-mobile Friendly | Layout breaks on small screens | High | +| Breakpoint Issues | Unnatural transitions when screen size changes | Medium | +| Touch Targets | Buttons too small on mobile | Medium | + +#### Accessibility Issues + +| Issue | Description | Severity | +|-------|-------------|----------| +| Insufficient Contrast | Low contrast ratio between text and background | High | +| No Focus State | Cannot determine state during keyboard navigation | High | +| Missing alt Text | No alternative text for images | Medium | + +#### Visual Consistency + +| Issue | Description | Severity | +|-------|-------------|----------| +| Font Inconsistency | Mixed font families | Medium | +| Color Inconsistency | Non-unified brand colors | Medium | +| Spacing Inconsistency | Non-uniform spacing between similar elements | Low | + +### 2.3 Viewport Testing (Responsive) + +Test at the following viewports: + +| Name | Width | Representative Device | +|------|-------|----------------------| +| Mobile | 375px | iPhone SE/12 mini | +| Tablet | 768px | iPad | +| Desktop | 1280px | Standard PC | +| Wide | 1920px | Large display | + +--- + +## Step 3: Issue Fixing Phase + +### 3.1 Issue Prioritization + +```mermaid +block-beta + columns 1 + block:priority["Priority Matrix"] + P1["P1: Fix Immediately\n(Layout issues affecting functionality)"] + P2["P2: Fix Next\n(Visual issues degrading UX)"] + P3["P3: Fix If Possible\n(Minor visual inconsistencies)"] + end +``` + +### 3.2 Identifying Source Files + +Identify source files from problematic elements: + +1. **Selector-based Search** + - Search codebase by class name or ID + - Explore style definitions with `grep_search` + +2. **Component-based Search** + - Identify components from element text or structure + - Explore related files with `semantic_search` + +3. **File Pattern Filtering** + ``` + Style files: src/**/*.css, styles/**/* + Components: src/components/**/* + Pages: src/pages/**, app/** + ``` + +### 3.3 Applying Fixes + +#### Framework-specific Fix Guidelines + +See [references/framework-fixes.md](references/framework-fixes.md) for details. + +#### Fix Principles + +1. **Minimal Changes**: Only make the minimum changes necessary to resolve the issue +2. **Respect Existing Patterns**: Follow existing code style in the project +3. **Avoid Breaking Changes**: Be careful not to affect other areas +4. **Add Comments**: Add comments to explain the reason for fixes where appropriate + +--- + +## Step 4: Re-verification Phase + +### 4.1 Post-fix Confirmation + +1. Reload browser (or wait for development server HMR) +2. Capture screenshots of fixed areas +3. Compare before and after + +### 4.2 Regression Testing + +- Verify that fixes haven't affected other areas +- Confirm responsive display is not broken + +### 4.3 Iteration Decision + +```mermaid +flowchart TD + A{Issues Remaining?} + A -->|Yes| B[Return to Step 2] + A -->|No| C[Proceed to Completion Report] +``` + +**Iteration Limit**: If more than 3 fix attempts are needed for a specific issue, consult the user + +--- + +## Output Format + +### Review Results Report + +```markdown +# Web Design Review Results + +## Summary + +| Item | Value | +|------|-------| +| Target URL | {URL} | +| Framework | {Detected framework} | +| Styling | {CSS / Tailwind / etc.} | +| Tested Viewports | Desktop, Mobile | +| Issues Detected | {N} | +| Issues Fixed | {M} | + +## Detected Issues + +### [P1] {Issue Title} + +- **Page**: {Page path} +- **Element**: {Selector or description} +- **Issue**: {Detailed description of the issue} +- **Fixed File**: `{File path}` +- **Fix Details**: {Description of changes} +- **Screenshot**: Before/After + +### [P2] {Issue Title} +... + +## Unfixed Issues (if any) + +### {Issue Title} +- **Reason**: {Why it was not fixed/could not be fixed} +- **Recommended Action**: {Recommendations for user} + +## Recommendations + +- {Suggestions for future improvements} +``` + +--- + +## Required Capabilities + +| Capability | Description | Required | +|------------|-------------|----------| +| Web Page Navigation | Access URLs, page transitions | ✅ | +| Screenshot Capture | Page image capture | ✅ | +| Image Analysis | Visual issue detection | ✅ | +| DOM Retrieval | Page structure retrieval | Recommended | +| File Read/Write | Source code reading and editing | Required for fixes | +| Code Search | Code search within project | Required for fixes | + +--- + +## Reference Implementation + +### Implementation with Playwright MCP + +[Playwright MCP](https://github.com/microsoft/playwright-mcp) is recommended as the reference implementation for this skill. + +| Capability | Playwright MCP Tool | Purpose | +|------------|---------------------|---------| +| Navigation | `browser_navigate` | Access URLs | +| Snapshot | `browser_snapshot` | Retrieve DOM structure | +| Screenshot | `browser_take_screenshot` | Images for visual inspection | +| Click | `browser_click` | Interact with interactive elements | +| Resize | `browser_resize` | Responsive testing | +| Console | `browser_console_messages` | Detect JS errors | + +#### Configuration Example (MCP Server) + +```json +{ + "mcpServers": { + "playwright": { + "command": "npx", + "args": ["-y", "@playwright/mcp@latest", "--caps=vision"] + } + } +} +``` + +### Other Compatible Browser Automation Tools + +| Tool | Features | +|------|----------| +| Selenium | Broad browser support, multi-language support | +| Puppeteer | Chrome/Chromium focused, Node.js | +| Cypress | Easy integration with E2E testing | +| WebDriver BiDi | Standardized next-generation protocol | + +The same workflow can be implemented with these tools. As long as they provide the necessary capabilities (navigation, screenshot, DOM retrieval), the choice of tool is flexible. + +--- + +## Best Practices + +### DO (Recommended) + +- ✅ Always save screenshots before making fixes +- ✅ Fix one issue at a time and verify each +- ✅ Follow the project's existing code style +- ✅ Confirm with user before major changes +- ✅ Document fix details thoroughly + +### DON'T (Not Recommended) + +- ❌ Large-scale refactoring without confirmation +- ❌ Ignoring design systems or brand guidelines +- ❌ Fixes that ignore performance +- ❌ Fixing multiple issues at once (difficult to verify) + +--- + +## Troubleshooting + +### Problem: Style files not found + +1. Check dependencies in `package.json` +2. Consider the possibility of CSS-in-JS +3. Consider CSS generated at build time +4. Ask user about styling method + +### Problem: Fixes not reflected + +1. Check if development server HMR is working +2. Clear browser cache +3. Rebuild if project requires build +4. Check CSS specificity issues + +### Problem: Fixes affecting other areas + +1. Rollback changes +2. Use more specific selectors +3. Consider using CSS Modules or scoped styles +4. Consult user to confirm impact scope diff --git a/skills/web-design-reviewer/references/framework-fixes.md b/skills/web-design-reviewer/references/framework-fixes.md new file mode 100644 index 00000000..d400ca14 --- /dev/null +++ b/skills/web-design-reviewer/references/framework-fixes.md @@ -0,0 +1,475 @@ +# Framework-specific Fix Guide + +This document explains specific fix techniques for each framework and styling method. + +--- + +## Pure CSS / SCSS + +### Fixing Layout Overflow + +```css +/* Before: Overflow occurs */ +.container { + width: 100%; +} + +/* After: Control overflow */ +.container { + width: 100%; + max-width: 100%; + overflow-x: hidden; +} +``` + +### Text Clipping Prevention + +```css +/* Single line truncation */ +.text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Multi-line truncation */ +.text-clamp { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Word wrapping */ +.text-wrap { + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; +} +``` + +### Spacing Unification + +```css +/* Unify spacing with CSS custom properties */ +:root { + --spacing-xs: 0.25rem; + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; +} + +.card { + padding: var(--spacing-md); + margin-bottom: var(--spacing-lg); +} +``` + +### Improving Contrast + +```css +/* Before: Insufficient contrast */ +.text { + color: #999999; + background-color: #ffffff; +} + +/* After: Meets WCAG AA standards */ +.text { + color: #595959; /* Contrast ratio 7:1 */ + background-color: #ffffff; +} +``` + +--- + +## Tailwind CSS + +### Layout Fixes + +```jsx +{/* Before: Overflow */} +
+ +
+ +{/* After: Overflow control */} +
+ +
+``` + +### Text Clipping Prevention + +```jsx +{/* Single line truncation */} +

Long text...

+ +{/* Multi-line truncation */} +

Long text...

+ +{/* Allow wrapping */} +

Long text...

+``` + +### Responsive Support + +```jsx +{/* Mobile-first responsive */} +
+
+ Content +
+
+``` + +### Spacing Unification (Tailwind Config) + +```javascript +// tailwind.config.js +module.exports = { + theme: { + extend: { + spacing: { + '18': '4.5rem', + '22': '5.5rem', + }, + }, + }, +} +``` + +### Accessibility Improvements + +```jsx +{/* Add focus state */} + + +{/* Improve contrast */} +

{/* Changed from text-gray-500 */} + Readable text +

+``` + +--- + +## React + CSS Modules + +### Fixes in Module Scope + +```css +/* Component.module.css */ + +/* Before */ +.container { + display: flex; +} + +/* After: Add overflow control */ +.container { + display: flex; + flex-wrap: wrap; + overflow: hidden; + max-width: 100%; +} +``` + +### Component-side Fixes + +```jsx +// Component.jsx +import styles from './Component.module.css'; + +// Before +
+ +// After: Add conditional class +
+``` + +--- + +## styled-components / Emotion + +### Style Fixes + +```jsx +// Before +const Container = styled.div` + width: 100%; +`; + +// After +const Container = styled.div` + width: 100%; + max-width: 100%; + overflow-x: hidden; + + @media (max-width: 768px) { + padding: 1rem; + } +`; +``` + +### Responsive Support + +```jsx +const Card = styled.div` + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + + @media (max-width: 1024px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (max-width: 640px) { + grid-template-columns: 1fr; + gap: 1rem; + } +`; +``` + +### Consistency with Theme + +```jsx +// theme.js +export const theme = { + colors: { + primary: '#2563eb', + text: '#1f2937', + textLight: '#4b5563', // Improved contrast + }, + spacing: { + sm: '0.5rem', + md: '1rem', + lg: '1.5rem', + }, +}; + +// Usage +const Text = styled.p` + color: ${({ theme }) => theme.colors.text}; + margin-bottom: ${({ theme }) => theme.spacing.md}; +`; +``` + +--- + +## Vue (Scoped Styles) + +### Fixing Scoped Styles + +```vue + + + +``` + +### Deep Selectors (Affecting Child Components) + +```vue + +``` + +--- + +## Next.js / App Router + +### Global Style Fixes + +```css +/* app/globals.css */ +:root { + --foreground: #171717; + --background: #ffffff; +} + +/* Prevent layout overflow */ +html, body { + max-width: 100vw; + overflow-x: hidden; +} + +/* Prevent image overflow */ +img { + max-width: 100%; + height: auto; +} +``` + +### Fixes in Layout Components + +```tsx +// app/layout.tsx +export default function RootLayout({ children }) { + return ( + + +
+ {/* Header */} +
+
+ {children} +
+
+ {/* Footer */} +
+ + + ); +} +``` + +--- + +## Common Patterns + +### Fixing Flexbox Layout Issues + +```css +/* Before: Items overflow */ +.flex-container { + display: flex; + gap: 1rem; +} + +/* After: Wrap and size control */ +.flex-container { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.flex-item { + flex: 1 1 300px; /* grow, shrink, basis */ + min-width: 0; /* Prevent flexbox overflow issues */ +} +``` + +### Fixing Grid Layout Issues + +```css +/* Before: Fixed column count */ +.grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); +} + +/* After: Auto-adjust */ +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; +} +``` + +### Organizing z-index + +```css +/* Systematize z-index */ +:root { + --z-dropdown: 100; + --z-sticky: 200; + --z-modal-backdrop: 300; + --z-modal: 400; + --z-tooltip: 500; +} + +.modal { + z-index: var(--z-modal); +} +``` + +### Adding Focus States + +```css +/* Add focus state to all interactive elements */ +button:focus-visible, +a:focus-visible, +input:focus-visible, +select:focus-visible, +textarea:focus-visible { + outline: 2px solid #2563eb; + outline-offset: 2px; +} + +/* Customize focus ring */ +.custom-focus:focus-visible { + outline: none; + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5); +} +``` + +--- + +## Debugging Techniques + +### Visualizing Element Boundaries + +```css +/* Use only during development */ +* { + outline: 1px solid red !important; +} +``` + +### Detecting Overflow + +```javascript +// Run in console to detect overflow elements +document.querySelectorAll('*').forEach(el => { + if (el.scrollWidth > el.clientWidth) { + console.log('Horizontal overflow:', el); + } + if (el.scrollHeight > el.clientHeight) { + console.log('Vertical overflow:', el); + } +}); +``` + +### Checking Contrast Ratio + +```javascript +// Use Chrome DevTools Lighthouse or axe DevTools +// Or check at the following site: +// https://webaim.org/resources/contrastchecker/ +``` diff --git a/skills/web-design-reviewer/references/visual-checklist.md b/skills/web-design-reviewer/references/visual-checklist.md new file mode 100644 index 00000000..37499018 --- /dev/null +++ b/skills/web-design-reviewer/references/visual-checklist.md @@ -0,0 +1,236 @@ +# Visual Inspection Checklist + +This document is a comprehensive checklist of items to verify during web design visual inspection. + +--- + +## 1. Layout Verification + +### Structural Integrity + +- [ ] Header is correctly fixed/positioned at the top of the screen +- [ ] Footer is positioned at the bottom of the screen or end of content +- [ ] Main content area is center-aligned with appropriate width +- [ ] Sidebar (if present) is positioned correctly +- [ ] Navigation is displayed in the intended position + +### Overflow + +- [ ] Horizontal scrollbar is not unintentionally displayed +- [ ] Content does not overflow from parent elements +- [ ] Images fit within parent containers +- [ ] Tables do not exceed container width +- [ ] Code blocks wrap or scroll appropriately + +### Alignment + +- [ ] Grid items are evenly distributed +- [ ] Flex item alignment is correct +- [ ] Text alignment (left/center/right) is consistent +- [ ] Icons and text are vertically aligned +- [ ] Form labels and input fields are correctly positioned + +--- + +## 2. Typography Verification + +### Readability + +- [ ] Body text font size is sufficient (minimum 16px recommended) +- [ ] Line height is appropriate (1.5-1.8 recommended) +- [ ] Characters per line is appropriate (40-80 characters recommended) +- [ ] Spacing between paragraphs is sufficient +- [ ] Heading size hierarchy is clear + +### Text Handling + +- [ ] Long words wrap appropriately +- [ ] URLs and code are handled properly +- [ ] No text clipping occurs +- [ ] Ellipsis (...) displays correctly +- [ ] Language-specific line breaking rules work correctly + +### Fonts + +- [ ] Web fonts load correctly +- [ ] Fallback fonts are appropriate +- [ ] Font weights are as intended +- [ ] Special characters and emoji display correctly + +--- + +## 3. Color & Contrast Verification + +### Accessibility (WCAG Standards) + +- [ ] Body text: Contrast ratio 4.5:1 or higher (AA) +- [ ] Large text (18px+ bold or 24px+): 3:1 or higher +- [ ] Interactive element borders: 3:1 or higher +- [ ] Focus indicators: Sufficient contrast with background + +### Color Consistency + +- [ ] Brand colors are unified +- [ ] Link colors are consistent +- [ ] Error state red is unified +- [ ] Success state green is unified +- [ ] Hover/active state colors are appropriate + +### Color Vision Diversity + +- [ ] Information conveyed by shape and text, not just color +- [ ] Charts and diagrams consider color vision diversity +- [ ] Error messages don't rely solely on color + +--- + +## 4. Responsive Verification + +### Mobile (~640px) + +- [ ] Content fits within screen width +- [ ] Touch targets are 44x44px or larger +- [ ] Text is readable size +- [ ] No horizontal scrolling occurs +- [ ] Navigation is mobile-friendly (hamburger menu, etc.) +- [ ] Form inputs are easy to use + +### Tablet (641px~1024px) + +- [ ] Layout is optimized for tablet +- [ ] Two-column layouts display appropriately +- [ ] Image sizes are appropriate +- [ ] Sidebar show/hide is appropriate + +### Desktop (1025px~) + +- [ ] Maximum width is set and doesn't break on extra-large screens +- [ ] Spacing is sufficient +- [ ] Multi-column layouts function correctly +- [ ] Hover states are implemented + +### Breakpoint Transitions + +- [ ] Layout transitions smoothly when screen size changes +- [ ] Layout doesn't break at intermediate sizes +- [ ] No content disappears or duplicates + +--- + +## 5. Interactive Element Verification + +### Buttons + +- [ ] Default state is clear +- [ ] Hover state exists (desktop) +- [ ] Focus state is visually clear +- [ ] Active (pressed) state exists +- [ ] Disabled state is distinguishable +- [ ] Loading state (if applicable) + +### Links + +- [ ] Links are visually identifiable +- [ ] Visited links are distinguishable (if needed) +- [ ] Hover state exists +- [ ] Focus state is clear + +### Form Elements + +- [ ] Input field boundaries are clear +- [ ] Placeholder text contrast is appropriate +- [ ] Visual feedback on focus +- [ ] Error state display +- [ ] Required field indication +- [ ] Dropdowns function correctly + +--- + +## 6. Images & Media Verification + +### Images + +- [ ] Images display at appropriate size +- [ ] Aspect ratio is maintained +- [ ] High resolution display support (@2x) +- [ ] Display when image fails to load +- [ ] Lazy loading behavior works + +### Video & Embeds + +- [ ] Videos fit within containers +- [ ] Aspect ratio is maintained +- [ ] Embedded content is responsive +- [ ] iframes don't overflow + +--- + +## 7. Accessibility Verification + +### Keyboard Navigation + +- [ ] All interactive elements accessible via Tab key +- [ ] Focus order is logical +- [ ] Focus traps are appropriate (modals, etc.) +- [ ] Skip to content link exists + +### Screen Reader Support + +- [ ] Images have alt text +- [ ] Forms have labels +- [ ] ARIA labels are appropriately set +- [ ] Heading hierarchy is correct (h1→h2→h3...) + +### Motion + +- [ ] Animations are not excessive +- [ ] prefers-reduced-motion is supported (if possible) + +--- + +## 8. Performance-related Visual Issues + +### Loading + +- [ ] Font FOUT/FOIT is minimal +- [ ] No layout shift (CLS) occurs +- [ ] No jumping when images load +- [ ] Skeleton screens are appropriate (if applicable) + +### Animation + +- [ ] Animations are smooth (60fps) +- [ ] No performance issues when scrolling +- [ ] Transitions are natural + +--- + +## Priority Matrix + +| Priority | Category | Examples | +|----------|----------|----------| +| P0 (Critical) | Functionality breaking | Complete element overlap, content disappearance | +| P1 (High) | Serious UX issues | Unreadable text, inoperable buttons | +| P2 (Medium) | Moderate issues | Alignment misalignment, spacing inconsistencies | +| P3 (Low) | Minor issues | Slight positioning differences, minor color variations | + +--- + +## Verification Tools + +### Browser DevTools + +- Elements panel: DOM and style inspection +- Lighthouse: Performance and accessibility audits +- Device toolbar: Responsive testing + +### Accessibility Tools + +- axe DevTools +- WAVE +- Color Contrast Analyzer + +### Automation Tools + +- Playwright (screenshot comparison) +- Percy / Chromatic (Visual Regression Testing) From ac4d5f56968cc2865c2df4cc4624401944ce1503 Mon Sep 17 00:00:00 2001 From: ks6088ts Date: Fri, 9 Jan 2026 10:40:14 +0900 Subject: [PATCH 07/19] update README --- docs/README.skills.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/README.skills.md b/docs/README.skills.md index 53e9d296..a1cffa3b 100644 --- a/docs/README.skills.md +++ b/docs/README.skills.md @@ -24,4 +24,5 @@ Skills differ from other primitives by supporting bundled assets (scripts, code | ---- | ----------- | -------------- | | [azure-role-selector](../skills/azure-role-selector/SKILL.md) | When user is asking for guidance for which role to assign to an identity given desired permissions, this agent helps them understand the role that will meet the requirements with least privilege access and how to apply that role. | `LICENSE.txt` | | [snowflake-semanticview](../skills/snowflake-semanticview/SKILL.md) | Create, alter, and validate Snowflake semantic views using Snowflake CLI (snow). Use when asked to build or troubleshoot semantic views/semantic layer definitions with CREATE/ALTER SEMANTIC VIEW, to validate semantic-view DDL against Snowflake via CLI, or to guide Snowflake CLI installation and connection setup. | None | +| [web-design-reviewer](../skills/web-design-reviewer/SKILL.md) | This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level. | `references/framework-fixes.md`
`references/visual-checklist.md` | | [webapp-testing](../skills/webapp-testing/SKILL.md) | Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. | `test-helper.js` | From 24b3a2443025820ba7899f09b0e5c841ad895cd5 Mon Sep 17 00:00:00 2001 From: ks6088ts Date: Fri, 9 Jan 2026 10:42:35 +0900 Subject: [PATCH 08/19] add skill option to `Type of Contribution` listed in pull request template --- .github/pull_request_template.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index b95a0aea..b9003984 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -21,7 +21,8 @@ - [ ] New prompt file. - [ ] New chat mode file. - [ ] New collection file. -- [ ] Update to existing instruction, prompt, chat mode, or collection. +- [ ] New skill file. +- [ ] Update to existing instruction, prompt, chat mode, collection or skill. - [ ] Other (please specify): --- From 952c4f45a7bba173f32176a2658a03a1a5ad462c Mon Sep 17 00:00:00 2001 From: Shinji Takenaka Date: Fri, 9 Jan 2026 10:46:07 +0900 Subject: [PATCH 09/19] Update skills/web-design-reviewer/references/visual-checklist.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- skills/web-design-reviewer/references/visual-checklist.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/web-design-reviewer/references/visual-checklist.md b/skills/web-design-reviewer/references/visual-checklist.md index 37499018..24346c54 100644 --- a/skills/web-design-reviewer/references/visual-checklist.md +++ b/skills/web-design-reviewer/references/visual-checklist.md @@ -211,7 +211,7 @@ This document is a comprehensive checklist of items to verify during web design |----------|----------|----------| | P0 (Critical) | Functionality breaking | Complete element overlap, content disappearance | | P1 (High) | Serious UX issues | Unreadable text, inoperable buttons | -| P2 (Medium) | Moderate issues | Alignment misalignment, spacing inconsistencies | +| P2 (Medium) | Moderate issues | Alignment issues, spacing inconsistencies | | P3 (Low) | Minor issues | Slight positioning differences, minor color variations | --- From 5d75b2d79b5aaa6450fe4d1a53e8b3b247f742f6 Mon Sep 17 00:00:00 2001 From: "Gordon Lam (SH)" Date: Fri, 9 Jan 2026 21:47:06 +0800 Subject: [PATCH 10/19] Add agent-skills.instructions.md - Guidelines for creating Agent Skills --- docs/README.instructions.md | 1 + instructions/agent-skills.instructions.md | 261 ++++++++++++++++++++++ 2 files changed, 262 insertions(+) create mode 100644 instructions/agent-skills.instructions.md diff --git a/docs/README.instructions.md b/docs/README.instructions.md index da7b4a7f..6c0f556c 100644 --- a/docs/README.instructions.md +++ b/docs/README.instructions.md @@ -17,6 +17,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for | [.NET Framework Development](../instructions/dotnet-framework.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-framework.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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%2Fdotnet-framework.instructions.md) | Guidance for working with .NET Framework projects. Includes project structure, C# language version, NuGet management, and best practices. | | [.NET Framework Upgrade Specialist](../instructions/dotnet-upgrade.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-upgrade.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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%2Fdotnet-upgrade.instructions.md) | Specialized agent for comprehensive .NET framework upgrades with progressive tracking and validation | | [.NET MAUI](../instructions/dotnet-maui.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-maui.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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%2Fdotnet-maui.instructions.md) | .NET MAUI component and application patterns | +| [Agent Skills File Guidelines](../instructions/agent-skills.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fagent-skills.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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%2Fagent-skills.instructions.md) | Guidelines for creating high-quality Agent Skills for GitHub Copilot | | [AI Prompt Engineering & Safety Best Practices](../instructions/ai-prompt-engineering-safety-best-practices.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fai-prompt-engineering-safety-best-practices.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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%2Fai-prompt-engineering-safety-best-practices.instructions.md) | Comprehensive best practices for AI prompt engineering, safety frameworks, bias mitigation, and responsible AI usage for Copilot and LLMs. | | [Angular Development Instructions](../instructions/angular.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fangular.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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%2Fangular.instructions.md) | Angular-specific coding standards and best practices | | [Ansible Conventions and Best Practices](../instructions/ansible.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fansible.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](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%2Fansible.instructions.md) | Ansible conventions and best practices | diff --git a/instructions/agent-skills.instructions.md b/instructions/agent-skills.instructions.md new file mode 100644 index 00000000..4c136346 --- /dev/null +++ b/instructions/agent-skills.instructions.md @@ -0,0 +1,261 @@ +--- +description: 'Guidelines for creating high-quality Agent Skills for GitHub Copilot' +applyTo: '**/.github/skills/**/SKILL.md, **/.claude/skills/**/SKILL.md' +--- + +# Agent Skills File Guidelines + +Instructions for creating effective and portable Agent Skills that enhance GitHub Copilot with specialized capabilities, workflows, and bundled resources. + +## What Are Agent Skills? + +Agent Skills are self-contained folders with instructions and bundled resources that teach AI agents specialized capabilities. Unlike custom instructions (which define coding standards), skills enable task-specific workflows that can include scripts, examples, templates, and reference data. + +Key characteristics: +- **Portable**: Works across VS Code, Copilot CLI, and Copilot coding agent +- **Progressive loading**: Only loaded when relevant to the user's request +- **Resource-bundled**: Can include scripts, templates, examples alongside instructions +- **On-demand**: Activated automatically based on prompt relevance + +## Directory Structure + +Skills are stored in specific locations: + +| Location | Scope | Recommendation | +|----------|-------|----------------| +| `.github/skills//` | Project/repository | Recommended for project skills | +| `.claude/skills//` | Project/repository | Legacy, for backward compatibility | +| `~/.github/skills//` | Personal (user-wide) | Recommended for personal skills | +| `~/.claude/skills//` | Personal (user-wide) | Legacy, for backward compatibility | + +Each skill **must** have its own subdirectory containing at minimum a `SKILL.md` file. + +## Required SKILL.md Format + +### Frontmatter (Required) + +```yaml +--- +name: webapp-testing +description: Toolkit for testing local web applications using Playwright. Use when asked to verify frontend functionality, debug UI behavior, capture browser screenshots, check for visual regressions, or view browser console logs. Supports Chrome, Firefox, and WebKit browsers. +license: Complete terms in LICENSE.txt +--- +``` + +| Field | Required | Constraints | +|-------|----------|-------------| +| `name` | Yes | Lowercase, hyphens for spaces, max 64 characters (e.g., `webapp-testing`) | +| `description` | Yes | Clear description of capabilities AND use cases, max 1024 characters | +| `license` | No | Reference to LICENSE.txt (e.g., `Complete terms in LICENSE.txt`) or SPDX identifier | + +### Description Best Practices + +**CRITICAL**: The `description` field is the PRIMARY mechanism for automatic skill discovery. Copilot reads ONLY the `name` and `description` to decide whether to load a skill. If your description is vague, the skill will never be activated. + +**What to include in description:** +1. **WHAT** the skill does (capabilities) +2. **WHEN** to use it (specific triggers, scenarios, file types, or user requests) +3. **Keywords** that users might mention in their prompts + +**Good description:** +```yaml +description: Toolkit for testing local web applications using Playwright. Use when asked to verify frontend functionality, debug UI behavior, capture browser screenshots, check for visual regressions, or view browser console logs. Supports Chrome, Firefox, and WebKit browsers. +``` + +**Poor description:** +```yaml +description: Web testing helpers +``` + +The poor description fails because: +- No specific triggers (when should Copilot load this?) +- No keywords (what user prompts would match?) +- No capabilities (what can it actually do?) + +### Body Content + +The body contains detailed instructions that Copilot loads AFTER the skill is activated. Recommended sections: + +| Section | Purpose | +|---------|---------| +| `# Title` | Brief overview of what this skill enables | +| `## When to Use This Skill` | List of scenarios (reinforces description triggers) | +| `## Prerequisites` | Required tools, dependencies, environment setup | +| `## Step-by-Step Workflows` | Numbered steps for common tasks | +| `## Troubleshooting` | Common issues and solutions table | +| `## References` | Links to bundled docs or external resources | + +## Bundling Resources + +Skills can include additional files that Copilot accesses on-demand: + +### Supported Resource Types + +| Folder | Purpose | Loaded into Context? | Example Files | +|--------|---------|---------------------|---------------| +| `scripts/` | Executable automation that performs specific operations | When executed | `helper.py`, `validate.sh`, `build.ts` | +| `references/` | Documentation Claude reads to inform decisions | Yes, when referenced | `api_reference.md`, `schema.md`, `workflow_guide.md` | +| `assets/` | **Static files used AS-IS** in output (not modified by Claude) | No | `logo.png`, `brand-template.pptx`, `custom-font.ttf` | +| `templates/` | **Starter code/scaffolds that Claude MODIFIES** and builds upon | Yes, when referenced | `viewer.html` (insert algorithm), `hello-world/` (extend) | + +### Directory Structure Example + +``` +.github/skills/my-skill/ +├── SKILL.md # Required: Main instructions +├── LICENSE.txt # Recommended: License terms (Apache 2.0 typical) +├── scripts/ # Optional: Executable automation +│ ├── helper.py # Python script +│ └── helper.ps1 # PowerShell script +├── references/ # Optional: Documentation loaded into context +│ ├── api_reference.md +│ ├── workflow-setup.md # Detailed workflow (>5 steps) +│ └── workflow-deployment.md +├── assets/ # Optional: Static files used AS-IS in output +│ ├── baseline.png # Reference image for comparison +│ └── report-template.html +└── templates/ # Optional: Starter code Claude modifies + ├── scaffold.py # Code scaffold Claude customizes + └── config.template # Config template Claude fills in +``` + +> **LICENSE.txt**: When creating a skill, download the Apache 2.0 license text from https://www.apache.org/licenses/LICENSE-2.0.txt and save as `LICENSE.txt`. Update the copyright year and owner in the appendix section. + +### Assets vs Templates: Key Distinction + +**Assets** are static resources **consumed unchanged** in the output: +- A `logo.png` that gets embedded into a generated document +- A `report-template.html` copied as output format +- A `custom-font.ttf` applied to text rendering + +**Templates** are starter code/scaffolds that **Claude actively modifies**: +- A `scaffold.py` where Claude inserts logic +- A `config.template` where Claude fills in values based on user requirements +- A `hello-world/` project directory that Claude extends with new features + +**Rule of thumb**: If Claude reads and builds upon the file content → `templates/`. If the file is used as-is in output → `assets/`. + +### Referencing Resources in SKILL.md + +Use relative paths to reference files within the skill directory: + +```markdown +## Available Scripts + +Run the [helper script](./scripts/helper.py) to automate common tasks. + +See [API reference](./references/api_reference.md) for detailed documentation. + +Use the [scaffold](./templates/scaffold.py) as a starting point. +``` + +## Progressive Loading Architecture + +Skills use three-level loading for efficiency: + +| Level | What Loads | When | +|-------|------------|------| +| 1. Discovery | `name` and `description` only | Always (lightweight metadata) | +| 2. Instructions | Full `SKILL.md` body | When request matches description | +| 3. Resources | Scripts, examples, docs | Only when Copilot references them | + +This means: +- Install many skills without consuming context +- Only relevant content loads per task +- Resources don't load until explicitly needed + +## Content Guidelines + +### Writing Style + +- Use imperative mood: "Run", "Create", "Configure" (not "You should run") +- Be specific and actionable +- Include exact commands with parameters +- Show expected outputs where helpful +- Keep sections focused and scannable + +### Script Requirements + +When including scripts, prefer cross-platform languages: + +| Language | Use Case | +|----------|----------| +| Python | Complex automation, data processing | +| pwsh | PowerShell Core scripting | +| Node.js | JavaScript-based tooling | +| Bash/Shell | Simple automation tasks | + +Best practices: +- Include help/usage documentation (`--help` flag) +- Handle errors gracefully with clear messages +- Avoid storing credentials or secrets +- Use relative paths where possible + +### When to Bundle Scripts + +Include scripts in your skill when: +- The same code would be rewritten repeatedly by the agent +- Deterministic reliability is critical (e.g., file manipulation, API calls) +- Complex logic benefits from being pre-tested rather than generated each time +- The operation has a self-contained purpose that can evolve independently +- Testability matters — scripts can be unit tested and validated +- Predictable behavior is preferred over dynamic generation + +Scripts enable evolution: even simple operations benefit from being scriptified when they may grow in complexity, need consistent behavior across invocations, or require future extensibility. + +### Security Considerations + +- Scripts rely on existing credential helpers (no credential storage) +- Include `--force` flags only for destructive operations +- Warn users before irreversible actions +- Document any network operations or external calls + +## Common Patterns + +### Parameter Table Pattern + +Document parameters clearly: + +```markdown +| Parameter | Required | Default | Description | +|-----------|----------|---------|-------------| +| `--input` | Yes | - | Input file or URL to process | +| `--action` | Yes | - | Action to perform | +| `--verbose` | No | `false` | Enable verbose output | +``` + +## Validation Checklist + +Before publishing a skill: + +- [ ] `SKILL.md` has valid frontmatter with `name` and `description` +- [ ] `name` is lowercase with hyphens, ≤64 characters +- [ ] `description` clearly states **WHAT** it does, **WHEN** to use it, and relevant **KEYWORDS** +- [ ] Body includes when to use, prerequisites, and step-by-step workflows +- [ ] SKILL.md body kept under 500 lines (split large content into `references/` folder) +- [ ] Large workflows (>5 steps) split into `references/` folder with clear links from SKILL.md +- [ ] Scripts include help documentation and error handling +- [ ] Relative paths used for all resource references +- [ ] No hardcoded credentials or secrets + +## Workflow Execution Pattern + +When executing multi-step workflows, create a TODO list where each step references the relevant documentation: + +```markdown +## TODO +- [ ] Step 1: Configure environment - see [workflow-setup.md](./references/workflow-setup.md#environment) +- [ ] Step 2: Build project - see [workflow-setup.md](./references/workflow-setup.md#build) +- [ ] Step 3: Deploy to staging - see [workflow-deployment.md](./references/workflow-deployment.md#staging) +- [ ] Step 4: Run validation - see [workflow-deployment.md](./references/workflow-deployment.md#validation) +- [ ] Step 5: Deploy to production - see [workflow-deployment.md](./references/workflow-deployment.md#production) +``` + +This ensures traceability and allows resuming workflows if interrupted. + +## Related Resources + +- [Agent Skills Specification](https://agentskills.io/) +- [VS Code Agent Skills Documentation](https://code.visualstudio.com/docs/copilot/customization/agent-skills) +- [Reference Skills Repository](https://github.com/anthropics/skills) +- [Awesome Copilot Skills](https://github.com/github/awesome-copilot/blob/main/docs/README.skills.md) From 97b9837c7455f7c85a3c299cdb75b4304d758fdb Mon Sep 17 00:00:00 2001 From: "Gordon Lam (SH)" Date: Fri, 9 Jan 2026 21:58:34 +0800 Subject: [PATCH 11/19] Address PR review: Replace Claude with AI agent, fix scriptified wording --- instructions/agent-skills.instructions.md | 24 +++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/instructions/agent-skills.instructions.md b/instructions/agent-skills.instructions.md index 4c136346..d0de7307 100644 --- a/instructions/agent-skills.instructions.md +++ b/instructions/agent-skills.instructions.md @@ -94,9 +94,9 @@ Skills can include additional files that Copilot accesses on-demand: | Folder | Purpose | Loaded into Context? | Example Files | |--------|---------|---------------------|---------------| | `scripts/` | Executable automation that performs specific operations | When executed | `helper.py`, `validate.sh`, `build.ts` | -| `references/` | Documentation Claude reads to inform decisions | Yes, when referenced | `api_reference.md`, `schema.md`, `workflow_guide.md` | -| `assets/` | **Static files used AS-IS** in output (not modified by Claude) | No | `logo.png`, `brand-template.pptx`, `custom-font.ttf` | -| `templates/` | **Starter code/scaffolds that Claude MODIFIES** and builds upon | Yes, when referenced | `viewer.html` (insert algorithm), `hello-world/` (extend) | +| `references/` | Documentation the AI agent reads to inform decisions | Yes, when referenced | `api_reference.md`, `schema.md`, `workflow_guide.md` | +| `assets/` | **Static files used AS-IS** in output (not modified by the AI agent) | No | `logo.png`, `brand-template.pptx`, `custom-font.ttf` | +| `templates/` | **Starter code/scaffolds that the AI agent MODIFIES** and builds upon | Yes, when referenced | `viewer.html` (insert algorithm), `hello-world/` (extend) | ### Directory Structure Example @@ -114,9 +114,9 @@ Skills can include additional files that Copilot accesses on-demand: ├── assets/ # Optional: Static files used AS-IS in output │ ├── baseline.png # Reference image for comparison │ └── report-template.html -└── templates/ # Optional: Starter code Claude modifies - ├── scaffold.py # Code scaffold Claude customizes - └── config.template # Config template Claude fills in +└── templates/ # Optional: Starter code the AI agent modifies + ├── scaffold.py # Code scaffold the AI agent customizes + └── config.template # Config template the AI agent fills in ``` > **LICENSE.txt**: When creating a skill, download the Apache 2.0 license text from https://www.apache.org/licenses/LICENSE-2.0.txt and save as `LICENSE.txt`. Update the copyright year and owner in the appendix section. @@ -128,12 +128,12 @@ Skills can include additional files that Copilot accesses on-demand: - A `report-template.html` copied as output format - A `custom-font.ttf` applied to text rendering -**Templates** are starter code/scaffolds that **Claude actively modifies**: -- A `scaffold.py` where Claude inserts logic -- A `config.template` where Claude fills in values based on user requirements -- A `hello-world/` project directory that Claude extends with new features +**Templates** are starter code/scaffolds that **the AI agent actively modifies**: +- A `scaffold.py` where the AI agent inserts logic +- A `config.template` where the AI agent fills in values based on user requirements +- A `hello-world/` project directory that the AI agent extends with new features -**Rule of thumb**: If Claude reads and builds upon the file content → `templates/`. If the file is used as-is in output → `assets/`. +**Rule of thumb**: If the AI agent reads and builds upon the file content → `templates/`. If the file is used as-is in output → `assets/`. ### Referencing Resources in SKILL.md @@ -201,7 +201,7 @@ Include scripts in your skill when: - Testability matters — scripts can be unit tested and validated - Predictable behavior is preferred over dynamic generation -Scripts enable evolution: even simple operations benefit from being scriptified when they may grow in complexity, need consistent behavior across invocations, or require future extensibility. +Scripts enable evolution: even simple operations benefit from being implemented as scripts when they may grow in complexity, need consistent behavior across invocations, or require future extensibility. ### Security Considerations From a5725eedb89480667905a1cd7facb1343582ddef Mon Sep 17 00:00:00 2001 From: Chunan Ye Date: Mon, 29 Dec 2025 11:08:39 -0800 Subject: [PATCH 12/19] Add appinsights-instrumentation skill --- .../appinsights-instrumentation/ASPNETCORE.md | 29 +++++++++++ skills/appinsights-instrumentation/AUTO.md | 13 +++++ skills/appinsights-instrumentation/NODEJS.md | 28 +++++++++++ skills/appinsights-instrumentation/PYTHON.md | 48 +++++++++++++++++++ skills/appinsights-instrumentation/SKILL.md | 48 +++++++++++++++++++ .../examples/appinsights.bicep | 30 ++++++++++++ .../scripts/appinsights.ps1 | 20 ++++++++ 7 files changed, 216 insertions(+) create mode 100644 skills/appinsights-instrumentation/ASPNETCORE.md create mode 100644 skills/appinsights-instrumentation/AUTO.md create mode 100644 skills/appinsights-instrumentation/NODEJS.md create mode 100644 skills/appinsights-instrumentation/PYTHON.md create mode 100644 skills/appinsights-instrumentation/SKILL.md create mode 100644 skills/appinsights-instrumentation/examples/appinsights.bicep create mode 100644 skills/appinsights-instrumentation/scripts/appinsights.ps1 diff --git a/skills/appinsights-instrumentation/ASPNETCORE.md b/skills/appinsights-instrumentation/ASPNETCORE.md new file mode 100644 index 00000000..6f0caa38 --- /dev/null +++ b/skills/appinsights-instrumentation/ASPNETCORE.md @@ -0,0 +1,29 @@ +## Modify code + +Make these necessary changes to the app. + +- Install client library +``` +dotnet add package Azure.Monitor.OpenTelemetry.AspNetCore +``` + +- Configure the app to use Azure Monitor +An AspNetCore app typically has a Program.cs file that "builds" the app. Find this file and apply these changes. + - Add `using Azure.Monitor.OpenTelemetry.AspNetCore;` at the top + - Before calling `builder.Build()`, add this line `builder.Services.AddOpenTelemetry().UseAzureMonitor();`. + +> Note: since we modified the code of the app, the app needs to be deployed to take effect. + +## Configure App Insights connection string + +The App Insights resource has a connection string. Add the connection string as an environment variable of the running app. You can use Azure CLI to query the connection string of the App Insights resource. See [scripts/appinsights.ps1](scripts/appinsights.ps1) for what Azure CLI command to execute for querying the connection string. + +After getting the connection string, set this environment variable with its value. + +``` +"APPLICATIONINSIGHTS_CONNECTION_STRING={your_application_insights_connection_string}" +``` + +If the app has IaC template such as Bicep or terraform files representing its cloud instance, this environment variable should be added to the IaC template to be applied in each deployment. Otherwise, use Azure CLI to manually apply the environment variable to the cloud instance of the app. See [scripts/appinsights.ps1](scripts/appinsights.ps1) for what Azure CLI command to execute for setting this environment variable. + +> Important: Don't modify appsettings.json. It was a deprecated way to configure App Insights. The environment variable is the new recommended way. diff --git a/skills/appinsights-instrumentation/AUTO.md b/skills/appinsights-instrumentation/AUTO.md new file mode 100644 index 00000000..81d9f9e4 --- /dev/null +++ b/skills/appinsights-instrumentation/AUTO.md @@ -0,0 +1,13 @@ +# Auto-instrument app + +Use Azure Portal to auto-instrument a webapp hosted in Azure App Service for App Insights without making any code changes. Only the following types of app can be auto-instrumented. See [supported environments and resource providers](https://learn.microsoft.com/azure/azure-monitor/app/codeless-overview#supported-environments-languages-and-resource-providers). + +- AspNetCore app hosted in Azure App Service +- Node.js app hosted in Azure App Service + +Construct a url to bring the user to the Application Insights blade in Azure Portal for the App Service App. +``` +https://portal.azure.com/#resource/subscriptions/{subscription_id}/resourceGroups/{resource_group_name}/providers/Microsoft.Web/sites/{app_service_name}/monitoringSettings +``` + +Use the context or ask the user to get the subscription_id, resource_group_name, and the app_service_name hosting the webapp. diff --git a/skills/appinsights-instrumentation/NODEJS.md b/skills/appinsights-instrumentation/NODEJS.md new file mode 100644 index 00000000..d67299dd --- /dev/null +++ b/skills/appinsights-instrumentation/NODEJS.md @@ -0,0 +1,28 @@ +## Modify code + +Make these necessary changes to the app. + +- Install client library +``` +npm install @azure/monitor-opentelemetry +``` + +- Configure the app to use Azure Monitor +An nodjs app typically has an entry file that is listed as the "main" property in package.json. Find this file and apply these changes in it. + - Require the client library at the top. `const { useAzureMonitor } = require("@azure/monitor-opentelemetry");` + - Call the setup method. `useAzureMonitor();` + +> Note: The setup method should be called as early as possible but it must be after the environment variables are configured since it needs the App Insights connection string from the environment variable. For example, if the app uses dotenv to load environment variables, the setup method should be called after it but before anything else. +> Note: since we modified the code of the app, it needs to be deployed to take effect. + +## Configure App Insights connection string + +The App Insights resource has a connection string. Add the connection string as an environment variable of the running app. You can use Azure CLI to query the connection string of the App Insights resource. See [scripts/appinsights.ps1] for what Azure CLI command to execute for querying the connection string. + +After getting the connection string, set this environment variable with its value. + +``` +"APPLICATIONINSIGHTS_CONNECTION_STRING={your_application_insights_connection_string}" +``` + +If the app has IaC template such as Bicep or terraform files representing its cloud instance, this environment variable should be added to the IaC template to be applied in each deployment. Otherwise, use Azure CLI to manually apply the environment variable to the cloud instance of the app. See what Azure CLI command to execute for setting this environment variable. diff --git a/skills/appinsights-instrumentation/PYTHON.md b/skills/appinsights-instrumentation/PYTHON.md new file mode 100644 index 00000000..98e6fced --- /dev/null +++ b/skills/appinsights-instrumentation/PYTHON.md @@ -0,0 +1,48 @@ +## Modify code + +Make these necessary changes to the app. + +- Install client library +``` +pip install azure-monitor-opentelemetry +``` + +- Configure the app to use Azure Monitor +Python applications send telemtry via the logger class in Python standard library. Create a module that configures and creates a logger that can send telemetry. + +```python +import logging +from azure.monitor.opentelemetry import configure_azure_monitor + +configure_azure_monitor( + logger_name="" +) +logger = logging.getLogger(" Note: since we modified the code of the app, it needs to be deployed to take effect. + +## Configure App Insights connection string + +The App Insights resource has a connection string. Add the connection string as an environment variable of the running app. You can use Azure CLI to query the connection string of the App Insights resource. See [scripts/appinsights.ps1] for what Azure CLI command to execute for querying the connection string. + +After getting the connection string, set this environment variable with its value. + +``` +"APPLICATIONINSIGHTS_CONNECTION_STRING={your_application_insights_connection_string}" +``` + +If the app has IaC template such as Bicep or terraform files representing its cloud instance, this environment variable should be added to the IaC template to be applied in each deployment. Otherwise, use Azure CLI to manually apply the environment variable to the cloud instance of the app. See what Azure CLI command to execute for setting this environment variable. + +## Send data + +Create a logger that is configured to send telemetry. +```python +logger = logging.getLogger("") +logger.setLevel(logging.INFO) +``` + +Then send telemetry events by calling its logging methods. +```python +logger.info("info log") +``` diff --git a/skills/appinsights-instrumentation/SKILL.md b/skills/appinsights-instrumentation/SKILL.md new file mode 100644 index 00000000..8273eebe --- /dev/null +++ b/skills/appinsights-instrumentation/SKILL.md @@ -0,0 +1,48 @@ +--- +name: appinsights-instrumentation +description: Instrument a webapp to send useful telemetry data to Azure App Insights +--- + +# AppInsights instrumentation + +This skill enables sending telemetry data of a webapp to Azure App Insights for better observability of the app's health. + +## When to use this skill + +Use this skill when the user wants to enable telemetry for their webapp. + +## Prerequisites + +The app in the workspace must be one of these kinds + +- An AspNetCore app hosted in Azure +- A NodeJS app hosted in Azure + +## Guidelines + +### Collect context information + +Find out the (programming language, application framework, hosting) tuple of the application the user is trying to add telemetry support in. This determines how the application can be instrumented. Read the source code to make an educated guess. Confirm with the user on anything you don't know. You must always ask the user where the application is hosted (e.g. on a personal computer, in an Azure App Service as code, in an Azure App Service as container, in an Azure Container App, etc.). + +### Prefer auto-instrument if possible + +If the app is a C# AspNetCore app hosted in Azure App Service, use [AUTO.md](AUTO.md) to help user auto-instrument the app. + +### Manually instrument + +Manually instrument the app by creating the AppInsights resource and update the app's code. + +#### Create AppInsights resource + +Use one of the following options that fits the environment. + +- Add AppInsights to existing Bicep template. See [examples/appinsights.bicep](examples/appinsights.bicep) for what to add. This is the best option if there are existing Bicep template files in the workspace. +- Use Azure CLI. See [scripts/create-appinsights.ps1](scripts/create-appinsights.ps1) for what Azure CLI command to execute to create the App Insights resource. + +No matter which option you choose, recommend the user to create the App Insights resource in a meaningful resource group that makes managing resources easier. A good candidate will be the same resource group that contains the resources for the hosted app in Azure. + +#### Modify application code + +- If the app is an AspNetCore app, see [ASPNETCORE.md](ASPNETCORE.md) for how to modify the C# code. +- If the app is a NodeJS app, see [NODEJS.md](NODEJS.md) for how to modify the JavaScript/TypeScript code. +- If the app is a Python app, see [PYTHON.md](PYTHON.md) for how to modify the Python code. diff --git a/skills/appinsights-instrumentation/examples/appinsights.bicep b/skills/appinsights-instrumentation/examples/appinsights.bicep new file mode 100644 index 00000000..192d988c --- /dev/null +++ b/skills/appinsights-instrumentation/examples/appinsights.bicep @@ -0,0 +1,30 @@ +@description('Location for all resources') +param location string = resourceGroup().location + +@description('Name for new Application Insights') +param name string + +// Create Log Analytics Workspace +resource logAnalyticsWorkspace 'Microsoft.OperationalInsights/workspaces@2022-10-01' = { + name: '${name}-workspace' + location: location + properties: { + sku: { + name: 'PerGB2018' + } + retentionInDays: 30 + } +} + +// Create Application Insights +resource applicationInsights 'Microsoft.Insights/components@2020-02-02' = { + name: name + location: location + kind: 'web' + properties: { + Application_Type: 'web' + WorkspaceResourceId: logAnalyticsWorkspace.id + } +} + +output connectionString string = applicationInsights.?properties.ConnectionString diff --git a/skills/appinsights-instrumentation/scripts/appinsights.ps1 b/skills/appinsights-instrumentation/scripts/appinsights.ps1 new file mode 100644 index 00000000..9b70c59f --- /dev/null +++ b/skills/appinsights-instrumentation/scripts/appinsights.ps1 @@ -0,0 +1,20 @@ +# Create App Insights resource (3 steps) +## Add the Application Insights extension +az extension add -n application-insights +## Create a Log Analytics workspace +az monitor log-analytics workspace create --resource-group $resourceGroupName --workspace-name $logAnalyticsWorkspaceName --location $azureRegionName +## Create the Application Insights resource +az monitor app-insights component create --app $applicationInsightsResourceName --location $azureRegionName --resource-group $resourceGroupName --workspace $logAnalyticsWorkspaceName + +# Query connection string of App Insights +az monitor app-insights component show --app $applicationInsightsResourceName --resource-group $resourceGroupName --query connectionString --output tsv + +# Set environment variable of App Service +az webapp config appsettings set --resource-group $resourceGroup --name $appName --settings $key='$value' + +# Set environment variable of Container App +# Or update an existing container app +az containerapp update -n $containerAppName -g $resourceGroupName --set-env-vars $key=$value + +# Set environment variable of Function App +az functionapp config appsettings set --name $functionName --resource-group $myResourceGroup --settings $key=$value From c8d5d3ab82e7fad4455cc6d25b86bc989f7f01a2 Mon Sep 17 00:00:00 2001 From: Chunan Ye Date: Mon, 29 Dec 2025 11:14:05 -0800 Subject: [PATCH 13/19] Add license --- .../appinsights-instrumentation/LICENSE.txt | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 skills/appinsights-instrumentation/LICENSE.txt diff --git a/skills/appinsights-instrumentation/LICENSE.txt b/skills/appinsights-instrumentation/LICENSE.txt new file mode 100644 index 00000000..8dfb11f8 --- /dev/null +++ b/skills/appinsights-instrumentation/LICENSE.txt @@ -0,0 +1,21 @@ +MIT License + +Copyright 2025 (c) Microsoft Corporation. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE From e12591994c0afb4918f2f99406d287da6c37fbe2 Mon Sep 17 00:00:00 2001 From: Chunan Ye Date: Mon, 29 Dec 2025 11:17:44 -0800 Subject: [PATCH 14/19] Update README.skills.md --- docs/README.skills.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/README.skills.md b/docs/README.skills.md index 53e9d296..57e30371 100644 --- a/docs/README.skills.md +++ b/docs/README.skills.md @@ -24,4 +24,5 @@ Skills differ from other primitives by supporting bundled assets (scripts, code | ---- | ----------- | -------------- | | [azure-role-selector](../skills/azure-role-selector/SKILL.md) | When user is asking for guidance for which role to assign to an identity given desired permissions, this agent helps them understand the role that will meet the requirements with least privilege access and how to apply that role. | `LICENSE.txt` | | [snowflake-semanticview](../skills/snowflake-semanticview/SKILL.md) | Create, alter, and validate Snowflake semantic views using Snowflake CLI (snow). Use when asked to build or troubleshoot semantic views/semantic layer definitions with CREATE/ALTER SEMANTIC VIEW, to validate semantic-view DDL against Snowflake via CLI, or to guide Snowflake CLI installation and connection setup. | None | +| [appinsights-instrumentation](../skills/appinsights-instrumentation/SKILL.md) | Instrument a webapp to send useful telemetry data to Azure App Insights | `ASPNETCORE.md`
`AUTO.md`
`LICENSE.txt`
`NODEJS.md`
`PYTHON.md`
`examples\appinsights.bicep`
`scripts\appinsights.ps1` | | [webapp-testing](../skills/webapp-testing/SKILL.md) | Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. | `test-helper.js` | From a5a365b19bb92fe5214b70775c2696f6ccfbbceb Mon Sep 17 00:00:00 2001 From: Chunan Ye Date: Mon, 29 Dec 2025 11:35:34 -0800 Subject: [PATCH 15/19] Address copilot feedback --- skills/appinsights-instrumentation/ASPNETCORE.md | 2 +- skills/appinsights-instrumentation/AUTO.md | 2 +- skills/appinsights-instrumentation/NODEJS.md | 2 +- skills/appinsights-instrumentation/PYTHON.md | 4 ++-- skills/appinsights-instrumentation/SKILL.md | 14 +++++++------- .../examples/appinsights.bicep | 2 +- .../scripts/appinsights.ps1 | 4 ++-- 7 files changed, 15 insertions(+), 15 deletions(-) diff --git a/skills/appinsights-instrumentation/ASPNETCORE.md b/skills/appinsights-instrumentation/ASPNETCORE.md index 6f0caa38..6a61bc46 100644 --- a/skills/appinsights-instrumentation/ASPNETCORE.md +++ b/skills/appinsights-instrumentation/ASPNETCORE.md @@ -8,7 +8,7 @@ dotnet add package Azure.Monitor.OpenTelemetry.AspNetCore ``` - Configure the app to use Azure Monitor -An AspNetCore app typically has a Program.cs file that "builds" the app. Find this file and apply these changes. +An ASP.NET Core app typically has a Program.cs file that "builds" the app. Find this file and apply these changes. - Add `using Azure.Monitor.OpenTelemetry.AspNetCore;` at the top - Before calling `builder.Build()`, add this line `builder.Services.AddOpenTelemetry().UseAzureMonitor();`. diff --git a/skills/appinsights-instrumentation/AUTO.md b/skills/appinsights-instrumentation/AUTO.md index 81d9f9e4..40890f42 100644 --- a/skills/appinsights-instrumentation/AUTO.md +++ b/skills/appinsights-instrumentation/AUTO.md @@ -2,7 +2,7 @@ Use Azure Portal to auto-instrument a webapp hosted in Azure App Service for App Insights without making any code changes. Only the following types of app can be auto-instrumented. See [supported environments and resource providers](https://learn.microsoft.com/azure/azure-monitor/app/codeless-overview#supported-environments-languages-and-resource-providers). -- AspNetCore app hosted in Azure App Service +- ASP.NET Core app hosted in Azure App Service - Node.js app hosted in Azure App Service Construct a url to bring the user to the Application Insights blade in Azure Portal for the App Service App. diff --git a/skills/appinsights-instrumentation/NODEJS.md b/skills/appinsights-instrumentation/NODEJS.md index d67299dd..f67690fb 100644 --- a/skills/appinsights-instrumentation/NODEJS.md +++ b/skills/appinsights-instrumentation/NODEJS.md @@ -8,7 +8,7 @@ npm install @azure/monitor-opentelemetry ``` - Configure the app to use Azure Monitor -An nodjs app typically has an entry file that is listed as the "main" property in package.json. Find this file and apply these changes in it. +A Node.js app typically has an entry file that is listed as the "main" property in package.json. Find this file and apply these changes in it. - Require the client library at the top. `const { useAzureMonitor } = require("@azure/monitor-opentelemetry");` - Call the setup method. `useAzureMonitor();` diff --git a/skills/appinsights-instrumentation/PYTHON.md b/skills/appinsights-instrumentation/PYTHON.md index 98e6fced..3bb44c4b 100644 --- a/skills/appinsights-instrumentation/PYTHON.md +++ b/skills/appinsights-instrumentation/PYTHON.md @@ -8,7 +8,7 @@ pip install azure-monitor-opentelemetry ``` - Configure the app to use Azure Monitor -Python applications send telemtry via the logger class in Python standard library. Create a module that configures and creates a logger that can send telemetry. +Python applications send telemetry via the logger class in Python standard library. Create a module that configures and creates a logger that can send telemetry. ```python import logging @@ -17,7 +17,7 @@ from azure.monitor.opentelemetry import configure_azure_monitor configure_azure_monitor( logger_name="" ) -logger = logging.getLogger("") ``` > Note: since we modified the code of the app, it needs to be deployed to take effect. diff --git a/skills/appinsights-instrumentation/SKILL.md b/skills/appinsights-instrumentation/SKILL.md index 8273eebe..8db62114 100644 --- a/skills/appinsights-instrumentation/SKILL.md +++ b/skills/appinsights-instrumentation/SKILL.md @@ -1,6 +1,6 @@ --- name: appinsights-instrumentation -description: Instrument a webapp to send useful telemetry data to Azure App Insights +description: 'Instrument a webapp to send useful telemetry data to Azure App Insights' --- # AppInsights instrumentation @@ -15,8 +15,8 @@ Use this skill when the user wants to enable telemetry for their webapp. The app in the workspace must be one of these kinds -- An AspNetCore app hosted in Azure -- A NodeJS app hosted in Azure +- An ASP.NET Core app hosted in Azure +- A Node.js app hosted in Azure ## Guidelines @@ -26,7 +26,7 @@ Find out the (programming language, application framework, hosting) tuple of the ### Prefer auto-instrument if possible -If the app is a C# AspNetCore app hosted in Azure App Service, use [AUTO.md](AUTO.md) to help user auto-instrument the app. +If the app is a C# ASP.NET Core app hosted in Azure App Service, use [AUTO.md](AUTO.md) to help user auto-instrument the app. ### Manually instrument @@ -37,12 +37,12 @@ Manually instrument the app by creating the AppInsights resource and update the Use one of the following options that fits the environment. - Add AppInsights to existing Bicep template. See [examples/appinsights.bicep](examples/appinsights.bicep) for what to add. This is the best option if there are existing Bicep template files in the workspace. -- Use Azure CLI. See [scripts/create-appinsights.ps1](scripts/create-appinsights.ps1) for what Azure CLI command to execute to create the App Insights resource. +- Use Azure CLI. See [scripts/appinsights.ps1](scripts/appinsights.ps1) for what Azure CLI command to execute to create the App Insights resource. No matter which option you choose, recommend the user to create the App Insights resource in a meaningful resource group that makes managing resources easier. A good candidate will be the same resource group that contains the resources for the hosted app in Azure. #### Modify application code -- If the app is an AspNetCore app, see [ASPNETCORE.md](ASPNETCORE.md) for how to modify the C# code. -- If the app is a NodeJS app, see [NODEJS.md](NODEJS.md) for how to modify the JavaScript/TypeScript code. +- If the app is an ASP.NET Core app, see [ASPNETCORE.md](ASPNETCORE.md) for how to modify the C# code. +- If the app is a Node.js app, see [NODEJS.md](NODEJS.md) for how to modify the JavaScript/TypeScript code. - If the app is a Python app, see [PYTHON.md](PYTHON.md) for how to modify the Python code. diff --git a/skills/appinsights-instrumentation/examples/appinsights.bicep b/skills/appinsights-instrumentation/examples/appinsights.bicep index 192d988c..e60ea800 100644 --- a/skills/appinsights-instrumentation/examples/appinsights.bicep +++ b/skills/appinsights-instrumentation/examples/appinsights.bicep @@ -27,4 +27,4 @@ resource applicationInsights 'Microsoft.Insights/components@2020-02-02' = { } } -output connectionString string = applicationInsights.?properties.ConnectionString +output connectionString string = applicationInsights.properties.ConnectionString diff --git a/skills/appinsights-instrumentation/scripts/appinsights.ps1 b/skills/appinsights-instrumentation/scripts/appinsights.ps1 index 9b70c59f..e014cf0c 100644 --- a/skills/appinsights-instrumentation/scripts/appinsights.ps1 +++ b/skills/appinsights-instrumentation/scripts/appinsights.ps1 @@ -10,11 +10,11 @@ az monitor app-insights component create --app $applicationInsightsResourceName az monitor app-insights component show --app $applicationInsightsResourceName --resource-group $resourceGroupName --query connectionString --output tsv # Set environment variable of App Service -az webapp config appsettings set --resource-group $resourceGroup --name $appName --settings $key='$value' +az webapp config appsettings set --resource-group $resourceGroupName --name $appName --settings $key=$value # Set environment variable of Container App # Or update an existing container app az containerapp update -n $containerAppName -g $resourceGroupName --set-env-vars $key=$value # Set environment variable of Function App -az functionapp config appsettings set --name $functionName --resource-group $myResourceGroup --settings $key=$value +az functionapp config appsettings set --name $functionName --resource-group $ResourceGroupName --settings $key=$value From 284d97fa194f5224792b0673c512b0667b83a3c6 Mon Sep 17 00:00:00 2001 From: Chunan Ye Date: Mon, 29 Dec 2025 11:41:22 -0800 Subject: [PATCH 16/19] Use forward slash in file path --- docs/README.skills.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.skills.md b/docs/README.skills.md index 57e30371..001debc1 100644 --- a/docs/README.skills.md +++ b/docs/README.skills.md @@ -24,5 +24,5 @@ Skills differ from other primitives by supporting bundled assets (scripts, code | ---- | ----------- | -------------- | | [azure-role-selector](../skills/azure-role-selector/SKILL.md) | When user is asking for guidance for which role to assign to an identity given desired permissions, this agent helps them understand the role that will meet the requirements with least privilege access and how to apply that role. | `LICENSE.txt` | | [snowflake-semanticview](../skills/snowflake-semanticview/SKILL.md) | Create, alter, and validate Snowflake semantic views using Snowflake CLI (snow). Use when asked to build or troubleshoot semantic views/semantic layer definitions with CREATE/ALTER SEMANTIC VIEW, to validate semantic-view DDL against Snowflake via CLI, or to guide Snowflake CLI installation and connection setup. | None | -| [appinsights-instrumentation](../skills/appinsights-instrumentation/SKILL.md) | Instrument a webapp to send useful telemetry data to Azure App Insights | `ASPNETCORE.md`
`AUTO.md`
`LICENSE.txt`
`NODEJS.md`
`PYTHON.md`
`examples\appinsights.bicep`
`scripts\appinsights.ps1` | +| [appinsights-instrumentation](../skills/appinsights-instrumentation/SKILL.md) | Instrument a webapp to send useful telemetry data to Azure App Insights | `ASPNETCORE.md`
`AUTO.md`
`LICENSE.txt`
`NODEJS.md`
`PYTHON.md`
`examples/appinsights.bicep`
`scripts/appinsights.ps1` | | [webapp-testing](../skills/webapp-testing/SKILL.md) | Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. | `test-helper.js` | From 6641fb8c7395701195d0a6dbb34dbc729f8ae7bc Mon Sep 17 00:00:00 2001 From: Chunan Ye Date: Fri, 9 Jan 2026 11:25:32 -0800 Subject: [PATCH 17/19] Move language specific instructions to sub references folder --- skills/appinsights-instrumentation/SKILL.md | 8 ++++---- .../{ => references}/ASPNETCORE.md | 0 .../appinsights-instrumentation/{ => references}/AUTO.md | 0 .../{ => references}/NODEJS.md | 0 .../{ => references}/PYTHON.md | 0 5 files changed, 4 insertions(+), 4 deletions(-) rename skills/appinsights-instrumentation/{ => references}/ASPNETCORE.md (100%) rename skills/appinsights-instrumentation/{ => references}/AUTO.md (100%) rename skills/appinsights-instrumentation/{ => references}/NODEJS.md (100%) rename skills/appinsights-instrumentation/{ => references}/PYTHON.md (100%) diff --git a/skills/appinsights-instrumentation/SKILL.md b/skills/appinsights-instrumentation/SKILL.md index 8db62114..81056fdc 100644 --- a/skills/appinsights-instrumentation/SKILL.md +++ b/skills/appinsights-instrumentation/SKILL.md @@ -26,7 +26,7 @@ Find out the (programming language, application framework, hosting) tuple of the ### Prefer auto-instrument if possible -If the app is a C# ASP.NET Core app hosted in Azure App Service, use [AUTO.md](AUTO.md) to help user auto-instrument the app. +If the app is a C# ASP.NET Core app hosted in Azure App Service, use [AUTO guide](references/AUTO.md) to help user auto-instrument the app. ### Manually instrument @@ -43,6 +43,6 @@ No matter which option you choose, recommend the user to create the App Insights #### Modify application code -- If the app is an ASP.NET Core app, see [ASPNETCORE.md](ASPNETCORE.md) for how to modify the C# code. -- If the app is a Node.js app, see [NODEJS.md](NODEJS.md) for how to modify the JavaScript/TypeScript code. -- If the app is a Python app, see [PYTHON.md](PYTHON.md) for how to modify the Python code. +- If the app is an ASP.NET Core app, see [ASPNETCORE guide](references/ASPNETCORE.md) for how to modify the C# code. +- If the app is a Node.js app, see [NODEJS guide](references/NODEJS.md) for how to modify the JavaScript/TypeScript code. +- If the app is a Python app, see [PYTHON guide](references/PYTHON.md) for how to modify the Python code. diff --git a/skills/appinsights-instrumentation/ASPNETCORE.md b/skills/appinsights-instrumentation/references/ASPNETCORE.md similarity index 100% rename from skills/appinsights-instrumentation/ASPNETCORE.md rename to skills/appinsights-instrumentation/references/ASPNETCORE.md diff --git a/skills/appinsights-instrumentation/AUTO.md b/skills/appinsights-instrumentation/references/AUTO.md similarity index 100% rename from skills/appinsights-instrumentation/AUTO.md rename to skills/appinsights-instrumentation/references/AUTO.md diff --git a/skills/appinsights-instrumentation/NODEJS.md b/skills/appinsights-instrumentation/references/NODEJS.md similarity index 100% rename from skills/appinsights-instrumentation/NODEJS.md rename to skills/appinsights-instrumentation/references/NODEJS.md diff --git a/skills/appinsights-instrumentation/PYTHON.md b/skills/appinsights-instrumentation/references/PYTHON.md similarity index 100% rename from skills/appinsights-instrumentation/PYTHON.md rename to skills/appinsights-instrumentation/references/PYTHON.md From 33d4dbb8120170eebdec714e229689f4360e6726 Mon Sep 17 00:00:00 2001 From: Chunan Ye Date: Fri, 9 Jan 2026 11:27:15 -0800 Subject: [PATCH 18/19] Update README.skills.md --- docs/README.skills.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.skills.md b/docs/README.skills.md index 001debc1..421d14ff 100644 --- a/docs/README.skills.md +++ b/docs/README.skills.md @@ -22,7 +22,7 @@ Skills differ from other primitives by supporting bundled assets (scripts, code | Name | Description | Bundled Assets | | ---- | ----------- | -------------- | +| [appinsights-instrumentation](../skills/appinsights-instrumentation/SKILL.md) | Instrument a webapp to send useful telemetry data to Azure App Insights | `LICENSE.txt`
`examples/appinsights.bicep`
`references/ASPNETCORE.md`
`references/AUTO.md`
`references/NODEJS.md`
`references/PYTHON.md`
`scripts/appinsights.ps1` | | [azure-role-selector](../skills/azure-role-selector/SKILL.md) | When user is asking for guidance for which role to assign to an identity given desired permissions, this agent helps them understand the role that will meet the requirements with least privilege access and how to apply that role. | `LICENSE.txt` | | [snowflake-semanticview](../skills/snowflake-semanticview/SKILL.md) | Create, alter, and validate Snowflake semantic views using Snowflake CLI (snow). Use when asked to build or troubleshoot semantic views/semantic layer definitions with CREATE/ALTER SEMANTIC VIEW, to validate semantic-view DDL against Snowflake via CLI, or to guide Snowflake CLI installation and connection setup. | None | -| [appinsights-instrumentation](../skills/appinsights-instrumentation/SKILL.md) | Instrument a webapp to send useful telemetry data to Azure App Insights | `ASPNETCORE.md`
`AUTO.md`
`LICENSE.txt`
`NODEJS.md`
`PYTHON.md`
`examples/appinsights.bicep`
`scripts/appinsights.ps1` | | [webapp-testing](../skills/webapp-testing/SKILL.md) | Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. | `test-helper.js` | From 151f3120dfcb3f99e9bae0c497783b5077ee05ab Mon Sep 17 00:00:00 2001 From: Peter Karda Date: Fri, 9 Jan 2026 21:44:38 +0100 Subject: [PATCH 19/19] Update structured-autonomy-plan.prompt.md Removing extra closing bracket in the model name since it causes error in VS Code --- prompts/structured-autonomy-plan.prompt.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/prompts/structured-autonomy-plan.prompt.md b/prompts/structured-autonomy-plan.prompt.md index 41677858..9f41535f 100644 --- a/prompts/structured-autonomy-plan.prompt.md +++ b/prompts/structured-autonomy-plan.prompt.md @@ -1,7 +1,7 @@ --- name: sa-plan description: Structured Autonomy Planning Prompt -model: Claude Sonnet 4.5 (copilot)] +model: Claude Sonnet 4.5 (copilot) agent: agent ---