Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .github/plugin/marketplace.json
Original file line number Diff line number Diff line change
Expand Up @@ -561,6 +561,12 @@
"description": "Comprehensive collection for writing tests, test automation, and test-driven development including unit tests, integration tests, and end-to-end testing strategies.",
"version": "1.0.0"
},
{
"name": "tinify-ai",
"source": "tinify-ai",
"description": "AI-powered image optimization β€” compress, resize, upscale, convert formats, and generate SEO metadata. Includes skills for project-wide image auditing, SEO alt text generation, and Core Web Vitals image performance.",
"version": "1.0.0"
},
{
"name": "typescript-mcp-development",
"source": "typescript-mcp-development",
Expand Down
1 change: 1 addition & 0 deletions docs/README.plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-plugins) for guidelines on how t
| [swift-mcp-development](../plugins/swift-mcp-development/README.md) | Comprehensive collection for building Model Context Protocol servers in Swift using the official MCP Swift SDK with modern concurrency features. | 2 items | swift, mcp, model-context-protocol, server-development, sdk, ios, macos, concurrency, actor, async-await |
| [technical-spike](../plugins/technical-spike/README.md) | Tools for creation, management and research of technical spikes to reduce unknowns and assumptions before proceeding to specification and implementation of solutions. | 2 items | technical-spike, assumption-testing, validation, research |
| [testing-automation](../plugins/testing-automation/README.md) | Comprehensive collection for writing tests, test automation, and test-driven development including unit tests, integration tests, and end-to-end testing strategies. | 9 items | testing, tdd, automation, unit-tests, integration, playwright, jest, nunit |
| [tinify-ai](../plugins/tinify-ai/README.md) | AI-powered image optimization β€” compress, resize, upscale, convert formats, and generate SEO metadata. Includes skills for project-wide image auditing, SEO alt text generation, and Core Web Vitals image performance. | 3 items | image, optimization, compression, seo, web-performance, webp, avif, core-web-vitals, lcp |
| [typescript-mcp-development](../plugins/typescript-mcp-development/README.md) | Complete toolkit for building Model Context Protocol (MCP) servers in TypeScript/Node.js using the official SDK. Includes instructions for best practices, a prompt for generating servers, and an expert chat mode for guidance. | 2 items | typescript, mcp, model-context-protocol, nodejs, server-development |
| [typespec-m365-copilot](../plugins/typespec-m365-copilot/README.md) | Comprehensive collection of prompts, instructions, and resources for building declarative agents and API plugins using TypeSpec for Microsoft 365 Copilot extensibility. | 3 items | typespec, m365-copilot, declarative-agents, api-plugins, agent-development, microsoft-365 |
| [winui3-development](../plugins/winui3-development/README.md) | WinUI 3 and Windows App SDK development agent, instructions, and migration guide. Prevents common UWP API misuse and guides correct WinUI 3 patterns for desktop Windows apps. | 2 items | winui, winui3, windows-app-sdk, xaml, desktop, windows |
3 changes: 3 additions & 0 deletions docs/README.skills.md
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
| [gtm-product-led-growth](../skills/gtm-product-led-growth/SKILL.md) | Build self-serve acquisition and expansion motions. Use when deciding PLG vs sales-led, optimizing activation, driving freemium conversion, building growth equations, or recognizing when product complexity demands human touch. Includes the parallel test where sales-led won 10x on revenue. | None |
| [gtm-technical-product-pricing](../skills/gtm-technical-product-pricing/SKILL.md) | Pricing strategy for technical products. Use when choosing usage-based vs seat-based, designing freemium thresholds, structuring enterprise pricing conversations, deciding when to raise prices, or using price as a positioning signal. | None |
| [image-manipulation-image-magick](../skills/image-manipulation-image-magick/SKILL.md) | Process and manipulate images using ImageMagick. Supports resizing, format conversion, batch processing, and retrieving image metadata. Use when working with images, creating thumbnails, resizing wallpapers, or performing batch image operations. | None |
| [image-seo](../skills/image-seo/SKILL.md) | Use when the user wants to add alt text, audit image SEO, improve image accessibility, or generate image metadata. Scans code for images missing alt attributes and generates SEO-optimized alt text, keywords, and filenames. | None |
| [import-infrastructure-as-code](../skills/import-infrastructure-as-code/SKILL.md) | Import existing Azure resources into Terraform using Azure CLI discovery and Azure Verified Modules (AVM). Use when asked to reverse-engineer live Azure infrastructure, generate Infrastructure as Code from existing subscriptions/resource groups/resource IDs, map dependencies, derive exact import addresses from downloaded module source, prevent configuration drift, and produce AVM-based Terraform files ready for validation and planning across any Azure resource type. | None |
| [integrate-context-matic](../skills/integrate-context-matic/SKILL.md) | Discovers and integrates third-party APIs using the context-matic MCP server. Uses `fetch_api` to find available API SDKs, `ask` for integration guidance, `model_search` and `endpoint_search` for SDK details. Use when the user asks to integrate a third-party API, add an API client, implement features with an external API, or work with any third-party API or SDK. | None |
| [issue-fields-migration](../skills/issue-fields-migration/SKILL.md) | Bulk-migrate metadata to GitHub issue fields from two sources: repo labels (e.g. priority labels to a Priority field) and Project V2 fields. Use when users say "migrate my labels to issue fields", "migrate project fields to issue fields", "convert labels to issue fields", "copy project field values to issue fields", or ask about adopting issue fields. Issue fields are org-level typed metadata (single select, text, number, date) that replace label-based workarounds with structured, searchable, cross-repo fields. | `references/issue-fields-api.md`<br />`references/labels-api.md`<br />`references/projects-api.md` |
Expand Down Expand Up @@ -222,6 +223,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
| [onboard-context-matic](../skills/onboard-context-matic/SKILL.md) | Interactive onboarding tour for the context-matic MCP server. Walks the user through what the server does, shows all available APIs, lets them pick one to explore, explains it in their project language, demonstrates model_search and endpoint_search live, and ends with a menu of things the user can ask the agent to do. USE FOR: first-time setup; "what can this MCP do?"; "show me the available APIs"; "onboard me"; "how do I use the context-matic server"; "give me a tour". DO NOT USE FOR: actually integrating an API end-to-end (use integrate-context-matic instead). | None |
| [oo-component-documentation](../skills/oo-component-documentation/SKILL.md) | Create or update standardized object-oriented component documentation using a shared template plus mode-specific guidance for new and existing docs. | `assets/documentation-template.md`<br />`references/create-mode.md`<br />`references/update-mode.md` |
| [openapi-to-application-code](../skills/openapi-to-application-code/SKILL.md) | Generate a complete, production-ready application from an OpenAPI specification | None |
| [optimize-images](../skills/optimize-images/SKILL.md) | Use when the user wants to optimize, compress, or prepare images for production. Handles batch optimization of project images with smart format selection and size reduction. | None |
| [pdftk-server](../skills/pdftk-server/SKILL.md) | Skill for using the command-line tool pdftk (PDFtk Server) for working with PDF files. Use when asked to merge PDFs, split PDFs, rotate pages, encrypt or decrypt PDFs, fill PDF forms, apply watermarks, stamp overlays, extract metadata, burst documents into pages, repair corrupted PDFs, attach or extract files, or perform any PDF manipulation from the command line. | `references/download.md`<br />`references/pdftk-cli-examples.md`<br />`references/pdftk-man-page.md`<br />`references/pdftk-server-license.md`<br />`references/third-party-materials.md` |
| [penpot-uiux-design](../skills/penpot-uiux-design/SKILL.md) | Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library". | `references/accessibility.md`<br />`references/component-patterns.md`<br />`references/platform-guidelines.md`<br />`references/setup-troubleshooting.md` |
| [phoenix-cli](../skills/phoenix-cli/SKILL.md) | Debug LLM applications using the Phoenix CLI. Fetch traces, analyze errors, review experiments, inspect datasets, and query the GraphQL API. Use when debugging AI/LLM applications, analyzing trace data, working with Phoenix observability, or investigating LLM performance issues. | None |
Expand Down Expand Up @@ -327,6 +329,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
| [vscode-ext-localization](../skills/vscode-ext-localization/SKILL.md) | Guidelines for proper localization of VS Code extensions, following VS Code extension development guidelines, libraries and good practices | None |
| [web-coder](../skills/web-coder/SKILL.md) | Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development. | `references/accessibility.md`<br />`references/architecture-patterns.md`<br />`references/browsers-engines.md`<br />`references/css-styling.md`<br />`references/data-formats-encoding.md`<br />`references/development-tools.md`<br />`references/glossary.md`<br />`references/html-markup.md`<br />`references/http-networking.md`<br />`references/javascript-programming.md`<br />`references/media-graphics.md`<br />`references/performance-optimization.md`<br />`references/security-authentication.md`<br />`references/servers-infrastructure.md`<br />`references/web-apis-dom.md`<br />`references/web-protocols-standards.md` |
| [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`<br />`references/visual-checklist.md` |
| [web-performance-images](../skills/web-performance-images/SKILL.md) | Use when the user wants to improve image loading performance, fix Core Web Vitals issues (LCP, CLS), audit image lazy loading, or optimize images for page speed. Analyzes and fixes image-related performance issues. | 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. | `assets/test-helper.js` |
| [what-context-needed](../skills/what-context-needed/SKILL.md) | Ask Copilot what files it needs to see before answering a question | None |
| [winapp-cli](../skills/winapp-cli/SKILL.md) | Windows App Development CLI (winapp) for building, packaging, and deploying Windows applications. Use when asked to initialize Windows app projects, create MSIX packages, generate AppxManifest.xml, manage development certificates, add package identity for debugging, sign packages, publish to the Microsoft Store, create external catalogs, or access Windows SDK build tools. Supports .NET (csproj), C++, Electron, Rust, Tauri, and cross-platform frameworks targeting Windows. | None |
Expand Down
28 changes: 28 additions & 0 deletions plugins/tinify-ai/.github/plugin/plugin.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "tinify-ai",
"description": "AI-powered image optimization β€” compress, resize, upscale, convert formats, and generate SEO metadata. Includes skills for project-wide image auditing, SEO alt text generation, and Core Web Vitals image performance.",
"version": "1.0.0",
"author": {
"name": "tinify.ai",
"url": "https://tinify.ai"
},
"homepage": "https://tinify.ai",
"repository": "https://github.com/onepunchtechnology/tinify-ai-plugin",
"license": "MIT",
"keywords": [
"image",
"optimization",
"compression",
"seo",
"web-performance",
"webp",
"avif",
"core-web-vitals",
"lcp"
],
"skills": [
"./skills/optimize-images/",
"./skills/image-seo/",
"./skills/web-performance-images/"
]
}
50 changes: 50 additions & 0 deletions plugins/tinify-ai/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# tinify-ai Plugin

AI-powered image optimization β€” compress, resize, upscale, convert formats, and generate SEO metadata. Includes skills for project-wide image auditing, SEO alt text generation, and Core Web Vitals image performance.

Powered by [tinify.ai](https://tinify.ai) β€” requires a free account for credits.

## Installation

```bash
copilot plugin install tinify-ai@awesome-copilot
```

## What's Included

### Skills

| Skill | Description |
|-------|-------------|
| `optimize-images` | Batch-optimize all images in a project β€” compress, convert to WebP/AVIF, and report savings |
| `image-seo` | Scan source code for images missing alt text and generate AI-powered SEO alt text and keywords |
| `web-performance-images` | Audit and fix image-related Core Web Vitals issues (LCP, CLS) β€” lazy loading, dimensions, preloading |

## Usage

After installing the plugin, use skills via slash commands in a Copilot session:

```
/tinify-ai:optimize-images
/tinify-ai:image-seo
/tinify-ai:web-performance-images
```

## Requirements

- A [tinify.ai](https://tinify.ai) account (free tier available)
- The tinify-ai MCP server is included β€” install it with:

```bash
copilot plugin install tinify-ai@awesome-copilot
```

> Note: Image optimization credits are consumed per image processed. New accounts receive free credits on sign-up.
## Source

This plugin is maintained at [onepunchtechnology/tinify-ai-plugin](https://github.com/onepunchtechnology/tinify-ai-plugin) and included in [Awesome Copilot](https://github.com/github/awesome-copilot).

## License

MIT
81 changes: 81 additions & 0 deletions skills/image-seo/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
---
name: image-seo
description: "Use when the user wants to add alt text, audit image SEO, improve image accessibility, or generate image metadata. Scans code for images missing alt attributes and generates SEO-optimized alt text, keywords, and filenames."
---

# Image SEO

Audit and fix image SEO issues in a project. Scans source code for `<img>` tags missing alt text, generates AI-powered alt text and keywords using the tinify-ai MCP server, and applies fixes to the codebase.

## Pre-flight

1. Call the `status` tool to check available credits (each image costs 4 credits: 3 base + 1 for SEO tag generation)
2. Warn if credits are insufficient for the estimated number of images

## Scan

Find all images in source code that need SEO attention:

1. Use Grep to find `<img` tags across the project:
- HTML: `*.html`
- React/Next.js: `*.tsx`, `*.jsx`
- Vue: `*.vue`
- Svelte: `*.svelte`
- Astro: `*.astro`

2. From those matches, identify images with issues:
- Missing `alt` attribute entirely
- Empty `alt=""` on non-decorative images
- Generic alt text like `alt="image"`, `alt="photo"`, `alt="untitled"`
- Non-descriptive filenames like `IMG_4532.jpg`, `Screenshot 2024-01-15.png`

3. Present the findings to the user before making changes:
- "Found X images missing alt text in Y files. Proceed?"

## Generate Metadata

For each image needing alt text, call `optimize_image` with SEO enabled:

```
optimize_image({
input: "/absolute/path/to/the/image.jpg",
output_seo_tag_gen: true
})
```

The tool returns:
- `seo_alt_text` β€” Descriptive alt text for the image
- `seo_keywords` β€” Array of relevant keywords
- `seo_filename` β€” SEO-friendly filename slug (without extension)

## Apply Fixes

1. Use Edit to insert the generated `seo_alt_text` into the source code:
- `<img src="hero.jpg">` β†’ `<img src="hero.jpg" alt="Sunset over California beach with golden waves">`
- `<img src="hero.jpg" alt="">` β†’ `<img src="hero.jpg" alt="Sunset over California beach with golden waves">`

2. If the filename is non-descriptive (e.g., `IMG_4532.jpg`), suggest renaming:
- Show: `IMG_4532.jpg` β†’ `sunset-california-beach.jpg` (from `seo_filename`)
- Only suggest β€” do not auto-rename without user approval (renaming may break other references)

## Error Handling

- If `optimize_image` fails with insufficient credits: stop, report progress, suggest `upgrade`
- If an image file cannot be found at the path referenced in code: skip and note in report

## Report

Present a summary of changes:

| File | Image | Alt Text Added | Filename Suggestion |
|------|-------|----------------|---------------------|
| `src/pages/index.tsx` | `hero.jpg` | "Sunset over California beach..." | β€” |
| `src/pages/about.tsx` | `IMG_4532.jpg` | "Team meeting in modern office" | `team-meeting-office.jpg` |

## Scope

This skill handles image alt text and metadata only. It does NOT handle:
- Page title tags or meta descriptions
- Structured data / JSON-LD
- Sitemap generation
- Other non-image SEO concerns
Loading
Loading