Compare commits
96 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
37684d0fed | ||
|
|
601649074d | ||
|
|
a648e1adb7 | ||
|
|
2a88369687 | ||
|
|
1a60d58ba0 | ||
|
|
d1a14dfab9 | ||
|
|
621dbe008e | ||
|
|
eb493121d3 | ||
|
|
801c8fa475 | ||
|
|
cf00d4fcca | ||
|
|
6070da6a63 | ||
|
|
fd9b119040 | ||
|
|
ca2551fe2b | ||
|
|
0da99cd2c9 | ||
|
|
ce852bed63 | ||
|
|
53671205f0 | ||
|
|
ac20cc63b6 | ||
|
|
e1c84cd8f4 | ||
|
|
73e51321ca | ||
|
|
eca46228ed | ||
|
|
aa164fac16 | ||
|
|
6247fcefab | ||
|
|
b46e45fb4d | ||
|
|
8839ed1b2d | ||
|
|
5ba1fe9a97 | ||
|
|
85f26eb186 | ||
|
|
0fc520c7fe | ||
|
|
7f5ca000bd | ||
|
|
679eb72d23 | ||
|
|
2b3277c066 | ||
|
|
850c940dfd | ||
|
|
1bc750e4a1 | ||
|
|
84a41851e0 | ||
|
|
6d94cf984c | ||
|
|
129949ddf0 | ||
|
|
f893807051 | ||
|
|
9040899e65 | ||
|
|
b29fa15bf3 | ||
|
|
b05245e68b | ||
|
|
49e01dd216 | ||
|
|
460a8432a5 | ||
|
|
878b876475 | ||
|
|
189c0824d2 | ||
|
|
67e7e998f8 | ||
|
|
4432e60445 | ||
|
|
b71eff117b | ||
|
|
991de2de2f | ||
|
|
73ceec4e7d | ||
|
|
263c507684 | ||
|
|
afc06d1af6 | ||
|
|
988f528708 | ||
|
|
3f7dce00b8 | ||
|
|
3d6c75d37f | ||
|
|
2070a91ef7 | ||
|
|
17505fe683 | ||
|
|
f9f4375e4e | ||
|
|
637c20f3c3 | ||
|
|
72f5b9500d | ||
|
|
bedfbb5c1c | ||
|
|
318199e9b3 | ||
|
|
cafa9d5c52 | ||
|
|
963e4660c8 | ||
|
|
49f1bf1335 | ||
|
|
d6eefe200d | ||
|
|
41717e78db | ||
|
|
2a016df011 | ||
|
|
386b3c757e | ||
|
|
3d79501eba | ||
|
|
7e24ed2568 | ||
|
|
418982eb85 | ||
|
|
335359f138 | ||
|
|
4ec91e9fbe | ||
|
|
db3e262df3 | ||
|
|
d280ad1c3a | ||
|
|
b2aa003d57 | ||
|
|
3c3280d9ac | ||
|
|
58f8d654ef | ||
|
|
5593cad434 | ||
|
|
59151b3671 | ||
|
|
1dc10ee3a0 | ||
|
|
4c400ca121 | ||
|
|
4310ca4922 | ||
|
|
9f6d75245f | ||
|
|
1974e62ec1 | ||
|
|
9dd8fd6b51 | ||
|
|
b082ba9c42 | ||
|
|
90b4d5adb3 | ||
|
|
87989fecf6 | ||
|
|
f41aad3556 | ||
|
|
d3883ffaf9 | ||
|
|
cf8b63cd15 | ||
|
|
bb0886a594 | ||
|
|
d2f3423a13 | ||
|
|
a7c8432a47 | ||
|
|
bedac72820 | ||
|
|
fc45245400 |
15
.github/ISSUE_49_COMMENT.md
vendored
Normal file
15
.github/ISSUE_49_COMMENT.md
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
Suggested comment for [Issue #49](https://github.com/sickn33/antigravity-awesome-skills/issues/49). Paste this on the issue:
|
||||
|
||||
---
|
||||
|
||||
The 404 happens because the package wasn’t published to npm yet. We’ve addressed it in two ways:
|
||||
|
||||
1. **Publish to npm** – We’re set up to publish so `npx antigravity-awesome-skills` will work after the first release. You can also trigger a manual publish via the “Publish to npm” workflow (Actions tab) if you have `NPM_TOKEN` configured.
|
||||
|
||||
2. **Fallback** – Until then (or if you hit a 404 for any reason), use:
|
||||
```bash
|
||||
npx github:sickn33/antigravity-awesome-skills
|
||||
```
|
||||
The README, GETTING_STARTED, and FAQ now mention this fallback.
|
||||
|
||||
Thanks for reporting.
|
||||
22
.github/MAINTENANCE.md
vendored
22
.github/MAINTENANCE.md
vendored
@@ -41,7 +41,7 @@ it means you **did not run or commit** the Validation Chain correctly.
|
||||
|
||||
### 3. 📝 EVIDENCE OF WORK
|
||||
|
||||
- You must create/update `walkthrough.md` or `RELEASE_NOTES.md` to document what changed.
|
||||
- You must create/update `walkthrough.md` or `CHANGELOG.md` to document what changed.
|
||||
- If you made something new, **link it** in the artifacts.
|
||||
|
||||
### 4. 🚫 NO BRANCHES
|
||||
@@ -172,20 +172,30 @@ Reject any PR that fails this:
|
||||
When cutting a new version (e.g., V4):
|
||||
|
||||
1. **Run Full Validation**: `python3 scripts/validate_skills.py --strict`
|
||||
2. **Update Changelog**: Create `RELEASE_NOTES.md`.
|
||||
3. **Bump Version**: Update header in `README.md`.
|
||||
2. **Update Changelog**: Add the new release section to `CHANGELOG.md`.
|
||||
3. **Bump Version**:
|
||||
- Update `package.json` → `"version": "X.Y.Z"` (source of truth for npm).
|
||||
- Update version header in `README.md` if it displays the number.
|
||||
- One-liner: `npm version patch` (or `minor`/`major`) — bumps `package.json` and creates a git tag; then amend if you need to tag after release.
|
||||
4. **Tag Release**:
|
||||
```bash
|
||||
git tag -a v4.0.0 -m "V4 Enterprise Edition"
|
||||
git push origin v4.0.0
|
||||
```
|
||||
5. **Publish to npm** (so `npx antigravity-awesome-skills` works):
|
||||
- **Option A (manual):** From repo root, with npm logged in and 2FA/token set up:
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
You cannot republish the same version; always bump `package.json` before publishing.
|
||||
- **Option B (CI):** On GitHub, create a **Release** (tag e.g. `v4.6.1`). The workflow [Publish to npm](.github/workflows/publish-npm.yml) runs on **Release published** and runs `npm publish` if the repo secret `NPM_TOKEN` is set (npm → Access Tokens → Granular token with Publish, then add as repo secret `NPM_TOKEN`).
|
||||
|
||||
### 📋 Release Note Template
|
||||
### 📋 Changelog Entry Template
|
||||
|
||||
All changeslogs/release notes MUST follow this structure to ensure professionalism and quality:
|
||||
Each new release section in `CHANGELOG.md` should follow [Keep a Changelog](https://keepachangelog.com/) and this structure:
|
||||
|
||||
```markdown
|
||||
# Release vX.Y.Z: [Theme Name]
|
||||
## [X.Y.Z] - YYYY-MM-DD - "[Theme Name]"
|
||||
|
||||
> **[One-line catchy summary of the release]**
|
||||
|
||||
|
||||
10
.github/workflows/ci.yml
vendored
10
.github/workflows/ci.yml
vendored
@@ -45,6 +45,13 @@ jobs:
|
||||
- name: Install npm dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Audit npm dependencies
|
||||
run: npm audit --audit-level=high
|
||||
continue-on-error: true
|
||||
|
||||
- name: Run tests
|
||||
run: npm run test
|
||||
|
||||
- name: 📦 Build catalog
|
||||
run: npm run catalog
|
||||
|
||||
@@ -61,6 +68,9 @@ jobs:
|
||||
# If no changes, exit successfully
|
||||
git diff --quiet && exit 0
|
||||
|
||||
# Pull with rebase to integrate remote changes
|
||||
git pull origin main --rebase || true
|
||||
|
||||
git add README.md skills_index.json data/catalog.json data/bundles.json data/aliases.json CATALOG.md || true
|
||||
|
||||
# If nothing to commit, exit successfully
|
||||
|
||||
28
.github/workflows/publish-npm.yml
vendored
Normal file
28
.github/workflows/publish-npm.yml
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
# Publish antigravity-awesome-skills to npm on release.
|
||||
# Requires NPM_TOKEN secret (npm → Access Tokens → Granular token with Publish).
|
||||
# Before creating a Release: bump package.json "version" (npm forbids republishing the same version).
|
||||
# Release tag (e.g. v4.6.1) should match package.json version.
|
||||
|
||||
name: Publish to npm
|
||||
|
||||
on:
|
||||
release:
|
||||
types: [published]
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
registry-url: "https://registry.npmjs.org"
|
||||
|
||||
- name: Publish
|
||||
run: npm publish
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
@@ -1,4 +1,6 @@
|
||||
node_modules/
|
||||
__pycache__/
|
||||
.worktrees/
|
||||
|
||||
walkthrough.md
|
||||
.agent/rules/
|
||||
@@ -24,3 +26,6 @@ scripts/*voltagent*.py
|
||||
scripts/*html*.py
|
||||
scripts/*similar*.py
|
||||
scripts/*count*.py
|
||||
|
||||
# Optional baseline for legacy JS validator (scripts/validate-skills.js)
|
||||
validation-baseline.json
|
||||
|
||||
43
CATALOG.md
43
CATALOG.md
@@ -1,13 +1,15 @@
|
||||
# Skill Catalog
|
||||
|
||||
Generated at: 2026-01-30T19:29:11.960Z
|
||||
Generated at: 2026-02-05T08:12:42.838Z
|
||||
|
||||
Total skills: 617
|
||||
Total skills: 632
|
||||
|
||||
## architecture (58)
|
||||
## architecture (62)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
| `angular` | Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIV... | angular | angular, v20, deep, knowledge, signals, standalone, components, zoneless, applications, ssr, hydration, reactive |
|
||||
| `angular-state-management` | Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solu... | angular, state | angular, state, signals, ngrx, rxjs, setting, up, global, managing, component, stores, choosing |
|
||||
| `architect-review` | Master software architect specializing in modern architecture patterns, clean architecture, microservices, event-driven systems, and DDD. Reviews system desi... | | architect, review, software, specializing, architecture, clean, microservices, event, driven, ddd, reviews, designs |
|
||||
| `architecture` | Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. Use when making architecture decisions or analyzing ... | architecture | architecture, architectural, decision, making, framework, requirements, analysis, trade, off, evaluation, adr, documentation |
|
||||
| `architecture-decision-records` | Write and maintain Architecture Decision Records (ADRs) following best practices for technical decision documentation. Use when documenting significant techn... | architecture, decision, records | architecture, decision, records, write, maintain, adrs, following, technical, documentation, documenting, significant, decisions |
|
||||
@@ -36,6 +38,7 @@ Total skills: 617
|
||||
| `error-handling-patterns` | Master error handling patterns across languages including exceptions, Result types, error propagation, and graceful degradation to build resilient applicatio... | error, handling | error, handling, languages, including, exceptions, result, types, propagation, graceful, degradation, resilient, applications |
|
||||
| `event-sourcing-architect` | Expert in event sourcing, CQRS, and event-driven architecture patterns. Masters event store design, projection building, saga orchestration, and eventual con... | event, sourcing | event, sourcing, architect, cqrs, driven, architecture, masters, store, projection, building, saga, orchestration |
|
||||
| `event-store-design` | Design and implement event stores for event-sourced systems. Use when building event sourcing infrastructure, choosing event store technologies, or implement... | event, store | event, store, stores, sourced, building, sourcing, infrastructure, choosing, technologies, implementing, persistence |
|
||||
| `game-development/multiplayer` | Multiplayer game development principles. Architecture, networking, synchronization. | game, development/multiplayer | game, development/multiplayer, multiplayer, development, principles, architecture, networking, synchronization |
|
||||
| `godot-gdscript-patterns` | Master Godot 4 GDScript patterns including signals, scenes, state machines, and optimization. Use when building Godot games, implementing game systems, or le... | godot, gdscript | godot, gdscript, including, signals, scenes, state, machines, optimization, building, games, implementing, game |
|
||||
| `haskell-pro` | Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programm... | haskell | haskell, pro, engineer, specializing, type, pure, functional, high, reliability, software, proactively, level |
|
||||
| `i18n-localization` | Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support. | i18n, localization | i18n, localization, internationalization, detecting, hardcoded, strings, managing, translations, locale, files, rtl |
|
||||
@@ -53,6 +56,7 @@ Total skills: 617
|
||||
| `production-code-audit` | Autonomously deep-scan entire codebase line-by-line, understand architecture and patterns, then systematically transform it to production-grade, corporate-le... | production, code, audit | production, code, audit, autonomously, deep, scan, entire, codebase, line, understand, architecture, then |
|
||||
| `projection-patterns` | Build read models and projections from event streams. Use when implementing CQRS read sides, building materialized views, or optimizing query performance in ... | projection | projection, read, models, projections, event, streams, implementing, cqrs, sides, building, materialized, views |
|
||||
| `prompt-engineering` | Expert guide on prompt engineering patterns, best practices, and optimization techniques. Use when user wants to improve prompts, learn prompting strategies,... | prompt, engineering | prompt, engineering, optimization, techniques, user, wants, improve, prompts, learn, prompting, debug, agent |
|
||||
| `radix-ui-design-system` | Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for productio... | radix, ui | radix, ui, accessible, primitives, headless, component, customization, theming, compound, grade, libraries |
|
||||
| `saga-orchestration` | Implement saga patterns for distributed transactions and cross-aggregate workflows. Use when coordinating multi-step business processes, handling compensatin... | saga | saga, orchestration, distributed, transactions, cross, aggregate, coordinating, multi, step, business, processes, handling |
|
||||
| `salesforce-development` | Expert patterns for Salesforce platform development including Lightning Web Components (LWC), Apex triggers and classes, REST/Bulk APIs, Connected Apps, and ... | salesforce | salesforce, development, platform, including, lightning, web, components, lwc, apex, triggers, classes, rest |
|
||||
| `skill-developer` | Create and manage Claude Code skills following Anthropic best practices. Use when creating new skills, modifying skill-rules.json, understanding trigger patt... | skill | skill, developer, claude, code, skills, following, anthropic, creating, new, modifying, rules, json |
|
||||
@@ -109,7 +113,7 @@ Total skills: 617
|
||||
| `startup-financial-modeling` | This skill should be used when the user asks to "create financial projections", "build a financial model", "forecast revenue", "calculate burn rate", "estima... | startup, financial, modeling | startup, financial, modeling, skill, should, used, user, asks, projections, model, forecast, revenue |
|
||||
| `team-composition-analysis` | This skill should be used when the user asks to "plan team structure", "determine hiring needs", "design org chart", "calculate compensation", "plan equity a... | team, composition | team, composition, analysis, skill, should, used, user, asks, plan, structure, determine, hiring |
|
||||
|
||||
## data-ai (92)
|
||||
## data-ai (93)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -119,6 +123,7 @@ Total skills: 617
|
||||
| `ai-engineer` | Build production-ready LLM applications, advanced RAG systems, and intelligent agents. Implements vector search, multimodal AI, agent orchestration, and ente... | ai | ai, engineer, llm, applications, rag, intelligent, agents, implements, vector, search, multimodal, agent |
|
||||
| `ai-wrapper-product` | Expert in building products that wrap AI APIs (OpenAI, Anthropic, etc.) into focused tools people will pay for. Not just 'ChatGPT but different' - products t... | ai, wrapper, product | ai, wrapper, product, building, products, wrap, apis, openai, anthropic, etc, people, pay |
|
||||
| `analytics-tracking` | Design, audit, and improve analytics tracking systems that produce reliable, decision-ready data. Use when the user wants to set up, fix, or evaluate analyti... | analytics, tracking | analytics, tracking, audit, improve, produce, reliable, decision, data, user, wants, set, up |
|
||||
| `angular-ui-patterns` | Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component ... | angular, ui | angular, ui, loading, states, error, handling, data, display, building, components, async, managing |
|
||||
| `api-documenter` | Master API documentation with OpenAPI 3.1, AI-powered tools, and modern developer experience practices. Create interactive docs, generate SDKs, and build com... | api, documenter | api, documenter, documentation, openapi, ai, powered, developer, experience, interactive, docs, generate, sdks |
|
||||
| `autonomous-agent-patterns` | Design patterns for building autonomous coding agents. Covers tool integration, permission systems, browser automation, and human-in-the-loop workflows. Use ... | autonomous, agent | autonomous, agent, building, coding, agents, covers, integration, permission, browser, automation, human, loop |
|
||||
| `autonomous-agents` | Autonomous agents are AI systems that can independently decompose goals, plan actions, execute tools, and self-correct without constant human guidance. The c... | autonomous, agents | autonomous, agents, ai, independently, decompose, goals, plan, actions, execute, self, correct, without |
|
||||
@@ -192,6 +197,7 @@ Total skills: 617
|
||||
| `spark-optimization` | Optimize Apache Spark jobs with partitioning, caching, shuffle optimization, and memory tuning. Use when improving Spark performance, debugging slow jobs, or... | spark, optimization | spark, optimization, optimize, apache, jobs, partitioning, caching, shuffle, memory, tuning, improving, performance |
|
||||
| `sql-optimization-patterns` | Master SQL query optimization, indexing strategies, and EXPLAIN analysis to dramatically improve database performance and eliminate slow queries. Use when de... | sql, optimization | sql, optimization, query, indexing, explain, analysis, dramatically, improve, database, performance, eliminate, slow |
|
||||
| `sqlmap-database-pentesting` | This skill should be used when the user asks to "automate SQL injection testing," "enumerate database structure," "extract database credentials using sqlmap,... | sqlmap, database, pentesting | sqlmap, database, pentesting, penetration, testing, skill, should, used, user, asks, automate, sql |
|
||||
| `stitch-ui-design` | Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, genera... | stitch, ui | stitch, ui, creating, effective, prompts, google, ai, user, wants, ux, app, interfaces |
|
||||
| `tdd-orchestrator` | Master TDD orchestrator specializing in red-green-refactor discipline, multi-agent workflow coordination, and comprehensive test-driven development practices... | tdd, orchestrator | tdd, orchestrator, specializing, red, green, refactor, discipline, multi, agent, coordination, test, driven |
|
||||
| `team-collaboration-standup-notes` | You are an expert team communication specialist focused on async-first standup practices, AI-assisted note generation from commit history, and effective remo... | team, collaboration, standup, notes | team, collaboration, standup, notes, communication, async, first, ai, assisted, note, generation, commit |
|
||||
| `telegram-bot-builder` | Expert in building Telegram bots that solve real problems - from simple automation to complex AI-powered bots. Covers bot architecture, the Telegram Bot API,... | telegram, bot, builder | telegram, bot, builder, building, bots, solve, real, problems, simple, automation, complex, ai |
|
||||
@@ -203,10 +209,9 @@ Total skills: 617
|
||||
| `voice-ai-development` | Expert in building voice AI applications - from real-time voice agents to voice-enabled apps. Covers OpenAI Realtime API, Vapi for voice agents, Deepgram for... | voice, ai | voice, ai, development, building, applications, real, time, agents, enabled, apps, covers, openai |
|
||||
| `voice-ai-engine-development` | Build real-time conversational AI voice engines using async worker pipelines, streaming transcription, LLM agents, and TTS synthesis with interrupt handling ... | voice, ai, engine | voice, ai, engine, development, real, time, conversational, engines, async, worker, pipelines, streaming |
|
||||
| `web-artifacts-builder` | Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use ... | web, artifacts, builder | web, artifacts, builder, suite, creating, elaborate, multi, component, claude, ai, html, frontend |
|
||||
| `xlsx` | Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work ... | xlsx | xlsx, spreadsheet, creation, editing, analysis, formulas, formatting, data, visualization, claude, work, spreadsheets |
|
||||
| `xlsx-official` | Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work ... | xlsx, official | xlsx, official, spreadsheet, creation, editing, analysis, formulas, formatting, data, visualization, claude, work |
|
||||
|
||||
## development (80)
|
||||
## development (81)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -239,6 +244,7 @@ Total skills: 617
|
||||
| `frontend-developer` | Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture... | frontend | frontend, developer, react, components, responsive, layouts, handle, client, side, state, masters, 19 |
|
||||
| `frontend-mobile-development-component-scaffold` | You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete componen... | frontend, mobile, component | frontend, mobile, component, development, scaffold, react, architecture, specializing, scaffolding, accessible, performant, components |
|
||||
| `frontend-slides` | Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a... | frontend, slides | frontend, slides, stunning, animation, rich, html, presentations, scratch, converting, powerpoint, files, user |
|
||||
| `game-development/mobile-games` | Mobile game development principles. Touch input, battery, performance, app stores. | game, development/mobile, games | game, development/mobile, games, mobile, development, principles, touch, input, battery, performance, app, stores |
|
||||
| `go-concurrency-patterns` | Master Go concurrency with goroutines, channels, sync primitives, and context. Use when building concurrent Go applications, implementing worker pools, or de... | go, concurrency | go, concurrency, goroutines, channels, sync, primitives, context, building, concurrent, applications, implementing, worker |
|
||||
| `golang-pro` | Master Go 1.21+ with modern patterns, advanced concurrency, performance optimization, and production-ready microservices. Expert in the latest Go ecosystem i... | golang | golang, pro, go, 21, concurrency, performance, optimization, microservices, latest, ecosystem, including, generics |
|
||||
| `hubspot-integration` | Expert patterns for HubSpot CRM integration including OAuth authentication, CRM objects, associations, batch operations, webhooks, and custom objects. Covers... | hubspot, integration | hubspot, integration, crm, including, oauth, authentication, objects, associations, batch, operations, webhooks, custom |
|
||||
@@ -292,16 +298,18 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `viral-generator-builder` | Expert in building shareable generator tools that go viral - name generators, quiz makers, avatar creators, personality tests, and calculator tools. Covers t... | viral, generator, builder | viral, generator, builder, building, shareable, go, name, generators, quiz, makers, avatar, creators |
|
||||
| `webapp-testing` | Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing... | webapp | webapp, testing, toolkit, interacting, local, web, applications, playwright, supports, verifying, frontend, functionality |
|
||||
|
||||
## general (122)
|
||||
## general (130)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
| `address-github-comments` | Use when you need to address review or issue comments on an open GitHub Pull Request using the gh CLI. | address, github, comments | address, github, comments, review, issue, open, pull, request, gh, cli |
|
||||
| `agent-manager-skill` | Manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling. | agent, manager, skill | agent, manager, skill, multiple, local, cli, agents, via, tmux, sessions, start, stop |
|
||||
| `algorithmic-art` | Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, gener... | algorithmic, art | algorithmic, art, creating, p5, js, seeded, randomness, interactive, parameter, exploration, users, request |
|
||||
| `angular-best-practices` | Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and... | angular, best, practices | angular, best, practices, performance, optimization, writing, reviewing, refactoring, code, optimal, bundle, size |
|
||||
| `angular-migration` | Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applicat... | angular, migration | angular, migration, migrate, angularjs, hybrid, mode, incremental, component, rewriting, dependency, injection, updates |
|
||||
| `anti-reversing-techniques` | Understand anti-reversing, obfuscation, and protection techniques encountered during software analysis. Use when analyzing protected binaries, bypassing anti... | anti, reversing, techniques | anti, reversing, techniques, understand, obfuscation, protection, encountered, during, software, analysis, analyzing, protected |
|
||||
| `app-builder` | Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordina... | app, builder | app, builder, main, application, building, orchestrator, creates, full, stack, applications, natural, language |
|
||||
| `app-builder/templates` | Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks. | app, builder/templates | app, builder/templates, scaffolding, new, applications, creating, scratch, contains, 12, various, tech, stacks |
|
||||
| `arm-cortex-expert` | Senior embedded software engineer specializing in firmware and driver development for ARM Cortex-M microcontrollers (Teensy, STM32, nRF52, SAMD). Decades of ... | arm, cortex | arm, cortex, senior, embedded, software, engineer, specializing, firmware, driver, development, microcontrollers, teensy |
|
||||
| `avalonia-layout-zafiro` | Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy. | avalonia, layout, zafiro | avalonia, layout, zafiro, guidelines, ui, emphasizing, shared, styles, generic, components, avoiding, xaml |
|
||||
| `avalonia-zafiro-development` | Mandatory skills, conventions, and behavioral rules for Avalonia UI development using the Zafiro toolkit. | avalonia, zafiro | avalonia, zafiro, development, mandatory, skills, conventions, behavioral, rules, ui, toolkit |
|
||||
@@ -330,6 +338,7 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `commit` | Create commit messages following Sentry conventions. Use when committing code changes, writing commit messages, or formatting git history. Follows convention... | commit | commit, messages, following, sentry, conventions, committing, code, changes, writing, formatting, git, history |
|
||||
| `comprehensive-review-full-review` | Use when working with comprehensive review full review | comprehensive, full | comprehensive, full, review, working |
|
||||
| `comprehensive-review-pr-enhance` | You are a PR optimization expert specializing in creating high-quality pull requests that facilitate efficient code reviews. Generate comprehensive PR descri... | comprehensive, pr, enhance | comprehensive, pr, enhance, review, optimization, specializing, creating, high, quality, pull, requests, facilitate |
|
||||
| `computer-vision-expert` | SOTA Computer Vision Expert (2026). Specialized in YOLO26, Segment Anything 3 (SAM 3), Vision Language Models, and real-time spatial analysis. | computer, vision | computer, vision, sota, 2026, specialized, yolo26, segment, anything, sam, language, models, real |
|
||||
| `concise-planning` | Use when a user asks for a plan for a coding task, to generate a clear, actionable, and atomic checklist. | concise, planning | concise, planning, user, asks, plan, coding, task, generate, clear, actionable, atomic, checklist |
|
||||
| `context-compression` | Design and evaluate compression strategies for long-running sessions | compression | compression, context, evaluate, long, running, sessions |
|
||||
| `context-fundamentals` | Understand what context is, why it matters, and the anatomy of context in agent systems | fundamentals | fundamentals, context, understand, what, why, matters, anatomy, agent |
|
||||
@@ -343,7 +352,6 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `debugging-toolkit-smart-debug` | Use when working with debugging toolkit smart debug | debugging, debug | debugging, debug, toolkit, smart, working |
|
||||
| `design-md` | Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files | md | md, analyze, stitch, synthesize, semantic, files |
|
||||
| `dispatching-parallel-agents` | Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies | dispatching, parallel, agents | dispatching, parallel, agents, facing, independent, tasks, worked, without, shared, state, sequential, dependencies |
|
||||
| `docx` | Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude ... | docx | docx, document, creation, editing, analysis, tracked, changes, comments, formatting, preservation, text, extraction |
|
||||
| `docx-official` | Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude ... | docx, official | docx, official, document, creation, editing, analysis, tracked, changes, comments, formatting, preservation, text |
|
||||
| `dx-optimizer` | Developer Experience specialist. Improves tooling, setup, and workflows. Use PROACTIVELY when setting up new projects, after team feedback, or when developme... | dx, optimizer | dx, optimizer, developer, experience, improves, tooling, setup, proactively, setting, up, new, after |
|
||||
| `environment-setup-guide` | Guide developers through setting up development environments with proper tools, dependencies, and configurations | environment, setup | environment, setup, developers, through, setting, up, development, environments, proper, dependencies, configurations |
|
||||
@@ -358,6 +366,13 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `fix-review` | Verify fix commits address audit findings without new bugs | fix | fix, review, verify, commits, address, audit, findings, without, new, bugs |
|
||||
| `framework-migration-code-migrate` | You are a code migration expert specializing in transitioning codebases between frameworks, languages, versions, and platforms. Generate comprehensive migrat... | framework, migration, code, migrate | framework, migration, code, migrate, specializing, transitioning, codebases, between, frameworks, languages, versions, platforms |
|
||||
| `game-development` | Game development orchestrator. Routes to platform-specific skills based on project needs. | game | game, development, orchestrator, routes, platform, specific, skills |
|
||||
| `game-development/2d-games` | 2D game development principles. Sprites, tilemaps, physics, camera. | game, development/2d, games | game, development/2d, games, 2d, development, principles, sprites, tilemaps, physics, camera |
|
||||
| `game-development/3d-games` | 3D game development principles. Rendering, shaders, physics, cameras. | game, development/3d, games | game, development/3d, games, 3d, development, principles, rendering, shaders, physics, cameras |
|
||||
| `game-development/game-audio` | Game audio principles. Sound design, music integration, adaptive audio systems. | game, development/game, audio | game, development/game, audio, principles, sound, music, integration, adaptive |
|
||||
| `game-development/game-design` | Game design principles. GDD structure, balancing, player psychology, progression. | game, development/game | game, development/game, principles, gdd, structure, balancing, player, psychology, progression |
|
||||
| `game-development/pc-games` | PC and console game development principles. Engine selection, platform features, optimization strategies. | game, development/pc, games | game, development/pc, games, pc, console, development, principles, engine, selection, platform, features, optimization |
|
||||
| `game-development/vr-ar` | VR/AR development principles. Comfort, interaction, performance requirements. | game, development/vr, ar | game, development/vr, ar, vr, development, principles, comfort, interaction, performance, requirements |
|
||||
| `game-development/web-games` | Web browser game development principles. Framework selection, WebGPU, optimization, PWA. | game, development/web, games | game, development/web, games, web, browser, development, principles, framework, selection, webgpu, optimization, pwa |
|
||||
| `git-advanced-workflows` | Master advanced Git workflows including rebasing, cherry-picking, bisect, worktrees, and reflog to maintain clean history and recover from any situation. Use... | git, advanced | git, advanced, including, rebasing, cherry, picking, bisect, worktrees, reflog, maintain, clean, history |
|
||||
| `git-pr-workflows-onboard` | You are an **expert onboarding specialist and knowledge transfer architect** with deep experience in remote-first organizations, technical team integration, ... | git, pr, onboard | git, pr, onboard, onboarding, knowledge, transfer, architect, deep, experience, remote, first, organizations |
|
||||
| `git-pr-workflows-pr-enhance` | You are a PR optimization expert specializing in creating high-quality pull requests that facilitate efficient code reviews. Generate comprehensive PR descri... | git, pr, enhance | git, pr, enhance, optimization, specializing, creating, high, quality, pull, requests, facilitate, efficient |
|
||||
@@ -377,6 +392,7 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `nosql-expert` | Expert guidance for distributed NoSQL databases (Cassandra, DynamoDB). Focuses on mental models, query-first modeling, single-table design, and avoiding hot ... | nosql | nosql, guidance, distributed, databases, cassandra, dynamodb, mental, models, query, first, modeling, single |
|
||||
| `obsidian-clipper-template-creator` | Guide for creating templates for the Obsidian Web Clipper. Use when you want to create a new clipping template, understand available variables, or format cli... | obsidian, clipper, creator | obsidian, clipper, creator, creating, web, want, new, clipping, understand, available, variables, format |
|
||||
| `onboarding-cro` | When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions "onboarding ... | onboarding, cro | onboarding, cro, user, wants, optimize, post, signup, activation, first, run, experience, time |
|
||||
| `oss-hunter` | Automatically hunt for high-impact OSS contribution opportunities in trending repositories. | oss, hunter | oss, hunter, automatically, hunt, high, impact, contribution, opportunities, trending, repositories |
|
||||
| `paid-ads` | When the user wants help with paid advertising campaigns on Google Ads, Meta (Facebook/Instagram), LinkedIn, Twitter/X, or other ad platforms. Also use when ... | paid, ads | paid, ads, user, wants, advertising, campaigns, google, meta, facebook, instagram, linkedin, twitter |
|
||||
| `paypal-integration` | Integrate PayPal payment processing with support for express checkout, subscriptions, and refund management. Use when implementing PayPal payments, processin... | paypal, integration | paypal, integration, integrate, payment, processing, express, checkout, subscriptions, refund, implementing, payments, online |
|
||||
| `performance-profiling` | Performance profiling principles. Measurement, analysis, and optimization techniques. | performance, profiling | performance, profiling, principles, measurement, analysis, optimization, techniques |
|
||||
@@ -384,11 +400,9 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `plan-writing` | Structured task planning with clear breakdowns, dependencies, and verification criteria. Use when implementing features, refactoring, or any multi-step work. | plan, writing | plan, writing, structured, task, planning, clear, breakdowns, dependencies, verification, criteria, implementing, features |
|
||||
| `planning-with-files` | Implements Manus-style file-based planning for complex tasks. Creates task_plan.md, findings.md, and progress.md. Use when starting complex multi-step tasks,... | planning, with, files | planning, with, files, implements, manus, style, file, complex, tasks, creates, task, plan |
|
||||
| `posix-shell-pro` | Expert in strict POSIX sh scripting for maximum portability across Unix-like systems. Specializes in shell scripts that run on any POSIX-compliant shell (das... | posix, shell | posix, shell, pro, strict, sh, scripting, maximum, portability, unix, like, specializes, scripts |
|
||||
| `pptx` | Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying o... | pptx | pptx, presentation, creation, editing, analysis, claude, work, presentations, files, creating, new, modifying |
|
||||
| `pptx-official` | Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying o... | pptx, official | pptx, official, presentation, creation, editing, analysis, claude, work, presentations, files, creating, new |
|
||||
| `privilege-escalation-methods` | This skill should be used when the user asks to "escalate privileges", "get root access", "become administrator", "privesc techniques", "abuse sudo", "exploi... | privilege, escalation, methods | privilege, escalation, methods, skill, should, used, user, asks, escalate, privileges, get, root |
|
||||
| `prompt-library` | Curated collection of high-quality prompts for various use cases. Includes role-based prompts, task-specific templates, and prompt refinement techniques. Use... | prompt, library | prompt, library, curated, collection, high, quality, prompts, various, cases, includes, role, task |
|
||||
| `readme` | When the user wants to create or update a README.md file for a project. Also use when the user says | readme | readme, user, wants, update, md, file, says |
|
||||
| `receiving-code-review` | Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technic... | receiving, code | receiving, code, review, feedback, before, implementing, suggestions, especially, seems, unclear, technically, questionable |
|
||||
| `referral-program` | When the user wants to create, optimize, or analyze a referral program, affiliate program, or word-of-mouth strategy. Also use when the user mentions 'referr... | referral, program | referral, program, user, wants, optimize, analyze, affiliate, word, mouth, mentions, ambassador, viral |
|
||||
| `requesting-code-review` | Use when completing tasks, implementing major features, or before merging to verify work meets requirements | requesting, code | requesting, code, review, completing, tasks, implementing, major, features, before, merging, verify, work |
|
||||
@@ -419,7 +433,7 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `writing-skills` | Use when creating, updating, or improving agent skills. | writing, skills | writing, skills, creating, updating, improving, agent |
|
||||
| `x-article-publisher-skill` | Publish articles to X/Twitter | x, article, publisher, skill | x, article, publisher, skill, publish, articles, twitter |
|
||||
|
||||
## infrastructure (77)
|
||||
## infrastructure (79)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -456,6 +470,7 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `expo-deployment` | Deploy Expo apps to production | expo, deployment | expo, deployment, deploy, apps |
|
||||
| `file-uploads` | Expert at handling file uploads and cloud storage. Covers S3, Cloudflare R2, presigned URLs, multipart uploads, and image optimization. Knows how to handle l... | file, uploads | file, uploads, handling, cloud, storage, covers, s3, cloudflare, r2, presigned, urls, multipart |
|
||||
| `flutter-expert` | Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. Handles state management, animations, testing, and performance optim... | flutter | flutter, development, dart, widgets, multi, platform, deployment, state, animations, testing, performance, optimization |
|
||||
| `game-development/game-art` | Game art principles. Visual style selection, asset pipeline, animation workflow. | game, development/game, art | game, development/game, art, principles, visual, style, selection, asset, pipeline, animation |
|
||||
| `gcp-cloud-run` | Specialized skill for building production-ready serverless applications on GCP. Covers Cloud Run services (containerized), Cloud Run Functions (event-driven)... | gcp, cloud, run | gcp, cloud, run, specialized, skill, building, serverless, applications, covers, containerized, functions, event |
|
||||
| `git-pr-workflows-git-workflow` | Orchestrate a comprehensive git workflow from code review through PR creation, leveraging specialized agents for quality assurance, testing, and deployment r... | git, pr | git, pr, orchestrate, code, review, through, creation, leveraging, specialized, agents, quality, assurance |
|
||||
| `github-actions-templates` | Create production-ready GitHub Actions workflows for automated testing, building, and deploying applications. Use when setting up CI/CD with GitHub Actions, ... | github, actions | github, actions, automated, testing, building, deploying, applications, setting, up, ci, cd, automating |
|
||||
@@ -486,6 +501,7 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `performance-testing-review-ai-review` | You are an expert AI-powered code review specialist combining automated static analysis, intelligent pattern recognition, and modern DevOps practices. Levera... | performance, ai | performance, ai, testing, review, powered, code, combining, automated, static, analysis, intelligent, recognition |
|
||||
| `prometheus-configuration` | Set up Prometheus for comprehensive metric collection, storage, and monitoring of infrastructure and applications. Use when implementing metrics collection, ... | prometheus, configuration | prometheus, configuration, set, up, metric, collection, storage, monitoring, infrastructure, applications, implementing, metrics |
|
||||
| `protocol-reverse-engineering` | Master network protocol reverse engineering including packet analysis, protocol dissection, and custom protocol documentation. Use when analyzing network tra... | protocol, reverse, engineering | protocol, reverse, engineering, network, including, packet, analysis, dissection, custom, documentation, analyzing, traffic |
|
||||
| `readme` | When the user wants to create or update a README.md file for a project. Also use when the user says 'write readme,' 'create readme,' 'document this project,'... | readme | readme, user, wants, update, md, file, says, write, document, documentation, asks, skill |
|
||||
| `server-management` | Server management principles and decision-making. Process management, monitoring strategy, and scaling decisions. Teaches thinking, not commands. | server | server, principles, decision, making, process, monitoring, scaling, decisions, teaches, thinking, commands |
|
||||
| `service-mesh-observability` | Implement comprehensive observability for service meshes including distributed tracing, metrics, and visualization. Use when setting up mesh monitoring, debu... | service, mesh, observability | service, mesh, observability, meshes, including, distributed, tracing, metrics, visualization, setting, up, monitoring |
|
||||
| `slo-implementation` | Define and implement Service Level Indicators (SLIs) and Service Level Objectives (SLOs) with error budgets and alerting. Use when establishing reliability t... | slo | slo, define, level, indicators, slis, objectives, slos, error, budgets, alerting, establishing, reliability |
|
||||
@@ -495,7 +511,7 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `terraform-skill` | Terraform infrastructure as code best practices | terraform, skill | terraform, skill, infrastructure, code |
|
||||
| `test-automator` | Master AI-powered test automation with modern frameworks, self-healing tests, and comprehensive quality engineering. Build scalable testing strategies with a... | automator | automator, test, ai, powered, automation, frameworks, self, healing, tests, quality, engineering, scalable |
|
||||
| `unity-developer` | Build Unity games with optimized C# scripts, efficient rendering, and proper asset management. Masters Unity 6 LTS, URP/HDRP pipelines, and cross-platform de... | unity | unity, developer, games, optimized, scripts, efficient, rendering, proper, asset, masters, lts, urp |
|
||||
| `vercel-deploy-claimable` | Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as | vercel, deploy, claimable | vercel, deploy, claimable, applications, websites, skill, user, requests, deployment, actions, such |
|
||||
| `vercel-deploy-claimable` | Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as 'Deploy my app', 'Deploy this to production', 'C... | vercel, deploy, claimable | vercel, deploy, claimable, applications, websites, skill, user, requests, deployment, actions, such, my |
|
||||
| `vercel-deployment` | Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production. | vercel, deployment | vercel, deployment, knowledge, deploying, next, js, deploy, hosting |
|
||||
| `voice-agents` | Voice agents represent the frontier of AI interaction - humans speaking naturally with AI systems. The challenge isn't just speech recognition and synthesis,... | voice, agents | voice, agents, represent, frontier, ai, interaction, humans, speaking, naturally, challenge, isn, just |
|
||||
| `wireshark-analysis` | This skill should be used when the user asks to "analyze network traffic with Wireshark", "capture packets for troubleshooting", "filter PCAP files", "follow... | wireshark | wireshark, network, traffic, analysis, skill, should, used, user, asks, analyze, capture, packets |
|
||||
@@ -645,7 +661,7 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `unit-testing-test-generate` | Generate comprehensive, maintainable unit tests across languages with strong coverage and edge case focus. | unit, generate | unit, generate, testing, test, maintainable, tests, languages, strong, coverage, edge, case |
|
||||
| `web3-testing` | Test smart contracts comprehensively using Hardhat and Foundry with unit tests, integration tests, and mainnet forking. Use when testing Solidity contracts, ... | web3 | web3, testing, test, smart, contracts, comprehensively, hardhat, foundry, unit, tests, integration, mainnet |
|
||||
|
||||
## workflow (17)
|
||||
## workflow (16)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -662,7 +678,6 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify,
|
||||
| `git-pushing` | Stage, commit, and push git changes with conventional commit messages. Use when user wants to commit and push changes, mentions pushing to remote, or asks to... | git, pushing | git, pushing, stage, commit, push, changes, conventional, messages, user, wants, mentions, remote |
|
||||
| `kaizen` | Guide for continuous improvement, error proofing, and standardization. Use this skill when the user wants to improve code quality, refactor, or discuss proce... | kaizen | kaizen, continuous, improvement, error, proofing, standardization, skill, user, wants, improve, code, quality |
|
||||
| `mermaid-expert` | Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual docu... | mermaid | mermaid, diagrams, flowcharts, sequences, erds, architectures, masters, syntax, all, diagram, types, styling |
|
||||
| `pdf` | Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs ... | pdf | pdf, manipulation, toolkit, extracting, text, tables, creating, new, pdfs, merging, splitting, documents |
|
||||
| `pdf-official` | Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs ... | pdf, official | pdf, official, manipulation, toolkit, extracting, text, tables, creating, new, pdfs, merging, splitting |
|
||||
| `team-collaboration-issue` | You are a GitHub issue resolution expert specializing in systematic bug investigation, feature implementation, and collaborative development workflows. Your ... | team, collaboration, issue | team, collaboration, issue, github, resolution, specializing, systematic, bug, investigation, feature, collaborative, development |
|
||||
| `track-management` | Use this skill when creating, managing, or working with Conductor tracks - the logical work units for features, bugs, and refactors. Applies to spec.md, plan... | track | track, skill, creating, managing, working, conductor, tracks, logical, work, units, features, bugs |
|
||||
|
||||
108
CHANGELOG.md
108
CHANGELOG.md
@@ -7,8 +7,114 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
---
|
||||
|
||||
## [4.9.0] - 2026-02-05 - "OSS Hunter & Universal Skills"
|
||||
|
||||
> Automated contribution hunting and universal CLI AI skills (Audio, YouTube, Prompt Engineering).
|
||||
|
||||
### Added
|
||||
|
||||
- **New Skill**: `oss-hunter` – Automated tool for finding high-impact Open Source contributions (Good First Issues, Help Wanted) in trending repositories.
|
||||
- **New Skill**: `audio-transcriber` – Transform audio recordings into professional Markdown with Whisper integration.
|
||||
- **New Skill**: `youtube-summarizer` – Generate comprehensive summaries/notes from YouTube videos.
|
||||
- **New Skill**: `prompt-engineer` (Enhanced) – Now includes 11 optimization frameworks (RTF, RISEN, etc.).
|
||||
- **Registry**: 634 skills (from 626). Catalog regenerated.
|
||||
|
||||
### Changed
|
||||
|
||||
- **CLI AI Skills**: Merged core skills from `ericgandrade/cli-ai-skills`.
|
||||
|
||||
### Contributors
|
||||
|
||||
- [@jackjin1997](https://github.com/jackjin1997) - OSS Hunter (PR #61)
|
||||
- [@ericgandrade](https://github.com/ericgandrade) - CLI AI Skills (PR #62)
|
||||
|
||||
## [4.7.0] - 2026-02-03 - "Installer Fix & OpenCode Docs"
|
||||
|
||||
> Critical installer fix for Windows and OpenCode documentation completion.
|
||||
|
||||
### Fixed
|
||||
|
||||
- **Installer**: Resolved `ReferenceError` for `tagArg` variable in `bin/install.js` ensuring correct execution on Windows/PowerShell (PR #53).
|
||||
|
||||
### Documentation
|
||||
|
||||
- **OpenCode**: Completed documentation for OpenCode integration in `README.md`.
|
||||
|
||||
---
|
||||
|
||||
## [4.6.0] - 2026-02-01 - "SPDD & Radix UI Design System"
|
||||
|
||||
> Agent workflow docs (SPDD) and Radix UI design system skill.
|
||||
|
||||
### Added
|
||||
|
||||
- **New Skill**: `radix-ui-design-system` – Build accessible design systems with Radix UI primitives (headless, theming, WCAG, examples).
|
||||
- **Docs**: `skills/SPDD/` – Research, spec, and implementation workflow docs (1-research.md, 2-spec.md, 3-implementation.md).
|
||||
|
||||
### Registry
|
||||
|
||||
- **Total Skills**: 626 (from 625). Catalog regenerated.
|
||||
|
||||
---
|
||||
|
||||
## [4.5.0] - 2026-01-31 - "Stitch UI Design"
|
||||
|
||||
> Expert prompting guide for Google Stitch AI-powered UI design tool.
|
||||
|
||||
### Added
|
||||
|
||||
- **New Skill**: `stitch-ui-design` – Expert guide for creating effective prompts for Google Stitch AI UI design tool (Gemini 2.5 Flash). Covers prompt structure, specificity techniques, iteration strategies, design-to-code workflows, and 10+ examples for landing pages, mobile apps, and dashboards.
|
||||
|
||||
### Changed
|
||||
|
||||
- **Documentation**: Clarified in README.md and GETTING_STARTED.md that installation means cloning the full repo once; Starter Packs are curated lists to discover skills by role, not a different installation method (fixes [#44](https://github.com/sickn33/antigravity-awesome-skills/issues/44)).
|
||||
|
||||
### Registry
|
||||
|
||||
- **Total Skills**: 625 (from 624). Catalog regenerated.
|
||||
|
||||
### Credits
|
||||
|
||||
- [@ALEKGG1](https://github.com/ALEKGG1) – stitch-ui-design (PR #45)
|
||||
- [@CypherPoet](https://github.com/CypherPoet) – Documentation clarity (#44)
|
||||
|
||||
---
|
||||
|
||||
## [4.4.0] - 2026-01-30 - "fp-ts skills for TypeScript"
|
||||
|
||||
> Three practical fp-ts skills for TypeScript functional programming.
|
||||
|
||||
### Added
|
||||
|
||||
- **New Skills** (from [whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills)):
|
||||
- `fp-ts-pragmatic` – Pipe, Option, Either, TaskEither without academic jargon.
|
||||
- `fp-ts-react` – Patterns for fp-ts with React 18/19 and Next.js 14/15 (state, forms, data fetching).
|
||||
- `fp-ts-errors` – Type-safe error handling with Either and TaskEither.
|
||||
|
||||
### Registry
|
||||
|
||||
- **Total Skills**: 624 (from 621). Catalog regenerated.
|
||||
|
||||
---
|
||||
|
||||
## [4.3.0] - 2026-01-29 - "VoltAgent Integration & Context Engineering Suite"
|
||||
|
||||
> 61 new skills from VoltAgent/awesome-agent-skills: official team skills and context engineering suite.
|
||||
|
||||
### Added
|
||||
|
||||
- **61 new skills** from [VoltAgent/awesome-agent-skills](https://github.com/VoltAgent/awesome-agent-skills):
|
||||
- **Official (27)**: Sentry (commit, create-pr, find-bugs, iterate-pr), Trail of Bits (culture-index, fix-review, sharp-edges), Expo (expo-deployment, upgrading-expo), Hugging Face (hugging-face-cli, hugging-face-jobs), Vercel, Google Stitch (design-md), Neon (using-neon), n8n (n8n-code-python, n8n-mcp-tools-expert, n8n-node-configuration), SwiftUI, fal.ai (fal-audio, fal-generate, fal-image-edit, fal-platform, fal-upscale, fal-workflow), deep-research, imagen, readme.
|
||||
- **Community (34)**: Context suite (context-fundamentals, context-degradation, context-compression, context-optimization, multi-agent-patterns, memory-systems, evaluation), frontend-slides, linear-claude-skill, skill-rails-upgrade, terraform-skill, tool-design, screenshots, automate-whatsapp, observe-whatsapp, aws-skills, ui-skills, vexor, pypict-skill, makepad-skills, threejs-skills, claude-scientific-skills, claude-win11-speckit-update-skill, security-bluebook-builder, claude-ally-health, clarity-gate, beautiful-prose, claude-speed-reader, skill-seekers, varlock-claude-skill, superpowers-lab, nanobanana-ppt-skills, x-article-publisher-skill, ffuf-claude-skill.
|
||||
|
||||
### Registry
|
||||
|
||||
- **Total Skills**: 614 (from 553). Catalog and SOURCES.md updated.
|
||||
|
||||
### Credits
|
||||
|
||||
- VoltAgent/awesome-agent-skills and official teams (Sentry, Trail of Bits, Expo, Hugging Face, Vercel Labs, Google Labs, Neon, fal.ai).
|
||||
|
||||
---
|
||||
|
||||
## [4.0.0] - 2026-01-28 - "The Enterprise Era"
|
||||
@@ -120,7 +226,7 @@ The following skills are now correctly indexed and visible in the registry:
|
||||
- **Documentation**:
|
||||
- `docs/EXAMPLES.md`: Cookbook with 3 real-world scenarios.
|
||||
- `docs/SOURCES.md`: Legal ledger for attributions and licenses.
|
||||
- `RELEASE_NOTES.md`: Generated release announcement (archived).
|
||||
- Release announcements are documented in this CHANGELOG.
|
||||
|
||||
### Changed
|
||||
|
||||
|
||||
@@ -48,6 +48,23 @@ You don't need to be an expert! Here are ways anyone can help:
|
||||
|
||||
---
|
||||
|
||||
## Local development setup
|
||||
|
||||
To run validation, index generation, and README updates locally:
|
||||
|
||||
1. **Node.js** (for catalog and installer): `npm ci`
|
||||
2. **Python 3** (for validate, index, readme scripts): install dependencies with
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
Then you can run `npm run chain` (validate → index → readme) and `npm run catalog`.
|
||||
|
||||
**Validation:** The canonical validator is **Python** (`scripts/validate_skills.py`). Use `npm run validate` (or `npm run validate:strict` for CI-style checks). The JavaScript validator (`scripts/validate-skills.js`) is legacy/optional and uses a different schema; CI and PR checks rely on the Python validator only.
|
||||
|
||||
**npm audit:** CI runs `npm audit --audit-level=high`. To fix issues locally: run `npm audit`, then `npm update` or `npm audit fix` as appropriate; for breaking changes, update dependencies manually and run tests.
|
||||
|
||||
---
|
||||
|
||||
## How to Create a New Skill
|
||||
|
||||
### Step-by-Step Guide
|
||||
|
||||
128
README.md
128
README.md
@@ -1,6 +1,6 @@
|
||||
# 🌌 Antigravity Awesome Skills: 624+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
||||
# 🌌 Antigravity Awesome Skills: 634+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
||||
|
||||
> **The Ultimate Collection of 624+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode**
|
||||
> **The Ultimate Collection of 634+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL**
|
||||
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://claude.ai)
|
||||
@@ -10,8 +10,10 @@
|
||||
[](https://github.com/features/copilot)
|
||||
[](https://github.com/opencode-ai/opencode)
|
||||
[](https://github.com/sickn33/antigravity-awesome-skills)
|
||||
[](https://sylph.ai/)
|
||||
[](https://github.com/yeasy/ask)
|
||||
|
||||
**Antigravity Awesome Skills** is a curated, battle-tested library of **624 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
|
||||
**Antigravity Awesome Skills** is a curated, battle-tested library of **634 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
|
||||
|
||||
- 🟣 **Claude Code** (Anthropic CLI)
|
||||
- 🔵 **Gemini CLI** (Google DeepMind)
|
||||
@@ -20,6 +22,7 @@
|
||||
- 🩵 **GitHub Copilot** (VSCode Extension)
|
||||
- 🟠 **Cursor** (AI-native IDE)
|
||||
- ⚪ **OpenCode** (Open-source CLI)
|
||||
- 🌸 **AdaL CLI** (Self-evolving Coding Agent)
|
||||
|
||||
This repository provides essential skills to transform your AI assistant into a **full-stack digital agency**, including official capabilities from **Anthropic**, **OpenAI**, **Google**, **Supabase**, and **Vercel Labs**.
|
||||
|
||||
@@ -29,7 +32,7 @@ This repository provides essential skills to transform your AI assistant into a
|
||||
- [🔌 Compatibility & Invocation](#compatibility--invocation)
|
||||
- [📦 Features & Categories](#features--categories)
|
||||
- [🎁 Curated Collections (Bundles)](#curated-collections)
|
||||
- [📚 Browse 624+ Skills](#browse-624-skills)
|
||||
- [📚 Browse 634+ Skills](#browse-634-skills)
|
||||
- [🛠️ Installation](#installation)
|
||||
- [🤝 How to Contribute](#how-to-contribute)
|
||||
- [👥 Contributors & Credits](#credits--sources)
|
||||
@@ -52,9 +55,10 @@ AI Agents (like Claude Code, Cursor, or Gemini) are smart, but they lack **speci
|
||||
|
||||
### 2. ⚡️ Quick Start (The "Bundle" Way)
|
||||
|
||||
Don't install 624+ skills manually. Use our **Starter Packs**:
|
||||
Install once (clone or npx); then use our **Starter Packs** in [docs/BUNDLES.md](docs/BUNDLES.md) to see which skills fit your role. You get the full repo; Starter Packs are curated lists, not a separate install.
|
||||
|
||||
1. **Install** (pick one):
|
||||
|
||||
```bash
|
||||
# Easiest: npx installer (clones to ~/.agent/skills by default)
|
||||
npx antigravity-awesome-skills
|
||||
@@ -62,6 +66,7 @@ Don't install 624+ skills manually. Use our **Starter Packs**:
|
||||
# Or clone manually
|
||||
git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skills
|
||||
```
|
||||
|
||||
2. **Pick your persona** (See [docs/BUNDLES.md](docs/BUNDLES.md)):
|
||||
- **Web Dev?** use the `Web Wizard` pack.
|
||||
- **Hacker?** use the `Security Engineer` pack.
|
||||
@@ -86,9 +91,12 @@ These skills follow the universal **SKILL.md** format and work with any AI codin
|
||||
| :-------------- | :--- | :-------------------------------- | :---------------- |
|
||||
| **Claude Code** | CLI | `>> /skill-name help me...` | `.claude/skills/` |
|
||||
| **Gemini CLI** | CLI | `(User Prompt) Use skill-name...` | `.gemini/skills/` |
|
||||
| **Codex CLI** | CLI | `(User Prompt) Use skill-name...` | `.codex/skills/` |
|
||||
| **Antigravity** | IDE | `(Agent Mode) Use skill...` | `.agent/skills/` |
|
||||
| **Cursor** | IDE | `@skill-name (in Chat)` | `.cursor/skills/` |
|
||||
| **Copilot** | Ext | `(Paste content manually)` | N/A |
|
||||
| **OpenCode** | CLI | `opencode run @skill-name` | `.agent/skills/` |
|
||||
| **AdaL CLI** | CLI | `(Auto) Skills load on-demand` | `.adal/skills/` |
|
||||
|
||||
> [!TIP]
|
||||
> **Universal Path**: We recommend cloning to `.agent/skills/`. Most modern tools (Antigravity, recent CLIs) look here by default.
|
||||
@@ -100,7 +108,7 @@ These skills follow the universal **SKILL.md** format and work with any AI codin
|
||||
|
||||
---
|
||||
|
||||
Whether you are using **Gemini CLI**, **Claude Code**, **Codex CLI**, **Cursor**, **GitHub Copilot**, **Antigravity**, or **OpenCode**, these skills are designed to drop right in and supercharge your AI agent.
|
||||
Whether you are using **Gemini CLI**, **Claude Code**, **Codex CLI**, **Cursor**, **GitHub Copilot**, **Antigravity**, **OpenCode**, or **AdaL**, these skills are designed to drop right in and supercharge your AI agent.
|
||||
|
||||
This repository aggregates the best capabilities from across the open-source community, transforming your AI assistant into a full-stack digital agency capable of Engineering, Design, Security, Marketing, and Autonomous Operations.
|
||||
|
||||
@@ -108,23 +116,23 @@ This repository aggregates the best capabilities from across the open-source com
|
||||
|
||||
The repository is organized into specialized domains to transform your AI into an expert across the entire software development lifecycle:
|
||||
|
||||
| Category | Focus | Example skills |
|
||||
| :--- | :--- | :--- |
|
||||
| Architecture (52) | System design, ADRs, C4, and scalable patterns | `architecture`, `c4-context`, `senior-architect` |
|
||||
| Business (35) | Growth, pricing, CRO, SEO, and go-to-market | `copywriting`, `pricing-strategy`, `seo-audit` |
|
||||
| Data & AI (81) | LLM apps, RAG, agents, observability, analytics | `rag-engineer`, `prompt-engineer`, `langgraph` |
|
||||
| Development (72) | Language mastery, framework patterns, code quality | `typescript-expert`, `python-patterns`, `react-patterns` |
|
||||
| General (95) | Planning, docs, product ops, writing, guidelines | `brainstorming`, `doc-coauthoring`, `writing-plans` |
|
||||
| Infrastructure (72) | DevOps, cloud, serverless, deployment, CI/CD | `docker-expert`, `aws-serverless`, `vercel-deployment` |
|
||||
| Security (107) | AppSec, pentesting, vuln analysis, compliance | `api-security-best-practices`, `sql-injection-testing`, `vulnerability-scanner` |
|
||||
| Testing (21) | TDD, test design, fixes, QA workflows | `test-driven-development`, `testing-patterns`, `test-fixing` |
|
||||
| Workflow (17) | Automation, orchestration, jobs, agents | `workflow-automation`, `inngest`, `trigger-dev` |
|
||||
| Category | Focus | Example skills |
|
||||
| :------------------ | :------------------------------------------------- | :------------------------------------------------------------------------------ |
|
||||
| Architecture (52) | System design, ADRs, C4, and scalable patterns | `architecture`, `c4-context`, `senior-architect` |
|
||||
| Business (35) | Growth, pricing, CRO, SEO, and go-to-market | `copywriting`, `pricing-strategy`, `seo-audit` |
|
||||
| Data & AI (81) | LLM apps, RAG, agents, observability, analytics | `rag-engineer`, `prompt-engineer`, `langgraph` |
|
||||
| Development (72) | Language mastery, framework patterns, code quality | `typescript-expert`, `python-patterns`, `react-patterns` |
|
||||
| General (95) | Planning, docs, product ops, writing, guidelines | `brainstorming`, `doc-coauthoring`, `writing-plans` |
|
||||
| Infrastructure (72) | DevOps, cloud, serverless, deployment, CI/CD | `docker-expert`, `aws-serverless`, `vercel-deployment` |
|
||||
| Security (107) | AppSec, pentesting, vuln analysis, compliance | `api-security-best-practices`, `sql-injection-testing`, `vulnerability-scanner` |
|
||||
| Testing (21) | TDD, test design, fixes, QA workflows | `test-driven-development`, `testing-patterns`, `test-fixing` |
|
||||
| Workflow (17) | Automation, orchestration, jobs, agents | `workflow-automation`, `inngest`, `trigger-dev` |
|
||||
|
||||
## Curated Collections
|
||||
|
||||
[Check out our Starter Packs in docs/BUNDLES.md](docs/BUNDLES.md) to find the perfect toolkit for your role.
|
||||
|
||||
## Browse 624+ Skills
|
||||
## Browse 634+ Skills
|
||||
|
||||
We have moved the full skill registry to a dedicated catalog to keep this README clean.
|
||||
|
||||
@@ -132,7 +140,7 @@ We have moved the full skill registry to a dedicated catalog to keep this README
|
||||
|
||||
## Installation
|
||||
|
||||
To use these skills with **Claude Code**, **Gemini CLI**, **Codex CLI**, **Cursor**, **Antigravity**, or **OpenCode**:
|
||||
To use these skills with **Claude Code**, **Gemini CLI**, **Codex CLI**, **Cursor**, **Antigravity**, **OpenCode**, or **AdaL**:
|
||||
|
||||
### Option A: npx (recommended)
|
||||
|
||||
@@ -149,12 +157,20 @@ npx antigravity-awesome-skills --claude
|
||||
# Gemini CLI
|
||||
npx antigravity-awesome-skills --gemini
|
||||
|
||||
# Codex CLI
|
||||
npx antigravity-awesome-skills --codex
|
||||
|
||||
# OpenCode (Universal)
|
||||
npx antigravity-awesome-skills
|
||||
|
||||
# Custom path
|
||||
npx antigravity-awesome-skills --path ./my-skills
|
||||
```
|
||||
|
||||
Run `npx antigravity-awesome-skills --help` for all options. If the directory already exists, the installer runs `git pull` to update.
|
||||
|
||||
> **If you see a 404 error:** the package may not be published to npm yet. Use: `npx github:sickn33/antigravity-awesome-skills`
|
||||
|
||||
### Option B: git clone
|
||||
|
||||
```bash
|
||||
@@ -167,8 +183,14 @@ git clone https://github.com/sickn33/antigravity-awesome-skills.git .claude/skil
|
||||
# Gemini CLI specific
|
||||
git clone https://github.com/sickn33/antigravity-awesome-skills.git .gemini/skills
|
||||
|
||||
# Codex CLI specific
|
||||
git clone https://github.com/sickn33/antigravity-awesome-skills.git .codex/skills
|
||||
|
||||
# Cursor specific
|
||||
git clone https://github.com/sickn33/antigravity-awesome-skills.git .cursor/skills
|
||||
|
||||
# OpenCode specific (Universal path)
|
||||
git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skills
|
||||
```
|
||||
|
||||
---
|
||||
@@ -229,6 +251,7 @@ This collection would not be possible without the incredible work of the Claude
|
||||
- **[coreyhaines31/marketingskills](https://github.com/coreyhaines31/marketingskills)**: Marketing skills for CRO, copywriting, SEO, paid ads, and growth (23 skills, MIT).
|
||||
- **[vudovn/antigravity-kit](https://github.com/vudovn/antigravity-kit)**: AI Agent templates with Skills, Agents, and Workflows (33 skills, MIT).
|
||||
- **[affaan-m/everything-claude-code](https://github.com/affaan-m/everything-claude-code)**: Complete Claude Code configuration collection from Anthropic hackathon winner - skills only (8 skills, MIT).
|
||||
- **[whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills)**: Practical fp-ts skills for TypeScript – fp-ts-pragmatic, fp-ts-react, fp-ts-errors (v4.4.0).
|
||||
- **[webzler/agentMemory](https://github.com/webzler/agentMemory)**: Source for the agent-memory-mcp skill.
|
||||
- **[sstklen/claude-api-cost-optimization](https://github.com/sstklen/claude-api-cost-optimization)**: Save 50-90% on Claude API costs with smart optimization strategies (MIT).
|
||||
|
||||
@@ -266,33 +289,50 @@ ai-developer-tools, ai-pair-programming, vibe-coding, skill, skills, SKILL.md, r
|
||||
|
||||
## Repo Contributors
|
||||
|
||||
<a href="https://github.com/sickn33/antigravity-awesome-skills/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=sickn33/antigravity-awesome-skills" />
|
||||
</a>
|
||||
|
||||
Made with [contrib.rocks](https://contrib.rocks).
|
||||
|
||||
We officially thank the following contributors for their help in making this repository awesome!
|
||||
|
||||
- [mvanhorn](https://github.com/mvanhorn)
|
||||
- [rookie-ricardo](https://github.com/rookie-ricardo)
|
||||
- [sck_0](https://github.com/sck_0)
|
||||
- [Munir Abbasi](https://github.com/munirabbasi)
|
||||
- [Mohammad Faiz](https://github.com/mohdfaiz2k9)
|
||||
- [Ianj332](https://github.com/Ianj332)
|
||||
- [sickn33](https://github.com/sickn33)
|
||||
- [GuppyTheCat](https://github.com/GuppyTheCat)
|
||||
- [Tiger-Foxx](https://github.com/Tiger-Foxx)
|
||||
- [arathiesh](https://github.com/arathiesh)
|
||||
- [1bcMax](https://github.com/1bcMax)
|
||||
- [Ahmed Rehan](https://github.com/ar27111994)
|
||||
- [BenedictKing](https://github.com/BenedictKing)
|
||||
- [Nguyen Huu Loc](https://github.com/LocNguyenSGU)
|
||||
- [Owen Wu](https://github.com/yubing744)
|
||||
- [SuperJMN](https://github.com/SuperJMN)
|
||||
- [Viktor Ferenczi](https://github.com/viktor-ferenczi)
|
||||
- [Đỗ Khắc Gia Khoa](https://github.com/Dokhacgiakhoa)
|
||||
- [evandro-miguel](https://github.com/evandro-miguel)
|
||||
- [junited31](https://github.com/junited31)
|
||||
- [krisnasantosa15](https://github.com/krisnasantosa15)
|
||||
- [raeef1001](https://github.com/raeef1001)
|
||||
- [taksrules](https://github.com/taksrules)
|
||||
- [zebbern](https://github.com/zebbern)
|
||||
- [vuth-dogo](https://github.com/vuth-dogo)
|
||||
- [@sck000](https://github.com/sck000)
|
||||
- [@munir-abbasi](https://github.com/munir-abbasi)
|
||||
- [@sickn33](https://github.com/sickn33)
|
||||
- [@Mohammad-Faiz-Cloud-Engineer](https://github.com/Mohammad-Faiz-Cloud-Engineer)
|
||||
- [@Dokhacgiakhoa](https://github.com/Dokhacgiakhoa)
|
||||
- [@IanJ332](https://github.com/IanJ332)
|
||||
- [@chauey](https://github.com/chauey)
|
||||
- [@PabloSMD](https://github.com/PabloSMD)
|
||||
- [@GuppyTheCat](https://github.com/GuppyTheCat)
|
||||
- [@Tiger-Foxx](https://github.com/Tiger-Foxx)
|
||||
- [@arathiesh](https://github.com/arathiesh)
|
||||
- [@liyin2015](https://github.com/liyin2015)
|
||||
- [@1bcMax](https://github.com/1bcMax)
|
||||
- [@ALEKGG1](https://github.com/ALEKGG1)
|
||||
- [@ar27111994](https://github.com/ar27111994)
|
||||
- [@BenedictKing](https://github.com/BenedictKing)
|
||||
- [@whatiskadudoing](https://github.com/whatiskadudoing)
|
||||
- [@LocNguyenSGU](https://github.com/LocNguyenSGU)
|
||||
- [@yubing744](https://github.com/yubing744)
|
||||
- [@SuperJMN](https://github.com/SuperJMN)
|
||||
- [@truongnmt](https://github.com/truongnmt)
|
||||
- [@viktor-ferenczi](https://github.com/viktor-ferenczi)
|
||||
- [@c1c3ru](https://github.com/c1c3ru)
|
||||
- [@ckdwns9121](https://github.com/ckdwns9121)
|
||||
- [@fbientrigo](https://github.com/fbientrigo)
|
||||
- [@junited31](https://github.com/junited31)
|
||||
- [@KrisnaSantosa15](https://github.com/KrisnaSantosa15)
|
||||
- [@sstklen](https://github.com/sstklen)
|
||||
- [@taksrules](https://github.com/taksrules)
|
||||
- [@zebbern](https://github.com/zebbern)
|
||||
- [@vuth-dogo](https://github.com/vuth-dogo)
|
||||
- [@mvanhorn](https://github.com/mvanhorn)
|
||||
- [@rookie-ricardo](https://github.com/rookie-ricardo)
|
||||
- [@evandro-miguel](https://github.com/evandro-miguel)
|
||||
- [@raeef1001](https://github.com/raeef1001)
|
||||
- [@devchangjun](https://github.com/devchangjun)
|
||||
|
||||
## Star History
|
||||
|
||||
|
||||
153
RELEASE_NOTES.md
153
RELEASE_NOTES.md
@@ -1,153 +0,0 @@
|
||||
# Release v4.4.0: fp-ts skills for TypeScript
|
||||
|
||||
> **Three practical fp-ts skills for TypeScript functional programming**
|
||||
|
||||
This release adds 3 fp-ts skills sourced from [whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills), bringing the total to 624 skills. These skills focus on practical, jargon-free patterns for pipe, Option, Either, TaskEither, React integration, and type-safe error handling.
|
||||
|
||||
## New Skills (3)
|
||||
|
||||
- **[fp-ts-pragmatic](skills/fp-ts-pragmatic/)** – The 80/20 of functional programming: pipe, Option, Either, TaskEither without academic jargon
|
||||
- **[fp-ts-react](skills/fp-ts-react/)** – Patterns for using fp-ts with React 18/19 and Next.js 14/15 (state, forms, data fetching)
|
||||
- **[fp-ts-errors](skills/fp-ts-errors/)** – Type-safe error handling with Either and TaskEither; no more try/catch spaghetti
|
||||
|
||||
## Registry Update
|
||||
|
||||
- **Total Skills**: 624 (from 621)
|
||||
- **New Skills Added**: 3
|
||||
- **Catalog**: Regenerated with all skills
|
||||
|
||||
---
|
||||
|
||||
# Release v4.3.0: VoltAgent Integration & Context Engineering Suite
|
||||
|
||||
> **Massive expansion with 61 new skills from VoltAgent repository, including official team skills and comprehensive context engineering capabilities**
|
||||
|
||||
This release adds 61 high-quality skills sourced from the VoltAgent/awesome-agent-skills curated collection, bringing the total to 614 skills. Highlights include official skills from Sentry, Trail of Bits, Expo, Hugging Face, and a complete context engineering suite for building sophisticated AI agents.
|
||||
|
||||
## 🚀 New Skills
|
||||
|
||||
### Official Team Skills (27)
|
||||
|
||||
#### Sentry (4)
|
||||
- **[commit](skills/commit/)** – Create commits with best practices following Sentry conventions
|
||||
- **[create-pr](skills/create-pr/)** – Create pull requests with proper descriptions and review guidelines
|
||||
- **[find-bugs](skills/find-bugs/)** – Find and identify bugs in code systematically
|
||||
- **[iterate-pr](skills/iterate-pr/)** – Iterate on pull request feedback efficiently
|
||||
|
||||
#### Trail of Bits (3)
|
||||
- **[culture-index](skills/culture-index/)** – Index and search culture documentation
|
||||
- **[fix-review](skills/fix-review/)** – Verify fix commits address audit findings without new bugs
|
||||
- **[sharp-edges](skills/sharp-edges/)** – Identify error-prone APIs and dangerous configurations
|
||||
|
||||
#### Expo (2)
|
||||
- **[expo-deployment](skills/expo-deployment/)** – Deploy Expo apps to production
|
||||
- **[upgrading-expo](skills/upgrading-expo/)** – Upgrade Expo SDK versions safely
|
||||
|
||||
#### Hugging Face (2)
|
||||
- **[hugging-face-cli](skills/hugging-face-cli/)** – HF Hub CLI for models, datasets, repos, and compute jobs
|
||||
- **[hugging-face-jobs](skills/hugging-face-jobs/)** – Run compute jobs and Python scripts on HF infrastructure
|
||||
|
||||
#### Other Official (16)
|
||||
- **[vercel-deploy-claimable](skills/vercel-deploy-claimable/)** – Deploy projects to Vercel
|
||||
- **[design-md](skills/design-md/)** – Create and manage DESIGN.md files (Google Stitch)
|
||||
- **[using-neon](skills/using-neon/)** – Best practices for Neon Serverless Postgres
|
||||
- **[n8n-code-python](skills/n8n-code-python/)** – Python in n8n Code nodes
|
||||
- **[n8n-mcp-tools-expert](skills/n8n-mcp-tools-expert/)** – n8n MCP tools guide
|
||||
- **[n8n-node-configuration](skills/n8n-node-configuration/)** – n8n node configuration
|
||||
- **[swiftui-expert-skill](skills/swiftui-expert-skill/)** – SwiftUI best practices
|
||||
- **[fal-audio](skills/fal-audio/)** – Text-to-speech and speech-to-text using fal.ai
|
||||
- **[fal-generate](skills/fal-generate/)** – Generate images and videos using fal.ai AI models
|
||||
- **[fal-image-edit](skills/fal-image-edit/)** – AI-powered image editing with style transfer
|
||||
- **[fal-platform](skills/fal-platform/)** – Platform APIs for model management and usage tracking
|
||||
- **[fal-upscale](skills/fal-upscale/)** – Upscale and enhance image/video resolution using AI
|
||||
- **[fal-workflow](skills/fal-workflow/)** – Generate workflow JSON files for chaining AI models
|
||||
- **[deep-research](skills/deep-research/)** – Gemini Deep Research Agent for autonomous research
|
||||
- **[imagen](skills/imagen/)** – Generate images using Google Gemini
|
||||
- **[readme](skills/readme/)** – Generate comprehensive project documentation
|
||||
|
||||
### Community Skills (34)
|
||||
|
||||
#### Context Engineering Suite (7)
|
||||
A complete suite for building sophisticated AI agents with advanced context management:
|
||||
|
||||
- **[context-fundamentals](skills/context-fundamentals/)** – Understand what context is, why it matters, and the anatomy of context in agent systems
|
||||
- **[context-degradation](skills/context-degradation/)** – Recognize patterns of context failure: lost-in-middle, poisoning, distraction, and clash
|
||||
- **[context-compression](skills/context-compression/)** – Design and evaluate compression strategies for long-running sessions
|
||||
- **[context-optimization](skills/context-optimization/)** – Apply compaction, masking, and caching strategies
|
||||
- **[multi-agent-patterns](skills/multi-agent-patterns/)** – Master orchestrator, peer-to-peer, and hierarchical multi-agent architectures
|
||||
- **[memory-systems](skills/memory-systems/)** – Design short-term, long-term, and graph-based memory architectures
|
||||
- **[evaluation](skills/evaluation/)** – Build evaluation frameworks for agent systems
|
||||
|
||||
#### Development Tools (8)
|
||||
- **[frontend-slides](skills/frontend-slides/)** – Generate animation-rich HTML presentations with visual style previews
|
||||
- **[linear-claude-skill](skills/linear-claude-skill/)** – Manage Linear issues, projects, and teams
|
||||
- **[skill-rails-upgrade](skills/skill-rails-upgrade/)** – Analyze Rails apps and provide upgrade assessments
|
||||
- **[terraform-skill](skills/terraform-skill/)** – Terraform infrastructure as code best practices
|
||||
- **[tool-design](skills/tool-design/)** – Build tools that agents can use effectively, including architectural reduction patterns
|
||||
- **[screenshots](skills/screenshots/)** – Generate marketing screenshots with Playwright
|
||||
- **[automate-whatsapp](skills/automate-whatsapp/)** – Build WhatsApp automations with workflows and agents
|
||||
- **[observe-whatsapp](skills/observe-whatsapp/)** – Debug WhatsApp delivery issues and run health checks
|
||||
|
||||
#### Platform & Framework Skills (19)
|
||||
- **[aws-skills](skills/aws-skills/)** – AWS development with infrastructure automation
|
||||
- **[ui-skills](skills/ui-skills/)** – Opinionated constraints for building interfaces
|
||||
- **[vexor](skills/vexor/)** – Vector-powered CLI for semantic file search
|
||||
- **[pypict-skill](skills/pypict-skill/)** – Pairwise test generation
|
||||
- **[makepad-skills](skills/makepad-skills/)** – Makepad UI development for Rust apps
|
||||
- **[threejs-skills](skills/threejs-skills/)** – Three.js 3D experiences
|
||||
- **[claude-scientific-skills](skills/claude-scientific-skills/)** – Scientific research skills
|
||||
- **[claude-win11-speckit-update-skill](skills/claude-win11-speckit-update-skill/)** – Windows 11 management
|
||||
- **[security-bluebook-builder](skills/security-bluebook-builder/)** – Security documentation
|
||||
- **[claude-ally-health](skills/claude-ally-health/)** – Health assistant
|
||||
- **[clarity-gate](skills/clarity-gate/)** – RAG quality verification
|
||||
- **[beautiful-prose](skills/beautiful-prose/)** – Writing style guide
|
||||
- **[claude-speed-reader](skills/claude-speed-reader/)** – Speed reading tool
|
||||
- **[skill-seekers](skills/skill-seekers/)** – Skill conversion tool
|
||||
- **[varlock-claude-skill](skills/varlock-claude-skill/)** – Secure environment variable management
|
||||
- **[superpowers-lab](skills/superpowers-lab/)** – Superpowers Lab integration
|
||||
- **[nanobanana-ppt-skills](skills/nanobanana-ppt-skills/)** – PowerPoint presentation skills
|
||||
- **[x-article-publisher-skill](skills/x-article-publisher-skill/)** – X/Twitter article publishing
|
||||
- **[ffuf-claude-skill](skills/ffuf-claude-skill/)** – Web fuzzing with ffuf
|
||||
|
||||
---
|
||||
|
||||
## 📦 Registry Update
|
||||
|
||||
- **Total Skills**: 614 (from 553)
|
||||
- **New Skills Added**: 61
|
||||
- **Catalog**: Fully regenerated with all new skills
|
||||
- **Sources**: All skills properly attributed in `docs/SOURCES.md`
|
||||
|
||||
## 🔧 Improvements
|
||||
|
||||
### Quality Assurance
|
||||
- All new skills validated for frontmatter compliance
|
||||
- "When to Use" sections added where missing
|
||||
- Source attribution maintained for all skills
|
||||
- Risk labels properly set
|
||||
|
||||
### Documentation
|
||||
- Updated README.md with correct skill count (614)
|
||||
- Updated package.json version to 4.3.0
|
||||
- Comprehensive release notes created
|
||||
|
||||
## 📊 Statistics
|
||||
|
||||
- **Skills from VoltAgent Repository**: 61
|
||||
- Official Team Skills: 27
|
||||
- Community Skills: 34
|
||||
- **Skills Analyzed**: 174 total from VoltAgent
|
||||
- **Skills Already Present**: 32 (skipped as duplicates)
|
||||
- **Skills with Similar Names**: 89 (analyzed, 12 implemented as complementary)
|
||||
|
||||
## 👥 Credits
|
||||
|
||||
A huge shoutout to our community contributors and the VoltAgent team:
|
||||
|
||||
- **VoltAgent/awesome-agent-skills** for curating an excellent collection
|
||||
- **Official Teams**: Sentry, Trail of Bits, Expo, Hugging Face, Vercel Labs, Google Labs, Neon, fal.ai
|
||||
- **Community Contributors**: zarazhangrui, wrsmith108, robzolkos, muratcankoylan, antonbabenko, and all other skill authors
|
||||
|
||||
---
|
||||
|
||||
_Upgrade now: `git pull origin main` to fetch the latest skills._
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 48 KiB |
@@ -16,18 +16,23 @@ function resolveDir(p) {
|
||||
function parseArgs() {
|
||||
const a = process.argv.slice(2);
|
||||
let pathArg = null;
|
||||
let cursor = false, claude = false, gemini = false;
|
||||
let versionArg = null;
|
||||
let tagArg = null;
|
||||
let cursor = false, claude = false, gemini = false, codex = false;
|
||||
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
if (a[i] === '--help' || a[i] === '-h') return { help: true };
|
||||
if (a[i] === '--path' && a[i + 1]) { pathArg = a[++i]; continue; }
|
||||
if (a[i] === '--version' && a[i + 1]) { versionArg = a[++i]; continue; }
|
||||
if (a[i] === '--tag' && a[i + 1]) { tagArg = a[++i]; continue; }
|
||||
if (a[i] === '--cursor') { cursor = true; continue; }
|
||||
if (a[i] === '--claude') { claude = true; continue; }
|
||||
if (a[i] === '--gemini') { gemini = true; continue; }
|
||||
if (a[i] === '--codex') { codex = true; continue; }
|
||||
if (a[i] === 'install') continue;
|
||||
}
|
||||
|
||||
return { pathArg, cursor, claude, gemini };
|
||||
return { pathArg, versionArg, tagArg, cursor, claude, gemini, codex };
|
||||
}
|
||||
|
||||
function defaultDir(opts) {
|
||||
@@ -35,6 +40,11 @@ function defaultDir(opts) {
|
||||
if (opts.cursor) return path.join(HOME, '.cursor', 'skills');
|
||||
if (opts.claude) return path.join(HOME, '.claude', 'skills');
|
||||
if (opts.gemini) return path.join(HOME, '.gemini', 'skills');
|
||||
if (opts.codex) {
|
||||
const codexHome = process.env.CODEX_HOME;
|
||||
if (codexHome) return path.join(codexHome, 'skills');
|
||||
return path.join(HOME, '.codex', 'skills');
|
||||
}
|
||||
return path.join(HOME, '.agent', 'skills');
|
||||
}
|
||||
|
||||
@@ -50,11 +60,15 @@ Options:
|
||||
--cursor Install to ~/.cursor/skills (Cursor)
|
||||
--claude Install to ~/.claude/skills (Claude Code)
|
||||
--gemini Install to ~/.gemini/skills (Gemini CLI)
|
||||
--codex Install to ~/.codex/skills (Codex CLI)
|
||||
--path <dir> Install to <dir> (default: ~/.agent/skills)
|
||||
--version <ver> After clone, checkout tag v<ver> (e.g. 4.6.0 -> v4.6.0)
|
||||
--tag <tag> After clone, checkout this tag (e.g. v4.6.0)
|
||||
|
||||
Examples:
|
||||
npx antigravity-awesome-skills
|
||||
npx antigravity-awesome-skills --cursor
|
||||
npx antigravity-awesome-skills --version 4.6.0
|
||||
npx antigravity-awesome-skills --path ./my-skills
|
||||
`);
|
||||
}
|
||||
@@ -66,6 +80,8 @@ function run(cmd, args, opts = {}) {
|
||||
|
||||
function main() {
|
||||
const opts = parseArgs();
|
||||
const { tagArg, versionArg } = opts;
|
||||
|
||||
if (opts.help) {
|
||||
printHelp();
|
||||
return;
|
||||
@@ -106,6 +122,13 @@ function main() {
|
||||
run('git', ['clone', REPO, target]);
|
||||
}
|
||||
|
||||
const ref = tagArg || (versionArg ? (versionArg.startsWith('v') ? versionArg : `v${versionArg}`) : null);
|
||||
if (ref) {
|
||||
console.log(`Checking out ${ref}…`);
|
||||
process.chdir(target);
|
||||
run('git', ['checkout', ref]);
|
||||
}
|
||||
|
||||
console.log(`\nInstalled to ${target}`);
|
||||
console.log('Pick a bundle in docs/BUNDLES.md and use @skill-name in your AI assistant.');
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"generatedAt": "2026-01-30T19:29:11.960Z",
|
||||
"generatedAt": "2026-02-05T08:12:42.838Z",
|
||||
"aliases": {
|
||||
"accessibility-compliance-audit": "accessibility-compliance-accessibility-audit",
|
||||
"active directory attacks": "active-directory-attacks",
|
||||
@@ -7,6 +7,7 @@
|
||||
"agent-orchestration-optimize": "agent-orchestration-multi-agent-optimize",
|
||||
"api fuzzing for bug bounty": "api-fuzzing-bug-bounty",
|
||||
"api-testing-mock": "api-testing-observability-api-mock",
|
||||
"templates": "app-builder/templates",
|
||||
"application-performance-optimization": "application-performance-performance-optimization",
|
||||
"aws penetration testing": "aws-penetration-testing",
|
||||
"backend-development-feature": "backend-development-feature-development",
|
||||
@@ -45,6 +46,7 @@
|
||||
"deployment-validation-validate": "deployment-validation-config-validate",
|
||||
"distributed-debugging-trace": "distributed-debugging-debug-trace",
|
||||
"documentation-generation-generate": "documentation-generation-doc-generate",
|
||||
"docx": "docx-official",
|
||||
"error-debugging-analysis": "error-debugging-error-analysis",
|
||||
"error-debugging-review": "error-debugging-multi-agent-review",
|
||||
"error-diagnostics-analysis": "error-diagnostics-error-analysis",
|
||||
@@ -59,6 +61,16 @@
|
||||
"frontend-mobile-scaffold": "frontend-mobile-development-component-scaffold",
|
||||
"frontend-mobile-scan": "frontend-mobile-security-xss-scan",
|
||||
"full-stack-feature": "full-stack-orchestration-full-stack-feature",
|
||||
"2d-games": "game-development/2d-games",
|
||||
"3d-games": "game-development/3d-games",
|
||||
"game-art": "game-development/game-art",
|
||||
"game-audio": "game-development/game-audio",
|
||||
"game-design": "game-development/game-design",
|
||||
"mobile-games": "game-development/mobile-games",
|
||||
"multiplayer": "game-development/multiplayer",
|
||||
"pc-games": "game-development/pc-games",
|
||||
"vr-ar": "game-development/vr-ar",
|
||||
"web-games": "game-development/web-games",
|
||||
"git-pr-workflow": "git-pr-workflows-git-workflow",
|
||||
"html injection testing": "html-injection-testing",
|
||||
"idor vulnerability testing": "idor-testing",
|
||||
@@ -79,11 +91,13 @@
|
||||
"observability-monitoring-setup": "observability-monitoring-monitor-setup",
|
||||
"observability-monitoring-implement": "observability-monitoring-slo-implement",
|
||||
"obsidian-clipper-creator": "obsidian-clipper-template-creator",
|
||||
"pdf": "pdf-official",
|
||||
"pentest checklist": "pentest-checklist",
|
||||
"pentest commands": "pentest-commands",
|
||||
"performance-testing-ai": "performance-testing-review-ai-review",
|
||||
"performance-testing-agent": "performance-testing-review-multi-agent-review",
|
||||
"supabase-postgres-best-practices": "postgres-best-practices",
|
||||
"pptx": "pptx-official",
|
||||
"privilege escalation methods": "privilege-escalation-methods",
|
||||
"python-development-scaffold": "python-development-python-scaffold",
|
||||
"vercel-react-best-practices": "react-best-practices",
|
||||
@@ -107,6 +121,7 @@
|
||||
"windows privilege escalation": "windows-privilege-escalation",
|
||||
"wireshark network traffic analysis": "wireshark-analysis",
|
||||
"wordpress penetration testing": "wordpress-penetration-testing",
|
||||
"xlsx": "xlsx-official",
|
||||
"cross-site scripting and html injection testing": "xss-html-injection"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"generatedAt": "2026-01-30T19:29:11.960Z",
|
||||
"generatedAt": "2026-02-05T08:12:42.838Z",
|
||||
"bundles": {
|
||||
"core-dev": {
|
||||
"description": "Core development skills across languages, frameworks, and backend/frontend fundamentals.",
|
||||
@@ -55,6 +55,7 @@
|
||||
"frontend-mobile-security-xss-scan",
|
||||
"frontend-security-coder",
|
||||
"frontend-slides",
|
||||
"game-development/mobile-games",
|
||||
"go-concurrency-patterns",
|
||||
"golang-pro",
|
||||
"graphql",
|
||||
@@ -112,6 +113,7 @@
|
||||
"shopify-apps",
|
||||
"shopify-development",
|
||||
"slack-bot-builder",
|
||||
"stitch-ui-design",
|
||||
"swiftui-expert-skill",
|
||||
"systems-programming-rust-project",
|
||||
"tavily-web",
|
||||
@@ -257,6 +259,7 @@
|
||||
"skills": [
|
||||
"airflow-dag-patterns",
|
||||
"analytics-tracking",
|
||||
"angular-ui-patterns",
|
||||
"blockrun",
|
||||
"business-analyst",
|
||||
"cc-skill-backend-patterns",
|
||||
@@ -318,7 +321,6 @@
|
||||
"unity-ecs-patterns",
|
||||
"using-neon",
|
||||
"vector-database-engineer",
|
||||
"xlsx",
|
||||
"xlsx-official"
|
||||
]
|
||||
},
|
||||
@@ -356,6 +358,7 @@
|
||||
"error-diagnostics-error-trace",
|
||||
"expo-deployment",
|
||||
"flutter-expert",
|
||||
"game-development/game-art",
|
||||
"git-pr-workflows-git-workflow",
|
||||
"gitlab-ci-patterns",
|
||||
"gitops-workflow",
|
||||
@@ -383,6 +386,7 @@
|
||||
"performance-testing-review-ai-review",
|
||||
"postmortem-writing",
|
||||
"prometheus-configuration",
|
||||
"readme",
|
||||
"risk-metrics-calculation",
|
||||
"security-auditor",
|
||||
"server-management",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"generatedAt": "2026-01-30T19:29:11.960Z",
|
||||
"total": 617,
|
||||
"generatedAt": "2026-02-05T08:12:42.838Z",
|
||||
"total": 632,
|
||||
"skills": [
|
||||
{
|
||||
"id": "3d-web-experience",
|
||||
@@ -505,6 +505,56 @@
|
||||
],
|
||||
"path": "skills/analytics-tracking/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "angular",
|
||||
"name": "angular",
|
||||
"description": "Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.",
|
||||
"category": "architecture",
|
||||
"tags": [
|
||||
"angular"
|
||||
],
|
||||
"triggers": [
|
||||
"angular",
|
||||
"v20",
|
||||
"deep",
|
||||
"knowledge",
|
||||
"signals",
|
||||
"standalone",
|
||||
"components",
|
||||
"zoneless",
|
||||
"applications",
|
||||
"ssr",
|
||||
"hydration",
|
||||
"reactive"
|
||||
],
|
||||
"path": "skills/angular/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "angular-best-practices",
|
||||
"name": "angular-best-practices",
|
||||
"description": "Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"angular",
|
||||
"best",
|
||||
"practices"
|
||||
],
|
||||
"triggers": [
|
||||
"angular",
|
||||
"best",
|
||||
"practices",
|
||||
"performance",
|
||||
"optimization",
|
||||
"writing",
|
||||
"reviewing",
|
||||
"refactoring",
|
||||
"code",
|
||||
"optimal",
|
||||
"bundle",
|
||||
"size"
|
||||
],
|
||||
"path": "skills/angular-best-practices/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "angular-migration",
|
||||
"name": "angular-migration",
|
||||
@@ -530,6 +580,56 @@
|
||||
],
|
||||
"path": "skills/angular-migration/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "angular-state-management",
|
||||
"name": "angular-state-management",
|
||||
"description": "Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.",
|
||||
"category": "architecture",
|
||||
"tags": [
|
||||
"angular",
|
||||
"state"
|
||||
],
|
||||
"triggers": [
|
||||
"angular",
|
||||
"state",
|
||||
"signals",
|
||||
"ngrx",
|
||||
"rxjs",
|
||||
"setting",
|
||||
"up",
|
||||
"global",
|
||||
"managing",
|
||||
"component",
|
||||
"stores",
|
||||
"choosing"
|
||||
],
|
||||
"path": "skills/angular-state-management/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "angular-ui-patterns",
|
||||
"name": "angular-ui-patterns",
|
||||
"description": "Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.",
|
||||
"category": "data-ai",
|
||||
"tags": [
|
||||
"angular",
|
||||
"ui"
|
||||
],
|
||||
"triggers": [
|
||||
"angular",
|
||||
"ui",
|
||||
"loading",
|
||||
"states",
|
||||
"error",
|
||||
"handling",
|
||||
"data",
|
||||
"display",
|
||||
"building",
|
||||
"components",
|
||||
"async",
|
||||
"managing"
|
||||
],
|
||||
"path": "skills/angular-ui-patterns/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "anti-reversing-techniques",
|
||||
"name": "anti-reversing-techniques",
|
||||
@@ -760,6 +860,31 @@
|
||||
],
|
||||
"path": "skills/app-builder/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "app-builder/templates",
|
||||
"name": "templates",
|
||||
"description": "Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"app",
|
||||
"builder/templates"
|
||||
],
|
||||
"triggers": [
|
||||
"app",
|
||||
"builder/templates",
|
||||
"scaffolding",
|
||||
"new",
|
||||
"applications",
|
||||
"creating",
|
||||
"scratch",
|
||||
"contains",
|
||||
"12",
|
||||
"various",
|
||||
"tech",
|
||||
"stacks"
|
||||
],
|
||||
"path": "skills/app-builder/templates/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "app-store-optimization",
|
||||
"name": "app-store-optimization",
|
||||
@@ -3066,6 +3191,31 @@
|
||||
],
|
||||
"path": "skills/computer-use-agents/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "computer-vision-expert",
|
||||
"name": "computer-vision-expert",
|
||||
"description": "SOTA Computer Vision Expert (2026). Specialized in YOLO26, Segment Anything 3 (SAM 3), Vision Language Models, and real-time spatial analysis.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"computer",
|
||||
"vision"
|
||||
],
|
||||
"triggers": [
|
||||
"computer",
|
||||
"vision",
|
||||
"sota",
|
||||
"2026",
|
||||
"specialized",
|
||||
"yolo26",
|
||||
"segment",
|
||||
"anything",
|
||||
"sam",
|
||||
"language",
|
||||
"models",
|
||||
"real"
|
||||
],
|
||||
"path": "skills/computer-vision-expert/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "concise-planning",
|
||||
"name": "concise-planning",
|
||||
@@ -4778,30 +4928,6 @@
|
||||
],
|
||||
"path": "skills/documentation-templates/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "docx",
|
||||
"name": "docx",
|
||||
"description": "Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"docx"
|
||||
],
|
||||
"triggers": [
|
||||
"docx",
|
||||
"document",
|
||||
"creation",
|
||||
"editing",
|
||||
"analysis",
|
||||
"tracked",
|
||||
"changes",
|
||||
"comments",
|
||||
"formatting",
|
||||
"preservation",
|
||||
"text",
|
||||
"extraction"
|
||||
],
|
||||
"path": "skills/docx/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "docx-official",
|
||||
"name": "docx",
|
||||
@@ -6272,6 +6398,245 @@
|
||||
],
|
||||
"path": "skills/game-development/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "game-development/2d-games",
|
||||
"name": "2d-games",
|
||||
"description": "2D game development principles. Sprites, tilemaps, physics, camera.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"game",
|
||||
"development/2d",
|
||||
"games"
|
||||
],
|
||||
"triggers": [
|
||||
"game",
|
||||
"development/2d",
|
||||
"games",
|
||||
"2d",
|
||||
"development",
|
||||
"principles",
|
||||
"sprites",
|
||||
"tilemaps",
|
||||
"physics",
|
||||
"camera"
|
||||
],
|
||||
"path": "skills/game-development/2d-games/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "game-development/3d-games",
|
||||
"name": "3d-games",
|
||||
"description": "3D game development principles. Rendering, shaders, physics, cameras.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"game",
|
||||
"development/3d",
|
||||
"games"
|
||||
],
|
||||
"triggers": [
|
||||
"game",
|
||||
"development/3d",
|
||||
"games",
|
||||
"3d",
|
||||
"development",
|
||||
"principles",
|
||||
"rendering",
|
||||
"shaders",
|
||||
"physics",
|
||||
"cameras"
|
||||
],
|
||||
"path": "skills/game-development/3d-games/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "game-development/game-art",
|
||||
"name": "game-art",
|
||||
"description": "Game art principles. Visual style selection, asset pipeline, animation workflow.",
|
||||
"category": "infrastructure",
|
||||
"tags": [
|
||||
"game",
|
||||
"development/game",
|
||||
"art"
|
||||
],
|
||||
"triggers": [
|
||||
"game",
|
||||
"development/game",
|
||||
"art",
|
||||
"principles",
|
||||
"visual",
|
||||
"style",
|
||||
"selection",
|
||||
"asset",
|
||||
"pipeline",
|
||||
"animation"
|
||||
],
|
||||
"path": "skills/game-development/game-art/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "game-development/game-audio",
|
||||
"name": "game-audio",
|
||||
"description": "Game audio principles. Sound design, music integration, adaptive audio systems.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"game",
|
||||
"development/game",
|
||||
"audio"
|
||||
],
|
||||
"triggers": [
|
||||
"game",
|
||||
"development/game",
|
||||
"audio",
|
||||
"principles",
|
||||
"sound",
|
||||
"music",
|
||||
"integration",
|
||||
"adaptive"
|
||||
],
|
||||
"path": "skills/game-development/game-audio/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "game-development/game-design",
|
||||
"name": "game-design",
|
||||
"description": "Game design principles. GDD structure, balancing, player psychology, progression.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"game",
|
||||
"development/game"
|
||||
],
|
||||
"triggers": [
|
||||
"game",
|
||||
"development/game",
|
||||
"principles",
|
||||
"gdd",
|
||||
"structure",
|
||||
"balancing",
|
||||
"player",
|
||||
"psychology",
|
||||
"progression"
|
||||
],
|
||||
"path": "skills/game-development/game-design/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "game-development/mobile-games",
|
||||
"name": "mobile-games",
|
||||
"description": "Mobile game development principles. Touch input, battery, performance, app stores.",
|
||||
"category": "development",
|
||||
"tags": [
|
||||
"game",
|
||||
"development/mobile",
|
||||
"games"
|
||||
],
|
||||
"triggers": [
|
||||
"game",
|
||||
"development/mobile",
|
||||
"games",
|
||||
"mobile",
|
||||
"development",
|
||||
"principles",
|
||||
"touch",
|
||||
"input",
|
||||
"battery",
|
||||
"performance",
|
||||
"app",
|
||||
"stores"
|
||||
],
|
||||
"path": "skills/game-development/mobile-games/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "game-development/multiplayer",
|
||||
"name": "multiplayer",
|
||||
"description": "Multiplayer game development principles. Architecture, networking, synchronization.",
|
||||
"category": "architecture",
|
||||
"tags": [
|
||||
"game",
|
||||
"development/multiplayer"
|
||||
],
|
||||
"triggers": [
|
||||
"game",
|
||||
"development/multiplayer",
|
||||
"multiplayer",
|
||||
"development",
|
||||
"principles",
|
||||
"architecture",
|
||||
"networking",
|
||||
"synchronization"
|
||||
],
|
||||
"path": "skills/game-development/multiplayer/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "game-development/pc-games",
|
||||
"name": "pc-games",
|
||||
"description": "PC and console game development principles. Engine selection, platform features, optimization strategies.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"game",
|
||||
"development/pc",
|
||||
"games"
|
||||
],
|
||||
"triggers": [
|
||||
"game",
|
||||
"development/pc",
|
||||
"games",
|
||||
"pc",
|
||||
"console",
|
||||
"development",
|
||||
"principles",
|
||||
"engine",
|
||||
"selection",
|
||||
"platform",
|
||||
"features",
|
||||
"optimization"
|
||||
],
|
||||
"path": "skills/game-development/pc-games/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "game-development/vr-ar",
|
||||
"name": "vr-ar",
|
||||
"description": "VR/AR development principles. Comfort, interaction, performance requirements.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"game",
|
||||
"development/vr",
|
||||
"ar"
|
||||
],
|
||||
"triggers": [
|
||||
"game",
|
||||
"development/vr",
|
||||
"ar",
|
||||
"vr",
|
||||
"development",
|
||||
"principles",
|
||||
"comfort",
|
||||
"interaction",
|
||||
"performance",
|
||||
"requirements"
|
||||
],
|
||||
"path": "skills/game-development/vr-ar/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "game-development/web-games",
|
||||
"name": "web-games",
|
||||
"description": "Web browser game development principles. Framework selection, WebGPU, optimization, PWA.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"game",
|
||||
"development/web",
|
||||
"games"
|
||||
],
|
||||
"triggers": [
|
||||
"game",
|
||||
"development/web",
|
||||
"games",
|
||||
"web",
|
||||
"browser",
|
||||
"development",
|
||||
"principles",
|
||||
"framework",
|
||||
"selection",
|
||||
"webgpu",
|
||||
"optimization",
|
||||
"pwa"
|
||||
],
|
||||
"path": "skills/game-development/web-games/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "gcp-cloud-run",
|
||||
"name": "gcp-cloud-run",
|
||||
@@ -9428,6 +9793,29 @@
|
||||
],
|
||||
"path": "skills/openapi-spec-generation/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "oss-hunter",
|
||||
"name": "oss-hunter",
|
||||
"description": "Automatically hunt for high-impact OSS contribution opportunities in trending repositories.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"oss",
|
||||
"hunter"
|
||||
],
|
||||
"triggers": [
|
||||
"oss",
|
||||
"hunter",
|
||||
"automatically",
|
||||
"hunt",
|
||||
"high",
|
||||
"impact",
|
||||
"contribution",
|
||||
"opportunities",
|
||||
"trending",
|
||||
"repositories"
|
||||
],
|
||||
"path": "skills/oss-hunter/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "page-cro",
|
||||
"name": "page-cro",
|
||||
@@ -9604,30 +9992,6 @@
|
||||
],
|
||||
"path": "skills/pci-compliance/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "pdf",
|
||||
"name": "pdf",
|
||||
"description": "Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.",
|
||||
"category": "workflow",
|
||||
"tags": [
|
||||
"pdf"
|
||||
],
|
||||
"triggers": [
|
||||
"pdf",
|
||||
"manipulation",
|
||||
"toolkit",
|
||||
"extracting",
|
||||
"text",
|
||||
"tables",
|
||||
"creating",
|
||||
"new",
|
||||
"pdfs",
|
||||
"merging",
|
||||
"splitting",
|
||||
"documents"
|
||||
],
|
||||
"path": "skills/pdf/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "pdf-official",
|
||||
"name": "pdf",
|
||||
@@ -10086,30 +10450,6 @@
|
||||
],
|
||||
"path": "skills/powershell-windows/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "pptx",
|
||||
"name": "pptx",
|
||||
"description": "Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"pptx"
|
||||
],
|
||||
"triggers": [
|
||||
"pptx",
|
||||
"presentation",
|
||||
"creation",
|
||||
"editing",
|
||||
"analysis",
|
||||
"claude",
|
||||
"work",
|
||||
"presentations",
|
||||
"files",
|
||||
"creating",
|
||||
"new",
|
||||
"modifying"
|
||||
],
|
||||
"path": "skills/pptx/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "pptx-official",
|
||||
"name": "pptx",
|
||||
@@ -10670,6 +11010,30 @@
|
||||
],
|
||||
"path": "skills/quant-analyst/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "radix-ui-design-system",
|
||||
"name": "radix-ui-design-system",
|
||||
"description": "Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.",
|
||||
"category": "architecture",
|
||||
"tags": [
|
||||
"radix",
|
||||
"ui"
|
||||
],
|
||||
"triggers": [
|
||||
"radix",
|
||||
"ui",
|
||||
"accessible",
|
||||
"primitives",
|
||||
"headless",
|
||||
"component",
|
||||
"customization",
|
||||
"theming",
|
||||
"compound",
|
||||
"grade",
|
||||
"libraries"
|
||||
],
|
||||
"path": "skills/radix-ui-design-system/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "rag-engineer",
|
||||
"name": "rag-engineer",
|
||||
@@ -10866,8 +11230,8 @@
|
||||
{
|
||||
"id": "readme",
|
||||
"name": "readme",
|
||||
"description": "When the user wants to create or update a README.md file for a project. Also use when the user says",
|
||||
"category": "general",
|
||||
"description": "When the user wants to create or update a README.md file for a project. Also use when the user says 'write readme,' 'create readme,' 'document this project,' 'project documentation,' or asks for help with README.md. This skill creates absurdly thorough documentation covering local setup, architecture, and deployment.",
|
||||
"category": "infrastructure",
|
||||
"tags": [
|
||||
"readme"
|
||||
],
|
||||
@@ -10878,7 +11242,12 @@
|
||||
"update",
|
||||
"md",
|
||||
"file",
|
||||
"says"
|
||||
"says",
|
||||
"write",
|
||||
"document",
|
||||
"documentation",
|
||||
"asks",
|
||||
"skill"
|
||||
],
|
||||
"path": "skills/readme/SKILL.md"
|
||||
},
|
||||
@@ -12900,6 +13269,31 @@
|
||||
],
|
||||
"path": "skills/startup-metrics-framework/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "stitch-ui-design",
|
||||
"name": "stitch-ui-design",
|
||||
"description": "Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows for Stitch by Google.",
|
||||
"category": "data-ai",
|
||||
"tags": [
|
||||
"stitch",
|
||||
"ui"
|
||||
],
|
||||
"triggers": [
|
||||
"stitch",
|
||||
"ui",
|
||||
"creating",
|
||||
"effective",
|
||||
"prompts",
|
||||
"google",
|
||||
"ai",
|
||||
"user",
|
||||
"wants",
|
||||
"ux",
|
||||
"app",
|
||||
"interfaces"
|
||||
],
|
||||
"path": "skills/stitch-ui-design/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "stride-analysis-patterns",
|
||||
"name": "stride-analysis-patterns",
|
||||
@@ -14349,7 +14743,7 @@
|
||||
{
|
||||
"id": "vercel-deploy-claimable",
|
||||
"name": "vercel-deploy-claimable",
|
||||
"description": "Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as",
|
||||
"description": "Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as 'Deploy my app', 'Deploy this to production', 'Create a preview deployment', 'Deploy and give me the link', or 'Push this live'. No authentication required - returns preview URL and claimable deployment link.",
|
||||
"category": "infrastructure",
|
||||
"tags": [
|
||||
"vercel",
|
||||
@@ -14367,7 +14761,8 @@
|
||||
"requests",
|
||||
"deployment",
|
||||
"actions",
|
||||
"such"
|
||||
"such",
|
||||
"my"
|
||||
],
|
||||
"path": "skills/vercel-deploy-claimable/SKILL.md"
|
||||
},
|
||||
@@ -14922,30 +15317,6 @@
|
||||
],
|
||||
"path": "skills/x-article-publisher-skill/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "xlsx",
|
||||
"name": "xlsx",
|
||||
"description": "Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas",
|
||||
"category": "data-ai",
|
||||
"tags": [
|
||||
"xlsx"
|
||||
],
|
||||
"triggers": [
|
||||
"xlsx",
|
||||
"spreadsheet",
|
||||
"creation",
|
||||
"editing",
|
||||
"analysis",
|
||||
"formulas",
|
||||
"formatting",
|
||||
"data",
|
||||
"visualization",
|
||||
"claude",
|
||||
"work",
|
||||
"spreadsheets"
|
||||
],
|
||||
"path": "skills/xlsx/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "xlsx-official",
|
||||
"name": "xlsx",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antigravity-awesome-skills",
|
||||
"version": "4.2.0",
|
||||
"version": "4.6.0",
|
||||
"dependencies": {
|
||||
"yaml": "^2.8.2"
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
Skills are specialized instruction files that teach AI assistants how to handle specific tasks. Think of them as expert knowledge modules that your AI can load on-demand.
|
||||
**Simple analogy:** Just like you might consult different experts (a lawyer, a doctor, a mechanic), these skills let your AI become an expert in different areas when you need them.
|
||||
|
||||
### Do I need to install all 560+ skills?
|
||||
### Do I need to install all 626+ skills?
|
||||
|
||||
**No!** When you clone the repository, all skills are available, but your AI only loads them when you explicitly invoke them with `@skill-name`.
|
||||
It's like having a library - all books are there, but you only read the ones you need.
|
||||
@@ -62,7 +62,11 @@ _Always check the Risk label and review the code._
|
||||
|
||||
### Where should I install the skills?
|
||||
|
||||
The universal path that works with most tools is `.agent/skills/`:
|
||||
The universal path that works with most tools is `.agent/skills/`.
|
||||
|
||||
**Using npx:** `npx antigravity-awesome-skills` (or `npx github:sickn33/antigravity-awesome-skills` if you get a 404).
|
||||
|
||||
**Using git clone:**
|
||||
|
||||
```bash
|
||||
git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skills
|
||||
@@ -72,6 +76,7 @@ git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skill
|
||||
|
||||
- Claude Code: `.claude/skills/`
|
||||
- Gemini CLI: `.gemini/skills/`
|
||||
- Codex CLI: `.codex/skills/`
|
||||
- Cursor: `.cursor/skills/` or project root
|
||||
|
||||
### Does this work with Windows?
|
||||
|
||||
@@ -15,9 +15,11 @@ AI Agents (like **Claude Code**, **Gemini**, **Cursor**) are smart, but they lac
|
||||
|
||||
## ⚡️ Quick Start: The "Starter Packs"
|
||||
|
||||
Don't panic about the 560+ skills. You don't need them all at once.
|
||||
Don't panic about the 626+ skills. You don't need them all at once.
|
||||
We have curated **Starter Packs** to get you running immediately.
|
||||
|
||||
You **install the full repo once** (npx or clone); Starter Packs are curated lists to help you **pick which skills to use** by role (e.g. Web Wizard, Hacker Pack)—they are not a different way to install.
|
||||
|
||||
### 1. Install the Repo
|
||||
|
||||
**Option A — npx (easiest):**
|
||||
@@ -26,7 +28,9 @@ We have curated **Starter Packs** to get you running immediately.
|
||||
npx antigravity-awesome-skills
|
||||
```
|
||||
|
||||
This clones to `~/.agent/skills` by default. Use `--cursor`, `--claude`, or `--gemini` to install for a specific tool, or `--path <dir>` for a custom location. Run `npx antigravity-awesome-skills --help` for details.
|
||||
This clones to `~/.agent/skills` by default. Use `--cursor`, `--claude`, `--gemini`, or `--codex` to install for a specific tool, or `--path <dir>` for a custom location. Run `npx antigravity-awesome-skills --help` for details.
|
||||
|
||||
If you see a 404 error, use: `npx github:sickn33/antigravity-awesome-skills`
|
||||
|
||||
**Option B — git clone:**
|
||||
|
||||
@@ -78,6 +82,7 @@ Once installed, just talk to your AI naturally.
|
||||
| :-------------- | :-------------- | :---------------- |
|
||||
| **Claude Code** | ✅ Full Support | `.claude/skills/` |
|
||||
| **Gemini CLI** | ✅ Full Support | `.gemini/skills/` |
|
||||
| **Codex CLI** | ✅ Full Support | `.codex/skills/` |
|
||||
| **Antigravity** | ✅ Native | `.agent/skills/` |
|
||||
| **Cursor** | ✅ Native | `.cursor/skills/` |
|
||||
| **Copilot** | ⚠️ Text Only | Manual copy-paste |
|
||||
@@ -98,8 +103,8 @@ _Check the [Skill Catalog](../CATALOG.md) for the full list._
|
||||
|
||||
## ❓ FAQ
|
||||
|
||||
**Q: Do I need to install all 560 skills?**
|
||||
A: You clone the whole repo, but your AI only _reads_ the ones you ask for (or that are relevant). It's lightweight!
|
||||
**Q: Do I need to install all 626 skills?**
|
||||
A: You clone the whole repo once; your AI only _reads_ the skills you invoke (or that are relevant), so it stays lightweight. **Starter Packs** in [BUNDLES.md](BUNDLES.md) are curated lists to help you discover the right skills for your role—they don't change how you install.
|
||||
|
||||
**Q: Can I make my own skills?**
|
||||
A: Yes! Use the **@skill-creator** skill to build your own.
|
||||
|
||||
@@ -21,6 +21,7 @@ The skill MUST have a section explicitly stating when to trigger it.
|
||||
|
||||
- **Good**: "Use when the user asks to debug a React component."
|
||||
- **Bad**: "This skill helps you with code."
|
||||
Accepted headings: `## When to Use`, `## Use this skill when`, `## When to Use This Skill`.
|
||||
|
||||
### 3. Safety & Risk Classification
|
||||
|
||||
|
||||
@@ -73,7 +73,7 @@ Some skills include additional metadata:
|
||||
---
|
||||
name: my-skill-name
|
||||
description: "Brief description"
|
||||
risk: "safe" # safe | risk | official
|
||||
risk: "safe" # none | safe | critical | offensive (see QUALITY_BAR.md)
|
||||
source: "community"
|
||||
tags: ["react", "typescript"]
|
||||
---
|
||||
|
||||
@@ -72,6 +72,14 @@ The following skills were added from the curated collection at [VoltAgent/awesom
|
||||
- **memory-systems** - [muratcankoylan](https://github.com/muratcankoylan/Agent-Skills-for-Context-Engineering)
|
||||
- **terraform-skill** - [antonbabenko](https://github.com/antonbabenko/terraform-skill)
|
||||
|
||||
## Skills from whatiskadudoing/fp-ts-skills (v4.4.0)
|
||||
|
||||
| Skill | Original Source | License | Notes |
|
||||
| :---- | :-------------- | :------ | :---- |
|
||||
| `fp-ts-pragmatic` | [whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills) | Compatible | Pragmatic fp-ts guide – pipe, Option, Either, TaskEither |
|
||||
| `fp-ts-react` | [whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills) | Compatible | fp-ts with React 18/19 and Next.js |
|
||||
| `fp-ts-errors` | [whatiskadudoing/fp-ts-skills](https://github.com/whatiskadudoing/fp-ts-skills) | Compatible | Type-safe error handling with Either and TaskEither |
|
||||
|
||||
## License Policy
|
||||
|
||||
- **Code**: All original code in this repository is **MIT**.
|
||||
|
||||
@@ -73,7 +73,7 @@ Một số skill bao gồm thêm siêu dữ liệu bổ sung:
|
||||
---
|
||||
name: my-skill-name
|
||||
description: "Mô tả ngắn"
|
||||
risk: "safe" # safe | risk | official
|
||||
risk: "safe" # none | safe | critical | offensive (xem QUALITY_BAR.md)
|
||||
source: "community"
|
||||
tags: ["react", "typescript"]
|
||||
---
|
||||
|
||||
@@ -149,12 +149,39 @@ function readSkill(skillDir, skillId) {
|
||||
|
||||
function listSkillIds(skillsDir) {
|
||||
return fs.readdirSync(skillsDir)
|
||||
.filter(entry => !entry.startsWith('.') && fs.statSync(path.join(skillsDir, entry)).isDirectory())
|
||||
.filter(entry => {
|
||||
if (entry.startsWith('.')) return false;
|
||||
const dirPath = path.join(skillsDir, entry);
|
||||
if (!fs.statSync(dirPath).isDirectory()) return false;
|
||||
const skillPath = path.join(dirPath, 'SKILL.md');
|
||||
return fs.existsSync(skillPath);
|
||||
})
|
||||
.sort();
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively list all skill directory paths under skillsDir (relative paths).
|
||||
* Matches generate_index.py behavior so catalog includes nested skills (e.g. game-development/2d-games).
|
||||
*/
|
||||
function listSkillIdsRecursive(skillsDir, baseDir = skillsDir, acc = []) {
|
||||
const entries = fs.readdirSync(baseDir, { withFileTypes: true });
|
||||
for (const entry of entries) {
|
||||
if (entry.name.startsWith('.')) continue;
|
||||
if (!entry.isDirectory()) continue;
|
||||
const dirPath = path.join(baseDir, entry.name);
|
||||
const skillPath = path.join(dirPath, 'SKILL.md');
|
||||
const relPath = path.relative(skillsDir, dirPath);
|
||||
if (fs.existsSync(skillPath)) {
|
||||
acc.push(relPath);
|
||||
}
|
||||
listSkillIdsRecursive(skillsDir, dirPath, acc);
|
||||
}
|
||||
return acc.sort();
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
listSkillIds,
|
||||
listSkillIdsRecursive,
|
||||
parseFrontmatter,
|
||||
parseInlineList,
|
||||
readSkill,
|
||||
|
||||
11
package-lock.json
generated
11
package-lock.json
generated
@@ -1,24 +1,25 @@
|
||||
{
|
||||
"name": "antigravity-awesome-skills",
|
||||
"version": "4.2.0",
|
||||
"version": "4.9.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "antigravity-awesome-skills",
|
||||
"version": "4.2.0",
|
||||
"version": "4.9.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"yaml": "^2.8.2"
|
||||
},
|
||||
"bin": {
|
||||
"antigravity-awesome-skills": "bin/install.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"yaml": "^2.8.2"
|
||||
}
|
||||
},
|
||||
"node_modules/yaml": {
|
||||
"version": "2.8.2",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
|
||||
"integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
"yaml": "bin.mjs"
|
||||
|
||||
13
package.json
13
package.json
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "antigravity-awesome-skills",
|
||||
"version": "4.4.0",
|
||||
"description": "624+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.",
|
||||
"version": "4.9.0",
|
||||
"description": "626+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"validate": "python3 scripts/validate_skills.py",
|
||||
@@ -10,17 +10,18 @@
|
||||
"readme": "python3 scripts/update_readme.py",
|
||||
"chain": "npm run validate && npm run index && npm run readme",
|
||||
"catalog": "node scripts/build-catalog.js",
|
||||
"build": "npm run chain && npm run catalog"
|
||||
"build": "npm run chain && npm run catalog",
|
||||
"test": "node scripts/tests/validate_skills_headings.test.js && python3 scripts/tests/test_validate_skills_headings.py"
|
||||
},
|
||||
"dependencies": {
|
||||
"devDependencies": {
|
||||
"yaml": "^2.8.2"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/sickn33/antigravity-awesome-skills.git"
|
||||
"url": "git+https://github.com/sickn33/antigravity-awesome-skills.git"
|
||||
},
|
||||
"bin": {
|
||||
"antigravity-awesome-skills": "./bin/install.js"
|
||||
"antigravity-awesome-skills": "bin/install.js"
|
||||
},
|
||||
"files": [
|
||||
"bin"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const {
|
||||
listSkillIds,
|
||||
listSkillIdsRecursive,
|
||||
readSkill,
|
||||
tokenize,
|
||||
unique,
|
||||
@@ -297,8 +297,8 @@ function renderCatalogMarkdown(catalog) {
|
||||
}
|
||||
|
||||
function buildCatalog() {
|
||||
const skillIds = listSkillIds(SKILLS_DIR);
|
||||
const skills = skillIds.map(skillId => readSkill(SKILLS_DIR, skillId));
|
||||
const skillRelPaths = listSkillIdsRecursive(SKILLS_DIR);
|
||||
const skills = skillRelPaths.map(relPath => readSkill(SKILLS_DIR, relPath));
|
||||
const catalogSkills = [];
|
||||
|
||||
for (const skill of skills) {
|
||||
|
||||
@@ -8,6 +8,8 @@ const SKILLS_DIR = path.join(ROOT, 'skills');
|
||||
const ALLOWED_FIELDS = new Set([
|
||||
'name',
|
||||
'description',
|
||||
'risk',
|
||||
'source',
|
||||
'license',
|
||||
'compatibility',
|
||||
'metadata',
|
||||
|
||||
@@ -21,8 +21,12 @@ python3 scripts/generate_index.py
|
||||
echo "Running update_readme.py..."
|
||||
python3 scripts/update_readme.py
|
||||
|
||||
# 2. Stats Consistency Check
|
||||
echo -e "\n${YELLOW}Step 2: verifying Stats Consistency...${NC}"
|
||||
# 2. Catalog (required for CI)
|
||||
echo -e "\n${YELLOW}Step 2: Build catalog...${NC}"
|
||||
npm run catalog
|
||||
|
||||
# 3. Stats Consistency Check
|
||||
echo -e "\n${YELLOW}Step 3: Verifying Stats Consistency...${NC}"
|
||||
JSON_COUNT=$(python3 -c "import json; print(len(json.load(open('skills_index.json'))))")
|
||||
echo "Skills in Registry (JSON): $JSON_COUNT"
|
||||
|
||||
@@ -36,8 +40,14 @@ if [[ "$README_CONTENT" != *"$JSON_COUNT high-performance"* ]]; then
|
||||
fi
|
||||
echo -e "${GREEN}✅ Stats Consistent.${NC}"
|
||||
|
||||
# 3. Contributor Check
|
||||
echo -e "\n${YELLOW}Step 3: Contributor Check${NC}"
|
||||
# 4. Version check (package.json is source of truth for npm)
|
||||
echo -e "\n${YELLOW}Step 4: Version check${NC}"
|
||||
PKG_VERSION=$(node -p "require('./package.json').version")
|
||||
echo "package.json version: $PKG_VERSION"
|
||||
echo "Ensure this version is bumped before 'npm publish' (npm forbids republishing the same version)."
|
||||
|
||||
# 5. Contributor Check
|
||||
echo -e "\n${YELLOW}Step 5: Contributor Check${NC}"
|
||||
echo "Recent commits by author (check against README 'Repo Contributors'):"
|
||||
git shortlog -sn --since="1 month ago" --all --no-merges | head -n 10
|
||||
|
||||
@@ -52,4 +62,5 @@ if [ "$CONFIRM_CONTRIB" != "yes" ]; then
|
||||
fi
|
||||
|
||||
echo -e "\n${GREEN}✅ Release Cycle Checks Passed. You may now commit and push.${NC}"
|
||||
echo -e "${YELLOW}After tagging a release: run \`npm publish\` from repo root (or use GitHub Release + NPM_TOKEN for CI).${NC}"
|
||||
exit 0
|
||||
|
||||
18
scripts/tests/test_validate_skills_headings.py
Normal file
18
scripts/tests/test_validate_skills_headings.py
Normal file
@@ -0,0 +1,18 @@
|
||||
import os
|
||||
import sys
|
||||
|
||||
sys.path.append(os.path.dirname(os.path.dirname(__file__)))
|
||||
from validate_skills import has_when_to_use_section
|
||||
|
||||
SAMPLES = [
|
||||
("## When to Use", True),
|
||||
("## Use this skill when", True),
|
||||
("## When to Use This Skill", True),
|
||||
("## Overview", False),
|
||||
]
|
||||
|
||||
for heading, expected in SAMPLES:
|
||||
content = f"\n{heading}\n- item\n"
|
||||
assert has_when_to_use_section(content) is expected, heading
|
||||
|
||||
print("ok")
|
||||
16
scripts/tests/validate_skills_headings.test.js
Normal file
16
scripts/tests/validate_skills_headings.test.js
Normal file
@@ -0,0 +1,16 @@
|
||||
const assert = require('assert');
|
||||
const { hasUseSection } = require('../validate-skills');
|
||||
|
||||
const samples = [
|
||||
['## When to Use', true],
|
||||
['## Use this skill when', true],
|
||||
['## When to Use This Skill', true],
|
||||
['## Overview', false],
|
||||
];
|
||||
|
||||
for (const [heading, expected] of samples) {
|
||||
const content = `\n${heading}\n- item\n`;
|
||||
assert.strictEqual(hasUseSection(content), expected, heading);
|
||||
}
|
||||
|
||||
console.log('ok');
|
||||
@@ -36,7 +36,7 @@ def update_readme():
|
||||
|
||||
# 3. Update Intro Text Count
|
||||
content = re.sub(
|
||||
r"(library of \*\*)\d+( high-performance skills\*\*)",
|
||||
r"(library of \*\*)\d+( high-performance agentic skills\*\*)",
|
||||
rf"\g<1>{total_skills}\g<2>",
|
||||
content,
|
||||
)
|
||||
|
||||
@@ -32,12 +32,24 @@ const MAX_SKILL_LINES = 500;
|
||||
const ALLOWED_FIELDS = new Set([
|
||||
'name',
|
||||
'description',
|
||||
'risk',
|
||||
'source',
|
||||
'license',
|
||||
'compatibility',
|
||||
'metadata',
|
||||
'allowed-tools',
|
||||
]);
|
||||
|
||||
const USE_SECTION_PATTERNS = [
|
||||
/^##\s+When\s+to\s+Use/im,
|
||||
/^##\s+Use\s+this\s+skill\s+when/im,
|
||||
/^##\s+When\s+to\s+Use\s+This\s+Skill/im,
|
||||
];
|
||||
|
||||
function hasUseSection(content) {
|
||||
return USE_SECTION_PATTERNS.some(pattern => pattern.test(content));
|
||||
}
|
||||
|
||||
function isPlainObject(value) {
|
||||
return value && typeof value === 'object' && !Array.isArray(value);
|
||||
}
|
||||
@@ -99,172 +111,183 @@ function addStrictSectionErrors(label, missing, baselineSet) {
|
||||
}
|
||||
}
|
||||
|
||||
const skillIds = listSkillIds(SKILLS_DIR);
|
||||
const baseline = loadBaseline();
|
||||
const baselineUse = new Set(baseline.useSection || []);
|
||||
const baselineDoNotUse = new Set(baseline.doNotUseSection || []);
|
||||
const baselineInstructions = new Set(baseline.instructionsSection || []);
|
||||
const baselineLongFile = new Set(baseline.longFile || []);
|
||||
function run() {
|
||||
const skillIds = listSkillIds(SKILLS_DIR);
|
||||
const baseline = loadBaseline();
|
||||
const baselineUse = new Set(baseline.useSection || []);
|
||||
const baselineDoNotUse = new Set(baseline.doNotUseSection || []);
|
||||
const baselineInstructions = new Set(baseline.instructionsSection || []);
|
||||
const baselineLongFile = new Set(baseline.longFile || []);
|
||||
|
||||
for (const skillId of skillIds) {
|
||||
const skillPath = path.join(SKILLS_DIR, skillId, 'SKILL.md');
|
||||
for (const skillId of skillIds) {
|
||||
const skillPath = path.join(SKILLS_DIR, skillId, 'SKILL.md');
|
||||
|
||||
if (!fs.existsSync(skillPath)) {
|
||||
addError(`Missing SKILL.md: ${skillId}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const content = fs.readFileSync(skillPath, 'utf8');
|
||||
const { data, errors: fmErrors, hasFrontmatter } = parseFrontmatter(content);
|
||||
const lineCount = content.split(/\r?\n/).length;
|
||||
|
||||
if (!hasFrontmatter) {
|
||||
addError(`Missing frontmatter: ${skillId}`);
|
||||
}
|
||||
|
||||
if (fmErrors && fmErrors.length) {
|
||||
fmErrors.forEach(error => addError(`Frontmatter parse error (${skillId}): ${error}`));
|
||||
}
|
||||
|
||||
if (!NAME_PATTERN.test(skillId)) {
|
||||
addError(`Folder name must match ${NAME_PATTERN}: ${skillId}`);
|
||||
}
|
||||
|
||||
if (data.name !== undefined) {
|
||||
const nameError = validateStringField('name', data.name, { min: 1, max: MAX_NAME_LENGTH });
|
||||
if (nameError) {
|
||||
addError(`${nameError} (${skillId})`);
|
||||
} else {
|
||||
const nameValue = String(data.name).trim();
|
||||
if (!NAME_PATTERN.test(nameValue)) {
|
||||
addError(`name must match ${NAME_PATTERN}: ${skillId}`);
|
||||
}
|
||||
if (nameValue !== skillId) {
|
||||
addError(`name must match folder name: ${skillId} -> ${nameValue}`);
|
||||
}
|
||||
if (!fs.existsSync(skillPath)) {
|
||||
addError(`Missing SKILL.md: ${skillId}`);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
const descError = data.description === undefined
|
||||
? 'description is required.'
|
||||
: validateStringField('description', data.description, { min: 1, max: MAX_DESCRIPTION_LENGTH });
|
||||
if (descError) {
|
||||
addError(`${descError} (${skillId})`);
|
||||
}
|
||||
const content = fs.readFileSync(skillPath, 'utf8');
|
||||
const { data, errors: fmErrors, hasFrontmatter } = parseFrontmatter(content);
|
||||
const lineCount = content.split(/\r?\n/).length;
|
||||
|
||||
if (data.license !== undefined) {
|
||||
const licenseError = validateStringField('license', data.license, { min: 1, max: 128 });
|
||||
if (licenseError) {
|
||||
addError(`${licenseError} (${skillId})`);
|
||||
if (!hasFrontmatter) {
|
||||
addError(`Missing frontmatter: ${skillId}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (data.compatibility !== undefined) {
|
||||
const compatibilityError = validateStringField(
|
||||
'compatibility',
|
||||
data.compatibility,
|
||||
{ min: 1, max: MAX_COMPATIBILITY_LENGTH },
|
||||
);
|
||||
if (compatibilityError) {
|
||||
addError(`${compatibilityError} (${skillId})`);
|
||||
if (fmErrors && fmErrors.length) {
|
||||
fmErrors.forEach(error => addError(`Frontmatter parse error (${skillId}): ${error}`));
|
||||
}
|
||||
}
|
||||
|
||||
if (data['allowed-tools'] !== undefined) {
|
||||
if (typeof data['allowed-tools'] !== 'string') {
|
||||
addError(`allowed-tools must be a space-delimited string. (${skillId})`);
|
||||
} else if (!data['allowed-tools'].trim()) {
|
||||
addError(`allowed-tools cannot be empty. (${skillId})`);
|
||||
if (!NAME_PATTERN.test(skillId)) {
|
||||
addError(`Folder name must match ${NAME_PATTERN}: ${skillId}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (data.metadata !== undefined) {
|
||||
if (!isPlainObject(data.metadata)) {
|
||||
addError(`metadata must be a string map/object. (${skillId})`);
|
||||
} else {
|
||||
for (const [key, value] of Object.entries(data.metadata)) {
|
||||
if (typeof value !== 'string') {
|
||||
addError(`metadata.${key} must be a string. (${skillId})`);
|
||||
if (data.name !== undefined) {
|
||||
const nameError = validateStringField('name', data.name, { min: 1, max: MAX_NAME_LENGTH });
|
||||
if (nameError) {
|
||||
addError(`${nameError} (${skillId})`);
|
||||
} else {
|
||||
const nameValue = String(data.name).trim();
|
||||
if (!NAME_PATTERN.test(nameValue)) {
|
||||
addError(`name must match ${NAME_PATTERN}: ${skillId}`);
|
||||
}
|
||||
if (nameValue !== skillId) {
|
||||
addError(`name must match folder name: ${skillId} -> ${nameValue}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (data && Object.keys(data).length) {
|
||||
const unknownFields = Object.keys(data).filter(key => !ALLOWED_FIELDS.has(key));
|
||||
if (unknownFields.length) {
|
||||
unknownFieldSkills.push(skillId);
|
||||
addError(`Unknown frontmatter fields (${skillId}): ${unknownFields.join(', ')}`);
|
||||
const descError = data.description === undefined
|
||||
? 'description is required.'
|
||||
: validateStringField('description', data.description, { min: 1, max: MAX_DESCRIPTION_LENGTH });
|
||||
if (descError) {
|
||||
addError(`${descError} (${skillId})`);
|
||||
}
|
||||
|
||||
if (data.license !== undefined) {
|
||||
const licenseError = validateStringField('license', data.license, { min: 1, max: 128 });
|
||||
if (licenseError) {
|
||||
addError(`${licenseError} (${skillId})`);
|
||||
}
|
||||
}
|
||||
|
||||
if (data.compatibility !== undefined) {
|
||||
const compatibilityError = validateStringField(
|
||||
'compatibility',
|
||||
data.compatibility,
|
||||
{ min: 1, max: MAX_COMPATIBILITY_LENGTH },
|
||||
);
|
||||
if (compatibilityError) {
|
||||
addError(`${compatibilityError} (${skillId})`);
|
||||
}
|
||||
}
|
||||
|
||||
if (data['allowed-tools'] !== undefined) {
|
||||
if (typeof data['allowed-tools'] !== 'string') {
|
||||
addError(`allowed-tools must be a space-delimited string. (${skillId})`);
|
||||
} else if (!data['allowed-tools'].trim()) {
|
||||
addError(`allowed-tools cannot be empty. (${skillId})`);
|
||||
}
|
||||
}
|
||||
|
||||
if (data.metadata !== undefined) {
|
||||
if (!isPlainObject(data.metadata)) {
|
||||
addError(`metadata must be a string map/object. (${skillId})`);
|
||||
} else {
|
||||
for (const [key, value] of Object.entries(data.metadata)) {
|
||||
if (typeof value !== 'string') {
|
||||
addError(`metadata.${key} must be a string. (${skillId})`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (data && Object.keys(data).length) {
|
||||
const unknownFields = Object.keys(data).filter(key => !ALLOWED_FIELDS.has(key));
|
||||
if (unknownFields.length) {
|
||||
unknownFieldSkills.push(skillId);
|
||||
addError(`Unknown frontmatter fields (${skillId}): ${unknownFields.join(', ')}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (lineCount > MAX_SKILL_LINES) {
|
||||
longFiles.push(skillId);
|
||||
}
|
||||
|
||||
if (!hasUseSection(content)) {
|
||||
missingUseSection.push(skillId);
|
||||
}
|
||||
|
||||
if (!content.includes('## Do not use')) {
|
||||
missingDoNotUseSection.push(skillId);
|
||||
}
|
||||
|
||||
if (!content.includes('## Instructions')) {
|
||||
missingInstructionsSection.push(skillId);
|
||||
}
|
||||
}
|
||||
|
||||
if (lineCount > MAX_SKILL_LINES) {
|
||||
longFiles.push(skillId);
|
||||
if (missingUseSection.length) {
|
||||
addWarning(`Missing "Use this skill when" section: ${missingUseSection.length} skills (examples: ${missingUseSection.slice(0, 5).join(', ')})`);
|
||||
}
|
||||
|
||||
if (!content.includes('## Use this skill when')) {
|
||||
missingUseSection.push(skillId);
|
||||
if (missingDoNotUseSection.length) {
|
||||
addWarning(`Missing "Do not use" section: ${missingDoNotUseSection.length} skills (examples: ${missingDoNotUseSection.slice(0, 5).join(', ')})`);
|
||||
}
|
||||
|
||||
if (!content.includes('## Do not use')) {
|
||||
missingDoNotUseSection.push(skillId);
|
||||
if (missingInstructionsSection.length) {
|
||||
addWarning(`Missing "Instructions" section: ${missingInstructionsSection.length} skills (examples: ${missingInstructionsSection.slice(0, 5).join(', ')})`);
|
||||
}
|
||||
|
||||
if (!content.includes('## Instructions')) {
|
||||
missingInstructionsSection.push(skillId);
|
||||
if (longFiles.length) {
|
||||
addWarning(`SKILL.md over ${MAX_SKILL_LINES} lines: ${longFiles.length} skills (examples: ${longFiles.slice(0, 5).join(', ')})`);
|
||||
}
|
||||
}
|
||||
|
||||
if (missingUseSection.length) {
|
||||
addWarning(`Missing "Use this skill when" section: ${missingUseSection.length} skills (examples: ${missingUseSection.slice(0, 5).join(', ')})`);
|
||||
}
|
||||
|
||||
if (missingDoNotUseSection.length) {
|
||||
addWarning(`Missing "Do not use" section: ${missingDoNotUseSection.length} skills (examples: ${missingDoNotUseSection.slice(0, 5).join(', ')})`);
|
||||
}
|
||||
|
||||
if (missingInstructionsSection.length) {
|
||||
addWarning(`Missing "Instructions" section: ${missingInstructionsSection.length} skills (examples: ${missingInstructionsSection.slice(0, 5).join(', ')})`);
|
||||
}
|
||||
|
||||
if (longFiles.length) {
|
||||
addWarning(`SKILL.md over ${MAX_SKILL_LINES} lines: ${longFiles.length} skills (examples: ${longFiles.slice(0, 5).join(', ')})`);
|
||||
}
|
||||
|
||||
if (unknownFieldSkills.length) {
|
||||
addWarning(`Unknown frontmatter fields detected: ${unknownFieldSkills.length} skills (examples: ${unknownFieldSkills.slice(0, 5).join(', ')})`);
|
||||
}
|
||||
|
||||
addStrictSectionErrors('Use this skill when', missingUseSection, baselineUse);
|
||||
addStrictSectionErrors('Do not use', missingDoNotUseSection, baselineDoNotUse);
|
||||
addStrictSectionErrors('Instructions', missingInstructionsSection, baselineInstructions);
|
||||
addStrictSectionErrors(`SKILL.md line count <= ${MAX_SKILL_LINES}`, longFiles, baselineLongFile);
|
||||
|
||||
if (writeBaseline) {
|
||||
const baselineData = {
|
||||
generatedAt: new Date().toISOString(),
|
||||
useSection: [...missingUseSection].sort(),
|
||||
doNotUseSection: [...missingDoNotUseSection].sort(),
|
||||
instructionsSection: [...missingInstructionsSection].sort(),
|
||||
longFile: [...longFiles].sort(),
|
||||
};
|
||||
fs.writeFileSync(BASELINE_PATH, JSON.stringify(baselineData, null, 2));
|
||||
console.log(`Baseline written to ${BASELINE_PATH}`);
|
||||
}
|
||||
|
||||
if (warnings.length) {
|
||||
console.warn('Warnings:');
|
||||
for (const warning of warnings) {
|
||||
console.warn(`- ${warning}`);
|
||||
if (unknownFieldSkills.length) {
|
||||
addWarning(`Unknown frontmatter fields detected: ${unknownFieldSkills.length} skills (examples: ${unknownFieldSkills.slice(0, 5).join(', ')})`);
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length) {
|
||||
console.error('\nErrors:');
|
||||
for (const error of errors) {
|
||||
console.error(`- ${error}`);
|
||||
addStrictSectionErrors('Use this skill when', missingUseSection, baselineUse);
|
||||
addStrictSectionErrors('Do not use', missingDoNotUseSection, baselineDoNotUse);
|
||||
addStrictSectionErrors('Instructions', missingInstructionsSection, baselineInstructions);
|
||||
addStrictSectionErrors(`SKILL.md line count <= ${MAX_SKILL_LINES}`, longFiles, baselineLongFile);
|
||||
|
||||
if (writeBaseline) {
|
||||
const baselineData = {
|
||||
generatedAt: new Date().toISOString(),
|
||||
useSection: [...missingUseSection].sort(),
|
||||
doNotUseSection: [...missingDoNotUseSection].sort(),
|
||||
instructionsSection: [...missingInstructionsSection].sort(),
|
||||
longFile: [...longFiles].sort(),
|
||||
};
|
||||
fs.writeFileSync(BASELINE_PATH, JSON.stringify(baselineData, null, 2));
|
||||
console.log(`Baseline written to ${BASELINE_PATH}`);
|
||||
}
|
||||
process.exit(1);
|
||||
|
||||
if (warnings.length) {
|
||||
console.warn('Warnings:');
|
||||
for (const warning of warnings) {
|
||||
console.warn(`- ${warning}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length) {
|
||||
console.error('\nErrors:');
|
||||
for (const error of errors) {
|
||||
console.error(`- ${error}`);
|
||||
}
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log(`Validation passed for ${skillIds.length} skills.`);
|
||||
}
|
||||
|
||||
console.log(`Validation passed for ${skillIds.length} skills.`);
|
||||
if (require.main === module) {
|
||||
run();
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
hasUseSection,
|
||||
run,
|
||||
};
|
||||
|
||||
@@ -3,6 +3,15 @@ import re
|
||||
import argparse
|
||||
import sys
|
||||
|
||||
WHEN_TO_USE_PATTERNS = [
|
||||
re.compile(r"^##\s+When\s+to\s+Use", re.MULTILINE | re.IGNORECASE),
|
||||
re.compile(r"^##\s+Use\s+this\s+skill\s+when", re.MULTILINE | re.IGNORECASE),
|
||||
re.compile(r"^##\s+When\s+to\s+Use\s+This\s+Skill", re.MULTILINE | re.IGNORECASE),
|
||||
]
|
||||
|
||||
def has_when_to_use_section(content):
|
||||
return any(pattern.search(content) for pattern in WHEN_TO_USE_PATTERNS)
|
||||
|
||||
def parse_frontmatter(content):
|
||||
"""
|
||||
Simple frontmatter parser using regex to avoid external dependencies.
|
||||
@@ -30,7 +39,6 @@ def validate_skills(skills_dir, strict_mode=False):
|
||||
|
||||
# Pre-compiled regex
|
||||
security_disclaimer_pattern = re.compile(r"AUTHORIZED USE ONLY", re.IGNORECASE)
|
||||
trigger_section_pattern = re.compile(r"^##\s+When to Use", re.MULTILINE | re.IGNORECASE)
|
||||
|
||||
valid_risk_levels = ["none", "safe", "critical", "offensive"]
|
||||
|
||||
@@ -80,7 +88,7 @@ def validate_skills(skills_dir, strict_mode=False):
|
||||
else: warnings.append(msg)
|
||||
|
||||
# 3. Content Checks (Triggers)
|
||||
if not trigger_section_pattern.search(content):
|
||||
if not has_when_to_use_section(content):
|
||||
msg = f"⚠️ {rel_path}: Missing '## When to Use' section"
|
||||
if strict_mode: errors.append(msg.replace("⚠️", "❌"))
|
||||
else: warnings.append(msg)
|
||||
|
||||
22
skills/SPDD/1-research.md
Normal file
22
skills/SPDD/1-research.md
Normal file
@@ -0,0 +1,22 @@
|
||||
# ROLE: Codebase Research Agent
|
||||
Sua única missão é documentar e explicar a base de código como ela existe hoje.
|
||||
|
||||
## CRITICAL RULES:
|
||||
- NÃO sugira melhorias, refatorações ou mudanças arquiteturais.
|
||||
- NÃO realize análise de causa raiz ou proponha melhorias futuras.
|
||||
- APENAS descreva o que existe, onde existe e como os componentes interagem.
|
||||
- Você é um cartógrafo técnico criando um mapa do sistema atual.
|
||||
|
||||
## STEPS TO FOLLOW:
|
||||
1. **Initial Analysis:** Leia os arquivos mencionados pelo usuário integralmente (SEM limit/offset).
|
||||
2. **Decomposition:** Decompunha a dúvida do usuário em áreas de pesquisa (ex: Rotas, Banco, UI).
|
||||
3. **Execution:** - Localize onde os arquivos e componentes vivem.
|
||||
- Analise COMO o código atual funciona (sem criticar).
|
||||
- Encontre exemplos de padrões existentes para referência.
|
||||
4. **Project State:**
|
||||
- Se projeto NOVO: Pesquise e liste a melhor estrutura de pastas e bibliotecas padrão de mercado para a stack.
|
||||
- Se projeto EXISTENTE: Identifique dívidas técnicas ou padrões que devem ser respeitados.
|
||||
|
||||
## OUTPUT:
|
||||
- Gere o arquivo `docs/prds/prd_current_task.md` com YAML frontmatter (date, topic, tags, status).
|
||||
- **Ação Obrigatória:** Termine com: "Pesquisa concluída. Por favor, dê um `/clear` e carregue `.agente/2-spec.md` para o planejamento."
|
||||
20
skills/SPDD/2-spec.md
Normal file
20
skills/SPDD/2-spec.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# ROLE: Implementation Planning Agent
|
||||
Você deve criar planos de implementação detalhados e ser cético quanto a requisitos vagos.
|
||||
|
||||
## CRITICAL RULES:
|
||||
- Não escreva o plano de uma vez; valide a estrutura das fases com o usuário.
|
||||
- Cada decisão técnica deve ser tomada antes de finalizar o plano.
|
||||
- O plano deve ser acionável e completo, sem "perguntas abertas".
|
||||
|
||||
## STEPS TO FOLLOW:
|
||||
1. **Context Check:** Leia o `docs/prds/prd_current_task.md` gerado anteriormente.
|
||||
2. **Phasing:** Divida o trabalho em fases incrementais e testáveis.
|
||||
3. **Detailing:** Para cada arquivo afetado, defina:
|
||||
- **Path exato.**
|
||||
- **Ação:** (CRIAR | MODIFICAR | DELETAR).
|
||||
- **Lógica:** Snippets de pseudocódigo ou referências de implementação.
|
||||
4. **Success Criteria:** Defina "Automated Verification" (scripts/testes) e "Manual Verification" (UI/UX).
|
||||
|
||||
## OUTPUT:
|
||||
- Gere o arquivo `docs/specs/spec_current_task.md` seguindo o template de fases.
|
||||
- **Ação Obrigatória:** Termine com: "Spec finalizada. Por favor, dê um `/clear` e carregue `.agente/3-implementation.md` para execução."
|
||||
20
skills/SPDD/3-implementation.md
Normal file
20
skills/SPDD/3-implementation.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# ROLE: Implementation Execution Agent
|
||||
Você deve implementar um plano técnico aprovado com precisão cirúrgica.
|
||||
|
||||
## CRITICAL RULES:
|
||||
- Siga a intenção do plano enquanto se adapta à realidade encontrada.
|
||||
- Implemente uma fase COMPLETAMENTE antes de passar para a próxima.
|
||||
- **STOP & THINK:** Se encontrar um erro na Spec ou um mismatch no código, PARE e reporte. Não tente adivinhar.
|
||||
|
||||
## STEPS TO FOLLOW:
|
||||
1. **Sanity Check:** Leia a Spec e o Ticket original. Verifique se o ambiente está limpo.
|
||||
2. **Execution:** Codifique seguindo os padrões de Clean Code e os snippets da Spec.
|
||||
3. **Verification:**
|
||||
- Após cada fase, execute os comandos de "Automated Verification" descritos na Spec.
|
||||
- PAUSE para confirmação manual do usuário após cada fase concluída.
|
||||
4. **Progress:** Atualize os checkboxes (- [x]) no arquivo de Spec conforme avança.
|
||||
|
||||
## OUTPUT:
|
||||
- Código fonte implementado.
|
||||
- Relatório de conclusão de fase com resultados de testes.
|
||||
- **Ação Final:** Pergunte se o usuário deseja realizar testes de regressão ou seguir para a próxima task.
|
||||
58
skills/angular-best-practices/README.md
Normal file
58
skills/angular-best-practices/README.md
Normal file
@@ -0,0 +1,58 @@
|
||||
# Angular Best Practices
|
||||
|
||||
Performance optimization and best practices for Angular applications optimized for AI agents and LLMs.
|
||||
|
||||
## Overview
|
||||
|
||||
This skill provides prioritized performance guidelines across:
|
||||
|
||||
- **Change Detection** - OnPush strategy, Signals, Zoneless apps
|
||||
- **Async Operations** - Avoiding waterfalls, SSR preloading
|
||||
- **Bundle Optimization** - Lazy loading, `@defer`, tree-shaking
|
||||
- **Rendering Performance** - TrackBy, virtual scrolling, CDK
|
||||
- **SSR & Hydration** - Server-side rendering patterns
|
||||
- **Template Optimization** - Structural directives, pipe memoization
|
||||
- **State Management** - Efficient reactivity patterns
|
||||
- **Memory Management** - Subscription cleanup, detached refs
|
||||
|
||||
## Structure
|
||||
|
||||
The `SKILL.md` file is organized by priority:
|
||||
|
||||
1. **Critical Priority** - Largest performance gains (change detection, async)
|
||||
2. **High Priority** - Significant impact (bundles, rendering)
|
||||
3. **Medium Priority** - Noticeable improvements (SSR, templates)
|
||||
4. **Low Priority** - Incremental gains (memory, cleanup)
|
||||
|
||||
Each rule includes:
|
||||
|
||||
- ❌ **WRONG** - What not to do
|
||||
- ✅ **CORRECT** - Recommended pattern
|
||||
- 📝 **Why** - Explanation of the impact
|
||||
|
||||
## Quick Reference Checklist
|
||||
|
||||
**For New Components:**
|
||||
|
||||
- [ ] Using `ChangeDetectionStrategy.OnPush`
|
||||
- [ ] Using Signals for reactive state
|
||||
- [ ] Using `@defer` for non-critical content
|
||||
- [ ] Using `trackBy` for `*ngFor` loops
|
||||
- [ ] No subscriptions without cleanup
|
||||
|
||||
**For Performance Reviews:**
|
||||
|
||||
- [ ] No async waterfalls (parallel data fetching)
|
||||
- [ ] Routes lazy-loaded
|
||||
- [ ] Large libraries code-split
|
||||
- [ ] Images use `NgOptimizedImage`
|
||||
|
||||
## Version
|
||||
|
||||
Current version: 1.0.0 (February 2026)
|
||||
|
||||
## References
|
||||
|
||||
- [Angular Performance](https://angular.dev/guide/performance)
|
||||
- [Zoneless Angular](https://angular.dev/guide/zoneless)
|
||||
- [Angular SSR](https://angular.dev/guide/ssr)
|
||||
559
skills/angular-best-practices/SKILL.md
Normal file
559
skills/angular-best-practices/SKILL.md
Normal file
@@ -0,0 +1,559 @@
|
||||
---
|
||||
name: angular-best-practices
|
||||
description: Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
|
||||
risk: safe
|
||||
source: self
|
||||
---
|
||||
|
||||
# Angular Best Practices
|
||||
|
||||
Comprehensive performance optimization guide for Angular applications. Contains prioritized rules for eliminating performance bottlenecks, optimizing bundles, and improving rendering.
|
||||
|
||||
## When to Apply
|
||||
|
||||
Reference these guidelines when:
|
||||
|
||||
- Writing new Angular components or pages
|
||||
- Implementing data fetching patterns
|
||||
- Reviewing code for performance issues
|
||||
- Refactoring existing Angular code
|
||||
- Optimizing bundle size or load times
|
||||
- Configuring SSR/hydration
|
||||
|
||||
---
|
||||
|
||||
## Rule Categories by Priority
|
||||
|
||||
| Priority | Category | Impact | Focus |
|
||||
| -------- | --------------------- | ---------- | ------------------------------- |
|
||||
| 1 | Change Detection | CRITICAL | Signals, OnPush, Zoneless |
|
||||
| 2 | Async Waterfalls | CRITICAL | RxJS patterns, SSR preloading |
|
||||
| 3 | Bundle Optimization | CRITICAL | Lazy loading, tree shaking |
|
||||
| 4 | Rendering Performance | HIGH | @defer, trackBy, virtualization |
|
||||
| 5 | Server-Side Rendering | HIGH | Hydration, prerendering |
|
||||
| 6 | Template Optimization | MEDIUM | Control flow, pipes |
|
||||
| 7 | State Management | MEDIUM | Signal patterns, selectors |
|
||||
| 8 | Memory Management | LOW-MEDIUM | Cleanup, subscriptions |
|
||||
|
||||
---
|
||||
|
||||
## 1. Change Detection (CRITICAL)
|
||||
|
||||
### Use OnPush Change Detection
|
||||
|
||||
```typescript
|
||||
// CORRECT - OnPush with Signals
|
||||
@Component({
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `<div>{{ count() }}</div>`,
|
||||
})
|
||||
export class CounterComponent {
|
||||
count = signal(0);
|
||||
}
|
||||
|
||||
// WRONG - Default change detection
|
||||
@Component({
|
||||
template: `<div>{{ count }}</div>`, // Checked every cycle
|
||||
})
|
||||
export class CounterComponent {
|
||||
count = 0;
|
||||
}
|
||||
```
|
||||
|
||||
### Prefer Signals Over Mutable Properties
|
||||
|
||||
```typescript
|
||||
// CORRECT - Signals trigger precise updates
|
||||
@Component({
|
||||
template: `
|
||||
<h1>{{ title() }}</h1>
|
||||
<p>Count: {{ count() }}</p>
|
||||
`,
|
||||
})
|
||||
export class DashboardComponent {
|
||||
title = signal("Dashboard");
|
||||
count = signal(0);
|
||||
}
|
||||
|
||||
// WRONG - Mutable properties require zone.js checks
|
||||
@Component({
|
||||
template: `
|
||||
<h1>{{ title }}</h1>
|
||||
<p>Count: {{ count }}</p>
|
||||
`,
|
||||
})
|
||||
export class DashboardComponent {
|
||||
title = "Dashboard";
|
||||
count = 0;
|
||||
}
|
||||
```
|
||||
|
||||
### Enable Zoneless for New Projects
|
||||
|
||||
```typescript
|
||||
// main.ts - Zoneless Angular (v20+)
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
});
|
||||
```
|
||||
|
||||
**Benefits:**
|
||||
|
||||
- No zone.js patches on async APIs
|
||||
- Smaller bundle (~15KB savings)
|
||||
- Clean stack traces for debugging
|
||||
- Better micro-frontend compatibility
|
||||
|
||||
---
|
||||
|
||||
## 2. Async Operations & Waterfalls (CRITICAL)
|
||||
|
||||
### Eliminate Sequential Data Fetching
|
||||
|
||||
```typescript
|
||||
// WRONG - Nested subscriptions create waterfalls
|
||||
this.route.params.subscribe((params) => {
|
||||
// 1. Wait for params
|
||||
this.userService.getUser(params.id).subscribe((user) => {
|
||||
// 2. Wait for user
|
||||
this.postsService.getPosts(user.id).subscribe((posts) => {
|
||||
// 3. Wait for posts
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// CORRECT - Parallel execution with forkJoin
|
||||
forkJoin({
|
||||
user: this.userService.getUser(id),
|
||||
posts: this.postsService.getPosts(id),
|
||||
}).subscribe((data) => {
|
||||
// Fetched in parallel
|
||||
});
|
||||
|
||||
// CORRECT - Flatten dependent calls with switchMap
|
||||
this.route.params
|
||||
.pipe(
|
||||
map((p) => p.id),
|
||||
switchMap((id) => this.userService.getUser(id)),
|
||||
)
|
||||
.subscribe();
|
||||
```
|
||||
|
||||
### Avoid Client-Side Waterfalls in SSR
|
||||
|
||||
```typescript
|
||||
// CORRECT - Use resolvers or blocking hydration for critical data
|
||||
export const route: Route = {
|
||||
path: "profile/:id",
|
||||
resolve: { data: profileResolver }, // Fetched on server before navigation
|
||||
component: ProfileComponent,
|
||||
};
|
||||
|
||||
// WRONG - Component fetches data on init
|
||||
class ProfileComponent implements OnInit {
|
||||
ngOnInit() {
|
||||
// Starts ONLY after JS loads and component renders
|
||||
this.http.get("/api/profile").subscribe();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Bundle Optimization (CRITICAL)
|
||||
|
||||
### Lazy Load Routes
|
||||
|
||||
```typescript
|
||||
// CORRECT - Lazy load feature routes
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: "admin",
|
||||
loadChildren: () =>
|
||||
import("./admin/admin.routes").then((m) => m.ADMIN_ROUTES),
|
||||
},
|
||||
{
|
||||
path: "dashboard",
|
||||
loadComponent: () =>
|
||||
import("./dashboard/dashboard.component").then(
|
||||
(m) => m.DashboardComponent,
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// WRONG - Eager loading everything
|
||||
import { AdminModule } from "./admin/admin.module";
|
||||
export const routes: Routes = [
|
||||
{ path: "admin", component: AdminComponent }, // In main bundle
|
||||
];
|
||||
```
|
||||
|
||||
### Use @defer for Heavy Components
|
||||
|
||||
```html
|
||||
<!-- CORRECT - Heavy component loads on demand -->
|
||||
@defer (on viewport) {
|
||||
<app-analytics-chart [data]="data()" />
|
||||
} @placeholder {
|
||||
<div class="chart-skeleton"></div>
|
||||
}
|
||||
|
||||
<!-- WRONG - Heavy component in initial bundle -->
|
||||
<app-analytics-chart [data]="data()" />
|
||||
```
|
||||
|
||||
### Avoid Barrel File Re-exports
|
||||
|
||||
```typescript
|
||||
// WRONG - Imports entire barrel, breaks tree-shaking
|
||||
import { Button, Modal, Table } from "@shared/components";
|
||||
|
||||
// CORRECT - Direct imports
|
||||
import { Button } from "@shared/components/button/button.component";
|
||||
import { Modal } from "@shared/components/modal/modal.component";
|
||||
```
|
||||
|
||||
### Dynamic Import Third-Party Libraries
|
||||
|
||||
```typescript
|
||||
// CORRECT - Load heavy library on demand
|
||||
async loadChart() {
|
||||
const { Chart } = await import('chart.js');
|
||||
this.chart = new Chart(this.canvas, config);
|
||||
}
|
||||
|
||||
// WRONG - Bundle Chart.js in main chunk
|
||||
import { Chart } from 'chart.js';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Rendering Performance (HIGH)
|
||||
|
||||
### Always Use trackBy with @for
|
||||
|
||||
```html
|
||||
<!-- CORRECT - Efficient DOM updates -->
|
||||
@for (item of items(); track item.id) {
|
||||
<app-item-card [item]="item" />
|
||||
}
|
||||
|
||||
<!-- WRONG - Entire list re-renders on any change -->
|
||||
@for (item of items(); track $index) {
|
||||
<app-item-card [item]="item" />
|
||||
}
|
||||
```
|
||||
|
||||
### Use Virtual Scrolling for Large Lists
|
||||
|
||||
```typescript
|
||||
import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
|
||||
|
||||
@Component({
|
||||
imports: [CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll],
|
||||
template: `
|
||||
<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
|
||||
<div *cdkVirtualFor="let item of items" class="item">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</cdk-virtual-scroll-viewport>
|
||||
`
|
||||
})
|
||||
```
|
||||
|
||||
### Prefer Pure Pipes Over Methods
|
||||
|
||||
```typescript
|
||||
// CORRECT - Pure pipe, memoized
|
||||
@Pipe({ name: 'filterActive', standalone: true, pure: true })
|
||||
export class FilterActivePipe implements PipeTransform {
|
||||
transform(items: Item[]): Item[] {
|
||||
return items.filter(i => i.active);
|
||||
}
|
||||
}
|
||||
|
||||
// Template
|
||||
@for (item of items() | filterActive; track item.id) { ... }
|
||||
|
||||
// WRONG - Method called every change detection
|
||||
@for (item of getActiveItems(); track item.id) { ... }
|
||||
```
|
||||
|
||||
### Use computed() for Derived Data
|
||||
|
||||
```typescript
|
||||
// CORRECT - Computed, cached until dependencies change
|
||||
export class ProductStore {
|
||||
products = signal<Product[]>([]);
|
||||
filter = signal('');
|
||||
|
||||
filteredProducts = computed(() => {
|
||||
const f = this.filter().toLowerCase();
|
||||
return this.products().filter(p =>
|
||||
p.name.toLowerCase().includes(f)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// WRONG - Recalculates every access
|
||||
get filteredProducts() {
|
||||
return this.products.filter(p =>
|
||||
p.name.toLowerCase().includes(this.filter)
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Server-Side Rendering (HIGH)
|
||||
|
||||
### Configure Incremental Hydration
|
||||
|
||||
```typescript
|
||||
// app.config.ts
|
||||
import {
|
||||
provideClientHydration,
|
||||
withIncrementalHydration,
|
||||
} from "@angular/platform-browser";
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideClientHydration(withIncrementalHydration(), withEventReplay()),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Defer Non-Critical Content
|
||||
|
||||
```html
|
||||
<!-- Critical above-the-fold content -->
|
||||
<app-header />
|
||||
<app-hero />
|
||||
|
||||
<!-- Below-fold deferred with hydration triggers -->
|
||||
@defer (hydrate on viewport) {
|
||||
<app-product-grid />
|
||||
} @defer (hydrate on interaction) {
|
||||
<app-chat-widget />
|
||||
}
|
||||
```
|
||||
|
||||
### Use TransferState for SSR Data
|
||||
|
||||
```typescript
|
||||
@Injectable({ providedIn: "root" })
|
||||
export class DataService {
|
||||
private http = inject(HttpClient);
|
||||
private transferState = inject(TransferState);
|
||||
private platformId = inject(PLATFORM_ID);
|
||||
|
||||
getData(key: string): Observable<Data> {
|
||||
const stateKey = makeStateKey<Data>(key);
|
||||
|
||||
if (isPlatformBrowser(this.platformId)) {
|
||||
const cached = this.transferState.get(stateKey, null);
|
||||
if (cached) {
|
||||
this.transferState.remove(stateKey);
|
||||
return of(cached);
|
||||
}
|
||||
}
|
||||
|
||||
return this.http.get<Data>(`/api/${key}`).pipe(
|
||||
tap((data) => {
|
||||
if (isPlatformServer(this.platformId)) {
|
||||
this.transferState.set(stateKey, data);
|
||||
}
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Template Optimization (MEDIUM)
|
||||
|
||||
### Use New Control Flow Syntax
|
||||
|
||||
```html
|
||||
<!-- CORRECT - New control flow (faster, smaller bundle) -->
|
||||
@if (user()) {
|
||||
<span>{{ user()!.name }}</span>
|
||||
} @else {
|
||||
<span>Guest</span>
|
||||
} @for (item of items(); track item.id) {
|
||||
<app-item [item]="item" />
|
||||
} @empty {
|
||||
<p>No items</p>
|
||||
}
|
||||
|
||||
<!-- WRONG - Legacy structural directives -->
|
||||
<span *ngIf="user; else guest">{{ user.name }}</span>
|
||||
<ng-template #guest><span>Guest</span></ng-template>
|
||||
```
|
||||
|
||||
### Avoid Complex Template Expressions
|
||||
|
||||
```typescript
|
||||
// CORRECT - Precompute in component
|
||||
class Component {
|
||||
items = signal<Item[]>([]);
|
||||
sortedItems = computed(() =>
|
||||
[...this.items()].sort((a, b) => a.name.localeCompare(b.name))
|
||||
);
|
||||
}
|
||||
|
||||
// Template
|
||||
@for (item of sortedItems(); track item.id) { ... }
|
||||
|
||||
// WRONG - Sorting in template every render
|
||||
@for (item of items() | sort:'name'; track item.id) { ... }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. State Management (MEDIUM)
|
||||
|
||||
### Use Selectors to Prevent Re-renders
|
||||
|
||||
```typescript
|
||||
// CORRECT - Selective subscription
|
||||
@Component({
|
||||
template: `<span>{{ userName() }}</span>`,
|
||||
})
|
||||
class HeaderComponent {
|
||||
private store = inject(Store);
|
||||
// Only re-renders when userName changes
|
||||
userName = this.store.selectSignal(selectUserName);
|
||||
}
|
||||
|
||||
// WRONG - Subscribing to entire state
|
||||
@Component({
|
||||
template: `<span>{{ state().user.name }}</span>`,
|
||||
})
|
||||
class HeaderComponent {
|
||||
private store = inject(Store);
|
||||
// Re-renders on ANY state change
|
||||
state = toSignal(this.store);
|
||||
}
|
||||
```
|
||||
|
||||
### Colocate State with Features
|
||||
|
||||
```typescript
|
||||
// CORRECT - Feature-scoped store
|
||||
@Injectable() // NOT providedIn: 'root'
|
||||
export class ProductStore { ... }
|
||||
|
||||
@Component({
|
||||
providers: [ProductStore], // Scoped to component tree
|
||||
})
|
||||
export class ProductPageComponent {
|
||||
store = inject(ProductStore);
|
||||
}
|
||||
|
||||
// WRONG - Everything in global store
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class GlobalStore {
|
||||
// Contains ALL app state - hard to tree-shake
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Memory Management (LOW-MEDIUM)
|
||||
|
||||
### Use takeUntilDestroyed for Subscriptions
|
||||
|
||||
```typescript
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
|
||||
@Component({...})
|
||||
export class DataComponent {
|
||||
private destroyRef = inject(DestroyRef);
|
||||
|
||||
constructor() {
|
||||
this.data$.pipe(
|
||||
takeUntilDestroyed(this.destroyRef)
|
||||
).subscribe(data => this.process(data));
|
||||
}
|
||||
}
|
||||
|
||||
// WRONG - Manual subscription management
|
||||
export class DataComponent implements OnDestroy {
|
||||
private subscription!: Subscription;
|
||||
|
||||
ngOnInit() {
|
||||
this.subscription = this.data$.subscribe(...);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscription.unsubscribe(); // Easy to forget
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Prefer Signals Over Subscriptions
|
||||
|
||||
```typescript
|
||||
// CORRECT - No subscription needed
|
||||
@Component({
|
||||
template: `<div>{{ data().name }}</div>`,
|
||||
})
|
||||
export class Component {
|
||||
data = toSignal(this.service.data$, { initialValue: null });
|
||||
}
|
||||
|
||||
// WRONG - Manual subscription
|
||||
@Component({
|
||||
template: `<div>{{ data?.name }}</div>`,
|
||||
})
|
||||
export class Component implements OnInit, OnDestroy {
|
||||
data: Data | null = null;
|
||||
private sub!: Subscription;
|
||||
|
||||
ngOnInit() {
|
||||
this.sub = this.service.data$.subscribe((d) => (this.data = d));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.sub.unsubscribe();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference Checklist
|
||||
|
||||
### New Component
|
||||
|
||||
- [ ] `changeDetection: ChangeDetectionStrategy.OnPush`
|
||||
- [ ] `standalone: true`
|
||||
- [ ] Signals for state (`signal()`, `input()`, `output()`)
|
||||
- [ ] `inject()` for dependencies
|
||||
- [ ] `@for` with `track` expression
|
||||
|
||||
### Performance Review
|
||||
|
||||
- [ ] No methods in templates (use pipes or computed)
|
||||
- [ ] Large lists virtualized
|
||||
- [ ] Heavy components deferred
|
||||
- [ ] Routes lazy-loaded
|
||||
- [ ] Third-party libs dynamically imported
|
||||
|
||||
### SSR Check
|
||||
|
||||
- [ ] Hydration configured
|
||||
- [ ] Critical content renders first
|
||||
- [ ] Non-critical content uses `@defer (hydrate on ...)`
|
||||
- [ ] TransferState for server-fetched data
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- [Angular Performance Guide](https://angular.dev/best-practices/performance)
|
||||
- [Zoneless Angular](https://angular.dev/guide/experimental/zoneless)
|
||||
- [Angular SSR Guide](https://angular.dev/guide/ssr)
|
||||
- [Change Detection Deep Dive](https://angular.dev/guide/change-detection)
|
||||
13
skills/angular-best-practices/metadata.json
Normal file
13
skills/angular-best-practices/metadata.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"organization": "Antigravity Awesome Skills",
|
||||
"date": "February 2026",
|
||||
"abstract": "Performance optimization and best practices guide for Angular applications designed for AI agents and LLMs. Covers change detection strategies (OnPush, Signals, Zoneless), avoiding async waterfalls, bundle optimization with lazy loading and @defer, rendering performance, SSR/hydration patterns, and memory management. Prioritized by impact from critical to incremental improvements.",
|
||||
"references": [
|
||||
"https://angular.dev/best-practices",
|
||||
"https://angular.dev/guide/performance",
|
||||
"https://angular.dev/guide/zoneless",
|
||||
"https://angular.dev/guide/ssr",
|
||||
"https://web.dev/performance"
|
||||
]
|
||||
}
|
||||
41
skills/angular-state-management/README.md
Normal file
41
skills/angular-state-management/README.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# Angular State Management
|
||||
|
||||
Complete state management patterns for Angular applications optimized for AI agents and LLMs.
|
||||
|
||||
## Overview
|
||||
|
||||
This skill provides decision frameworks and implementation patterns for:
|
||||
|
||||
- **Signal-based Services** - Lightweight state for shared data
|
||||
- **NgRx SignalStore** - Feature-scoped state with computed values
|
||||
- **NgRx Store** - Enterprise-scale global state management
|
||||
- **RxJS ComponentStore** - Reactive component-level state
|
||||
- **Forms State** - Reactive and template-driven form patterns
|
||||
|
||||
## Structure
|
||||
|
||||
The `SKILL.md` file is organized into:
|
||||
|
||||
1. **State Categories** - Local, shared, global, server, URL, and form state
|
||||
2. **Selection Criteria** - Decision trees for choosing the right solution
|
||||
3. **Implementation Patterns** - Complete examples for each approach
|
||||
4. **Migration Guides** - Moving from BehaviorSubject to Signals
|
||||
5. **Bridging Patterns** - Integrating Signals with RxJS
|
||||
|
||||
## When to Use Each Pattern
|
||||
|
||||
- **Signal Service**: Shared UI state (theme, user preferences)
|
||||
- **NgRx SignalStore**: Feature state with computed values
|
||||
- **NgRx Store**: Complex cross-feature dependencies
|
||||
- **ComponentStore**: Component-scoped async operations
|
||||
- **Reactive Forms**: Form state with validation
|
||||
|
||||
## Version
|
||||
|
||||
Current version: 1.0.0 (February 2026)
|
||||
|
||||
## References
|
||||
|
||||
- [Angular Signals](https://angular.dev/guide/signals)
|
||||
- [NgRx](https://ngrx.io)
|
||||
- [NgRx SignalStore](https://ngrx.io/guide/signals)
|
||||
634
skills/angular-state-management/SKILL.md
Normal file
634
skills/angular-state-management/SKILL.md
Normal file
@@ -0,0 +1,634 @@
|
||||
---
|
||||
name: angular-state-management
|
||||
description: Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
|
||||
risk: safe
|
||||
source: self
|
||||
---
|
||||
|
||||
# Angular State Management
|
||||
|
||||
Comprehensive guide to modern Angular state management patterns, from Signal-based local state to global stores and server state synchronization.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- Setting up global state management in Angular
|
||||
- Choosing between Signals, NgRx, or Akita
|
||||
- Managing component-level stores
|
||||
- Implementing optimistic updates
|
||||
- Debugging state-related issues
|
||||
- Migrating from legacy state patterns
|
||||
|
||||
## Do Not Use This Skill When
|
||||
|
||||
- The task is unrelated to Angular state management
|
||||
- You need React state management → use `react-state-management`
|
||||
|
||||
---
|
||||
|
||||
## Core Concepts
|
||||
|
||||
### State Categories
|
||||
|
||||
| Type | Description | Solutions |
|
||||
| ---------------- | ---------------------------- | --------------------- |
|
||||
| **Local State** | Component-specific, UI state | Signals, `signal()` |
|
||||
| **Shared State** | Between related components | Signal services |
|
||||
| **Global State** | App-wide, complex | NgRx, Akita, Elf |
|
||||
| **Server State** | Remote data, caching | NgRx Query, RxAngular |
|
||||
| **URL State** | Route parameters | ActivatedRoute |
|
||||
| **Form State** | Input values, validation | Reactive Forms |
|
||||
|
||||
### Selection Criteria
|
||||
|
||||
```
|
||||
Small app, simple state → Signal Services
|
||||
Medium app, moderate state → Component Stores
|
||||
Large app, complex state → NgRx Store
|
||||
Heavy server interaction → NgRx Query + Signal Services
|
||||
Real-time updates → RxAngular + Signals
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Start: Signal-Based State
|
||||
|
||||
### Pattern 1: Simple Signal Service
|
||||
|
||||
```typescript
|
||||
// services/counter.service.ts
|
||||
import { Injectable, signal, computed } from "@angular/core";
|
||||
|
||||
@Injectable({ providedIn: "root" })
|
||||
export class CounterService {
|
||||
// Private writable signals
|
||||
private _count = signal(0);
|
||||
|
||||
// Public read-only
|
||||
readonly count = this._count.asReadonly();
|
||||
readonly doubled = computed(() => this._count() * 2);
|
||||
readonly isPositive = computed(() => this._count() > 0);
|
||||
|
||||
increment() {
|
||||
this._count.update((v) => v + 1);
|
||||
}
|
||||
|
||||
decrement() {
|
||||
this._count.update((v) => v - 1);
|
||||
}
|
||||
|
||||
reset() {
|
||||
this._count.set(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Usage in component
|
||||
@Component({
|
||||
template: `
|
||||
<p>Count: {{ counter.count() }}</p>
|
||||
<p>Doubled: {{ counter.doubled() }}</p>
|
||||
<button (click)="counter.increment()">+</button>
|
||||
`,
|
||||
})
|
||||
export class CounterComponent {
|
||||
counter = inject(CounterService);
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 2: Feature Signal Store
|
||||
|
||||
```typescript
|
||||
// stores/user.store.ts
|
||||
import { Injectable, signal, computed, inject } from "@angular/core";
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { toSignal } from "@angular/core/rxjs-interop";
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
interface UserState {
|
||||
user: User | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: "root" })
|
||||
export class UserStore {
|
||||
private http = inject(HttpClient);
|
||||
|
||||
// State signals
|
||||
private _user = signal<User | null>(null);
|
||||
private _loading = signal(false);
|
||||
private _error = signal<string | null>(null);
|
||||
|
||||
// Selectors (read-only computed)
|
||||
readonly user = computed(() => this._user());
|
||||
readonly loading = computed(() => this._loading());
|
||||
readonly error = computed(() => this._error());
|
||||
readonly isAuthenticated = computed(() => this._user() !== null);
|
||||
readonly displayName = computed(() => this._user()?.name ?? "Guest");
|
||||
|
||||
// Actions
|
||||
async loadUser(id: string) {
|
||||
this._loading.set(true);
|
||||
this._error.set(null);
|
||||
|
||||
try {
|
||||
const user = await fetch(`/api/users/${id}`).then((r) => r.json());
|
||||
this._user.set(user);
|
||||
} catch (e) {
|
||||
this._error.set("Failed to load user");
|
||||
} finally {
|
||||
this._loading.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
updateUser(updates: Partial<User>) {
|
||||
this._user.update((user) => (user ? { ...user, ...updates } : null));
|
||||
}
|
||||
|
||||
logout() {
|
||||
this._user.set(null);
|
||||
this._error.set(null);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 3: SignalStore (NgRx Signals)
|
||||
|
||||
```typescript
|
||||
// stores/products.store.ts
|
||||
import {
|
||||
signalStore,
|
||||
withState,
|
||||
withMethods,
|
||||
withComputed,
|
||||
patchState,
|
||||
} from "@ngrx/signals";
|
||||
import { inject } from "@angular/core";
|
||||
import { ProductService } from "./product.service";
|
||||
|
||||
interface ProductState {
|
||||
products: Product[];
|
||||
loading: boolean;
|
||||
filter: string;
|
||||
}
|
||||
|
||||
const initialState: ProductState = {
|
||||
products: [],
|
||||
loading: false,
|
||||
filter: "",
|
||||
};
|
||||
|
||||
export const ProductStore = signalStore(
|
||||
{ providedIn: "root" },
|
||||
|
||||
withState(initialState),
|
||||
|
||||
withComputed((store) => ({
|
||||
filteredProducts: computed(() => {
|
||||
const filter = store.filter().toLowerCase();
|
||||
return store
|
||||
.products()
|
||||
.filter((p) => p.name.toLowerCase().includes(filter));
|
||||
}),
|
||||
totalCount: computed(() => store.products().length),
|
||||
})),
|
||||
|
||||
withMethods((store, productService = inject(ProductService)) => ({
|
||||
async loadProducts() {
|
||||
patchState(store, { loading: true });
|
||||
|
||||
try {
|
||||
const products = await productService.getAll();
|
||||
patchState(store, { products, loading: false });
|
||||
} catch {
|
||||
patchState(store, { loading: false });
|
||||
}
|
||||
},
|
||||
|
||||
setFilter(filter: string) {
|
||||
patchState(store, { filter });
|
||||
},
|
||||
|
||||
addProduct(product: Product) {
|
||||
patchState(store, ({ products }) => ({
|
||||
products: [...products, product],
|
||||
}));
|
||||
},
|
||||
})),
|
||||
);
|
||||
|
||||
// Usage
|
||||
@Component({
|
||||
template: `
|
||||
<input (input)="store.setFilter($event.target.value)" />
|
||||
@if (store.loading()) {
|
||||
<app-spinner />
|
||||
} @else {
|
||||
@for (product of store.filteredProducts(); track product.id) {
|
||||
<app-product-card [product]="product" />
|
||||
}
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class ProductListComponent {
|
||||
store = inject(ProductStore);
|
||||
|
||||
ngOnInit() {
|
||||
this.store.loadProducts();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## NgRx Store (Global State)
|
||||
|
||||
### Setup
|
||||
|
||||
```typescript
|
||||
// store/app.state.ts
|
||||
import { ActionReducerMap } from "@ngrx/store";
|
||||
|
||||
export interface AppState {
|
||||
user: UserState;
|
||||
cart: CartState;
|
||||
}
|
||||
|
||||
export const reducers: ActionReducerMap<AppState> = {
|
||||
user: userReducer,
|
||||
cart: cartReducer,
|
||||
};
|
||||
|
||||
// main.ts
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [
|
||||
provideStore(reducers),
|
||||
provideEffects([UserEffects, CartEffects]),
|
||||
provideStoreDevtools({ maxAge: 25 }),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### Feature Slice Pattern
|
||||
|
||||
```typescript
|
||||
// store/user/user.actions.ts
|
||||
import { createActionGroup, props, emptyProps } from "@ngrx/store";
|
||||
|
||||
export const UserActions = createActionGroup({
|
||||
source: "User",
|
||||
events: {
|
||||
"Load User": props<{ userId: string }>(),
|
||||
"Load User Success": props<{ user: User }>(),
|
||||
"Load User Failure": props<{ error: string }>(),
|
||||
"Update User": props<{ updates: Partial<User> }>(),
|
||||
Logout: emptyProps(),
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
```typescript
|
||||
// store/user/user.reducer.ts
|
||||
import { createReducer, on } from "@ngrx/store";
|
||||
import { UserActions } from "./user.actions";
|
||||
|
||||
export interface UserState {
|
||||
user: User | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
const initialState: UserState = {
|
||||
user: null,
|
||||
loading: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
export const userReducer = createReducer(
|
||||
initialState,
|
||||
|
||||
on(UserActions.loadUser, (state) => ({
|
||||
...state,
|
||||
loading: true,
|
||||
error: null,
|
||||
})),
|
||||
|
||||
on(UserActions.loadUserSuccess, (state, { user }) => ({
|
||||
...state,
|
||||
user,
|
||||
loading: false,
|
||||
})),
|
||||
|
||||
on(UserActions.loadUserFailure, (state, { error }) => ({
|
||||
...state,
|
||||
loading: false,
|
||||
error,
|
||||
})),
|
||||
|
||||
on(UserActions.logout, () => initialState),
|
||||
);
|
||||
```
|
||||
|
||||
```typescript
|
||||
// store/user/user.selectors.ts
|
||||
import { createFeatureSelector, createSelector } from "@ngrx/store";
|
||||
import { UserState } from "./user.reducer";
|
||||
|
||||
export const selectUserState = createFeatureSelector<UserState>("user");
|
||||
|
||||
export const selectUser = createSelector(
|
||||
selectUserState,
|
||||
(state) => state.user,
|
||||
);
|
||||
|
||||
export const selectUserLoading = createSelector(
|
||||
selectUserState,
|
||||
(state) => state.loading,
|
||||
);
|
||||
|
||||
export const selectIsAuthenticated = createSelector(
|
||||
selectUser,
|
||||
(user) => user !== null,
|
||||
);
|
||||
```
|
||||
|
||||
```typescript
|
||||
// store/user/user.effects.ts
|
||||
import { Injectable, inject } from "@angular/core";
|
||||
import { Actions, createEffect, ofType } from "@ngrx/effects";
|
||||
import { switchMap, map, catchError, of } from "rxjs";
|
||||
|
||||
@Injectable()
|
||||
export class UserEffects {
|
||||
private actions$ = inject(Actions);
|
||||
private userService = inject(UserService);
|
||||
|
||||
loadUser$ = createEffect(() =>
|
||||
this.actions$.pipe(
|
||||
ofType(UserActions.loadUser),
|
||||
switchMap(({ userId }) =>
|
||||
this.userService.getUser(userId).pipe(
|
||||
map((user) => UserActions.loadUserSuccess({ user })),
|
||||
catchError((error) =>
|
||||
of(UserActions.loadUserFailure({ error: error.message })),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Component Usage
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
template: `
|
||||
@if (loading()) {
|
||||
<app-spinner />
|
||||
} @else if (user(); as user) {
|
||||
<h1>Welcome, {{ user.name }}</h1>
|
||||
<button (click)="logout()">Logout</button>
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class HeaderComponent {
|
||||
private store = inject(Store);
|
||||
|
||||
user = this.store.selectSignal(selectUser);
|
||||
loading = this.store.selectSignal(selectUserLoading);
|
||||
|
||||
logout() {
|
||||
this.store.dispatch(UserActions.logout());
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## RxJS-Based Patterns
|
||||
|
||||
### Component Store (Local Feature State)
|
||||
|
||||
```typescript
|
||||
// stores/todo.store.ts
|
||||
import { Injectable } from "@angular/core";
|
||||
import { ComponentStore } from "@ngrx/component-store";
|
||||
import { switchMap, tap, catchError, EMPTY } from "rxjs";
|
||||
|
||||
interface TodoState {
|
||||
todos: Todo[];
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class TodoStore extends ComponentStore<TodoState> {
|
||||
constructor(private todoService: TodoService) {
|
||||
super({ todos: [], loading: false });
|
||||
}
|
||||
|
||||
// Selectors
|
||||
readonly todos$ = this.select((state) => state.todos);
|
||||
readonly loading$ = this.select((state) => state.loading);
|
||||
readonly completedCount$ = this.select(
|
||||
this.todos$,
|
||||
(todos) => todos.filter((t) => t.completed).length,
|
||||
);
|
||||
|
||||
// Updaters
|
||||
readonly addTodo = this.updater((state, todo: Todo) => ({
|
||||
...state,
|
||||
todos: [...state.todos, todo],
|
||||
}));
|
||||
|
||||
readonly toggleTodo = this.updater((state, id: string) => ({
|
||||
...state,
|
||||
todos: state.todos.map((t) =>
|
||||
t.id === id ? { ...t, completed: !t.completed } : t,
|
||||
),
|
||||
}));
|
||||
|
||||
// Effects
|
||||
readonly loadTodos = this.effect<void>((trigger$) =>
|
||||
trigger$.pipe(
|
||||
tap(() => this.patchState({ loading: true })),
|
||||
switchMap(() =>
|
||||
this.todoService.getAll().pipe(
|
||||
tap({
|
||||
next: (todos) => this.patchState({ todos, loading: false }),
|
||||
error: () => this.patchState({ loading: false }),
|
||||
}),
|
||||
catchError(() => EMPTY),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Server State with Signals
|
||||
|
||||
### HTTP + Signals Pattern
|
||||
|
||||
```typescript
|
||||
// services/api.service.ts
|
||||
import { Injectable, signal, inject } from "@angular/core";
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { toSignal } from "@angular/core/rxjs-interop";
|
||||
|
||||
interface ApiState<T> {
|
||||
data: T | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: "root" })
|
||||
export class ProductApiService {
|
||||
private http = inject(HttpClient);
|
||||
|
||||
private _state = signal<ApiState<Product[]>>({
|
||||
data: null,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
readonly products = computed(() => this._state().data ?? []);
|
||||
readonly loading = computed(() => this._state().loading);
|
||||
readonly error = computed(() => this._state().error);
|
||||
|
||||
async fetchProducts(): Promise<void> {
|
||||
this._state.update((s) => ({ ...s, loading: true, error: null }));
|
||||
|
||||
try {
|
||||
const data = await firstValueFrom(
|
||||
this.http.get<Product[]>("/api/products"),
|
||||
);
|
||||
this._state.update((s) => ({ ...s, data, loading: false }));
|
||||
} catch (e) {
|
||||
this._state.update((s) => ({
|
||||
...s,
|
||||
loading: false,
|
||||
error: "Failed to fetch products",
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// Optimistic update
|
||||
async deleteProduct(id: string): Promise<void> {
|
||||
const previousData = this._state().data;
|
||||
|
||||
// Optimistically remove
|
||||
this._state.update((s) => ({
|
||||
...s,
|
||||
data: s.data?.filter((p) => p.id !== id) ?? null,
|
||||
}));
|
||||
|
||||
try {
|
||||
await firstValueFrom(this.http.delete(`/api/products/${id}`));
|
||||
} catch {
|
||||
// Rollback on error
|
||||
this._state.update((s) => ({ ...s, data: previousData }));
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Do's
|
||||
|
||||
| Practice | Why |
|
||||
| ---------------------------------- | ---------------------------------- |
|
||||
| Use Signals for local state | Simple, reactive, no subscriptions |
|
||||
| Use `computed()` for derived data | Auto-updates, memoized |
|
||||
| Colocate state with feature | Easier to maintain |
|
||||
| Use NgRx for complex flows | Actions, effects, devtools |
|
||||
| Prefer `inject()` over constructor | Cleaner, works in factories |
|
||||
|
||||
### Don'ts
|
||||
|
||||
| Anti-Pattern | Instead |
|
||||
| --------------------------------- | ----------------------------------------------------- |
|
||||
| Store derived data | Use `computed()` |
|
||||
| Mutate signals directly | Use `set()` or `update()` |
|
||||
| Over-globalize state | Keep local when possible |
|
||||
| Mix RxJS and Signals chaotically | Choose primary, bridge with `toSignal`/`toObservable` |
|
||||
| Subscribe in components for state | Use template with signals |
|
||||
|
||||
---
|
||||
|
||||
## Migration Path
|
||||
|
||||
### From BehaviorSubject to Signals
|
||||
|
||||
```typescript
|
||||
// Before: RxJS-based
|
||||
@Injectable({ providedIn: "root" })
|
||||
export class OldUserService {
|
||||
private userSubject = new BehaviorSubject<User | null>(null);
|
||||
user$ = this.userSubject.asObservable();
|
||||
|
||||
setUser(user: User) {
|
||||
this.userSubject.next(user);
|
||||
}
|
||||
}
|
||||
|
||||
// After: Signal-based
|
||||
@Injectable({ providedIn: "root" })
|
||||
export class UserService {
|
||||
private _user = signal<User | null>(null);
|
||||
readonly user = this._user.asReadonly();
|
||||
|
||||
setUser(user: User) {
|
||||
this._user.set(user);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Bridging Signals and RxJS
|
||||
|
||||
```typescript
|
||||
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
|
||||
|
||||
// Observable → Signal
|
||||
@Component({...})
|
||||
export class ExampleComponent {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
// Convert Observable to Signal
|
||||
userId = toSignal(
|
||||
this.route.params.pipe(map(p => p['id'])),
|
||||
{ initialValue: '' }
|
||||
);
|
||||
}
|
||||
|
||||
// Signal → Observable
|
||||
export class DataService {
|
||||
private filter = signal('');
|
||||
|
||||
// Convert Signal to Observable
|
||||
filter$ = toObservable(this.filter);
|
||||
|
||||
filteredData$ = this.filter$.pipe(
|
||||
debounceTime(300),
|
||||
switchMap(filter => this.http.get(`/api/data?q=${filter}`))
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- [Angular Signals Guide](https://angular.dev/guide/signals)
|
||||
- [NgRx Documentation](https://ngrx.io/)
|
||||
- [NgRx SignalStore](https://ngrx.io/guide/signals)
|
||||
- [RxAngular](https://www.rx-angular.io/)
|
||||
13
skills/angular-state-management/metadata.json
Normal file
13
skills/angular-state-management/metadata.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"organization": "Antigravity Awesome Skills",
|
||||
"date": "February 2026",
|
||||
"abstract": "Complete state management guide for Angular applications designed for AI agents and LLMs. Covers Signal-based services, NgRx for global state, RxJS patterns, and component stores. Includes decision trees for choosing the right solution, migration patterns from BehaviorSubject to Signals, and strategies for bridging Signals with RxJS observables.",
|
||||
"references": [
|
||||
"https://angular.dev/guide/signals",
|
||||
"https://ngrx.io",
|
||||
"https://ngrx.io/guide/signals",
|
||||
"https://www.rx-angular.io",
|
||||
"https://github.com/ngrx/platform"
|
||||
]
|
||||
}
|
||||
55
skills/angular-ui-patterns/README.md
Normal file
55
skills/angular-ui-patterns/README.md
Normal file
@@ -0,0 +1,55 @@
|
||||
# Angular UI Patterns
|
||||
|
||||
Modern UI patterns for building robust Angular applications optimized for AI agents and LLMs.
|
||||
|
||||
## Overview
|
||||
|
||||
This skill covers essential UI patterns for:
|
||||
|
||||
- **Loading States** - Skeleton vs spinner decision trees
|
||||
- **Error Handling** - Error boundary hierarchy and recovery
|
||||
- **Progressive Disclosure** - Using `@defer` for lazy rendering
|
||||
- **Data Display** - Handling empty, loading, and error states
|
||||
- **Form Patterns** - Submission states and validation feedback
|
||||
- **Dialog/Modal Patterns** - Proper dialog lifecycle management
|
||||
|
||||
## Core Principles
|
||||
|
||||
1. **Never show stale UI** - Only show loading when no data exists
|
||||
2. **Surface all errors** - Never silently fail
|
||||
3. **Optimistic updates** - Update UI before server confirms
|
||||
4. **Progressive disclosure** - Use `@defer` to load non-critical content
|
||||
5. **Graceful degradation** - Fallback for failed features
|
||||
|
||||
## Structure
|
||||
|
||||
The `SKILL.md` file includes:
|
||||
|
||||
1. **Golden Rules** - Non-negotiable patterns to follow
|
||||
2. **Decision Trees** - When to use skeleton vs spinner
|
||||
3. **Code Examples** - Correct vs incorrect implementations
|
||||
4. **Anti-patterns** - Common mistakes to avoid
|
||||
|
||||
## Quick Reference
|
||||
|
||||
```html
|
||||
<!-- Angular template pattern for data states -->
|
||||
@if (error()) {
|
||||
<app-error-state [error]="error()" (retry)="load()" />
|
||||
} @else if (loading() && !data()) {
|
||||
<app-skeleton-state />
|
||||
} @else if (!data()?.length) {
|
||||
<app-empty-state message="No items found" />
|
||||
} @else {
|
||||
<app-data-display [data]="data()" />
|
||||
}
|
||||
```
|
||||
|
||||
## Version
|
||||
|
||||
Current version: 1.0.0 (February 2026)
|
||||
|
||||
## References
|
||||
|
||||
- [Angular @defer](https://angular.dev/guide/defer)
|
||||
- [Angular Templates](https://angular.dev/guide/templates)
|
||||
508
skills/angular-ui-patterns/SKILL.md
Normal file
508
skills/angular-ui-patterns/SKILL.md
Normal file
@@ -0,0 +1,508 @@
|
||||
---
|
||||
name: angular-ui-patterns
|
||||
description: Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.
|
||||
risk: safe
|
||||
source: self
|
||||
---
|
||||
|
||||
# Angular UI Patterns
|
||||
|
||||
## Core Principles
|
||||
|
||||
1. **Never show stale UI** - Loading states only when actually loading
|
||||
2. **Always surface errors** - Users must know when something fails
|
||||
3. **Optimistic updates** - Make the UI feel instant
|
||||
4. **Progressive disclosure** - Use `@defer` to show content as available
|
||||
5. **Graceful degradation** - Partial data is better than no data
|
||||
|
||||
---
|
||||
|
||||
## Loading State Patterns
|
||||
|
||||
### The Golden Rule
|
||||
|
||||
**Show loading indicator ONLY when there's no data to display.**
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
template: `
|
||||
@if (error()) {
|
||||
<app-error-state [error]="error()" (retry)="load()" />
|
||||
} @else if (loading() && !items().length) {
|
||||
<app-skeleton-list />
|
||||
} @else if (!items().length) {
|
||||
<app-empty-state message="No items found" />
|
||||
} @else {
|
||||
<app-item-list [items]="items()" />
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class ItemListComponent {
|
||||
private store = inject(ItemStore);
|
||||
|
||||
items = this.store.items;
|
||||
loading = this.store.loading;
|
||||
error = this.store.error;
|
||||
}
|
||||
```
|
||||
|
||||
### Loading State Decision Tree
|
||||
|
||||
```
|
||||
Is there an error?
|
||||
→ Yes: Show error state with retry option
|
||||
→ No: Continue
|
||||
|
||||
Is it loading AND we have no data?
|
||||
→ Yes: Show loading indicator (spinner/skeleton)
|
||||
→ No: Continue
|
||||
|
||||
Do we have data?
|
||||
→ Yes, with items: Show the data
|
||||
→ Yes, but empty: Show empty state
|
||||
→ No: Show loading (fallback)
|
||||
```
|
||||
|
||||
### Skeleton vs Spinner
|
||||
|
||||
| Use Skeleton When | Use Spinner When |
|
||||
| -------------------- | --------------------- |
|
||||
| Known content shape | Unknown content shape |
|
||||
| List/card layouts | Modal actions |
|
||||
| Initial page load | Button submissions |
|
||||
| Content placeholders | Inline operations |
|
||||
|
||||
---
|
||||
|
||||
## Control Flow Patterns
|
||||
|
||||
### @if/@else for Conditional Rendering
|
||||
|
||||
```html
|
||||
@if (user(); as user) {
|
||||
<span>Welcome, {{ user.name }}</span>
|
||||
} @else if (loading()) {
|
||||
<app-spinner size="small" />
|
||||
} @else {
|
||||
<a routerLink="/login">Sign In</a>
|
||||
}
|
||||
```
|
||||
|
||||
### @for with Track
|
||||
|
||||
```html
|
||||
@for (item of items(); track item.id) {
|
||||
<app-item-card [item]="item" (delete)="remove(item.id)" />
|
||||
} @empty {
|
||||
<app-empty-state
|
||||
icon="inbox"
|
||||
message="No items yet"
|
||||
actionLabel="Create Item"
|
||||
(action)="create()"
|
||||
/>
|
||||
}
|
||||
```
|
||||
|
||||
### @defer for Progressive Loading
|
||||
|
||||
```html
|
||||
<!-- Critical content loads immediately -->
|
||||
<app-header />
|
||||
<app-hero-section />
|
||||
|
||||
<!-- Non-critical content deferred -->
|
||||
@defer (on viewport) {
|
||||
<app-comments [postId]="postId()" />
|
||||
} @placeholder {
|
||||
<div class="h-32 bg-gray-100 animate-pulse"></div>
|
||||
} @loading (minimum 200ms) {
|
||||
<app-spinner />
|
||||
} @error {
|
||||
<app-error-state message="Failed to load comments" />
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Error Handling Patterns
|
||||
|
||||
### Error Handling Hierarchy
|
||||
|
||||
```
|
||||
1. Inline error (field-level) → Form validation errors
|
||||
2. Toast notification → Recoverable errors, user can retry
|
||||
3. Error banner → Page-level errors, data still partially usable
|
||||
4. Full error screen → Unrecoverable, needs user action
|
||||
```
|
||||
|
||||
### Always Show Errors
|
||||
|
||||
**CRITICAL: Never swallow errors silently.**
|
||||
|
||||
```typescript
|
||||
// CORRECT - Error always surfaced to user
|
||||
@Component({...})
|
||||
export class CreateItemComponent {
|
||||
private store = inject(ItemStore);
|
||||
private toast = inject(ToastService);
|
||||
|
||||
async create(data: CreateItemDto) {
|
||||
try {
|
||||
await this.store.create(data);
|
||||
this.toast.success('Item created successfully');
|
||||
this.router.navigate(['/items']);
|
||||
} catch (error) {
|
||||
console.error('createItem failed:', error);
|
||||
this.toast.error('Failed to create item. Please try again.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// WRONG - Error silently caught
|
||||
async create(data: CreateItemDto) {
|
||||
try {
|
||||
await this.store.create(data);
|
||||
} catch (error) {
|
||||
console.error(error); // User sees nothing!
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Error State Component Pattern
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
selector: "app-error-state",
|
||||
standalone: true,
|
||||
imports: [NgOptimizedImage],
|
||||
template: `
|
||||
<div class="error-state">
|
||||
<img ngSrc="/assets/error-icon.svg" width="64" height="64" alt="" />
|
||||
<h3>{{ title() }}</h3>
|
||||
<p>{{ message() }}</p>
|
||||
@if (retry.observed) {
|
||||
<button (click)="retry.emit()" class="btn-primary">Try Again</button>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ErrorStateComponent {
|
||||
title = input("Something went wrong");
|
||||
message = input("An unexpected error occurred");
|
||||
retry = output<void>();
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Button State Patterns
|
||||
|
||||
### Button Loading State
|
||||
|
||||
```html
|
||||
<button
|
||||
(click)="handleSubmit()"
|
||||
[disabled]="isSubmitting() || !form.valid"
|
||||
class="btn-primary"
|
||||
>
|
||||
@if (isSubmitting()) {
|
||||
<app-spinner size="small" class="mr-2" />
|
||||
Saving... } @else { Save Changes }
|
||||
</button>
|
||||
```
|
||||
|
||||
### Disable During Operations
|
||||
|
||||
**CRITICAL: Always disable triggers during async operations.**
|
||||
|
||||
```typescript
|
||||
// CORRECT - Button disabled while loading
|
||||
@Component({
|
||||
template: `
|
||||
<button
|
||||
[disabled]="saving()"
|
||||
(click)="save()"
|
||||
>
|
||||
@if (saving()) {
|
||||
<app-spinner size="sm" /> Saving...
|
||||
} @else {
|
||||
Save
|
||||
}
|
||||
</button>
|
||||
`
|
||||
})
|
||||
export class SaveButtonComponent {
|
||||
saving = signal(false);
|
||||
|
||||
async save() {
|
||||
this.saving.set(true);
|
||||
try {
|
||||
await this.service.save();
|
||||
} finally {
|
||||
this.saving.set(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// WRONG - User can click multiple times
|
||||
<button (click)="save()">
|
||||
{{ saving() ? 'Saving...' : 'Save' }}
|
||||
</button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Empty States
|
||||
|
||||
### Empty State Requirements
|
||||
|
||||
Every list/collection MUST have an empty state:
|
||||
|
||||
```html
|
||||
@for (item of items(); track item.id) {
|
||||
<app-item-card [item]="item" />
|
||||
} @empty {
|
||||
<app-empty-state
|
||||
icon="folder-open"
|
||||
title="No items yet"
|
||||
description="Create your first item to get started"
|
||||
actionLabel="Create Item"
|
||||
(action)="openCreateDialog()"
|
||||
/>
|
||||
}
|
||||
```
|
||||
|
||||
### Contextual Empty States
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
selector: "app-empty-state",
|
||||
template: `
|
||||
<div class="empty-state">
|
||||
<span class="icon" [class]="icon()"></span>
|
||||
<h3>{{ title() }}</h3>
|
||||
<p>{{ description() }}</p>
|
||||
@if (actionLabel()) {
|
||||
<button (click)="action.emit()" class="btn-primary">
|
||||
{{ actionLabel() }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class EmptyStateComponent {
|
||||
icon = input("inbox");
|
||||
title = input.required<string>();
|
||||
description = input("");
|
||||
actionLabel = input<string | null>(null);
|
||||
action = output<void>();
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Form Patterns
|
||||
|
||||
### Form with Loading and Validation
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
template: `
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
<div class="form-field">
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
formControlName="name"
|
||||
[class.error]="isFieldInvalid('name')"
|
||||
/>
|
||||
@if (isFieldInvalid("name")) {
|
||||
<span class="error-text">
|
||||
{{ getFieldError("name") }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" formControlName="email" />
|
||||
@if (isFieldInvalid("email")) {
|
||||
<span class="error-text">
|
||||
{{ getFieldError("email") }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<button type="submit" [disabled]="form.invalid || submitting()">
|
||||
@if (submitting()) {
|
||||
<app-spinner size="sm" /> Submitting...
|
||||
} @else {
|
||||
Submit
|
||||
}
|
||||
</button>
|
||||
</form>
|
||||
`,
|
||||
})
|
||||
export class UserFormComponent {
|
||||
private fb = inject(FormBuilder);
|
||||
|
||||
submitting = signal(false);
|
||||
|
||||
form = this.fb.group({
|
||||
name: ["", [Validators.required, Validators.minLength(2)]],
|
||||
email: ["", [Validators.required, Validators.email]],
|
||||
});
|
||||
|
||||
isFieldInvalid(field: string): boolean {
|
||||
const control = this.form.get(field);
|
||||
return control ? control.invalid && control.touched : false;
|
||||
}
|
||||
|
||||
getFieldError(field: string): string {
|
||||
const control = this.form.get(field);
|
||||
if (control?.hasError("required")) return "This field is required";
|
||||
if (control?.hasError("email")) return "Invalid email format";
|
||||
if (control?.hasError("minlength")) return "Too short";
|
||||
return "";
|
||||
}
|
||||
|
||||
async onSubmit() {
|
||||
if (this.form.invalid) return;
|
||||
|
||||
this.submitting.set(true);
|
||||
try {
|
||||
await this.service.submit(this.form.value);
|
||||
this.toast.success("Submitted successfully");
|
||||
} catch {
|
||||
this.toast.error("Submission failed");
|
||||
} finally {
|
||||
this.submitting.set(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dialog/Modal Patterns
|
||||
|
||||
### Confirmation Dialog
|
||||
|
||||
```typescript
|
||||
// dialog.service.ts
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class DialogService {
|
||||
private dialog = inject(Dialog); // CDK Dialog or custom
|
||||
|
||||
async confirm(options: {
|
||||
title: string;
|
||||
message: string;
|
||||
confirmText?: string;
|
||||
cancelText?: string;
|
||||
}): Promise<boolean> {
|
||||
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
|
||||
data: options,
|
||||
});
|
||||
|
||||
return await firstValueFrom(dialogRef.closed) ?? false;
|
||||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
async deleteItem(item: Item) {
|
||||
const confirmed = await this.dialog.confirm({
|
||||
title: 'Delete Item',
|
||||
message: `Are you sure you want to delete "${item.name}"?`,
|
||||
confirmText: 'Delete',
|
||||
});
|
||||
|
||||
if (confirmed) {
|
||||
await this.store.delete(item.id);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Anti-Patterns
|
||||
|
||||
### Loading States
|
||||
|
||||
```typescript
|
||||
// WRONG - Spinner when data exists (causes flash on refetch)
|
||||
@if (loading()) {
|
||||
<app-spinner />
|
||||
}
|
||||
|
||||
// CORRECT - Only show loading without data
|
||||
@if (loading() && !items().length) {
|
||||
<app-spinner />
|
||||
}
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
|
||||
```typescript
|
||||
// WRONG - Error swallowed
|
||||
try {
|
||||
await this.service.save();
|
||||
} catch (e) {
|
||||
console.log(e); // User has no idea!
|
||||
}
|
||||
|
||||
// CORRECT - Error surfaced
|
||||
try {
|
||||
await this.service.save();
|
||||
} catch (e) {
|
||||
console.error("Save failed:", e);
|
||||
this.toast.error("Failed to save. Please try again.");
|
||||
}
|
||||
```
|
||||
|
||||
### Button States
|
||||
|
||||
```html
|
||||
<!-- WRONG - Button not disabled during submission -->
|
||||
<button (click)="submit()">Submit</button>
|
||||
|
||||
<!-- CORRECT - Disabled and shows loading -->
|
||||
<button (click)="submit()" [disabled]="loading()">
|
||||
@if (loading()) {
|
||||
<app-spinner size="sm" />
|
||||
} Submit
|
||||
</button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## UI State Checklist
|
||||
|
||||
Before completing any UI component:
|
||||
|
||||
### UI States
|
||||
|
||||
- [ ] Error state handled and shown to user
|
||||
- [ ] Loading state shown only when no data exists
|
||||
- [ ] Empty state provided for collections (`@empty` block)
|
||||
- [ ] Buttons disabled during async operations
|
||||
- [ ] Buttons show loading indicator when appropriate
|
||||
|
||||
### Data & Mutations
|
||||
|
||||
- [ ] All async operations have error handling
|
||||
- [ ] All user actions have feedback (toast/visual)
|
||||
- [ ] Optimistic updates rollback on failure
|
||||
|
||||
### Accessibility
|
||||
|
||||
- [ ] Loading states announced to screen readers
|
||||
- [ ] Error messages linked to form fields
|
||||
- [ ] Focus management after state changes
|
||||
|
||||
---
|
||||
|
||||
## Integration with Other Skills
|
||||
|
||||
- **angular-state-management**: Use Signal stores for state
|
||||
- **angular**: Apply modern patterns (Signals, @defer)
|
||||
- **testing-patterns**: Test all UI states
|
||||
12
skills/angular-ui-patterns/metadata.json
Normal file
12
skills/angular-ui-patterns/metadata.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"organization": "Antigravity Awesome Skills",
|
||||
"date": "February 2026",
|
||||
"abstract": "Modern UI patterns for Angular applications designed for AI agents and LLMs. Covers loading states, error handling, progressive disclosure, and data display patterns. Emphasizes showing loading only without data, surfacing all errors, optimistic updates, and graceful degradation using @defer. Includes decision trees and anti-patterns to avoid.",
|
||||
"references": [
|
||||
"https://angular.dev/guide/defer",
|
||||
"https://angular.dev/guide/templates",
|
||||
"https://material.angular.io",
|
||||
"https://ng-spartan.com"
|
||||
]
|
||||
}
|
||||
40
skills/angular/README.md
Normal file
40
skills/angular/README.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# Angular
|
||||
|
||||
A comprehensive guide to modern Angular development (v20+) optimized for AI agents and LLMs.
|
||||
|
||||
## Overview
|
||||
|
||||
This skill covers modern Angular patterns including:
|
||||
|
||||
- **Signals** - Angular's reactive primitive for state management
|
||||
- **Standalone Components** - Modern component architecture without NgModules
|
||||
- **Zoneless Applications** - High-performance apps without Zone.js
|
||||
- **SSR & Hydration** - Server-side rendering and client hydration patterns
|
||||
- **Modern Routing** - Functional guards, resolvers, and lazy loading
|
||||
- **Dependency Injection** - Modern DI with `inject()` function
|
||||
- **Reactive Forms** - Type-safe form handling
|
||||
|
||||
## Structure
|
||||
|
||||
This skill is a single, comprehensive `SKILL.md` file containing:
|
||||
|
||||
1. Modern component patterns with Signal inputs/outputs
|
||||
2. State management with Signals and computed values
|
||||
3. Performance optimization techniques
|
||||
4. SSR and hydration best practices
|
||||
5. Migration strategies from legacy Angular patterns
|
||||
|
||||
## Usage
|
||||
|
||||
This skill is designed to be read in full to understand the complete modern Angular development approach, or referenced for specific patterns when needed.
|
||||
|
||||
## Version
|
||||
|
||||
Current version: 1.0.0 (February 2026)
|
||||
|
||||
## References
|
||||
|
||||
- [Angular Documentation](https://angular.dev)
|
||||
- [Angular Signals](https://angular.dev/guide/signals)
|
||||
- [Zoneless Angular](https://angular.dev/guide/zoneless)
|
||||
- [Angular SSR](https://angular.dev/guide/ssr)
|
||||
821
skills/angular/SKILL.md
Normal file
821
skills/angular/SKILL.md
Normal file
@@ -0,0 +1,821 @@
|
||||
---
|
||||
name: angular
|
||||
description: >-
|
||||
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone
|
||||
Components, Zoneless applications, SSR/Hydration, and reactive patterns.
|
||||
Use PROACTIVELY for Angular development, component architecture, state
|
||||
management, performance optimization, and migration to modern patterns.
|
||||
risk: safe
|
||||
source: self
|
||||
---
|
||||
|
||||
# Angular Expert
|
||||
|
||||
Master modern Angular development with Signals, Standalone Components, Zoneless applications, SSR/Hydration, and the latest reactive patterns.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- Building new Angular applications (v20+)
|
||||
- Implementing Signals-based reactive patterns
|
||||
- Creating Standalone Components and migrating from NgModules
|
||||
- Configuring Zoneless Angular applications
|
||||
- Implementing SSR, prerendering, and hydration
|
||||
- Optimizing Angular performance
|
||||
- Adopting modern Angular patterns and best practices
|
||||
|
||||
## Do Not Use This Skill When
|
||||
|
||||
- Migrating from AngularJS (1.x) → use `angular-migration` skill
|
||||
- Working with legacy Angular apps that cannot upgrade
|
||||
- General TypeScript issues → use `typescript-expert` skill
|
||||
|
||||
## Instructions
|
||||
|
||||
1. Assess the Angular version and project structure
|
||||
2. Apply modern patterns (Signals, Standalone, Zoneless)
|
||||
3. Implement with proper typing and reactivity
|
||||
4. Validate with build and tests
|
||||
|
||||
## Safety
|
||||
|
||||
- Always test changes in development before production
|
||||
- Gradual migration for existing apps (don't big-bang refactor)
|
||||
- Keep backward compatibility during transitions
|
||||
|
||||
---
|
||||
|
||||
## Angular Version Timeline
|
||||
|
||||
| Version | Release | Key Features |
|
||||
| -------------- | ------- | ------------------------------------------------------ |
|
||||
| **Angular 20** | Q2 2025 | Signals stable, Zoneless stable, Incremental hydration |
|
||||
| **Angular 21** | Q4 2025 | Signals-first default, Enhanced SSR |
|
||||
| **Angular 22** | Q2 2026 | Signal Forms, Selectorless components |
|
||||
|
||||
---
|
||||
|
||||
## 1. Signals: The New Reactive Primitive
|
||||
|
||||
Signals are Angular's fine-grained reactivity system, replacing zone.js-based change detection.
|
||||
|
||||
### Core Concepts
|
||||
|
||||
```typescript
|
||||
import { signal, computed, effect } from "@angular/core";
|
||||
|
||||
// Writable signal
|
||||
const count = signal(0);
|
||||
|
||||
// Read value
|
||||
console.log(count()); // 0
|
||||
|
||||
// Update value
|
||||
count.set(5); // Direct set
|
||||
count.update((v) => v + 1); // Functional update
|
||||
|
||||
// Computed (derived) signal
|
||||
const doubled = computed(() => count() * 2);
|
||||
|
||||
// Effect (side effects)
|
||||
effect(() => {
|
||||
console.log(`Count changed to: ${count()}`);
|
||||
});
|
||||
```
|
||||
|
||||
### Signal-Based Inputs and Outputs
|
||||
|
||||
```typescript
|
||||
import { Component, input, output, model } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "app-user-card",
|
||||
standalone: true,
|
||||
template: `
|
||||
<div class="card">
|
||||
<h3>{{ name() }}</h3>
|
||||
<span>{{ role() }}</span>
|
||||
<button (click)="select.emit(id())">Select</button>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class UserCardComponent {
|
||||
// Signal inputs (read-only)
|
||||
id = input.required<string>();
|
||||
name = input.required<string>();
|
||||
role = input<string>("User"); // With default
|
||||
|
||||
// Output
|
||||
select = output<string>();
|
||||
|
||||
// Two-way binding (model)
|
||||
isSelected = model(false);
|
||||
}
|
||||
|
||||
// Usage:
|
||||
// <app-user-card [id]="'123'" [name]="'John'" [(isSelected)]="selected" />
|
||||
```
|
||||
|
||||
### Signal Queries (ViewChild/ContentChild)
|
||||
|
||||
```typescript
|
||||
import {
|
||||
Component,
|
||||
viewChild,
|
||||
viewChildren,
|
||||
contentChild,
|
||||
} from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "app-container",
|
||||
standalone: true,
|
||||
template: `
|
||||
<input #searchInput />
|
||||
<app-item *ngFor="let item of items()" />
|
||||
`,
|
||||
})
|
||||
export class ContainerComponent {
|
||||
// Signal-based queries
|
||||
searchInput = viewChild<ElementRef>("searchInput");
|
||||
items = viewChildren(ItemComponent);
|
||||
projectedContent = contentChild(HeaderDirective);
|
||||
|
||||
focusSearch() {
|
||||
this.searchInput()?.nativeElement.focus();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### When to Use Signals vs RxJS
|
||||
|
||||
| Use Case | Signals | RxJS |
|
||||
| ----------------------- | --------------- | -------------------------------- |
|
||||
| Local component state | ✅ Preferred | Overkill |
|
||||
| Derived/computed values | ✅ `computed()` | `combineLatest` works |
|
||||
| Side effects | ✅ `effect()` | `tap` operator |
|
||||
| HTTP requests | ❌ | ✅ HttpClient returns Observable |
|
||||
| Event streams | ❌ | ✅ `fromEvent`, operators |
|
||||
| Complex async flows | ❌ | ✅ `switchMap`, `mergeMap` |
|
||||
|
||||
---
|
||||
|
||||
## 2. Standalone Components
|
||||
|
||||
Standalone components are self-contained and don't require NgModule declarations.
|
||||
|
||||
### Creating Standalone Components
|
||||
|
||||
```typescript
|
||||
import { Component } from "@angular/core";
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { RouterLink } from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: "app-header",
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink], // Direct imports
|
||||
template: `
|
||||
<header>
|
||||
<a routerLink="/">Home</a>
|
||||
<a routerLink="/about">About</a>
|
||||
</header>
|
||||
`,
|
||||
})
|
||||
export class HeaderComponent {}
|
||||
```
|
||||
|
||||
### Bootstrapping Without NgModule
|
||||
|
||||
```typescript
|
||||
// main.ts
|
||||
import { bootstrapApplication } from "@angular/platform-browser";
|
||||
import { provideRouter } from "@angular/router";
|
||||
import { provideHttpClient } from "@angular/common/http";
|
||||
import { AppComponent } from "./app/app.component";
|
||||
import { routes } from "./app/app.routes";
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [provideRouter(routes), provideHttpClient()],
|
||||
});
|
||||
```
|
||||
|
||||
### Lazy Loading Standalone Components
|
||||
|
||||
```typescript
|
||||
// app.routes.ts
|
||||
import { Routes } from "@angular/router";
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: "dashboard",
|
||||
loadComponent: () =>
|
||||
import("./dashboard/dashboard.component").then(
|
||||
(m) => m.DashboardComponent,
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "admin",
|
||||
loadChildren: () =>
|
||||
import("./admin/admin.routes").then((m) => m.ADMIN_ROUTES),
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Zoneless Angular
|
||||
|
||||
Zoneless applications don't use zone.js, improving performance and debugging.
|
||||
|
||||
### Enabling Zoneless Mode
|
||||
|
||||
```typescript
|
||||
// main.ts
|
||||
import { bootstrapApplication } from "@angular/platform-browser";
|
||||
import { provideZonelessChangeDetection } from "@angular/core";
|
||||
import { AppComponent } from "./app/app.component";
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [provideZonelessChangeDetection()],
|
||||
});
|
||||
```
|
||||
|
||||
### Zoneless Component Patterns
|
||||
|
||||
```typescript
|
||||
import { Component, signal, ChangeDetectionStrategy } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "app-counter",
|
||||
standalone: true,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div>Count: {{ count() }}</div>
|
||||
<button (click)="increment()">+</button>
|
||||
`,
|
||||
})
|
||||
export class CounterComponent {
|
||||
count = signal(0);
|
||||
|
||||
increment() {
|
||||
this.count.update((v) => v + 1);
|
||||
// No zone.js needed - Signal triggers change detection
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Key Zoneless Benefits
|
||||
|
||||
- **Performance**: No zone.js patches on async APIs
|
||||
- **Debugging**: Clean stack traces without zone wrappers
|
||||
- **Bundle size**: Smaller without zone.js (~15KB savings)
|
||||
- **Interoperability**: Better with Web Components and micro-frontends
|
||||
|
||||
---
|
||||
|
||||
## 4. Server-Side Rendering & Hydration
|
||||
|
||||
### SSR Setup with Angular CLI
|
||||
|
||||
```bash
|
||||
ng add @angular/ssr
|
||||
```
|
||||
|
||||
### Hydration Configuration
|
||||
|
||||
```typescript
|
||||
// app.config.ts
|
||||
import { ApplicationConfig } from "@angular/core";
|
||||
import {
|
||||
provideClientHydration,
|
||||
withEventReplay,
|
||||
} from "@angular/platform-browser";
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [provideClientHydration(withEventReplay())],
|
||||
};
|
||||
```
|
||||
|
||||
### Incremental Hydration (v20+)
|
||||
|
||||
```typescript
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "app-page",
|
||||
standalone: true,
|
||||
template: `
|
||||
<app-hero />
|
||||
|
||||
@defer (hydrate on viewport) {
|
||||
<app-comments />
|
||||
}
|
||||
|
||||
@defer (hydrate on interaction) {
|
||||
<app-chat-widget />
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class PageComponent {}
|
||||
```
|
||||
|
||||
### Hydration Triggers
|
||||
|
||||
| Trigger | When to Use |
|
||||
| ---------------- | --------------------------------------- |
|
||||
| `on idle` | Low-priority, hydrate when browser idle |
|
||||
| `on viewport` | Hydrate when element enters viewport |
|
||||
| `on interaction` | Hydrate on first user interaction |
|
||||
| `on hover` | Hydrate when user hovers |
|
||||
| `on timer(ms)` | Hydrate after specified delay |
|
||||
|
||||
---
|
||||
|
||||
## 5. Modern Routing Patterns
|
||||
|
||||
### Functional Route Guards
|
||||
|
||||
```typescript
|
||||
// auth.guard.ts
|
||||
import { inject } from "@angular/core";
|
||||
import { Router, CanActivateFn } from "@angular/router";
|
||||
import { AuthService } from "./auth.service";
|
||||
|
||||
export const authGuard: CanActivateFn = (route, state) => {
|
||||
const auth = inject(AuthService);
|
||||
const router = inject(Router);
|
||||
|
||||
if (auth.isAuthenticated()) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return router.createUrlTree(["/login"], {
|
||||
queryParams: { returnUrl: state.url },
|
||||
});
|
||||
};
|
||||
|
||||
// Usage in routes
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: "dashboard",
|
||||
loadComponent: () => import("./dashboard.component"),
|
||||
canActivate: [authGuard],
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
### Route-Level Data Resolvers
|
||||
|
||||
```typescript
|
||||
import { inject } from '@angular/core';
|
||||
import { ResolveFn } from '@angular/router';
|
||||
import { UserService } from './user.service';
|
||||
import { User } from './user.model';
|
||||
|
||||
export const userResolver: ResolveFn<User> = (route) => {
|
||||
const userService = inject(UserService);
|
||||
return userService.getUser(route.paramMap.get('id')!);
|
||||
};
|
||||
|
||||
// In routes
|
||||
{
|
||||
path: 'user/:id',
|
||||
loadComponent: () => import('./user.component'),
|
||||
resolve: { user: userResolver }
|
||||
}
|
||||
|
||||
// In component
|
||||
export class UserComponent {
|
||||
private route = inject(ActivatedRoute);
|
||||
user = toSignal(this.route.data.pipe(map(d => d['user'])));
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Dependency Injection Patterns
|
||||
|
||||
### Modern inject() Function
|
||||
|
||||
```typescript
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { UserService } from './user.service';
|
||||
|
||||
@Component({...})
|
||||
export class UserComponent {
|
||||
// Modern inject() - no constructor needed
|
||||
private http = inject(HttpClient);
|
||||
private userService = inject(UserService);
|
||||
|
||||
// Works in any injection context
|
||||
users = toSignal(this.userService.getUsers());
|
||||
}
|
||||
```
|
||||
|
||||
### Injection Tokens for Configuration
|
||||
|
||||
```typescript
|
||||
import { InjectionToken, inject } from "@angular/core";
|
||||
|
||||
// Define token
|
||||
export const API_BASE_URL = new InjectionToken<string>("API_BASE_URL");
|
||||
|
||||
// Provide in config
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [{ provide: API_BASE_URL, useValue: "https://api.example.com" }],
|
||||
});
|
||||
|
||||
// Inject in service
|
||||
@Injectable({ providedIn: "root" })
|
||||
export class ApiService {
|
||||
private baseUrl = inject(API_BASE_URL);
|
||||
|
||||
get(endpoint: string) {
|
||||
return this.http.get(`${this.baseUrl}/${endpoint}`);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Component Composition & Reusability
|
||||
|
||||
### Content Projection (Slots)
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
selector: 'app-card',
|
||||
template: `
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<!-- Select by attribute -->
|
||||
<ng-content select="[card-header]"></ng-content>
|
||||
</div>
|
||||
<div class="body">
|
||||
<!-- Default slot -->
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class CardComponent {}
|
||||
|
||||
// Usage
|
||||
<app-card>
|
||||
<h3 card-header>Title</h3>
|
||||
<p>Body content</p>
|
||||
</app-card>
|
||||
```
|
||||
|
||||
### Host Directives (Composition)
|
||||
|
||||
```typescript
|
||||
// Reusable behaviors without inheritance
|
||||
@Directive({
|
||||
standalone: true,
|
||||
selector: '[appTooltip]',
|
||||
inputs: ['tooltip'] // Signal input alias
|
||||
})
|
||||
export class TooltipDirective { ... }
|
||||
|
||||
@Component({
|
||||
selector: 'app-button',
|
||||
standalone: true,
|
||||
hostDirectives: [
|
||||
{
|
||||
directive: TooltipDirective,
|
||||
inputs: ['tooltip: title'] // Map input
|
||||
}
|
||||
],
|
||||
template: `<ng-content />`
|
||||
})
|
||||
export class ButtonComponent {}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. State Management Patterns
|
||||
|
||||
### Signal-Based State Service
|
||||
|
||||
```typescript
|
||||
import { Injectable, signal, computed } from "@angular/core";
|
||||
|
||||
interface AppState {
|
||||
user: User | null;
|
||||
theme: "light" | "dark";
|
||||
notifications: Notification[];
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: "root" })
|
||||
export class StateService {
|
||||
// Private writable signals
|
||||
private _user = signal<User | null>(null);
|
||||
private _theme = signal<"light" | "dark">("light");
|
||||
private _notifications = signal<Notification[]>([]);
|
||||
|
||||
// Public read-only computed
|
||||
readonly user = computed(() => this._user());
|
||||
readonly theme = computed(() => this._theme());
|
||||
readonly notifications = computed(() => this._notifications());
|
||||
readonly unreadCount = computed(
|
||||
() => this._notifications().filter((n) => !n.read).length,
|
||||
);
|
||||
|
||||
// Actions
|
||||
setUser(user: User | null) {
|
||||
this._user.set(user);
|
||||
}
|
||||
|
||||
toggleTheme() {
|
||||
this._theme.update((t) => (t === "light" ? "dark" : "light"));
|
||||
}
|
||||
|
||||
addNotification(notification: Notification) {
|
||||
this._notifications.update((n) => [...n, notification]);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Component Store Pattern with Signals
|
||||
|
||||
```typescript
|
||||
import { Injectable, signal, computed, inject } from "@angular/core";
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { toSignal } from "@angular/core/rxjs-interop";
|
||||
|
||||
@Injectable()
|
||||
export class ProductStore {
|
||||
private http = inject(HttpClient);
|
||||
|
||||
// State
|
||||
private _products = signal<Product[]>([]);
|
||||
private _loading = signal(false);
|
||||
private _filter = signal("");
|
||||
|
||||
// Selectors
|
||||
readonly products = computed(() => this._products());
|
||||
readonly loading = computed(() => this._loading());
|
||||
readonly filteredProducts = computed(() => {
|
||||
const filter = this._filter().toLowerCase();
|
||||
return this._products().filter((p) =>
|
||||
p.name.toLowerCase().includes(filter),
|
||||
);
|
||||
});
|
||||
|
||||
// Actions
|
||||
loadProducts() {
|
||||
this._loading.set(true);
|
||||
this.http.get<Product[]>("/api/products").subscribe({
|
||||
next: (products) => {
|
||||
this._products.set(products);
|
||||
this._loading.set(false);
|
||||
},
|
||||
error: () => this._loading.set(false),
|
||||
});
|
||||
}
|
||||
|
||||
setFilter(filter: string) {
|
||||
this._filter.set(filter);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Forms with Signals (Coming in v22+)
|
||||
|
||||
### Current Reactive Forms
|
||||
|
||||
```typescript
|
||||
import { Component, inject } from "@angular/core";
|
||||
import { FormBuilder, Validators, ReactiveFormsModule } from "@angular/forms";
|
||||
|
||||
@Component({
|
||||
selector: "app-user-form",
|
||||
standalone: true,
|
||||
imports: [ReactiveFormsModule],
|
||||
template: `
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
<input formControlName="name" placeholder="Name" />
|
||||
<input formControlName="email" type="email" placeholder="Email" />
|
||||
<button [disabled]="form.invalid">Submit</button>
|
||||
</form>
|
||||
`,
|
||||
})
|
||||
export class UserFormComponent {
|
||||
private fb = inject(FormBuilder);
|
||||
|
||||
form = this.fb.group({
|
||||
name: ["", Validators.required],
|
||||
email: ["", [Validators.required, Validators.email]],
|
||||
});
|
||||
|
||||
onSubmit() {
|
||||
if (this.form.valid) {
|
||||
console.log(this.form.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Signal-Aware Form Patterns (Preview)
|
||||
|
||||
```typescript
|
||||
// Future Signal Forms API (experimental)
|
||||
import { Component, signal } from '@angular/core';
|
||||
|
||||
@Component({...})
|
||||
export class SignalFormComponent {
|
||||
name = signal('');
|
||||
email = signal('');
|
||||
|
||||
// Computed validation
|
||||
isValid = computed(() =>
|
||||
this.name().length > 0 &&
|
||||
this.email().includes('@')
|
||||
);
|
||||
|
||||
submit() {
|
||||
if (this.isValid()) {
|
||||
console.log({ name: this.name(), email: this.email() });
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. Performance Optimization
|
||||
|
||||
### Change Detection Strategies
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
// Only checks when:
|
||||
// 1. Input signal/reference changes
|
||||
// 2. Event handler runs
|
||||
// 3. Async pipe emits
|
||||
// 4. Signal value changes
|
||||
})
|
||||
```
|
||||
|
||||
### Defer Blocks for Lazy Loading
|
||||
|
||||
```typescript
|
||||
@Component({
|
||||
template: `
|
||||
<!-- Immediate loading -->
|
||||
<app-header />
|
||||
|
||||
<!-- Lazy load when visible -->
|
||||
@defer (on viewport) {
|
||||
<app-heavy-chart />
|
||||
} @placeholder {
|
||||
<div class="skeleton" />
|
||||
} @loading (minimum 200ms) {
|
||||
<app-spinner />
|
||||
} @error {
|
||||
<p>Failed to load chart</p>
|
||||
}
|
||||
`
|
||||
})
|
||||
```
|
||||
|
||||
### NgOptimizedImage
|
||||
|
||||
```typescript
|
||||
import { NgOptimizedImage } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
imports: [NgOptimizedImage],
|
||||
template: `
|
||||
<img
|
||||
ngSrc="hero.jpg"
|
||||
width="800"
|
||||
height="600"
|
||||
priority
|
||||
/>
|
||||
|
||||
<img
|
||||
ngSrc="thumbnail.jpg"
|
||||
width="200"
|
||||
height="150"
|
||||
loading="lazy"
|
||||
placeholder="blur"
|
||||
/>
|
||||
`
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 11. Testing Modern Angular
|
||||
|
||||
### Testing Signal Components
|
||||
|
||||
```typescript
|
||||
import { ComponentFixture, TestBed } from "@angular/core/testing";
|
||||
import { CounterComponent } from "./counter.component";
|
||||
|
||||
describe("CounterComponent", () => {
|
||||
let component: CounterComponent;
|
||||
let fixture: ComponentFixture<CounterComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CounterComponent], // Standalone import
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CounterComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it("should increment count", () => {
|
||||
expect(component.count()).toBe(0);
|
||||
|
||||
component.increment();
|
||||
|
||||
expect(component.count()).toBe(1);
|
||||
});
|
||||
|
||||
it("should update DOM on signal change", () => {
|
||||
component.count.set(5);
|
||||
fixture.detectChanges();
|
||||
|
||||
const el = fixture.nativeElement.querySelector(".count");
|
||||
expect(el.textContent).toContain("5");
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### Testing with Signal Inputs
|
||||
|
||||
```typescript
|
||||
import { ComponentFixture, TestBed } from "@angular/core/testing";
|
||||
import { ComponentRef } from "@angular/core";
|
||||
import { UserCardComponent } from "./user-card.component";
|
||||
|
||||
describe("UserCardComponent", () => {
|
||||
let fixture: ComponentFixture<UserCardComponent>;
|
||||
let componentRef: ComponentRef<UserCardComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UserCardComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(UserCardComponent);
|
||||
componentRef = fixture.componentRef;
|
||||
|
||||
// Set signal inputs via setInput
|
||||
componentRef.setInput("id", "123");
|
||||
componentRef.setInput("name", "John Doe");
|
||||
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it("should display user name", () => {
|
||||
const el = fixture.nativeElement.querySelector("h3");
|
||||
expect(el.textContent).toContain("John Doe");
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Best Practices Summary
|
||||
|
||||
| Pattern | ✅ Do | ❌ Don't |
|
||||
| -------------------- | ------------------------------ | ------------------------------- |
|
||||
| **State** | Use Signals for local state | Overuse RxJS for simple state |
|
||||
| **Components** | Standalone with direct imports | Bloated SharedModules |
|
||||
| **Change Detection** | OnPush + Signals | Default CD everywhere |
|
||||
| **Lazy Loading** | `@defer` and `loadComponent` | Eager load everything |
|
||||
| **DI** | `inject()` function | Constructor injection (verbose) |
|
||||
| **Inputs** | `input()` signal function | `@Input()` decorator (legacy) |
|
||||
| **Zoneless** | Enable for new projects | Force on legacy without testing |
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- [Angular.dev Documentation](https://angular.dev)
|
||||
- [Angular Signals Guide](https://angular.dev/guide/signals)
|
||||
- [Angular SSR Guide](https://angular.dev/guide/ssr)
|
||||
- [Angular Update Guide](https://angular.dev/update-guide)
|
||||
- [Angular Blog](https://blog.angular.dev)
|
||||
|
||||
---
|
||||
|
||||
## Common Troubleshooting
|
||||
|
||||
| Issue | Solution |
|
||||
| ------------------------------ | --------------------------------------------------- |
|
||||
| Signal not updating UI | Ensure `OnPush` + call signal as function `count()` |
|
||||
| Hydration mismatch | Check server/client content consistency |
|
||||
| Circular dependency | Use `inject()` with `forwardRef` |
|
||||
| Zoneless not detecting changes | Trigger via signal updates, not mutations |
|
||||
| SSR fetch fails | Use `TransferState` or `withFetch()` |
|
||||
14
skills/angular/metadata.json
Normal file
14
skills/angular/metadata.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"organization": "Antigravity Awesome Skills",
|
||||
"date": "February 2026",
|
||||
"abstract": "Comprehensive guide to modern Angular development (v20+) designed for AI agents and LLMs. Covers Signals, Standalone Components, Zoneless applications, SSR/Hydration, reactive patterns, routing, dependency injection, and modern forms. Emphasizes component-driven architecture with practical examples and migration strategies for modernizing existing codebases.",
|
||||
"references": [
|
||||
"https://angular.dev",
|
||||
"https://angular.dev/guide/signals",
|
||||
"https://angular.dev/guide/zoneless",
|
||||
"https://angular.dev/guide/ssr",
|
||||
"https://angular.dev/guide/standalone-components",
|
||||
"https://angular.dev/guide/defer"
|
||||
]
|
||||
}
|
||||
@@ -186,7 +186,7 @@ class CompetitorAnalyzer:
|
||||
|
||||
def _analyze_title(self, title: str) -> Dict[str, Any]:
|
||||
"""Analyze title structure and keyword usage."""
|
||||
parts = re.split(r'[-:|]', title)
|
||||
parts = re.split(r'[-' + r':|]', title)
|
||||
|
||||
return {
|
||||
'title': title,
|
||||
|
||||
137
skills/audio-transcriber/CHANGELOG.md
Normal file
137
skills/audio-transcriber/CHANGELOG.md
Normal file
@@ -0,0 +1,137 @@
|
||||
# Changelog - audio-transcriber
|
||||
|
||||
All notable changes to the audio-transcriber skill will be documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
---
|
||||
|
||||
## [1.1.0] - 2026-02-03
|
||||
|
||||
### ✨ Added
|
||||
|
||||
- **Intelligent Prompt Workflow** (Step 3b) - Complete integration with prompt-engineer skill
|
||||
- **Scenario A**: User-provided prompts are automatically improved with prompt-engineer
|
||||
- Displays both original and improved versions side-by-side
|
||||
- Single confirmation: "Usar versão melhorada? [s/n]"
|
||||
- **Scenario B**: Auto-generation when no prompt provided
|
||||
- Analyzes transcript and suggests document type (ata, resumo, notas)
|
||||
- Shows suggestion and asks confirmation
|
||||
- Generates complete structured prompt (RISEN/RODES/STAR)
|
||||
- Shows preview and asks final confirmation
|
||||
- Falls back to DEFAULT_MEETING_PROMPT if declined
|
||||
|
||||
- **LLM Integration** - Process transcripts with Claude CLI or GitHub Copilot CLI
|
||||
- Priority: Claude > GitHub Copilot > None (transcript-only mode)
|
||||
- Step 0b: CLI detection logic documented
|
||||
- Timeout handling (5 minutes default)
|
||||
- Graceful fallback if CLI unavailable
|
||||
|
||||
- **Progress Indicators** - Visual feedback during long operations
|
||||
- `tqdm` progress bar for Whisper transcription segments
|
||||
- `rich` spinner for LLM processing
|
||||
- Clear status messages at each step
|
||||
|
||||
- **Timestamp-based File Naming** - Avoid overwriting previous transcriptions
|
||||
- Format: `transcript-YYYYMMDD-HHMMSS.md`
|
||||
- Format: `ata-YYYYMMDD-HHMMSS.md`
|
||||
- Prevents data loss from repeated runs
|
||||
|
||||
- **Automatic Cleanup** - Remove temporary files after processing
|
||||
- Deletes `metadata.json` and `transcription.json` automatically
|
||||
- `--keep-temp` flag to preserve if needed
|
||||
- Clean output directory
|
||||
|
||||
- **Rich Terminal UI** - Beautiful output with `rich` library
|
||||
- Formatted panels for prompt previews
|
||||
- Color-coded status messages (green=success, yellow=warning, red=error)
|
||||
- Spinner animations for long-running tasks
|
||||
|
||||
- **Dual Output Support** - Generate both transcript and processed ata
|
||||
- `transcript-*.md` - Raw transcription with timestamps
|
||||
- `ata-*.md` - Intelligent summary/meeting minutes (if LLM available)
|
||||
- User can decline LLM processing to get transcript-only
|
||||
|
||||
### 🔧 Changed
|
||||
|
||||
- **SKILL.md** - Major documentation updates
|
||||
- Added Step 0b (CLI Detection)
|
||||
- Updated Step 2 (Progress Indicators)
|
||||
- Added Step 3b (Intelligent Prompt Workflow with 150+ lines)
|
||||
- Updated version to 1.1.0
|
||||
- Added detailed workflow diagrams for both scenarios
|
||||
|
||||
- **install-requirements.sh** - Added UI libraries
|
||||
- Now installs `tqdm` and `rich` packages
|
||||
- Graceful fallback if installation fails
|
||||
- Updated success messages
|
||||
|
||||
- **Python Implementation** - Complete refactor
|
||||
- Created `scripts/transcribe.py` (516 lines)
|
||||
- Functions: `detect_cli_tool()`, `invoke_prompt_engineer()`, `handle_prompt_workflow()`, `process_with_llm()`, `transcribe_audio()`, `save_outputs()`, `cleanup_temp_files()`
|
||||
- Command-line arguments: `--prompt`, `--model`, `--output-dir`, `--keep-temp`
|
||||
- Auto-installs `rich` and `tqdm` if missing
|
||||
|
||||
### 🐛 Fixed
|
||||
|
||||
- **User prompts no longer ignored** - v1.0.0 completely ignored custom prompts
|
||||
- Now processes all prompts (custom or auto-generated) with LLM
|
||||
- Improves simple prompts into structured frameworks
|
||||
|
||||
- **Temporary files cleanup** - v1.0.0 left `metadata.json` and `transcription.json` as trash
|
||||
- Now automatically removed after processing
|
||||
- Clean output directory
|
||||
|
||||
- **File overwriting** - v1.0.0 used same filename (e.g., `meeting.md`) every time
|
||||
- Now uses timestamp to prevent data loss
|
||||
- Each run creates unique files
|
||||
|
||||
- **Missing ata/summary** - v1.0.0 only generated raw transcript
|
||||
- Now generates intelligent ata/resumo using LLM
|
||||
- Respects user's prompt instructions
|
||||
|
||||
- **No progress feedback** - v1.0.0 had silent processing (users didn't know if it froze)
|
||||
- Now shows progress bar for transcription
|
||||
- Shows spinner for LLM processing
|
||||
- Clear status messages throughout
|
||||
|
||||
### 📝 Notes
|
||||
|
||||
- **Backward Compatibility:** Fully compatible with v1.0.0 workflows
|
||||
- **Requires:** Python 3.8+, faster-whisper OR whisper, tqdm, rich
|
||||
- **Optional:** Claude CLI or GitHub Copilot CLI for intelligent processing
|
||||
- **Optional:** prompt-engineer skill for automatic prompt generation
|
||||
|
||||
### 🔗 Related Issues
|
||||
|
||||
- Fixes #1: Prompt do usuário RISEN ignorado
|
||||
- Fixes #2: Arquivos temporários (metadata.json, transcription.json) deixados como lixo
|
||||
- Fixes #3: Output incompleto (apenas transcript RAW, sem ata)
|
||||
- Fixes #4: Falta de indicador de progresso visual
|
||||
- Fixes #5: Formato de saída sem timestamp
|
||||
|
||||
---
|
||||
|
||||
## [1.0.0] - 2026-02-02
|
||||
|
||||
### ✨ Initial Release
|
||||
|
||||
- Audio transcription using Faster-Whisper or OpenAI Whisper
|
||||
- Automatic language detection
|
||||
- Speaker diarization (basic)
|
||||
- Voice Activity Detection (VAD)
|
||||
- Markdown output with metadata table
|
||||
- Installation script for dependencies
|
||||
- Example scripts for basic transcription
|
||||
- Support for multiple audio formats (MP3, WAV, M4A, OGG, FLAC, WEBM)
|
||||
- FFmpeg integration for format conversion
|
||||
- Zero-configuration philosophy
|
||||
|
||||
### 📝 Known Limitations (Fixed in v1.1.0)
|
||||
|
||||
- User prompts ignored (no LLM integration)
|
||||
- Only raw transcript generated (no ata/summary)
|
||||
- Temporary files not cleaned up
|
||||
- No progress indicators
|
||||
- Files overwritten on repeated runs
|
||||
340
skills/audio-transcriber/README.md
Normal file
340
skills/audio-transcriber/README.md
Normal file
@@ -0,0 +1,340 @@
|
||||
# Audio Transcriber Skill v1.1.0
|
||||
|
||||
Transform audio recordings into professional Markdown documentation with **intelligent atas/summaries using LLM integration** (Claude/Copilot CLI) and automatic prompt engineering.
|
||||
|
||||
## 🆕 What's New in v1.1.0
|
||||
|
||||
- **🧠 LLM Integration** - Claude CLI (primary) or GitHub Copilot CLI (fallback) for intelligent processing
|
||||
- **✨ Smart Prompts** - Automatic integration with prompt-engineer skill
|
||||
- User-provided prompts → automatically improved → user chooses version
|
||||
- No prompt → analyzes transcript → suggests format → generates structured prompt
|
||||
- **📊 Progress Indicators** - Visual progress bars (tqdm) and spinners (rich)
|
||||
- **📁 Timestamp Filenames** - `transcript-YYYYMMDD-HHMMSS.md` + `ata-YYYYMMDD-HHMMSS.md`
|
||||
- **🧹 Auto-Cleanup** - Removes temporary `metadata.json` and `transcription.json`
|
||||
- **🎨 Rich Terminal UI** - Beautiful formatted output with panels and colors
|
||||
|
||||
See **[CHANGELOG.md](./CHANGELOG.md)** for complete v1.1.0 details.
|
||||
|
||||
## 🎯 Core Features
|
||||
|
||||
- **📝 Rich Markdown Output** - Structured reports with metadata tables, timestamps, and formatting
|
||||
- **🎙️ Speaker Diarization** - Automatically identifies and labels different speakers
|
||||
- **📊 Technical Metadata** - Extracts file size, duration, language, processing time
|
||||
- **📋 Intelligent Atas/Summaries** - Generated via LLM (Claude/Copilot) with customizable prompts
|
||||
- **💡 Executive Summaries** - AI-generated structured summaries with topics, decisions, action items
|
||||
- **🌍 Multi-language** - Supports 99 languages with auto-detection
|
||||
- **⚡ Zero Configuration** - Auto-discovers Faster-Whisper/Whisper installation
|
||||
- **🔒 Privacy-First** - 100% local Whisper processing, no cloud uploads
|
||||
- **🚀 Flexible Modes** - Transcript-only or intelligent processing with LLM
|
||||
|
||||
## 📦 Installation
|
||||
|
||||
### Quick Install (NPX)
|
||||
|
||||
```bash
|
||||
npx cli-ai-skills@latest install audio-transcriber
|
||||
```
|
||||
|
||||
This automatically:
|
||||
- Downloads the skill
|
||||
- Installs Python dependencies (faster-whisper, tqdm, rich)
|
||||
- Installs ffmpeg (macOS via Homebrew)
|
||||
- Sets up the skill globally
|
||||
|
||||
### Manual Installation
|
||||
|
||||
#### 1. Install Transcription Engine
|
||||
|
||||
**Recommended (fastest):**
|
||||
```bash
|
||||
pip install faster-whisper tqdm rich
|
||||
```
|
||||
|
||||
**Alternative (original Whisper):**
|
||||
```bash
|
||||
pip install openai-whisper tqdm rich
|
||||
```
|
||||
|
||||
#### 2. Install Audio Tools (Optional)
|
||||
|
||||
For format conversion support:
|
||||
```bash
|
||||
# macOS
|
||||
brew install ffmpeg
|
||||
|
||||
# Linux
|
||||
apt install ffmpeg
|
||||
```
|
||||
|
||||
#### 3. Install LLM CLI (Optional - for intelligent summaries)
|
||||
|
||||
**Claude CLI (recommended):**
|
||||
```bash
|
||||
# Follow: https://docs.anthropic.com/en/docs/claude-cli
|
||||
```
|
||||
|
||||
**GitHub Copilot CLI (alternative):**
|
||||
```bash
|
||||
gh extension install github/gh-copilot
|
||||
```
|
||||
|
||||
#### 4. Install Skill
|
||||
|
||||
**Global installation (auto-updates with git pull):**
|
||||
```bash
|
||||
cd /path/to/cli-ai-skills
|
||||
./scripts/install-skills.sh $(pwd)
|
||||
```
|
||||
|
||||
**Repository only:**
|
||||
```bash
|
||||
# Skill is already available if you cloned the repo
|
||||
```
|
||||
|
||||
## 🚀 Usage
|
||||
|
||||
### Basic Transcription
|
||||
|
||||
```bash
|
||||
copilot> transcribe audio to markdown: meeting.mp3
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- `meeting.md` - Full Markdown report with metadata, transcription, minutes, summary
|
||||
|
||||
### With Subtitles
|
||||
|
||||
```bash
|
||||
copilot> convert audio file to text with subtitles: interview.wav
|
||||
```
|
||||
|
||||
**Generates:**
|
||||
- `interview.md` - Markdown report
|
||||
- `interview.srt` - Subtitle file
|
||||
|
||||
### Batch Processing
|
||||
|
||||
```bash
|
||||
copilot> transcreva estes áudios: recordings/*.mp3
|
||||
```
|
||||
|
||||
**Processes all MP3 files in the directory.**
|
||||
|
||||
### Trigger Phrases
|
||||
|
||||
Activate the skill with any of these phrases:
|
||||
|
||||
- "transcribe audio to markdown"
|
||||
- "transcreva este áudio"
|
||||
- "convert audio file to text"
|
||||
- "extract speech from audio"
|
||||
- "áudio para texto com metadados"
|
||||
|
||||
## 📋 Use Cases
|
||||
|
||||
### 1. Team Meetings
|
||||
Record standups, planning sessions, or retrospectives and automatically generate:
|
||||
- Participant list
|
||||
- Discussion topics with timestamps
|
||||
- Decisions made
|
||||
- Action items assigned
|
||||
|
||||
### 2. Client Calls
|
||||
Transcribe client conversations with:
|
||||
- Speaker identification
|
||||
- Key agreements documented
|
||||
- Follow-up tasks extracted
|
||||
|
||||
### 3. Interviews
|
||||
Convert interviews to text with:
|
||||
- Question/answer attribution
|
||||
- Subtitle generation for video
|
||||
- Searchable transcript
|
||||
|
||||
### 4. Lectures & Training
|
||||
Document educational content with:
|
||||
- Timestamped notes
|
||||
- Topic breakdown
|
||||
- Key concepts summary
|
||||
|
||||
### 5. Content Creation
|
||||
Analyze podcasts, videos, YouTube content:
|
||||
- Full transcription
|
||||
- Chapter markers (timestamps)
|
||||
- Summary for show notes
|
||||
|
||||
## 📊 Output Example
|
||||
|
||||
```markdown
|
||||
# Audio Transcription Report
|
||||
|
||||
## 📊 Metadata
|
||||
|
||||
| Field | Value |
|
||||
|-------|-------|
|
||||
| **File Name** | team-standup.mp3 |
|
||||
| **File Size** | 3.2 MB |
|
||||
| **Duration** | 00:12:47 |
|
||||
| **Language** | English (en) |
|
||||
| **Processed Date** | 2026-02-02 14:35:21 |
|
||||
| **Speakers Identified** | 5 |
|
||||
| **Transcription Engine** | Faster-Whisper (model: base) |
|
||||
|
||||
---
|
||||
|
||||
## 🎙️ Full Transcription
|
||||
|
||||
**[00:00:12 → 00:00:45]** *Speaker 1*
|
||||
Good morning everyone. Let's start with updates from the frontend team.
|
||||
|
||||
**[00:00:46 → 00:01:23]** *Speaker 2*
|
||||
We completed the dashboard redesign and deployed to staging yesterday.
|
||||
|
||||
---
|
||||
|
||||
## 📋 Meeting Minutes
|
||||
|
||||
### Participants
|
||||
- Speaker 1 (Meeting Lead)
|
||||
- Speaker 2 (Frontend Developer)
|
||||
- Speaker 3 (Backend Developer)
|
||||
- Speaker 4 (Designer)
|
||||
- Speaker 5 (Product Manager)
|
||||
|
||||
### Topics Discussed
|
||||
1. **Dashboard Redesign** (00:00:46)
|
||||
- Completed and deployed to staging
|
||||
- Positive feedback from QA team
|
||||
|
||||
2. **API Performance Issues** (00:03:12)
|
||||
- Database query optimization needed
|
||||
- Target response time < 200ms
|
||||
|
||||
### Decisions Made
|
||||
- ✅ Approved dashboard for production deployment
|
||||
- ✅ Allocated 2 sprint points for API optimization
|
||||
|
||||
### Action Items
|
||||
- [ ] **Deploy dashboard to production** - Assigned to: Speaker 2 - Due: 2026-02-05
|
||||
- [ ] **Optimize database queries** - Assigned to: Speaker 3
|
||||
- [ ] **Schedule user testing session** - Assigned to: Speaker 5
|
||||
|
||||
---
|
||||
|
||||
## 📝 Executive Summary
|
||||
|
||||
The team standup covered progress on the dashboard redesign, which has been successfully completed and is ready for production deployment. The frontend team received positive feedback from QA and the design aligns with user requirements.
|
||||
|
||||
Backend performance concerns were raised regarding API response times. The team decided to prioritize query optimization in the current sprint, with a target of sub-200ms response times.
|
||||
|
||||
Next steps include production deployment of the dashboard by end of week and scheduling user testing sessions to validate the new design with real users.
|
||||
|
||||
### Key Points
|
||||
- 🔹 Dashboard redesign complete and staging-approved
|
||||
- 🔹 API performance optimization prioritized
|
||||
- 🔹 User testing scheduled for next week
|
||||
|
||||
### Next Steps
|
||||
1. Production deployment (Speaker 2)
|
||||
2. Database optimization (Speaker 3)
|
||||
3. User testing coordination (Speaker 5)
|
||||
```
|
||||
|
||||
## ⚙️ Configuration
|
||||
|
||||
No configuration needed! The skill automatically:
|
||||
- Detects Faster-Whisper or Whisper installation
|
||||
- Chooses the fastest available engine
|
||||
- Selects appropriate model based on file size
|
||||
- Auto-detects language
|
||||
|
||||
## 🔧 Troubleshooting
|
||||
|
||||
### "No transcription tool found"
|
||||
**Solution:** Install Whisper:
|
||||
```bash
|
||||
pip install faster-whisper
|
||||
```
|
||||
|
||||
### "Unsupported format"
|
||||
**Solution:** Install ffmpeg:
|
||||
```bash
|
||||
brew install ffmpeg # macOS
|
||||
apt install ffmpeg # Linux
|
||||
```
|
||||
|
||||
### Slow processing
|
||||
**Solution:** Use a smaller Whisper model:
|
||||
```bash
|
||||
# Edit the skill to use "tiny" or "base" model instead of "medium"
|
||||
```
|
||||
|
||||
### Poor speaker identification
|
||||
**Solution:**
|
||||
- Ensure clear audio with minimal background noise
|
||||
- Use a better microphone for recordings
|
||||
- Try the "medium" or "large" Whisper model
|
||||
|
||||
## 🛠️ Advanced Usage
|
||||
|
||||
### Custom Model Selection
|
||||
|
||||
Edit `SKILL.md` Step 2 to change model:
|
||||
```python
|
||||
model = WhisperModel("small", device="cpu") # Change "base" to "small", "medium", etc.
|
||||
```
|
||||
|
||||
### Output Language Control
|
||||
|
||||
Force output in specific language:
|
||||
```bash
|
||||
# Edit Step 3 to set language explicitly
|
||||
```
|
||||
|
||||
### Batch Settings
|
||||
|
||||
Process specific file types only:
|
||||
```bash
|
||||
copilot> transcribe audio: recordings/*.wav # Only WAV files
|
||||
```
|
||||
|
||||
## 📚 FAQ
|
||||
|
||||
**Q: Does this work offline?**
|
||||
A: Yes! 100% local processing, no internet required after initial model download.
|
||||
|
||||
**Q: What's the difference between Whisper and Faster-Whisper?**
|
||||
A: Faster-Whisper is 4-5x faster with same quality. Always prefer it if available.
|
||||
|
||||
**Q: Can I transcribe YouTube videos?**
|
||||
A: Not directly. Use a YouTube downloader first, then transcribe the audio file. Or use the `youtube-summarizer` skill instead.
|
||||
|
||||
**Q: How accurate is speaker identification?**
|
||||
A: Accuracy depends on audio quality. Clear recordings with distinct voices work best. Currently uses simple estimation; future versions will use advanced diarization.
|
||||
|
||||
**Q: What languages are supported?**
|
||||
A: 99 languages including English, Portuguese, Spanish, French, German, Chinese, Japanese, Arabic, and more.
|
||||
|
||||
**Q: Can I edit the meeting minutes format?**
|
||||
A: Yes! Edit the Markdown template in SKILL.md Step 3.
|
||||
|
||||
## 🔗 Related Skills
|
||||
|
||||
- **youtube-summarizer** - Extract and summarize YouTube video transcripts
|
||||
- **prompt-engineer** - Optimize prompts for better AI summaries
|
||||
|
||||
## 📄 License
|
||||
|
||||
This skill is part of the cli-ai-skills repository.
|
||||
MIT License - See repository LICENSE file.
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
Found a bug or have a feature request?
|
||||
Open an issue in the [cli-ai-skills repository](https://github.com/yourusername/cli-ai-skills).
|
||||
|
||||
---
|
||||
|
||||
**Version:** 1.0.0
|
||||
**Author:** Eric Andrade
|
||||
**Created:** 2026-02-02
|
||||
558
skills/audio-transcriber/SKILL.md
Normal file
558
skills/audio-transcriber/SKILL.md
Normal file
@@ -0,0 +1,558 @@
|
||||
---
|
||||
name: audio-transcriber
|
||||
description: "Transform audio recordings into professional Markdown documentation with intelligent summaries using LLM integration"
|
||||
version: 1.2.0
|
||||
author: Eric Andrade
|
||||
created: 2025-02-01
|
||||
updated: 2026-02-04
|
||||
platforms: [github-copilot-cli, claude-code, codex]
|
||||
category: content
|
||||
tags: [audio, transcription, whisper, meeting-minutes, speech-to-text]
|
||||
risk: safe
|
||||
---
|
||||
|
||||
## Purpose
|
||||
|
||||
This skill automates audio-to-text transcription with professional Markdown output, extracting rich technical metadata (speakers, timestamps, language, file size, duration) and generating structured meeting minutes and executive summaries. It uses Faster-Whisper or Whisper with zero configuration, working universally across projects without hardcoded paths or API keys.
|
||||
|
||||
Inspired by tools like Plaud, this skill transforms raw audio recordings into actionable documentation, making it ideal for meetings, interviews, lectures, and content analysis.
|
||||
|
||||
## When to Use
|
||||
|
||||
Invoke this skill when:
|
||||
|
||||
- User needs to transcribe audio/video files to text
|
||||
- User wants meeting minutes automatically generated from recordings
|
||||
- User requires speaker identification (diarization) in conversations
|
||||
- User needs subtitles/captions (SRT, VTT formats)
|
||||
- User wants executive summaries of long audio content
|
||||
- User asks variations of "transcribe this audio", "convert audio to text", "generate meeting notes from recording"
|
||||
- User has audio files in common formats (MP3, WAV, M4A, OGG, FLAC, WEBM)
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 0: Discovery (Auto-detect Transcription Tools)
|
||||
|
||||
**Objective:** Identify available transcription engines without user configuration.
|
||||
|
||||
**Actions:**
|
||||
|
||||
Run detection commands to find installed tools:
|
||||
|
||||
```bash
|
||||
# Check for Faster-Whisper (preferred - 4-5x faster)
|
||||
if python3 -c "import faster_whisper" 2>/dev/null; then
|
||||
TRANSCRIBER="faster-whisper"
|
||||
echo "✅ Faster-Whisper detected (optimized)"
|
||||
# Fallback to original Whisper
|
||||
elif python3 -c "import whisper" 2>/dev/null; then
|
||||
TRANSCRIBER="whisper"
|
||||
echo "✅ OpenAI Whisper detected"
|
||||
else
|
||||
TRANSCRIBER="none"
|
||||
echo "⚠️ No transcription tool found"
|
||||
fi
|
||||
|
||||
# Check for ffmpeg (audio format conversion)
|
||||
if command -v ffmpeg &>/dev/null; then
|
||||
echo "✅ ffmpeg available (format conversion enabled)"
|
||||
else
|
||||
echo "ℹ️ ffmpeg not found (limited format support)"
|
||||
fi
|
||||
```
|
||||
|
||||
**If no transcriber found:**
|
||||
|
||||
Offer automatic installation using the provided script:
|
||||
|
||||
```bash
|
||||
echo "⚠️ No transcription tool found"
|
||||
echo ""
|
||||
echo "🔧 Auto-install dependencies? (Recommended)"
|
||||
read -p "Run installation script? [Y/n]: " AUTO_INSTALL
|
||||
|
||||
if [[ ! "$AUTO_INSTALL" =~ ^[Nn] ]]; then
|
||||
# Get skill directory (works for both repo and symlinked installations)
|
||||
SKILL_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
|
||||
# Run installation script
|
||||
if [[ -f "$SKILL_DIR/scripts/install-requirements.sh" ]]; then
|
||||
bash "$SKILL_DIR/scripts/install-requirements.sh"
|
||||
else
|
||||
echo "❌ Installation script not found"
|
||||
echo ""
|
||||
echo "📦 Manual installation:"
|
||||
echo " pip install faster-whisper # Recommended"
|
||||
echo " pip install openai-whisper # Alternative"
|
||||
echo " brew install ffmpeg # Optional (macOS)"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Verify installation succeeded
|
||||
if python3 -c "import faster_whisper" 2>/dev/null || python3 -c "import whisper" 2>/dev/null; then
|
||||
echo "✅ Installation successful! Proceeding with transcription..."
|
||||
else
|
||||
echo "❌ Installation failed. Please install manually."
|
||||
exit 1
|
||||
fi
|
||||
else
|
||||
echo ""
|
||||
echo "📦 Manual installation required:"
|
||||
echo ""
|
||||
echo "Recommended (fastest):"
|
||||
echo " pip install faster-whisper"
|
||||
echo ""
|
||||
echo "Alternative (original):"
|
||||
echo " pip install openai-whisper"
|
||||
echo ""
|
||||
echo "Optional (format conversion):"
|
||||
echo " brew install ffmpeg # macOS"
|
||||
echo " apt install ffmpeg # Linux"
|
||||
echo ""
|
||||
exit 1
|
||||
fi
|
||||
```
|
||||
|
||||
This ensures users can install dependencies with one confirmation, or opt for manual installation if preferred.
|
||||
|
||||
**If transcriber found:**
|
||||
|
||||
Proceed to Step 0b (CLI Detection).
|
||||
|
||||
|
||||
### Step 1: Validate Audio File
|
||||
|
||||
**Objective:** Verify file exists, check format, and extract metadata.
|
||||
|
||||
**Actions:**
|
||||
|
||||
1. **Accept file path or URL** from user:
|
||||
- Local file: `meeting.mp3`
|
||||
- URL: `https://example.com/audio.mp3` (download to temp directory)
|
||||
|
||||
2. **Verify file exists:**
|
||||
|
||||
```bash
|
||||
if [[ ! -f "$AUDIO_FILE" ]]; then
|
||||
echo "❌ File not found: $AUDIO_FILE"
|
||||
exit 1
|
||||
fi
|
||||
```
|
||||
|
||||
3. **Extract metadata** using ffprobe or file utilities:
|
||||
|
||||
```bash
|
||||
# Get file size
|
||||
FILE_SIZE=$(du -h "$AUDIO_FILE" | cut -f1)
|
||||
|
||||
# Get duration and format using ffprobe
|
||||
DURATION=$(ffprobe -v error -show_entries format=duration \
|
||||
-of default=noprint_wrappers=1:nokey=1 "$AUDIO_FILE" 2>/dev/null)
|
||||
FORMAT=$(ffprobe -v error -select_streams a:0 -show_entries \
|
||||
stream=codec_name -of default=noprint_wrappers=1:nokey=1 "$AUDIO_FILE" 2>/dev/null)
|
||||
|
||||
# Convert duration to HH:MM:SS
|
||||
DURATION_HMS=$(date -u -r "$DURATION" +%H:%M:%S 2>/dev/null || echo "Unknown")
|
||||
```
|
||||
|
||||
4. **Check file size** (warn if large for cloud APIs):
|
||||
|
||||
```bash
|
||||
SIZE_MB=$(du -m "$AUDIO_FILE" | cut -f1)
|
||||
if [[ $SIZE_MB -gt 25 ]]; then
|
||||
echo "⚠️ Large file ($FILE_SIZE) - processing may take several minutes"
|
||||
fi
|
||||
```
|
||||
|
||||
5. **Validate format** (supported: MP3, WAV, M4A, OGG, FLAC, WEBM):
|
||||
|
||||
```bash
|
||||
EXTENSION="${AUDIO_FILE##*.}"
|
||||
SUPPORTED_FORMATS=("mp3" "wav" "m4a" "ogg" "flac" "webm" "mp4")
|
||||
|
||||
if [[ ! " ${SUPPORTED_FORMATS[@]} " =~ " ${EXTENSION,,} " ]]; then
|
||||
echo "⚠️ Unsupported format: $EXTENSION"
|
||||
if command -v ffmpeg &>/dev/null; then
|
||||
echo "🔄 Converting to WAV..."
|
||||
ffmpeg -i "$AUDIO_FILE" -ar 16000 "${AUDIO_FILE%.*}.wav" -y
|
||||
AUDIO_FILE="${AUDIO_FILE%.*}.wav"
|
||||
else
|
||||
echo "❌ Install ffmpeg to convert formats: brew install ffmpeg"
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
```
|
||||
|
||||
|
||||
### Step 3: Generate Markdown Output
|
||||
|
||||
**Objective:** Create structured Markdown with metadata, transcription, meeting minutes, and summary.
|
||||
|
||||
**Output Template:**
|
||||
|
||||
```markdown
|
||||
# Audio Transcription Report
|
||||
|
||||
## 📊 Metadata
|
||||
|
||||
| Field | Value |
|
||||
|-------|-------|
|
||||
| **File Name** | {filename} |
|
||||
| **File Size** | {file_size} |
|
||||
| **Duration** | {duration_hms} |
|
||||
| **Language** | {language} ({language_code}) |
|
||||
| **Processed Date** | {process_date} |
|
||||
| **Speakers Identified** | {num_speakers} |
|
||||
| **Transcription Engine** | {engine} (model: {model}) |
|
||||
|
||||
|
||||
## 📋 Meeting Minutes
|
||||
|
||||
### Participants
|
||||
- {speaker_1}
|
||||
- {speaker_2}
|
||||
- ...
|
||||
|
||||
### Topics Discussed
|
||||
1. **{topic_1}** ({timestamp})
|
||||
- {key_point_1}
|
||||
- {key_point_2}
|
||||
|
||||
2. **{topic_2}** ({timestamp})
|
||||
- {key_point_1}
|
||||
|
||||
### Decisions Made
|
||||
- ✅ {decision_1}
|
||||
- ✅ {decision_2}
|
||||
|
||||
### Action Items
|
||||
- [ ] **{action_1}** - Assigned to: {speaker} - Due: {date_if_mentioned}
|
||||
- [ ] **{action_2}** - Assigned to: {speaker}
|
||||
|
||||
|
||||
*Generated by audio-transcriber skill v1.0.0*
|
||||
*Transcription engine: {engine} | Processing time: {elapsed_time}s*
|
||||
```
|
||||
|
||||
**Implementation:**
|
||||
|
||||
Use Python or bash with AI model (Claude/GPT) for intelligent summarization:
|
||||
|
||||
```python
|
||||
def generate_meeting_minutes(segments):
|
||||
"""Extract topics, decisions, action items from transcription."""
|
||||
|
||||
# Group segments by topic (simple clustering by timestamps)
|
||||
topics = cluster_by_topic(segments)
|
||||
|
||||
# Identify action items (keywords: "should", "will", "need to", "action")
|
||||
action_items = extract_action_items(segments)
|
||||
|
||||
# Identify decisions (keywords: "decided", "agreed", "approved")
|
||||
decisions = extract_decisions(segments)
|
||||
|
||||
return {
|
||||
"topics": topics,
|
||||
"decisions": decisions,
|
||||
"action_items": action_items
|
||||
}
|
||||
|
||||
def generate_summary(segments, max_paragraphs=5):
|
||||
"""Create executive summary using AI (Claude/GPT via API or local model)."""
|
||||
|
||||
full_text = " ".join([s["text"] for s in segments])
|
||||
|
||||
# Use Chain of Density approach (from prompt-engineer frameworks)
|
||||
summary_prompt = f"""
|
||||
Summarize the following transcription in {max_paragraphs} concise paragraphs.
|
||||
Focus on key topics, decisions, and action items.
|
||||
|
||||
Transcription:
|
||||
{full_text}
|
||||
"""
|
||||
|
||||
# Call AI model (placeholder - user can integrate Claude API or use local model)
|
||||
summary = call_ai_model(summary_prompt)
|
||||
|
||||
return summary
|
||||
```
|
||||
|
||||
**Output file naming:**
|
||||
|
||||
```bash
|
||||
# v1.1.0: Use timestamp para evitar sobrescrever
|
||||
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
|
||||
TRANSCRIPT_FILE="transcript-${TIMESTAMP}.md"
|
||||
ATA_FILE="ata-${TIMESTAMP}.md"
|
||||
|
||||
echo "$TRANSCRIPT_CONTENT" > "$TRANSCRIPT_FILE"
|
||||
echo "✅ Transcript salvo: $TRANSCRIPT_FILE"
|
||||
|
||||
if [[ -n "$ATA_CONTENT" ]]; then
|
||||
echo "$ATA_CONTENT" > "$ATA_FILE"
|
||||
echo "✅ Ata salva: $ATA_FILE"
|
||||
fi
|
||||
```
|
||||
|
||||
|
||||
#### **SCENARIO A: User Provided Custom Prompt**
|
||||
|
||||
**Workflow:**
|
||||
|
||||
1. **Display user's prompt:**
|
||||
```
|
||||
📝 Prompt fornecido pelo usuário:
|
||||
┌──────────────────────────────────┐
|
||||
│ [User's prompt preview] │
|
||||
└──────────────────────────────────┘
|
||||
```
|
||||
|
||||
2. **Automatically improve with prompt-engineer (if available):**
|
||||
```bash
|
||||
🔧 Melhorando prompt com prompt-engineer...
|
||||
[Invokes: gh copilot -p "melhore este prompt: {user_prompt}"]
|
||||
```
|
||||
|
||||
3. **Show both versions:**
|
||||
```
|
||||
✨ Versão melhorada:
|
||||
┌──────────────────────────────────┐
|
||||
│ Role: Você é um documentador... │
|
||||
│ Instructions: Transforme... │
|
||||
│ Steps: 1) ... 2) ... │
|
||||
│ End Goal: ... │
|
||||
└──────────────────────────────────┘
|
||||
|
||||
📝 Versão original:
|
||||
┌──────────────────────────────────┐
|
||||
│ [User's original prompt] │
|
||||
└──────────────────────────────────┘
|
||||
```
|
||||
|
||||
4. **Ask which to use:**
|
||||
```bash
|
||||
💡 Usar versão melhorada? [s/n] (default: s):
|
||||
```
|
||||
|
||||
5. **Process with selected prompt:**
|
||||
- If "s": use improved
|
||||
- If "n": use original
|
||||
|
||||
|
||||
#### **LLM Processing (Both Scenarios)**
|
||||
|
||||
Once prompt is finalized:
|
||||
|
||||
```python
|
||||
from rich.progress import Progress, SpinnerColumn, TextColumn
|
||||
|
||||
def process_with_llm(transcript, prompt, cli_tool='claude'):
|
||||
full_prompt = f"{prompt}\n\n---\n\nTranscrição:\n\n{transcript}"
|
||||
|
||||
with Progress(
|
||||
SpinnerColumn(),
|
||||
TextColumn("[progress.description]{task.description}"),
|
||||
transient=True
|
||||
) as progress:
|
||||
progress.add_task(
|
||||
description=f"🤖 Processando com {cli_tool}...",
|
||||
total=None
|
||||
)
|
||||
|
||||
if cli_tool == 'claude':
|
||||
result = subprocess.run(
|
||||
['claude', '-'],
|
||||
input=full_prompt,
|
||||
capture_output=True,
|
||||
text=True,
|
||||
timeout=300 # 5 minutes
|
||||
)
|
||||
elif cli_tool == 'gh-copilot':
|
||||
result = subprocess.run(
|
||||
['gh', 'copilot', 'suggest', '-t', 'shell', full_prompt],
|
||||
capture_output=True,
|
||||
text=True,
|
||||
timeout=300
|
||||
)
|
||||
|
||||
if result.returncode == 0:
|
||||
return result.stdout.strip()
|
||||
else:
|
||||
return None
|
||||
```
|
||||
|
||||
**Progress output:**
|
||||
```
|
||||
🤖 Processando com claude... ⠋
|
||||
[After completion:]
|
||||
✅ Ata gerada com sucesso!
|
||||
```
|
||||
|
||||
|
||||
#### **Final Output**
|
||||
|
||||
**Success (both files):**
|
||||
```bash
|
||||
💾 Salvando arquivos...
|
||||
|
||||
✅ Arquivos criados:
|
||||
- transcript-20260203-023045.md (transcript puro)
|
||||
- ata-20260203-023045.md (processado com LLM)
|
||||
|
||||
🧹 Removidos arquivos temporários: metadata.json, transcription.json
|
||||
|
||||
✅ Concluído! Tempo total: 3m 45s
|
||||
```
|
||||
|
||||
**Transcript only (user declined LLM):**
|
||||
```bash
|
||||
💾 Salvando arquivos...
|
||||
|
||||
✅ Arquivo criado:
|
||||
- transcript-20260203-023045.md
|
||||
|
||||
ℹ️ Ata não gerada (processamento LLM recusado pelo usuário)
|
||||
|
||||
🧹 Removidos arquivos temporários: metadata.json, transcription.json
|
||||
|
||||
✅ Concluído!
|
||||
```
|
||||
|
||||
|
||||
### Step 5: Display Results Summary
|
||||
|
||||
**Objective:** Show completion status and next steps.
|
||||
|
||||
**Output:**
|
||||
|
||||
```bash
|
||||
echo ""
|
||||
echo "✅ Transcription Complete!"
|
||||
echo ""
|
||||
echo "📊 Results:"
|
||||
echo " File: $OUTPUT_FILE"
|
||||
echo " Language: $LANGUAGE"
|
||||
echo " Duration: $DURATION_HMS"
|
||||
echo " Speakers: $NUM_SPEAKERS"
|
||||
echo " Words: $WORD_COUNT"
|
||||
echo " Processing time: ${ELAPSED_TIME}s"
|
||||
echo ""
|
||||
echo "📝 Generated:"
|
||||
echo " - $OUTPUT_FILE (Markdown report)"
|
||||
[if alternative formats:]
|
||||
echo " - ${OUTPUT_FILE%.*}.srt (Subtitles)"
|
||||
echo " - ${OUTPUT_FILE%.*}.json (Structured data)"
|
||||
echo ""
|
||||
echo "🎯 Next steps:"
|
||||
echo " 1. Review meeting minutes and action items"
|
||||
echo " 2. Share report with participants"
|
||||
echo " 3. Track action items to completion"
|
||||
```
|
||||
|
||||
|
||||
## Example Usage
|
||||
|
||||
### **Example 1: Basic Transcription**
|
||||
|
||||
**User Input:**
|
||||
```bash
|
||||
copilot> transcribe audio to markdown: meeting-2026-02-02.mp3
|
||||
```
|
||||
|
||||
**Skill Output:**
|
||||
|
||||
```bash
|
||||
✅ Faster-Whisper detected (optimized)
|
||||
✅ ffmpeg available (format conversion enabled)
|
||||
|
||||
📂 File: meeting-2026-02-02.mp3
|
||||
📊 Size: 12.3 MB
|
||||
⏱️ Duration: 00:45:32
|
||||
|
||||
🎙️ Processing...
|
||||
[████████████████████] 100%
|
||||
|
||||
✅ Language detected: Portuguese (pt-BR)
|
||||
👥 Speakers identified: 4
|
||||
📝 Generating Markdown output...
|
||||
|
||||
✅ Transcription Complete!
|
||||
|
||||
📊 Results:
|
||||
File: meeting-2026-02-02.md
|
||||
Language: pt-BR
|
||||
Duration: 00:45:32
|
||||
Speakers: 4
|
||||
Words: 6,842
|
||||
Processing time: 127s
|
||||
|
||||
📝 Generated:
|
||||
- meeting-2026-02-02.md (Markdown report)
|
||||
|
||||
🎯 Next steps:
|
||||
1. Review meeting minutes and action items
|
||||
2. Share report with participants
|
||||
3. Track action items to completion
|
||||
```
|
||||
|
||||
|
||||
### **Example 3: Batch Processing**
|
||||
|
||||
**User Input:**
|
||||
```bash
|
||||
copilot> transcreva estes áudios: recordings/*.mp3
|
||||
```
|
||||
|
||||
**Skill Output:**
|
||||
|
||||
```bash
|
||||
📦 Batch mode: 5 files found
|
||||
1. team-standup.mp3
|
||||
2. client-call.mp3
|
||||
3. brainstorm-session.mp3
|
||||
4. product-demo.mp3
|
||||
5. retrospective.mp3
|
||||
|
||||
🎙️ Processing batch...
|
||||
|
||||
[1/5] team-standup.mp3 ✅ (2m 34s)
|
||||
[2/5] client-call.mp3 ✅ (15m 12s)
|
||||
[3/5] brainstorm-session.mp3 ✅ (8m 47s)
|
||||
[4/5] product-demo.mp3 ✅ (22m 03s)
|
||||
[5/5] retrospective.mp3 ✅ (11m 28s)
|
||||
|
||||
✅ Batch Complete!
|
||||
📝 Generated 5 Markdown reports
|
||||
⏱️ Total processing time: 6m 15s
|
||||
```
|
||||
|
||||
|
||||
### **Example 5: Large File Warning**
|
||||
|
||||
**User Input:**
|
||||
```bash
|
||||
copilot> transcribe audio to markdown: conference-keynote.mp3
|
||||
```
|
||||
|
||||
**Skill Output:**
|
||||
|
||||
```bash
|
||||
✅ Faster-Whisper detected (optimized)
|
||||
|
||||
📂 File: conference-keynote.mp3
|
||||
📊 Size: 87.2 MB
|
||||
⏱️ Duration: 02:15:47
|
||||
⚠️ Large file (87.2 MB) - processing may take several minutes
|
||||
|
||||
Continue? [Y/n]:
|
||||
```
|
||||
|
||||
**User:** `Y`
|
||||
|
||||
```bash
|
||||
🎙️ Processing... (this may take 10-15 minutes)
|
||||
[████░░░░░░░░░░░░░░░░] 20% - Estimated time remaining: 12m
|
||||
```
|
||||
|
||||
|
||||
This skill is **platform-agnostic** and works in any terminal context where GitHub Copilot CLI is available. It does not depend on specific project configurations or external APIs, following the zero-configuration philosophy.
|
||||
250
skills/audio-transcriber/examples/basic-transcription.sh
Executable file
250
skills/audio-transcriber/examples/basic-transcription.sh
Executable file
@@ -0,0 +1,250 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
# Basic Audio Transcription Example
|
||||
# Demonstrates how to use the audio-transcriber skill manually
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
# Configuration
|
||||
AUDIO_FILE="${1:-}"
|
||||
MODEL="${MODEL:-base}" # Options: tiny, base, small, medium, large
|
||||
OUTPUT_FORMAT="${OUTPUT_FORMAT:-markdown}" # Options: markdown, txt, srt, vtt, json
|
||||
|
||||
# Colors for output
|
||||
RED='\033[0;31m'
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[1;33m'
|
||||
BLUE='\033[0;34m'
|
||||
NC='\033[0m' # No Color
|
||||
|
||||
# Helper functions
|
||||
error() {
|
||||
echo -e "${RED}❌ Error: $1${NC}" >&2
|
||||
exit 1
|
||||
}
|
||||
|
||||
success() {
|
||||
echo -e "${GREEN}✅ $1${NC}"
|
||||
}
|
||||
|
||||
info() {
|
||||
echo -e "${BLUE}ℹ️ $1${NC}"
|
||||
}
|
||||
|
||||
warn() {
|
||||
echo -e "${YELLOW}⚠️ $1${NC}"
|
||||
}
|
||||
|
||||
# Check if audio file is provided
|
||||
if [[ -z "$AUDIO_FILE" ]]; then
|
||||
error "Usage: $0 <audio_file>"
|
||||
fi
|
||||
|
||||
# Verify file exists
|
||||
if [[ ! -f "$AUDIO_FILE" ]]; then
|
||||
error "File not found: $AUDIO_FILE"
|
||||
fi
|
||||
|
||||
# Step 0: Discovery - Check for transcription tools
|
||||
info "Step 0: Discovering transcription tools..."
|
||||
|
||||
TRANSCRIBER=""
|
||||
if python3 -c "import faster_whisper" 2>/dev/null; then
|
||||
TRANSCRIBER="faster-whisper"
|
||||
success "Faster-Whisper detected (optimized)"
|
||||
elif python3 -c "import whisper" 2>/dev/null; then
|
||||
TRANSCRIBER="whisper"
|
||||
success "OpenAI Whisper detected"
|
||||
else
|
||||
error "No transcription tool found. Install with: pip install faster-whisper"
|
||||
fi
|
||||
|
||||
# Check for ffmpeg
|
||||
if command -v ffmpeg &>/dev/null; then
|
||||
success "ffmpeg available (format conversion enabled)"
|
||||
else
|
||||
warn "ffmpeg not found (limited format support)"
|
||||
fi
|
||||
|
||||
# Step 1: Extract metadata
|
||||
info "Step 1: Extracting audio metadata..."
|
||||
|
||||
FILE_SIZE=$(du -h "$AUDIO_FILE" | cut -f1)
|
||||
info "File size: $FILE_SIZE"
|
||||
|
||||
# Get duration if ffprobe is available
|
||||
if command -v ffprobe &>/dev/null; then
|
||||
DURATION=$(ffprobe -v error -show_entries format=duration \
|
||||
-of default=noprint_wrappers=1:nokey=1 "$AUDIO_FILE" 2>/dev/null || echo "0")
|
||||
|
||||
# Convert to HH:MM:SS
|
||||
if command -v date &>/dev/null; then
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
# macOS
|
||||
DURATION_HMS=$(date -u -r "${DURATION%.*}" +%H:%M:%S 2>/dev/null || echo "Unknown")
|
||||
else
|
||||
# Linux
|
||||
DURATION_HMS=$(date -u -d @"${DURATION%.*}" +%H:%M:%S 2>/dev/null || echo "Unknown")
|
||||
fi
|
||||
else
|
||||
DURATION_HMS="Unknown"
|
||||
fi
|
||||
|
||||
info "Duration: $DURATION_HMS"
|
||||
else
|
||||
warn "ffprobe not found - cannot extract duration"
|
||||
DURATION="0"
|
||||
DURATION_HMS="Unknown"
|
||||
fi
|
||||
|
||||
# Check file size warning
|
||||
SIZE_MB=$(du -m "$AUDIO_FILE" | cut -f1)
|
||||
if [[ $SIZE_MB -gt 25 ]]; then
|
||||
warn "Large file ($FILE_SIZE) - processing may take several minutes"
|
||||
read -p "Continue? [Y/n]: " CONTINUE
|
||||
if [[ "$CONTINUE" =~ ^[Nn] ]]; then
|
||||
info "Transcription cancelled"
|
||||
exit 0
|
||||
fi
|
||||
fi
|
||||
|
||||
# Step 2: Transcribe using Python
|
||||
info "Step 2: Transcribing audio..."
|
||||
|
||||
OUTPUT_FILE="${AUDIO_FILE%.*}.md"
|
||||
TEMP_JSON="/tmp/transcription_$$.json"
|
||||
|
||||
python3 << EOF
|
||||
import sys
|
||||
import json
|
||||
from datetime import datetime
|
||||
|
||||
try:
|
||||
if "$TRANSCRIBER" == "faster-whisper":
|
||||
from faster_whisper import WhisperModel
|
||||
model = WhisperModel("$MODEL", device="cpu", compute_type="int8")
|
||||
segments, info = model.transcribe("$AUDIO_FILE", language=None, vad_filter=True)
|
||||
|
||||
data = {
|
||||
"language": info.language,
|
||||
"language_probability": round(info.language_probability, 2),
|
||||
"duration": info.duration,
|
||||
"segments": []
|
||||
}
|
||||
|
||||
for segment in segments:
|
||||
data["segments"].append({
|
||||
"start": round(segment.start, 2),
|
||||
"end": round(segment.end, 2),
|
||||
"text": segment.text.strip()
|
||||
})
|
||||
else:
|
||||
import whisper
|
||||
model = whisper.load_model("$MODEL")
|
||||
result = model.transcribe("$AUDIO_FILE")
|
||||
|
||||
data = {
|
||||
"language": result["language"],
|
||||
"duration": result["segments"][-1]["end"] if result["segments"] else 0,
|
||||
"segments": result["segments"]
|
||||
}
|
||||
|
||||
with open("$TEMP_JSON", "w") as f:
|
||||
json.dump(data, f)
|
||||
|
||||
print(f"✅ Language detected: {data['language']}")
|
||||
print(f"📝 Transcribed {len(data['segments'])} segments")
|
||||
|
||||
except Exception as e:
|
||||
print(f"❌ Error: {e}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
EOF
|
||||
|
||||
# Check if transcription succeeded
|
||||
if [[ ! -f "$TEMP_JSON" ]]; then
|
||||
error "Transcription failed"
|
||||
fi
|
||||
|
||||
# Step 3: Generate Markdown output
|
||||
info "Step 3: Generating Markdown report..."
|
||||
|
||||
python3 << 'EOF'
|
||||
import json
|
||||
import sys
|
||||
from datetime import datetime
|
||||
|
||||
# Load transcription data
|
||||
with open("${TEMP_JSON}") as f:
|
||||
data = json.load(f)
|
||||
|
||||
# Prepare metadata
|
||||
filename = "${AUDIO_FILE}".split("/")[-1]
|
||||
file_size = "${FILE_SIZE}"
|
||||
duration_hms = "${DURATION_HMS}"
|
||||
language = data["language"]
|
||||
process_date = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||
num_segments = len(data["segments"])
|
||||
|
||||
# Generate Markdown
|
||||
markdown = f"""# Audio Transcription Report
|
||||
|
||||
## 📊 Metadata
|
||||
|
||||
| Field | Value |
|
||||
|-------|-------|
|
||||
| **File Name** | {filename} |
|
||||
| **File Size** | {file_size} |
|
||||
| **Duration** | {duration_hms} |
|
||||
| **Language** | {language.upper()} |
|
||||
| **Processed Date** | {process_date} |
|
||||
| **Segments** | {num_segments} |
|
||||
| **Transcription Engine** | ${TRANSCRIBER} (model: ${MODEL}) |
|
||||
|
||||
---
|
||||
|
||||
## 🎙️ Full Transcription
|
||||
|
||||
"""
|
||||
|
||||
# Add transcription with timestamps
|
||||
for seg in data["segments"]:
|
||||
start_time = f"{int(seg['start'] // 60):02d}:{int(seg['start'] % 60):02d}"
|
||||
end_time = f"{int(seg['end'] // 60):02d}:{int(seg['end'] % 60):02d}"
|
||||
markdown += f"**[{start_time} → {end_time}]** \n{seg['text']}\n\n"
|
||||
|
||||
markdown += """---
|
||||
|
||||
## 📝 Summary
|
||||
|
||||
*Automatic summary generation requires AI integration (Claude/GPT).*
|
||||
*For now, review the full transcription above.*
|
||||
|
||||
---
|
||||
|
||||
*Generated by audio-transcriber skill example script*
|
||||
*Transcription engine: ${TRANSCRIBER} | Model: ${MODEL}*
|
||||
"""
|
||||
|
||||
# Write to file
|
||||
with open("${OUTPUT_FILE}", "w") as f:
|
||||
f.write(markdown)
|
||||
|
||||
print(f"✅ Markdown report saved: ${OUTPUT_FILE}")
|
||||
EOF
|
||||
|
||||
# Clean up
|
||||
rm -f "$TEMP_JSON"
|
||||
|
||||
# Step 4: Display summary
|
||||
success "Transcription complete!"
|
||||
echo ""
|
||||
echo "📊 Results:"
|
||||
echo " Output file: $OUTPUT_FILE"
|
||||
echo " Transcription engine: $TRANSCRIBER"
|
||||
echo " Model: $MODEL"
|
||||
echo ""
|
||||
info "Next steps:"
|
||||
echo " 1. Review the transcription: cat $OUTPUT_FILE"
|
||||
echo " 2. Edit if needed: vim $OUTPUT_FILE"
|
||||
echo " 3. Share with team or archive"
|
||||
EOF
|
||||
352
skills/audio-transcriber/references/tools-comparison.md
Normal file
352
skills/audio-transcriber/references/tools-comparison.md
Normal file
@@ -0,0 +1,352 @@
|
||||
# Transcription Tools Comparison
|
||||
|
||||
Comprehensive comparison of audio transcription engines supported by the audio-transcriber skill.
|
||||
|
||||
## Overview
|
||||
|
||||
| Tool | Type | Speed | Quality | Cost | Privacy | Offline | Languages |
|
||||
|------|------|-------|---------|------|---------|---------|-----------|
|
||||
| **Faster-Whisper** | Open-source | ⚡⚡⚡⚡⚡ | ⭐⭐⭐⭐⭐ | Free | 100% | ✅ | 99 |
|
||||
| **Whisper** | Open-source | ⚡⚡⚡ | ⭐⭐⭐⭐⭐ | Free | 100% | ✅ | 99 |
|
||||
| Google Speech-to-Text | Commercial API | ⚡⚡⚡⚡ | ⭐⭐⭐⭐⭐ | $0.006/15s | Partial | ❌ | 125+ |
|
||||
| Azure Speech | Commercial API | ⚡⚡⚡⚡ | ⭐⭐⭐⭐ | $1/hour | Partial | ❌ | 100+ |
|
||||
| AssemblyAI | Commercial API | ⚡⚡⚡⚡ | ⭐⭐⭐⭐⭐ | $0.00025/s | Partial | ❌ | 99 |
|
||||
|
||||
---
|
||||
|
||||
## Faster-Whisper (Recommended)
|
||||
|
||||
### Pros
|
||||
✅ **4-5x faster** than original Whisper
|
||||
✅ **Same quality** as original Whisper
|
||||
✅ **Lower memory usage** (50-60% less RAM)
|
||||
✅ **Free and open-source**
|
||||
✅ **100% offline** (privacy guaranteed)
|
||||
✅ **Easy installation** (`pip install faster-whisper`)
|
||||
✅ **Drop-in replacement** for Whisper
|
||||
|
||||
### Cons
|
||||
❌ Requires Python 3.8+
|
||||
❌ Initial model download (~100MB-1.5GB)
|
||||
❌ GPU optional but speeds up significantly
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
pip install faster-whisper
|
||||
```
|
||||
|
||||
### Usage Example
|
||||
|
||||
```python
|
||||
from faster_whisper import WhisperModel
|
||||
|
||||
# Load model (auto-downloads on first run)
|
||||
model = WhisperModel("base", device="cpu", compute_type="int8")
|
||||
|
||||
# Transcribe
|
||||
segments, info = model.transcribe("audio.mp3", language="pt")
|
||||
|
||||
# Print results
|
||||
for segment in segments:
|
||||
print(f"[{segment.start:.2f}s -> {segment.end:.2f}s] {segment.text}")
|
||||
```
|
||||
|
||||
### Model Sizes
|
||||
|
||||
| Model | Size | RAM | Speed (CPU) | Quality |
|
||||
|-------|------|-----|-------------|---------|
|
||||
| `tiny` | 39 MB | ~1 GB | Very fast (~10x realtime) | Basic |
|
||||
| `base` | 74 MB | ~1 GB | Fast (~7x realtime) | Good |
|
||||
| `small` | 244 MB | ~2 GB | Moderate (~4x realtime) | Very good |
|
||||
| `medium` | 769 MB | ~5 GB | Slow (~2x realtime) | Excellent |
|
||||
| `large` | 1550 MB | ~10 GB | Very slow (~1x realtime) | Best |
|
||||
|
||||
**Recommendation:** `small` or `medium` for production use.
|
||||
|
||||
---
|
||||
|
||||
## Whisper (Original)
|
||||
|
||||
### Pros
|
||||
✅ **Official OpenAI model**
|
||||
✅ **Excellent quality**
|
||||
✅ **Free and open-source**
|
||||
✅ **100% offline**
|
||||
✅ **Well-documented**
|
||||
✅ **Large community**
|
||||
|
||||
### Cons
|
||||
❌ **Slower** than Faster-Whisper (4-5x)
|
||||
❌ **Higher memory usage**
|
||||
❌ Requires PyTorch (large dependency)
|
||||
❌ GPU highly recommended for larger models
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
pip install openai-whisper
|
||||
```
|
||||
|
||||
### Usage Example
|
||||
|
||||
```python
|
||||
import whisper
|
||||
|
||||
# Load model
|
||||
model = whisper.load_model("base")
|
||||
|
||||
# Transcribe
|
||||
result = model.transcribe("audio.mp3", language="pt")
|
||||
|
||||
# Print results
|
||||
print(result["text"])
|
||||
```
|
||||
|
||||
### When to Use Whisper vs. Faster-Whisper
|
||||
|
||||
**Use Faster-Whisper if:**
|
||||
- Speed is important
|
||||
- Limited RAM available
|
||||
- Processing many files
|
||||
|
||||
**Use Original Whisper if:**
|
||||
- Faster-Whisper installation issues
|
||||
- Need exact OpenAI implementation
|
||||
- Already have Whisper in project dependencies
|
||||
|
||||
---
|
||||
|
||||
## Google Cloud Speech-to-Text
|
||||
|
||||
### Pros
|
||||
✅ **Very accurate** (industry-leading)
|
||||
✅ **Fast processing** (cloud infrastructure)
|
||||
✅ **125+ languages**
|
||||
✅ **Word-level timestamps**
|
||||
✅ **Punctuation & capitalization**
|
||||
✅ **Speaker diarization** (premium)
|
||||
|
||||
### Cons
|
||||
❌ **Requires internet** (cloud-only)
|
||||
❌ **Costs money** (after free tier)
|
||||
❌ **Privacy concerns** (audio uploaded to Google)
|
||||
❌ Requires GCP account setup
|
||||
❌ Complex authentication
|
||||
|
||||
### Pricing
|
||||
|
||||
- **Free tier:** 60 minutes/month
|
||||
- **Standard:** $0.006 per 15 seconds ($1.44/hour)
|
||||
- **Premium:** $0.009 per 15 seconds (with diarization)
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
pip install google-cloud-speech
|
||||
```
|
||||
|
||||
### Setup
|
||||
|
||||
1. Create GCP project
|
||||
2. Enable Speech-to-Text API
|
||||
3. Create service account & download JSON key
|
||||
4. Set environment variable:
|
||||
```bash
|
||||
export GOOGLE_APPLICATION_CREDENTIALS="path/to/key.json"
|
||||
```
|
||||
|
||||
### Usage Example
|
||||
|
||||
```python
|
||||
from google.cloud import speech
|
||||
|
||||
client = speech.SpeechClient()
|
||||
|
||||
with open("audio.wav", "rb") as audio_file:
|
||||
content = audio_file.read()
|
||||
|
||||
audio = speech.RecognitionAudio(content=content)
|
||||
config = speech.RecognitionConfig(
|
||||
encoding=speech.RecognitionConfig.AudioEncoding.LINEAR16,
|
||||
sample_rate_hertz=16000,
|
||||
language_code="pt-BR",
|
||||
)
|
||||
|
||||
response = client.recognize(config=config, audio=audio)
|
||||
|
||||
for result in response.results:
|
||||
print(result.alternatives[0].transcript)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Azure Speech Services
|
||||
|
||||
### Pros
|
||||
✅ **High accuracy**
|
||||
✅ **100+ languages**
|
||||
✅ **Real-time transcription**
|
||||
✅ **Custom models** (train on your data)
|
||||
✅ **Good Microsoft ecosystem integration**
|
||||
|
||||
### Cons
|
||||
❌ **Requires internet**
|
||||
❌ **Costs money** (after free tier)
|
||||
❌ **Privacy concerns** (cloud processing)
|
||||
❌ Requires Azure account
|
||||
❌ Complex setup
|
||||
|
||||
### Pricing
|
||||
|
||||
- **Free tier:** 5 hours/month
|
||||
- **Standard:** $1.00 per audio hour
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
pip install azure-cognitiveservices-speech
|
||||
```
|
||||
|
||||
### Setup
|
||||
|
||||
1. Create Azure account
|
||||
2. Create Speech resource
|
||||
3. Get API key and region
|
||||
4. Set environment variables:
|
||||
```bash
|
||||
export AZURE_SPEECH_KEY="your-key"
|
||||
export AZURE_SPEECH_REGION="your-region"
|
||||
```
|
||||
|
||||
### Usage Example
|
||||
|
||||
```python
|
||||
import azure.cognitiveservices.speech as speechsdk
|
||||
|
||||
speech_config = speechsdk.SpeechConfig(
|
||||
subscription=os.environ.get('AZURE_SPEECH_KEY'),
|
||||
region=os.environ.get('AZURE_SPEECH_REGION')
|
||||
)
|
||||
|
||||
audio_config = speechsdk.audio.AudioConfig(filename="audio.wav")
|
||||
speech_recognizer = speechsdk.SpeechRecognizer(
|
||||
speech_config=speech_config,
|
||||
audio_config=audio_config
|
||||
)
|
||||
|
||||
result = speech_recognizer.recognize_once()
|
||||
print(result.text)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## AssemblyAI
|
||||
|
||||
### Pros
|
||||
✅ **Modern, developer-friendly API**
|
||||
✅ **Excellent accuracy**
|
||||
✅ **Advanced features** (sentiment, topic detection, PII redaction)
|
||||
✅ **Speaker diarization** (included)
|
||||
✅ **Fast processing**
|
||||
✅ **Good documentation**
|
||||
|
||||
### Cons
|
||||
❌ **Requires internet**
|
||||
❌ **Costs money** (no free tier, only trial credits)
|
||||
❌ **Privacy concerns** (cloud processing)
|
||||
❌ Requires API key
|
||||
|
||||
### Pricing
|
||||
|
||||
- **Free trial:** $50 credits
|
||||
- **Standard:** $0.00025 per second (~$0.90/hour)
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
pip install assemblyai
|
||||
```
|
||||
|
||||
### Setup
|
||||
|
||||
1. Sign up at assemblyai.com
|
||||
2. Get API key
|
||||
3. Set environment variable:
|
||||
```bash
|
||||
export ASSEMBLYAI_API_KEY="your-key"
|
||||
```
|
||||
|
||||
### Usage Example
|
||||
|
||||
```python
|
||||
import assemblyai as aai
|
||||
|
||||
aai.settings.api_key = os.environ["ASSEMBLYAI_API_KEY"]
|
||||
|
||||
transcriber = aai.Transcriber()
|
||||
transcript = transcriber.transcribe("audio.mp3")
|
||||
|
||||
print(transcript.text)
|
||||
|
||||
# Speaker diarization
|
||||
for utterance in transcript.utterances:
|
||||
print(f"Speaker {utterance.speaker}: {utterance.text}")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Recommendation Matrix
|
||||
|
||||
### Use Faster-Whisper if:
|
||||
- ✅ Privacy is critical (local processing)
|
||||
- ✅ Want zero cost (free forever)
|
||||
- ✅ Need offline capability
|
||||
- ✅ Processing many files (speed matters)
|
||||
- ✅ Limited budget
|
||||
|
||||
### Use Google Speech-to-Text if:
|
||||
- ✅ Need absolute best accuracy
|
||||
- ✅ Have budget for cloud services
|
||||
- ✅ Want advanced features (punctuation, diarization)
|
||||
- ✅ Already using GCP ecosystem
|
||||
|
||||
### Use Azure Speech if:
|
||||
- ✅ In Microsoft ecosystem
|
||||
- ✅ Need custom model training
|
||||
- ✅ Want real-time transcription
|
||||
- ✅ Have Azure credits
|
||||
|
||||
### Use AssemblyAI if:
|
||||
- ✅ Need advanced features (sentiment, topics)
|
||||
- ✅ Want easiest API experience
|
||||
- ✅ Need automatic PII redaction
|
||||
- ✅ Value developer experience
|
||||
|
||||
---
|
||||
|
||||
## Performance Benchmarks
|
||||
|
||||
**Test:** 1-hour podcast (MP3, 44.1kHz, stereo)
|
||||
|
||||
| Tool | Processing Time | Accuracy | Cost |
|
||||
|------|----------------|----------|------|
|
||||
| Faster-Whisper (small) | 8 min | 94% | $0 |
|
||||
| Whisper (small) | 32 min | 94% | $0 |
|
||||
| Google Speech | 2 min | 96% | $1.44 |
|
||||
| Azure Speech | 3 min | 95% | $1.00 |
|
||||
| AssemblyAI | 4 min | 96% | $0.90 |
|
||||
|
||||
*Benchmarks run on MacBook Pro M1, 16GB RAM*
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
**For the audio-transcriber skill:**
|
||||
|
||||
1. **Primary:** Faster-Whisper (best balance of speed, quality, privacy, cost)
|
||||
2. **Fallback:** Whisper (if Faster-Whisper unavailable)
|
||||
3. **Optional:** Cloud APIs (user choice for premium features)
|
||||
|
||||
This ensures the skill works out-of-the-box for most users while allowing advanced users to integrate commercial services if needed.
|
||||
190
skills/audio-transcriber/scripts/install-requirements.sh
Executable file
190
skills/audio-transcriber/scripts/install-requirements.sh
Executable file
@@ -0,0 +1,190 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
# Audio Transcriber - Requirements Installation Script
|
||||
# Automatically installs and validates dependencies
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
# Colors
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[1;33m'
|
||||
RED='\033[0;31m'
|
||||
BLUE='\033[0;34m'
|
||||
NC='\033[0m'
|
||||
|
||||
echo -e "${BLUE}🔧 Audio Transcriber - Dependency Installation${NC}"
|
||||
echo ""
|
||||
|
||||
# Check Python
|
||||
if ! command -v python3 &>/dev/null; then
|
||||
echo -e "${RED}❌ Python 3 not found. Please install Python 3.8+${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
PYTHON_VERSION=$(python3 --version | cut -d' ' -f2 | cut -d'.' -f1,2)
|
||||
echo -e "${GREEN}✅ Python ${PYTHON_VERSION} detected${NC}"
|
||||
|
||||
# Check pip
|
||||
if ! python3 -m pip --version &>/dev/null; then
|
||||
echo -e "${RED}❌ pip not found. Please install pip${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo -e "${GREEN}✅ pip available${NC}"
|
||||
echo ""
|
||||
|
||||
# Install system dependencies (macOS only)
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
echo -e "${BLUE}📦 Checking system dependencies (macOS)...${NC}"
|
||||
|
||||
# Check for Homebrew
|
||||
if command -v brew &>/dev/null; then
|
||||
# Install pkg-config and ffmpeg if not present
|
||||
NEED_INSTALL=""
|
||||
|
||||
if ! brew list pkg-config &>/dev/null 2>&1; then
|
||||
NEED_INSTALL="$NEED_INSTALL pkg-config"
|
||||
fi
|
||||
|
||||
if ! brew list ffmpeg &>/dev/null 2>&1; then
|
||||
NEED_INSTALL="$NEED_INSTALL ffmpeg"
|
||||
fi
|
||||
|
||||
if [[ -n "$NEED_INSTALL" ]]; then
|
||||
echo -e "${BLUE}Installing:$NEED_INSTALL${NC}"
|
||||
brew install $NEED_INSTALL --quiet
|
||||
echo -e "${GREEN}✅ System dependencies installed${NC}"
|
||||
else
|
||||
echo -e "${GREEN}✅ System dependencies already installed${NC}"
|
||||
fi
|
||||
else
|
||||
echo -e "${YELLOW}⚠️ Homebrew not found. Install manually if needed:${NC}"
|
||||
echo " /bin/bash -c \"\$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\""
|
||||
fi
|
||||
fi
|
||||
|
||||
echo ""
|
||||
|
||||
# Install faster-whisper (recommended)
|
||||
echo -e "${BLUE}📦 Installing Faster-Whisper...${NC}"
|
||||
|
||||
# Try different installation methods based on Python environment
|
||||
if python3 -m pip install faster-whisper --quiet 2>/dev/null; then
|
||||
echo -e "${GREEN}✅ Faster-Whisper installed successfully${NC}"
|
||||
elif python3 -m pip install --user --break-system-packages faster-whisper --quiet 2>/dev/null; then
|
||||
echo -e "${GREEN}✅ Faster-Whisper installed successfully (user mode)${NC}"
|
||||
else
|
||||
echo -e "${YELLOW}⚠️ Faster-Whisper installation failed, trying Whisper...${NC}"
|
||||
|
||||
if python3 -m pip install openai-whisper --quiet 2>/dev/null; then
|
||||
echo -e "${GREEN}✅ Whisper installed successfully${NC}"
|
||||
elif python3 -m pip install --user --break-system-packages openai-whisper --quiet 2>/dev/null; then
|
||||
echo -e "${GREEN}✅ Whisper installed successfully (user mode)${NC}"
|
||||
else
|
||||
echo -e "${RED}❌ Failed to install transcription engine${NC}"
|
||||
echo ""
|
||||
echo -e "${YELLOW}Manual installation options:${NC}"
|
||||
echo " 1. Use --break-system-packages (macOS/Homebrew Python):"
|
||||
echo " python3 -m pip install --user --break-system-packages openai-whisper"
|
||||
echo ""
|
||||
echo " 2. Use virtual environment (recommended):"
|
||||
echo " python3 -m venv ~/whisper-env"
|
||||
echo " source ~/whisper-env/bin/activate"
|
||||
echo " pip install faster-whisper"
|
||||
echo ""
|
||||
echo " 3. Use pipx (isolated):"
|
||||
echo " brew install pipx"
|
||||
echo " pipx install openai-whisper"
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
|
||||
# Install UI/progress libraries (tqdm, rich)
|
||||
echo ""
|
||||
echo -e "${BLUE}📦 Installing UI libraries (tqdm, rich)...${NC}"
|
||||
|
||||
if python3 -m pip install tqdm rich --quiet 2>/dev/null; then
|
||||
echo -e "${GREEN}✅ tqdm and rich installed successfully${NC}"
|
||||
elif python3 -m pip install --user --break-system-packages tqdm rich --quiet 2>/dev/null; then
|
||||
echo -e "${GREEN}✅ tqdm and rich installed successfully (user mode)${NC}"
|
||||
else
|
||||
echo -e "${YELLOW}⚠️ Optional UI libraries not installed (skill will still work)${NC}"
|
||||
fi
|
||||
|
||||
# Check ffmpeg (optional but recommended)
|
||||
echo ""
|
||||
if command -v ffmpeg &>/dev/null; then
|
||||
echo -e "${GREEN}✅ ffmpeg already installed${NC}"
|
||||
else
|
||||
echo -e "${YELLOW}⚠️ ffmpeg not found (should have been installed earlier)${NC}"
|
||||
if [[ "$OSTYPE" == "darwin"* ]] && command -v brew &>/dev/null; then
|
||||
echo -e "${BLUE}Installing ffmpeg via Homebrew...${NC}"
|
||||
brew install ffmpeg --quiet && echo -e "${GREEN}✅ ffmpeg installed${NC}"
|
||||
else
|
||||
echo -e "${BLUE}ℹ️ ffmpeg is optional but recommended for format conversion${NC}"
|
||||
echo ""
|
||||
echo "Install ffmpeg:"
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
echo " brew install ffmpeg"
|
||||
elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
|
||||
echo " sudo apt install ffmpeg # Debian/Ubuntu"
|
||||
echo " sudo yum install ffmpeg # CentOS/RHEL"
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
|
||||
# Verify installation
|
||||
echo ""
|
||||
echo -e "${BLUE}🔍 Verifying installation...${NC}"
|
||||
|
||||
if python3 -c "import faster_whisper" 2>/dev/null; then
|
||||
echo -e "${GREEN}✅ Faster-Whisper verified${NC}"
|
||||
TRANSCRIBER="Faster-Whisper"
|
||||
elif python3 -c "import whisper" 2>/dev/null; then
|
||||
echo -e "${GREEN}✅ Whisper verified${NC}"
|
||||
TRANSCRIBER="Whisper"
|
||||
else
|
||||
echo -e "${RED}❌ No transcription engine found after installation${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Download initial model (optional)
|
||||
read -p "Download Whisper 'base' model now? (recommended, ~74MB) [Y/n]: " DOWNLOAD_MODEL
|
||||
|
||||
if [[ ! "$DOWNLOAD_MODEL" =~ ^[Nn] ]]; then
|
||||
echo ""
|
||||
echo -e "${BLUE}📥 Downloading 'base' model...${NC}"
|
||||
|
||||
python3 << 'EOF'
|
||||
try:
|
||||
import faster_whisper
|
||||
model = faster_whisper.WhisperModel("base", device="cpu", compute_type="int8")
|
||||
print("✅ Model downloaded successfully")
|
||||
except:
|
||||
try:
|
||||
import whisper
|
||||
model = whisper.load_model("base")
|
||||
print("✅ Model downloaded successfully")
|
||||
except Exception as e:
|
||||
print(f"❌ Model download failed: {e}")
|
||||
EOF
|
||||
fi
|
||||
|
||||
# Success summary
|
||||
echo ""
|
||||
echo -e "${GREEN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
|
||||
echo -e "${GREEN}✅ Installation Complete!${NC}"
|
||||
echo -e "${GREEN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
|
||||
echo ""
|
||||
echo "📊 Installed components:"
|
||||
echo " • Transcription engine: $TRANSCRIBER"
|
||||
if command -v ffmpeg &>/dev/null; then
|
||||
echo " • Format conversion: ffmpeg (available)"
|
||||
else
|
||||
echo " • Format conversion: ffmpeg (not installed)"
|
||||
fi
|
||||
echo ""
|
||||
echo "🚀 Ready to use! Try:"
|
||||
echo " copilot> transcribe audio to markdown: myfile.mp3"
|
||||
echo " claude> transcreva este áudio: myfile.mp3"
|
||||
echo ""
|
||||
486
skills/audio-transcriber/scripts/transcribe.py
Executable file
486
skills/audio-transcriber/scripts/transcribe.py
Executable file
@@ -0,0 +1,486 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Audio Transcriber v1.1.0
|
||||
Transcreve áudio para texto e gera atas/resumos usando LLM.
|
||||
"""
|
||||
|
||||
import os
|
||||
import sys
|
||||
import json
|
||||
import subprocess
|
||||
import shutil
|
||||
from datetime import datetime
|
||||
from pathlib import Path
|
||||
|
||||
# Rich for beautiful terminal output
|
||||
try:
|
||||
from rich.console import Console
|
||||
from rich.prompt import Prompt
|
||||
from rich.panel import Panel
|
||||
from rich.progress import Progress, SpinnerColumn, TextColumn, BarColumn
|
||||
from rich import print as rprint
|
||||
RICH_AVAILABLE = True
|
||||
except ImportError:
|
||||
RICH_AVAILABLE = False
|
||||
print("⚠️ Installing rich for better UI...")
|
||||
subprocess.run([sys.executable, "-m", "pip", "install", "--user", "rich"], check=False)
|
||||
from rich.console import Console
|
||||
from rich.prompt import Prompt
|
||||
from rich.panel import Panel
|
||||
from rich.progress import Progress, SpinnerColumn, TextColumn, BarColumn
|
||||
from rich import print as rprint
|
||||
|
||||
# tqdm for progress bars
|
||||
try:
|
||||
from tqdm import tqdm
|
||||
except ImportError:
|
||||
print("⚠️ Installing tqdm for progress bars...")
|
||||
subprocess.run([sys.executable, "-m", "pip", "install", "--user", "tqdm"], check=False)
|
||||
from tqdm import tqdm
|
||||
|
||||
# Whisper engines
|
||||
try:
|
||||
from faster_whisper import WhisperModel
|
||||
TRANSCRIBER = "faster-whisper"
|
||||
except ImportError:
|
||||
try:
|
||||
import whisper
|
||||
TRANSCRIBER = "whisper"
|
||||
except ImportError:
|
||||
print("❌ Nenhum engine de transcrição encontrado!")
|
||||
print(" Instale: pip install faster-whisper")
|
||||
sys.exit(1)
|
||||
|
||||
console = Console()
|
||||
|
||||
# Template padrão RISEN para fallback
|
||||
DEFAULT_MEETING_PROMPT = """
|
||||
Role: Você é um transcritor profissional especializado em documentação.
|
||||
|
||||
Instructions: Transforme a transcrição fornecida em um documento estruturado e profissional.
|
||||
|
||||
Steps:
|
||||
1. Identifique o tipo de conteúdo (reunião, palestra, entrevista, etc.)
|
||||
2. Extraia os principais tópicos e pontos-chave
|
||||
3. Identifique participantes/speakers (se aplicável)
|
||||
4. Extraia decisões tomadas e ações definidas (se reunião)
|
||||
5. Organize em formato apropriado com seções claras
|
||||
6. Use Markdown para formatação profissional
|
||||
|
||||
End Goal: Documento final bem estruturado, legível e pronto para distribuição.
|
||||
|
||||
Narrowing:
|
||||
- Mantenha objetividade e clareza
|
||||
- Preserve contexto importante
|
||||
- Use formatação Markdown adequada
|
||||
- Inclua timestamps relevantes quando aplicável
|
||||
"""
|
||||
|
||||
|
||||
def detect_cli_tool():
|
||||
"""Detecta qual CLI de LLM está disponível (claude > gh copilot)."""
|
||||
if shutil.which('claude'):
|
||||
return 'claude'
|
||||
elif shutil.which('gh'):
|
||||
result = subprocess.run(['gh', 'copilot', '--version'],
|
||||
capture_output=True, text=True)
|
||||
if result.returncode == 0:
|
||||
return 'gh-copilot'
|
||||
return None
|
||||
|
||||
|
||||
def invoke_prompt_engineer(raw_prompt, timeout=90):
|
||||
"""
|
||||
Invoca prompt-engineer skill via CLI para melhorar/gerar prompts.
|
||||
|
||||
Args:
|
||||
raw_prompt: Prompt a ser melhorado ou meta-prompt
|
||||
timeout: Timeout em segundos
|
||||
|
||||
Returns:
|
||||
str: Prompt melhorado ou DEFAULT_MEETING_PROMPT se falhar
|
||||
"""
|
||||
try:
|
||||
# Tentar via gh copilot
|
||||
console.print("[dim] Invocando prompt-engineer...[/dim]")
|
||||
|
||||
result = subprocess.run(
|
||||
['gh', 'copilot', 'suggest', '-t', 'shell', raw_prompt],
|
||||
capture_output=True,
|
||||
text=True,
|
||||
timeout=timeout
|
||||
)
|
||||
|
||||
if result.returncode == 0 and result.stdout.strip():
|
||||
return result.stdout.strip()
|
||||
else:
|
||||
console.print("[yellow]⚠️ prompt-engineer não respondeu, usando template padrão[/yellow]")
|
||||
return DEFAULT_MEETING_PROMPT
|
||||
|
||||
except subprocess.TimeoutExpired:
|
||||
console.print(f"[red]⚠️ Timeout após {timeout}s, usando template padrão[/red]")
|
||||
return DEFAULT_MEETING_PROMPT
|
||||
except Exception as e:
|
||||
console.print(f"[red]⚠️ Erro ao invocar prompt-engineer: {e}[/red]")
|
||||
return DEFAULT_MEETING_PROMPT
|
||||
|
||||
|
||||
def handle_prompt_workflow(user_prompt, transcript):
|
||||
"""
|
||||
Gerencia fluxo completo de prompts com prompt-engineer.
|
||||
|
||||
Cenário A: Usuário forneceu prompt → Melhorar AUTOMATICAMENTE → Confirmar
|
||||
Cenário B: Sem prompt → Sugerir tipo → Confirmar → Gerar → Confirmar
|
||||
|
||||
Returns:
|
||||
str: Prompt final a usar, ou None se usuário recusou processamento
|
||||
"""
|
||||
prompt_engineer_available = os.path.exists(
|
||||
os.path.expanduser('~/.copilot/skills/prompt-engineer/SKILL.md')
|
||||
)
|
||||
|
||||
# ========== CENÁRIO A: USUÁRIO FORNECEU PROMPT ==========
|
||||
if user_prompt:
|
||||
console.print("\n[cyan]📝 Prompt fornecido pelo usuário[/cyan]")
|
||||
console.print(Panel(user_prompt[:300] + ("..." if len(user_prompt) > 300 else ""),
|
||||
title="Prompt original", border_style="dim"))
|
||||
|
||||
if prompt_engineer_available:
|
||||
# Melhora AUTOMATICAMENTE (sem perguntar)
|
||||
console.print("\n[cyan]🔧 Melhorando prompt com prompt-engineer...[/cyan]")
|
||||
|
||||
improved_prompt = invoke_prompt_engineer(
|
||||
f"melhore este prompt:\n\n{user_prompt}"
|
||||
)
|
||||
|
||||
# Mostrar AMBAS versões
|
||||
console.print("\n[green]✨ Versão melhorada:[/green]")
|
||||
console.print(Panel(improved_prompt[:500] + ("..." if len(improved_prompt) > 500 else ""),
|
||||
title="Prompt otimizado", border_style="green"))
|
||||
|
||||
console.print("\n[dim]📝 Versão original:[/dim]")
|
||||
console.print(Panel(user_prompt[:300] + ("..." if len(user_prompt) > 300 else ""),
|
||||
title="Seu prompt", border_style="dim"))
|
||||
|
||||
# Pergunta qual usar
|
||||
confirm = Prompt.ask(
|
||||
"\n💡 Usar versão melhorada?",
|
||||
choices=["s", "n"],
|
||||
default="s"
|
||||
)
|
||||
|
||||
return improved_prompt if confirm == "s" else user_prompt
|
||||
else:
|
||||
# prompt-engineer não disponível
|
||||
console.print("[yellow]⚠️ prompt-engineer skill não disponível[/yellow]")
|
||||
console.print("[dim]✅ Usando seu prompt original[/dim]")
|
||||
return user_prompt
|
||||
|
||||
# ========== CENÁRIO B: SEM PROMPT - AUTO-GERAÇÃO ==========
|
||||
else:
|
||||
console.print("\n[yellow]⚠️ Nenhum prompt fornecido.[/yellow]")
|
||||
|
||||
if not prompt_engineer_available:
|
||||
console.print("[yellow]⚠️ prompt-engineer skill não encontrado[/yellow]")
|
||||
console.print("[dim]Usando template padrão...[/dim]")
|
||||
return DEFAULT_MEETING_PROMPT
|
||||
|
||||
# PASSO 1: Perguntar se quer auto-gerar
|
||||
console.print("Posso analisar o transcript e sugerir um formato de resumo/ata?")
|
||||
|
||||
generate = Prompt.ask(
|
||||
"\n💡 Gerar prompt automaticamente?",
|
||||
choices=["s", "n"],
|
||||
default="s"
|
||||
)
|
||||
|
||||
if generate == "n":
|
||||
console.print("[dim]✅ Ok, gerando apenas transcript.md (sem ata)[/dim]")
|
||||
return None # Sinaliza: não processar com LLM
|
||||
|
||||
# PASSO 2: Analisar transcript e SUGERIR tipo
|
||||
console.print("\n[cyan]🔍 Analisando transcript...[/cyan]")
|
||||
|
||||
suggestion_meta_prompt = f"""
|
||||
Analise este transcript ({len(transcript)} caracteres) e sugira:
|
||||
|
||||
1. Tipo de conteúdo (reunião, palestra, entrevista, etc.)
|
||||
2. Formato de saída recomendado (ata formal, resumo executivo, notas estruturadas)
|
||||
3. Framework ideal (RISEN, RODES, STAR, etc.)
|
||||
|
||||
Primeiras 1000 palavras do transcript:
|
||||
{transcript[:4000]}
|
||||
|
||||
Responda em 2-3 linhas concisas.
|
||||
"""
|
||||
|
||||
suggested_type = invoke_prompt_engineer(suggestion_meta_prompt)
|
||||
|
||||
# PASSO 3: Mostrar sugestão e CONFIRMAR
|
||||
console.print("\n[green]💡 Sugestão de formato:[/green]")
|
||||
console.print(Panel(suggested_type, title="Análise do transcript", border_style="green"))
|
||||
|
||||
confirm_type = Prompt.ask(
|
||||
"\n💡 Usar este formato?",
|
||||
choices=["s", "n"],
|
||||
default="s"
|
||||
)
|
||||
|
||||
if confirm_type == "n":
|
||||
console.print("[dim]Usando template padrão...[/dim]")
|
||||
return DEFAULT_MEETING_PROMPT
|
||||
|
||||
# PASSO 4: Gerar prompt completo baseado na sugestão
|
||||
console.print("\n[cyan]✨ Gerando prompt estruturado...[/cyan]")
|
||||
|
||||
final_meta_prompt = f"""
|
||||
Crie um prompt completo e estruturado (usando framework apropriado) para:
|
||||
|
||||
{suggested_type}
|
||||
|
||||
O prompt deve instruir uma IA a transformar o transcript em um documento
|
||||
profissional e bem formatado em Markdown.
|
||||
"""
|
||||
|
||||
generated_prompt = invoke_prompt_engineer(final_meta_prompt)
|
||||
|
||||
# PASSO 5: Mostrar prompt gerado e CONFIRMAR
|
||||
console.print("\n[green]✅ Prompt gerado:[/green]")
|
||||
console.print(Panel(generated_prompt[:600] + ("..." if len(generated_prompt) > 600 else ""),
|
||||
title="Preview", border_style="green"))
|
||||
|
||||
confirm_final = Prompt.ask(
|
||||
"\n💡 Usar este prompt?",
|
||||
choices=["s", "n"],
|
||||
default="s"
|
||||
)
|
||||
|
||||
if confirm_final == "s":
|
||||
return generated_prompt
|
||||
else:
|
||||
console.print("[dim]Usando template padrão...[/dim]")
|
||||
return DEFAULT_MEETING_PROMPT
|
||||
|
||||
|
||||
def process_with_llm(transcript, prompt, cli_tool='claude', timeout=300):
|
||||
"""
|
||||
Processa transcript com LLM usando prompt fornecido.
|
||||
|
||||
Args:
|
||||
transcript: Texto transcrito
|
||||
prompt: Prompt instruindo como processar
|
||||
cli_tool: 'claude' ou 'gh-copilot'
|
||||
timeout: Timeout em segundos
|
||||
|
||||
Returns:
|
||||
str: Ata/resumo processado
|
||||
"""
|
||||
full_prompt = f"{prompt}\n\n---\n\nTranscrição:\n\n{transcript}"
|
||||
|
||||
try:
|
||||
with Progress(
|
||||
SpinnerColumn(),
|
||||
TextColumn("[progress.description]{task.description}"),
|
||||
transient=True
|
||||
) as progress:
|
||||
progress.add_task(description=f"🤖 Processando com {cli_tool}...", total=None)
|
||||
|
||||
if cli_tool == 'claude':
|
||||
result = subprocess.run(
|
||||
['claude', '-'],
|
||||
input=full_prompt,
|
||||
capture_output=True,
|
||||
text=True,
|
||||
timeout=timeout
|
||||
)
|
||||
elif cli_tool == 'gh-copilot':
|
||||
result = subprocess.run(
|
||||
['gh', 'copilot', 'suggest', '-t', 'shell', full_prompt],
|
||||
capture_output=True,
|
||||
text=True,
|
||||
timeout=timeout
|
||||
)
|
||||
else:
|
||||
raise ValueError(f"CLI tool desconhecido: {cli_tool}")
|
||||
|
||||
if result.returncode == 0:
|
||||
return result.stdout.strip()
|
||||
else:
|
||||
console.print(f"[red]❌ Erro ao processar com {cli_tool}[/red]")
|
||||
console.print(f"[dim]{result.stderr[:200]}[/dim]")
|
||||
return None
|
||||
|
||||
except subprocess.TimeoutExpired:
|
||||
console.print(f"[red]❌ Timeout após {timeout}s[/red]")
|
||||
return None
|
||||
except Exception as e:
|
||||
console.print(f"[red]❌ Erro: {e}[/red]")
|
||||
return None
|
||||
|
||||
|
||||
def transcribe_audio(audio_file, model="base"):
|
||||
"""
|
||||
Transcreve áudio usando Whisper com barra de progresso.
|
||||
|
||||
Returns:
|
||||
dict: {language, duration, segments: [{start, end, text}]}
|
||||
"""
|
||||
console.print(f"\n[cyan]🎙️ Transcrevendo áudio com {TRANSCRIBER}...[/cyan]")
|
||||
|
||||
try:
|
||||
if TRANSCRIBER == "faster-whisper":
|
||||
model_obj = WhisperModel(model, device="cpu", compute_type="int8")
|
||||
segments, info = model_obj.transcribe(
|
||||
audio_file,
|
||||
language=None,
|
||||
vad_filter=True,
|
||||
word_timestamps=True
|
||||
)
|
||||
|
||||
data = {
|
||||
"language": info.language,
|
||||
"language_probability": round(info.language_probability, 2),
|
||||
"duration": info.duration,
|
||||
"segments": []
|
||||
}
|
||||
|
||||
# Converter generator em lista com progresso
|
||||
console.print("[dim]Processando segmentos...[/dim]")
|
||||
for segment in tqdm(segments, desc="Segmentos", unit="seg"):
|
||||
data["segments"].append({
|
||||
"start": round(segment.start, 2),
|
||||
"end": round(segment.end, 2),
|
||||
"text": segment.text.strip()
|
||||
})
|
||||
|
||||
else: # whisper original
|
||||
import whisper
|
||||
model_obj = whisper.load_model(model)
|
||||
result = model_obj.transcribe(audio_file, word_timestamps=True)
|
||||
|
||||
data = {
|
||||
"language": result["language"],
|
||||
"duration": result["segments"][-1]["end"] if result["segments"] else 0,
|
||||
"segments": result["segments"]
|
||||
}
|
||||
|
||||
console.print(f"[green]✅ Transcrição completa! Idioma: {data['language'].upper()}[/green]")
|
||||
console.print(f"[dim] {len(data['segments'])} segmentos processados[/dim]")
|
||||
|
||||
return data
|
||||
|
||||
except Exception as e:
|
||||
console.print(f"[red]❌ Erro na transcrição: {e}[/red]")
|
||||
sys.exit(1)
|
||||
|
||||
|
||||
def save_outputs(transcript_text, ata_text, audio_file, output_dir="."):
|
||||
"""
|
||||
Salva transcript e ata em arquivos .md com timestamp.
|
||||
|
||||
Returns:
|
||||
tuple: (transcript_path, ata_path or None)
|
||||
"""
|
||||
timestamp = datetime.now().strftime("%Y%m%d-%H%M%S")
|
||||
base_name = Path(audio_file).stem
|
||||
|
||||
# Sempre salva transcript
|
||||
transcript_filename = f"transcript-{timestamp}.md"
|
||||
transcript_path = Path(output_dir) / transcript_filename
|
||||
|
||||
with open(transcript_path, 'w', encoding='utf-8') as f:
|
||||
f.write(transcript_text)
|
||||
|
||||
console.print(f"[green]✅ Transcript salvo:[/green] {transcript_filename}")
|
||||
|
||||
# Salva ata se existir
|
||||
ata_path = None
|
||||
if ata_text:
|
||||
ata_filename = f"ata-{timestamp}.md"
|
||||
ata_path = Path(output_dir) / ata_filename
|
||||
|
||||
with open(ata_path, 'w', encoding='utf-8') as f:
|
||||
f.write(ata_text)
|
||||
|
||||
console.print(f"[green]✅ Ata salva:[/green] {ata_filename}")
|
||||
|
||||
return str(transcript_path), str(ata_path) if ata_path else None
|
||||
|
||||
|
||||
def main():
|
||||
"""Função principal."""
|
||||
import argparse
|
||||
|
||||
parser = argparse.ArgumentParser(description="Audio Transcriber v1.1.0")
|
||||
parser.add_argument("audio_file", help="Arquivo de áudio para transcrever")
|
||||
parser.add_argument("--prompt", help="Prompt customizado para processar transcript")
|
||||
parser.add_argument("--model", default="base", help="Modelo Whisper (tiny/base/small/medium/large)")
|
||||
parser.add_argument("--output-dir", default=".", help="Diretório de saída")
|
||||
|
||||
args = parser.parse_args()
|
||||
|
||||
# Verificar arquivo existe
|
||||
if not os.path.exists(args.audio_file):
|
||||
console.print(f"[red]❌ Arquivo não encontrado: {args.audio_file}[/red]")
|
||||
sys.exit(1)
|
||||
|
||||
console.print("[bold cyan]🎵 Audio Transcriber v1.1.0[/bold cyan]\n")
|
||||
|
||||
# Step 1: Transcrever
|
||||
transcription_data = transcribe_audio(args.audio_file, model=args.model)
|
||||
|
||||
# Gerar texto do transcript
|
||||
transcript_text = f"# Transcrição de Áudio\n\n"
|
||||
transcript_text += f"**Arquivo:** {Path(args.audio_file).name}\n"
|
||||
transcript_text += f"**Idioma:** {transcription_data['language'].upper()}\n"
|
||||
transcript_text += f"**Data:** {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n\n"
|
||||
transcript_text += "---\n\n## Transcrição Completa\n\n"
|
||||
|
||||
for seg in transcription_data["segments"]:
|
||||
start_min = int(seg["start"] // 60)
|
||||
start_sec = int(seg["start"] % 60)
|
||||
end_min = int(seg["end"] // 60)
|
||||
end_sec = int(seg["end"] % 60)
|
||||
transcript_text += f"**[{start_min:02d}:{start_sec:02d} → {end_min:02d}:{end_sec:02d}]** \n{seg['text']}\n\n"
|
||||
|
||||
# Step 2: Detectar CLI
|
||||
cli_tool = detect_cli_tool()
|
||||
|
||||
if not cli_tool:
|
||||
console.print("\n[yellow]⚠️ Nenhuma CLI de IA detectada (Claude ou GitHub Copilot)[/yellow]")
|
||||
console.print("[dim]ℹ️ Salvando apenas transcript.md...[/dim]")
|
||||
|
||||
save_outputs(transcript_text, None, args.audio_file, args.output_dir)
|
||||
|
||||
console.print("\n[cyan]💡 Para gerar ata/resumo:[/cyan]")
|
||||
console.print(" - Instale Claude CLI: pip install claude-cli")
|
||||
console.print(" - Ou GitHub Copilot CLI já está instalado (gh copilot)")
|
||||
return
|
||||
|
||||
console.print(f"\n[green]✅ CLI detectada: {cli_tool}[/green]")
|
||||
|
||||
# Step 3: Workflow de prompt
|
||||
final_prompt = handle_prompt_workflow(args.prompt, transcript_text)
|
||||
|
||||
if final_prompt is None:
|
||||
# Usuário recusou processamento
|
||||
save_outputs(transcript_text, None, args.audio_file, args.output_dir)
|
||||
return
|
||||
|
||||
# Step 4: Processar com LLM
|
||||
ata_text = process_with_llm(transcript_text, final_prompt, cli_tool)
|
||||
|
||||
if ata_text:
|
||||
console.print("[green]✅ Ata gerada com sucesso![/green]")
|
||||
else:
|
||||
console.print("[yellow]⚠️ Falha ao gerar ata, salvando apenas transcript[/yellow]")
|
||||
|
||||
# Step 5: Salvar arquivos
|
||||
console.print("\n[cyan]💾 Salvando arquivos...[/cyan]")
|
||||
save_outputs(transcript_text, ata_text, args.audio_file, args.output_dir)
|
||||
|
||||
console.print("\n[bold green]✅ Concluído![/bold green]")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -292,7 +292,7 @@ jobs:
|
||||
uses: softprops/action-gh-release@v1
|
||||
with:
|
||||
tag_name: ${{ steps.version.outputs.tag }}
|
||||
body_path: RELEASE_NOTES.md
|
||||
body_path: CHANGELOG.md
|
||||
generate_release_notes: true
|
||||
```
|
||||
|
||||
@@ -368,7 +368,7 @@ repo = "repo"
|
||||
git cliff -o CHANGELOG.md
|
||||
|
||||
# Generate for specific range
|
||||
git cliff v1.0.0..v2.0.0 -o RELEASE_NOTES.md
|
||||
git cliff v1.0.0..v2.0.0 -o CHANGELOG.md
|
||||
|
||||
# Preview without writing
|
||||
git cliff --unreleased --dry-run
|
||||
|
||||
70
skills/computer-vision-expert/SKILL.md
Normal file
70
skills/computer-vision-expert/SKILL.md
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
name: computer-vision-expert
|
||||
description: SOTA Computer Vision Expert (2026). Specialized in YOLO26, Segment Anything 3 (SAM 3), Vision Language Models, and real-time spatial analysis.
|
||||
---
|
||||
|
||||
# Computer Vision Expert (SOTA 2026)
|
||||
|
||||
**Role**: Advanced Vision Systems Architect & Spatial Intelligence Expert
|
||||
|
||||
## Purpose
|
||||
To provide expert guidance on designing, implementing, and optimizing state-of-the-art computer vision pipelines. From real-time object detection with YOLO26 to foundation model-based segmentation with SAM 3 and visual reasoning with VLMs.
|
||||
|
||||
## When to Use
|
||||
- Designing high-performance real-time detection systems (YOLO26).
|
||||
- Implementing zero-shot or text-guided segmentation tasks (SAM 3).
|
||||
- Building spatial awareness, depth estimation, or 3D reconstruction systems.
|
||||
- Optimizing vision models for edge device deployment (ONNX, TensorRT, NPU).
|
||||
- Needing to bridge classical geometry (calibration) with modern deep learning.
|
||||
|
||||
## Capabilities
|
||||
|
||||
### 1. Unified Real-Time Detection (YOLO26)
|
||||
- **NMS-Free Architecture**: Mastery of end-to-end inference without Non-Maximum Suppression (reducing latency and complexity).
|
||||
- **Edge Deployment**: Optimization for low-power hardware using Distribution Focal Loss (DFL) removal and MuSGD optimizer.
|
||||
- **Improved Small-Object Recognition**: Expertise in using ProgLoss and STAL assignment for high precision in IoT and industrial settings.
|
||||
|
||||
### 2. Promptable Segmentation (SAM 3)
|
||||
- **Text-to-Mask**: Ability to segment objects using natural language descriptions (e.g., "the blue container on the right").
|
||||
- **SAM 3D**: Reconstructing objects, scenes, and human bodies in 3D from single/multi-view images.
|
||||
- **Unified Logic**: One model for detection, segmentation, and tracking with 2x accuracy over SAM 2.
|
||||
|
||||
### 3. Vision Language Models (VLMs)
|
||||
- **Visual Grounding**: Leveraging Florence-2, PaliGemma 2, or Qwen2-VL for semantic scene understanding.
|
||||
- **Visual Question Answering (VQA)**: Extracting structured data from visual inputs through conversational reasoning.
|
||||
|
||||
### 4. Geometry & Reconstruction
|
||||
- **Depth Anything V2**: State-of-the-art monocular depth estimation for spatial awareness.
|
||||
- **Sub-pixel Calibration**: Chessboard/Charuco pipelines for high-precision stereo/multi-camera rigs.
|
||||
- **Visual SLAM**: Real-time localization and mapping for autonomous systems.
|
||||
|
||||
## Patterns
|
||||
|
||||
### 1. Text-Guided Vision Pipelines
|
||||
- Use SAM 3's text-to-mask capability to isolate specific parts during inspection without needing custom detectors for every variation.
|
||||
- Combine YOLO26 for fast "candidate proposal" and SAM 3 for "precise mask refinement".
|
||||
|
||||
### 2. Deployment-First Design
|
||||
- Leverage YOLO26's simplified ONNX/TensorRT exports (NMS-free).
|
||||
- Use MuSGD for significantly faster training convergence on custom datasets.
|
||||
|
||||
### 3. Progressive 3D Scene Reconstruction
|
||||
- Integrate monocular depth maps with geometric homographies to build accurate 2.5D/3D representations of scenes.
|
||||
|
||||
## Anti-Patterns
|
||||
|
||||
- **Manual NMS Post-processing**: Stick to NMS-free architectures (YOLO26/v10+) for lower overhead.
|
||||
- **Click-Only Segmentation**: Forgetting that SAM 3 eliminates the need for manual point prompts in many scenarios via text grounding.
|
||||
- **Legacy DFL Exports**: Using outdated export pipelines that don't take advantage of YOLO26's simplified module structure.
|
||||
|
||||
## Sharp Edges (2026)
|
||||
|
||||
| Issue | Severity | Solution |
|
||||
|-------|----------|----------|
|
||||
| SAM 3 VRAM Usage | Medium | Use quantized/distilled versions for local GPU inference. |
|
||||
| Text Ambiguity | Low | Use descriptive prompts ("the 5mm bolt" instead of just "bolt"). |
|
||||
| Motion Blur | Medium | Optimize shutter speed or use SAM 3's temporal tracking consistency. |
|
||||
| Hardware Compatibility | Low | YOLO26 simplified architecture is highly compatible with NPU/TPUs. |
|
||||
|
||||
## Related Skills
|
||||
`ai-engineer`, `robotics-expert`, `research-engineer`, `embedded-systems`
|
||||
@@ -1,9 +1,4 @@
|
||||
---
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
|
||||
|
||||
name: frontend-slides
|
||||
description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
|
||||
source: https://github.com/zarazhangrui/frontend-slides
|
||||
|
||||
75
skills/oss-hunter/SKILL.md
Normal file
75
skills/oss-hunter/SKILL.md
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
name: oss-hunter
|
||||
description: Automatically hunt for high-impact OSS contribution opportunities in trending repositories.
|
||||
risk: safe
|
||||
source: https://github.com/jackjin1997/ClawForge
|
||||
metadata: {"openclaw":{"emoji":"🎯","category":"developer"}}
|
||||
---
|
||||
|
||||
# OSS Hunter 🎯
|
||||
|
||||
A precision skill for agents to find, analyze, and strategize for high-impact Open Source contributions. This skill helps you become a top-tier contributor by identifying the most "mergeable" and influential issues in trending repositories.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Use when the user asks to find open source issues to work on.
|
||||
- Use when searching for "help wanted" or "good first issue" tasks in specific domains like AI or Web3.
|
||||
- Use to generate a "Contribution Dossier" with ready-to-execute strategies for trending projects.
|
||||
|
||||
## Quick Start
|
||||
|
||||
Ask your agent:
|
||||
- "Find me some help-wanted issues in trending AI repositories."
|
||||
- "Hunt for bug fixes in langchain-ai/langchain that are suitable for a quick PR."
|
||||
- "Generate a contribution dossier for the most recent trending projects on GitHub."
|
||||
|
||||
## Workflow
|
||||
|
||||
When hunting for contributions, the agent follows this multi-stage protocol:
|
||||
|
||||
### Phase 1: Repository Discovery
|
||||
Use `web_search` or `gh api` to find trending repositories.
|
||||
Focus on:
|
||||
- Stars > 1000
|
||||
- Recent activity (pushed within 24 hours)
|
||||
- Relevant topics (AI, Agentic, Web3, Tooling)
|
||||
|
||||
### Phase 2: Issue Extraction
|
||||
Search for specific labels:
|
||||
- `help-wanted`
|
||||
- `good-first-issue`
|
||||
- `bug`
|
||||
- `v1` / `roadmap`
|
||||
|
||||
```bash
|
||||
gh issue list --repo owner/repo --label "help wanted" --limit 10
|
||||
```
|
||||
|
||||
### Phase 3: Feasibility Analysis
|
||||
Analyze the issue:
|
||||
1. **Reproducibility**: Is there a code snippet to reproduce the bug?
|
||||
2. **Impact**: How many users does this affect?
|
||||
3. **Mergeability**: Check recent PR history. Does the maintainer merge community PRs quickly?
|
||||
4. **Complexity**: Can this be solved by an agent with the current tools?
|
||||
|
||||
### Phase 4: The Dossier
|
||||
Generate a structured report for the human:
|
||||
- **Project Name & Stars**
|
||||
- **Issue Link & Description**
|
||||
- **Root Cause Analysis** (based on code inspection)
|
||||
- **Proposed Fix Strategy**
|
||||
- **Confidence Score** (1-10)
|
||||
|
||||
## Limitations
|
||||
|
||||
- Accuracy depends on the availability of `gh` CLI or `web_search` tools.
|
||||
- Analysis is limited by context window when reading very large repositories.
|
||||
- Cannot guarantee PR acceptance (maintainer discretion).
|
||||
|
||||
---
|
||||
|
||||
## Contributing to the Matrix
|
||||
|
||||
Build a better hunter by adding new heuristics to Phase 3. Submit your improvements to the [ClawForge](https://github.com/jackjin1997/ClawForge).
|
||||
|
||||
*Powered by OpenClaw & ClawForge.*
|
||||
56
skills/oss-hunter/bin/hunter.py
Normal file
56
skills/oss-hunter/bin/hunter.py
Normal file
@@ -0,0 +1,56 @@
|
||||
import os
|
||||
import json
|
||||
import subprocess
|
||||
import sys
|
||||
|
||||
def run_gh_command(args):
|
||||
try:
|
||||
result = subprocess.run(['gh'] + args, capture_output=True, text=True, check=True)
|
||||
return result.stdout
|
||||
except subprocess.CalledProcessError as e:
|
||||
print(f"Error running gh command: {e.stderr}", file=sys.stderr)
|
||||
return None
|
||||
|
||||
def hunt():
|
||||
print("🎯 Hunting for high-impact OSS issues...")
|
||||
|
||||
# 1. Find trending repos (stars > 1000 created/updated recently)
|
||||
repos_json = run_gh_command(['api', 'search/repositories?q=stars:>1000+pushed:>2026-02-01&sort=stars&order=desc', '--jq', '.items[] | {full_name: .full_name, stars: .stargazers_count, description: .description}'])
|
||||
|
||||
if not repos_json:
|
||||
print("No trending repositories found.")
|
||||
return
|
||||
|
||||
repos = [json.loads(line) for line in repos_json.strip().split('\n')[:10]]
|
||||
|
||||
dossier = []
|
||||
|
||||
for repo in repos:
|
||||
name = repo['full_name']
|
||||
print(f"Checking {name}...")
|
||||
|
||||
# 2. Search for help-wanted issues
|
||||
issues_json = run_gh_command(['issue', 'list', '--repo', name, '--label', 'help wanted', '--json', 'number,title,url', '--limit', '3'])
|
||||
|
||||
if issues_json:
|
||||
try:
|
||||
issues = json.loads(issues_json)
|
||||
for issue in issues:
|
||||
dossier.append({
|
||||
'repo': name,
|
||||
'stars': repo['stars'],
|
||||
'number': issue['number'],
|
||||
'title': issue['title'],
|
||||
'url': issue['url']
|
||||
})
|
||||
except json.JSONDecodeError:
|
||||
pass
|
||||
|
||||
print("\n--- 📂 OSS CONTRIBUTION DOSSIER ---")
|
||||
for item in dossier:
|
||||
print(f"\n[{item['repo']} ★{item['stars']}]")
|
||||
print(f"Issue #{item['number']}: {item['title']}")
|
||||
print(f"Link: {item['url']}")
|
||||
|
||||
if __name__ == "__main__":
|
||||
hunt()
|
||||
659
skills/prompt-engineer/README.md
Normal file
659
skills/prompt-engineer/README.md
Normal file
@@ -0,0 +1,659 @@
|
||||
# 🎯 Prompt Engineer
|
||||
|
||||
**Version:** 1.0.1
|
||||
**Status:** ✨ Zero-Config | 🌍 Universal
|
||||
|
||||
Transform raw prompts into optimized, production-ready prompts using 11 established prompting frameworks.
|
||||
|
||||
---
|
||||
|
||||
## 📋 Overview
|
||||
|
||||
**Prompt Engineer** is an intelligent AI skill that analyzes your intentions and automatically generates optimized prompts for Claude, ChatGPT, or any other AI model. Instead of struggling with how to phrase complex requests, simply describe what you want - the skill handles the rest.
|
||||
|
||||
This skill works in **"magic mode"** - it operates silently, only asking questions when absolutely necessary. You provide a rough idea, and it returns a polished, structured prompt ready to use.
|
||||
|
||||
### ✨ Key Features
|
||||
|
||||
- **🎯 Intent Analysis:** Understands what you're trying to accomplish
|
||||
- **🧠 11 Frameworks:** RTF, Chain of Thought, RISEN, RODES, Chain of Density, RACE, RISE, STAR, SOAP, CLEAR, GROW
|
||||
- **🔄 Framework Blending:** Combines multiple frameworks when needed
|
||||
- **❓ Smart Clarification:** Only asks questions when critically needed
|
||||
- **📏 Adaptive Output:** Matches prompt length to task complexity
|
||||
- **🌍 Universal:** Works in any project, any terminal context
|
||||
- **🪄 Magic Mode:** No technical explanations - just results
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### Invoke the Skill
|
||||
|
||||
Use any of these trigger phrases:
|
||||
|
||||
```bash
|
||||
copilot> improve this prompt: [your rough prompt]
|
||||
copilot> optimize prompt: [your idea]
|
||||
copilot> refine prompt: [what you want]
|
||||
copilot> prompt engineering for: [task description]
|
||||
copilot> transform into prompt: [concept]
|
||||
copilot> create prompt for: [goal]
|
||||
```
|
||||
|
||||
### Example 1: Simple Task
|
||||
|
||||
**Input:**
|
||||
```bash
|
||||
copilot> improve this prompt: help me write Python code
|
||||
```
|
||||
|
||||
**Skill asks:**
|
||||
```
|
||||
What type of Python code do you need?
|
||||
- [ ] Data analysis
|
||||
- [ ] Web scraping
|
||||
- [ ] Task automation
|
||||
- [ ] API/backend development
|
||||
```
|
||||
|
||||
**You select:** "Web scraping"
|
||||
|
||||
**Output:**
|
||||
````markdown
|
||||
```
|
||||
You are a Python developer expert in web scraping.
|
||||
|
||||
Task: Create a Python script to scrape data from [specify target website].
|
||||
|
||||
Requirements:
|
||||
- Use BeautifulSoup or Scrapy
|
||||
- Implement pagination and rate limiting
|
||||
- Store data in structured format (CSV or JSON)
|
||||
- Include error handling for network issues
|
||||
|
||||
Output format: Complete, commented Python code with usage examples.
|
||||
```
|
||||
````
|
||||
|
||||
---
|
||||
|
||||
### Example 2: Complex Task (No Clarification Needed)
|
||||
|
||||
**Input:**
|
||||
```bash
|
||||
copilot> create prompt for: product recommendation system with purchase history and market trends
|
||||
```
|
||||
|
||||
**Output:**
|
||||
````markdown
|
||||
```
|
||||
Role: You are a senior machine learning engineer specializing in recommendation systems.
|
||||
|
||||
Objective: Design a product recommendation system that combines user purchase history, preferences, and market trends.
|
||||
|
||||
Details:
|
||||
- Input data sources: user transaction logs, preference surveys, market trend APIs
|
||||
- Algorithm considerations: collaborative filtering, content-based filtering, hybrid approaches
|
||||
- Performance metrics: precision, recall, diversity, novelty
|
||||
- Scalability: system must handle 100k+ users
|
||||
|
||||
Approach step-by-step:
|
||||
1. Analyze the three data sources and their relationships
|
||||
2. Propose 2-3 algorithm approaches with trade-offs
|
||||
3. Design data pipeline architecture
|
||||
4. Define evaluation metrics
|
||||
5. Outline implementation roadmap
|
||||
|
||||
Examples: Show pseudocode for core recommendation logic
|
||||
|
||||
Sense Check: Validate that the solution balances personalization with discovery and scales to production.
|
||||
|
||||
Output format: Technical design document with architecture diagrams and implementation roadmap.
|
||||
```
|
||||
````
|
||||
|
||||
---
|
||||
|
||||
### Example 3: Ambiguous Task (Skill Clarifies)
|
||||
|
||||
**Input:**
|
||||
```bash
|
||||
copilot> transform into prompt: I want to improve my process
|
||||
```
|
||||
|
||||
**Skill asks:**
|
||||
```
|
||||
What process do you want to improve?
|
||||
- [ ] Work/productivity process
|
||||
- [ ] Learning process
|
||||
- [ ] Technical process (development, deployment, etc.)
|
||||
```
|
||||
|
||||
**You select:** "Work process"
|
||||
|
||||
**Skill asks:**
|
||||
```
|
||||
What specific aspect?
|
||||
- [ ] Time management
|
||||
- [ ] Team collaboration
|
||||
- [ ] Decision making
|
||||
```
|
||||
|
||||
**You select:** "Decision making"
|
||||
|
||||
**Output:**
|
||||
````markdown
|
||||
```
|
||||
Context: I struggle with making decisions quickly and effectively at work.
|
||||
|
||||
Objective: Develop a structured framework to improve decision speed and quality.
|
||||
|
||||
Current Reality:
|
||||
- Decisions delayed by excessive analysis
|
||||
- Lack of clear criteria
|
||||
- Uncertainty about when to decide vs. gather information
|
||||
|
||||
Desired Outcome:
|
||||
- Consistent decision-making framework
|
||||
- Clear criteria for different decision types
|
||||
- Reduced decision fatigue
|
||||
|
||||
Your task:
|
||||
1. Assess current patterns and identify bottlenecks
|
||||
2. Propose framework (Eisenhower Matrix, RAPID, Decision Tree)
|
||||
3. Create decision criteria templates
|
||||
4. Design tracking and iteration process
|
||||
|
||||
Output format: Practical playbook with templates, examples, and metrics.
|
||||
```
|
||||
````
|
||||
|
||||
---
|
||||
|
||||
## 📚 Supported Frameworks
|
||||
|
||||
The **Prompt Engineer** skill uses **11 established frameworks** to optimize your prompts. The skill automatically selects and blends these frameworks based on your task - you never need to know or choose them manually.
|
||||
|
||||
---
|
||||
|
||||
### 1. **RTF (Role-Task-Format)**
|
||||
|
||||
**Structure:** Role → Task → Format
|
||||
|
||||
**Best for:** Tasks requiring specific expertise or perspective
|
||||
|
||||
**Components:**
|
||||
- **Role:** "You are a [expert identity]"
|
||||
- **Task:** "Your task is to [specific action]"
|
||||
- **Format:** "Output format: [structure/style]"
|
||||
|
||||
**Example:**
|
||||
```
|
||||
You are a senior Python developer.
|
||||
Task: Refactor this code for better performance.
|
||||
Format: Provide refactored code with inline comments explaining changes.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. **Chain of Thought**
|
||||
|
||||
**Structure:** Problem → Step 1 → Step 2 → ... → Solution
|
||||
|
||||
**Best for:** Complex reasoning, debugging, mathematical problems, logic puzzles
|
||||
|
||||
**Components:**
|
||||
- Break problem into sequential steps
|
||||
- Show reasoning at each stage
|
||||
- Build toward final solution
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Solve this problem step-by-step:
|
||||
1. Identify the core issue
|
||||
2. Analyze contributing factors
|
||||
3. Propose solution approach
|
||||
4. Validate solution against requirements
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. **RISEN**
|
||||
|
||||
**Structure:** Role, Instructions, Steps, End goal, Narrowing
|
||||
|
||||
**Best for:** Multi-phase projects with clear deliverables and constraints
|
||||
|
||||
**Components:**
|
||||
- **Role:** Expert identity
|
||||
- **Instructions:** What to do
|
||||
- **Steps:** Sequential actions
|
||||
- **End goal:** Desired outcome
|
||||
- **Narrowing:** Constraints and focus areas
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Role: You are a DevOps architect.
|
||||
Instructions: Design a CI/CD pipeline for microservices.
|
||||
Steps: 1) Analyze requirements 2) Select tools 3) Design workflow 4) Document
|
||||
End goal: Automated deployment with zero-downtime releases.
|
||||
Narrowing: Focus on AWS, limit to 3 environments (dev/staging/prod).
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. **RODES**
|
||||
|
||||
**Structure:** Role, Objective, Details, Examples, Sense check
|
||||
|
||||
**Best for:** Complex design, system architecture, research proposals
|
||||
|
||||
**Components:**
|
||||
- **Role:** Expert perspective
|
||||
- **Objective:** What to achieve
|
||||
- **Details:** Context and requirements
|
||||
- **Examples:** Concrete illustrations
|
||||
- **Sense check:** Validation criteria
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Role: You are a system architect.
|
||||
Objective: Design a scalable e-commerce platform.
|
||||
Details: Handle 100k concurrent users, sub-200ms response time, multi-region.
|
||||
Examples: Show database schema, caching strategy, load balancing.
|
||||
Sense check: Validate solution meets latency and scalability requirements.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. **Chain of Density**
|
||||
|
||||
**Structure:** Iteration 1 (verbose) → Iteration 2 → ... → Iteration 5 (maximum density)
|
||||
|
||||
**Best for:** Summarization, compression, synthesis of long content
|
||||
|
||||
**Process:**
|
||||
- Start with verbose explanation
|
||||
- Iteratively compress while preserving key information
|
||||
- End with maximally dense version (high information per word)
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Compress this article into progressively denser summaries:
|
||||
1. Initial summary (300 words)
|
||||
2. Compressed (200 words)
|
||||
3. Further compressed (100 words)
|
||||
4. Dense (50 words)
|
||||
5. Maximum density (25 words, all critical points)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. **RACE**
|
||||
|
||||
**Structure:** Role, Audience, Context, Expectation
|
||||
|
||||
**Best for:** Communication, presentations, stakeholder updates, storytelling
|
||||
|
||||
**Components:**
|
||||
- **Role:** Communicator identity
|
||||
- **Audience:** Who you're addressing (expertise level, concerns)
|
||||
- **Context:** Background/situation
|
||||
- **Expectation:** What audience needs to know or do
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Role: You are a product manager.
|
||||
Audience: Non-technical executives.
|
||||
Context: Quarterly business review, product performance down 5%.
|
||||
Expectation: Explain root causes and recovery plan in non-technical terms.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. **RISE**
|
||||
|
||||
**Structure:** Research, Investigate, Synthesize, Evaluate
|
||||
|
||||
**Best for:** Analysis, investigation, systematic exploration, diagnostic work
|
||||
|
||||
**Process:**
|
||||
1. **Research:** Gather information
|
||||
2. **Investigate:** Deep dive into findings
|
||||
3. **Synthesize:** Combine insights
|
||||
4. **Evaluate:** Assess and recommend
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Analyze customer churn data using RISE:
|
||||
Research: Collect churn metrics, exit surveys, support tickets.
|
||||
Investigate: Identify patterns in churned users.
|
||||
Synthesize: Combine findings into themes.
|
||||
Evaluate: Recommend retention strategies based on evidence.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 8. **STAR**
|
||||
|
||||
**Structure:** Situation, Task, Action, Result
|
||||
|
||||
**Best for:** Problem-solving with rich context, case studies, retrospectives
|
||||
|
||||
**Components:**
|
||||
- **Situation:** Background context
|
||||
- **Task:** Specific challenge
|
||||
- **Action:** What needs doing
|
||||
- **Result:** Expected outcome
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Situation: Legacy monolith causing deployment delays (2 weeks per release).
|
||||
Task: Modernize architecture to enable daily deployments.
|
||||
Action: Migrate to microservices, implement CI/CD, containerize.
|
||||
Result: Deploy 10+ times per day with <5% rollback rate.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 9. **SOAP**
|
||||
|
||||
**Structure:** Subjective, Objective, Assessment, Plan
|
||||
|
||||
**Best for:** Structured documentation, medical records, technical logs, incident reports
|
||||
|
||||
**Components:**
|
||||
- **Subjective:** Reported information (symptoms, complaints)
|
||||
- **Objective:** Observable facts (metrics, data)
|
||||
- **Assessment:** Analysis and diagnosis
|
||||
- **Plan:** Recommended actions
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Incident Report (SOAP):
|
||||
Subjective: Users report slow page loads starting 10 AM.
|
||||
Objective: Average response time increased from 200ms to 3s. CPU at 95%.
|
||||
Assessment: Database connection pool exhausted due to traffic spike.
|
||||
Plan: 1) Scale pool size 2) Add monitoring alerts 3) Review query performance.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 10. **CLEAR**
|
||||
|
||||
**Structure:** Collaborative, Limited, Emotional, Appreciable, Refinable
|
||||
|
||||
**Best for:** Goal-setting, OKRs, measurable objectives, team alignment
|
||||
|
||||
**Components:**
|
||||
- **Collaborative:** Who's involved
|
||||
- **Limited:** Scope boundaries (time, resources)
|
||||
- **Emotional:** Why it matters (motivation)
|
||||
- **Appreciable:** Measurable progress indicators
|
||||
- **Refinable:** How to iterate and improve
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Q1 Objective (CLEAR):
|
||||
Collaborative: Engineering + Product teams.
|
||||
Limited: Complete by March 31, budget $50k, 2 engineers allocated.
|
||||
Emotional: Reduces customer support load by 30%, improves satisfaction.
|
||||
Appreciable: Track weekly via tickets resolved, NPS score, deployment count.
|
||||
Refinable: Bi-weekly retrospectives, adjust priorities based on feedback.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 11. **GROW**
|
||||
|
||||
**Structure:** Goal, Reality, Options, Will
|
||||
|
||||
**Best for:** Coaching, personal development, growth planning, mentorship
|
||||
|
||||
**Components:**
|
||||
- **Goal:** What to achieve
|
||||
- **Reality:** Current situation (strengths, gaps)
|
||||
- **Options:** Possible approaches
|
||||
- **Will:** Commitment to action
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Career Development (GROW):
|
||||
Goal: Become senior engineer within 12 months.
|
||||
Reality: Strong coding skills, weak in system design and leadership.
|
||||
Options: 1) Take system design course 2) Lead a project 3) Find mentor.
|
||||
Will: Commit to 5 hours/week study, lead Q2 project, find mentor by Feb.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Framework Selection Logic
|
||||
|
||||
The skill analyzes your input and:
|
||||
|
||||
1. **Detects task type**
|
||||
- Coding, writing, analysis, design, communication, etc.
|
||||
|
||||
2. **Identifies complexity**
|
||||
- Simple (1-2 sentences) → Fast, minimal structure
|
||||
- Moderate (paragraph) → Standard framework
|
||||
- Complex (detailed requirements) → Advanced framework or blend
|
||||
|
||||
3. **Selects primary framework**
|
||||
- RTF → Role-based tasks
|
||||
- Chain of Thought → Step-by-step reasoning
|
||||
- RISEN/RODES → Complex projects
|
||||
- RACE → Communication
|
||||
- STAR → Contextual problems
|
||||
- And so on...
|
||||
|
||||
4. **Blends secondary frameworks when needed**
|
||||
- RODES + Chain of Thought → Complex technical projects
|
||||
- CLEAR + GROW → Leadership goals
|
||||
- RACE + STAR → Strategic communication
|
||||
|
||||
**You never choose the framework manually** - the skill does it automatically in "magic mode."
|
||||
|
||||
---
|
||||
|
||||
### Common Framework Blends
|
||||
|
||||
| Task Type | Primary Framework | Blended With | Result |
|
||||
|-----------|------------------|--------------|--------|
|
||||
| Complex technical design | RODES | Chain of Thought | Structured design with step-by-step reasoning |
|
||||
| Leadership development | CLEAR | GROW | Measurable goals with action commitment |
|
||||
| Strategic communication | RACE | STAR | Audience-aware storytelling with context |
|
||||
| Incident investigation | RISE | SOAP | Systematic analysis with structured documentation |
|
||||
| Project planning | RISEN | RTF | Multi-phase delivery with role clarity |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 How It Works
|
||||
|
||||
```
|
||||
User Input (rough prompt)
|
||||
↓
|
||||
┌────────────────────────┐
|
||||
│ 1. Analyze Intent │ What is the user trying to do?
|
||||
│ - Task type │ Coding? Writing? Analysis? Design?
|
||||
│ - Complexity │ Simple, moderate, complex?
|
||||
│ - Clarity │ Clear or ambiguous?
|
||||
└────────┬───────────────┘
|
||||
↓
|
||||
┌────────────────────────┐
|
||||
│ 2. Clarify (Optional) │ Only if critically needed
|
||||
│ - Ask 2-3 questions │ Multiple choice when possible
|
||||
│ - Fill missing gaps │
|
||||
└────────┬───────────────┘
|
||||
↓
|
||||
┌────────────────────────┐
|
||||
│ 3. Select Framework(s) │ Silent selection
|
||||
│ - Map task → framework
|
||||
│ - Blend if needed │
|
||||
└────────┬───────────────┘
|
||||
↓
|
||||
┌────────────────────────┐
|
||||
│ 4. Generate Prompt │ Apply framework rules
|
||||
│ - Add role/context │
|
||||
│ - Structure task │
|
||||
│ - Define format │
|
||||
│ - Add examples │
|
||||
└────────┬───────────────┘
|
||||
↓
|
||||
┌────────────────────────┐
|
||||
│ 5. Output │ Clean, copy-ready
|
||||
│ Markdown code block │ No explanations
|
||||
└────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Use Cases
|
||||
|
||||
### Coding
|
||||
|
||||
```bash
|
||||
copilot> optimize prompt: create REST API in Python
|
||||
```
|
||||
|
||||
→ Generates structured prompt with role, requirements, output format, examples
|
||||
|
||||
---
|
||||
|
||||
### Writing
|
||||
|
||||
```bash
|
||||
copilot> create prompt for: write technical article about microservices
|
||||
```
|
||||
|
||||
→ Generates audience-aware prompt with structure, tone, and content guidelines
|
||||
|
||||
---
|
||||
|
||||
### Analysis
|
||||
|
||||
```bash
|
||||
copilot> refine prompt: analyze sales data and identify trends
|
||||
```
|
||||
|
||||
→ Generates step-by-step analytical framework with visualization requirements
|
||||
|
||||
---
|
||||
|
||||
### Decision Making
|
||||
|
||||
```bash
|
||||
copilot> improve this prompt: I need to decide between technology A and B
|
||||
```
|
||||
|
||||
→ Generates decision framework with criteria, trade-offs, and validation
|
||||
|
||||
---
|
||||
|
||||
### Learning
|
||||
|
||||
```bash
|
||||
copilot> transform into prompt: learn machine learning from zero
|
||||
```
|
||||
|
||||
→ Generates learning path prompt with phases, resources, and milestones
|
||||
|
||||
---
|
||||
|
||||
## ❓ FAQ
|
||||
|
||||
### Q: Does this skill work outside of Obsidian vaults?
|
||||
**A:** Yes! It's a **universal skill** that works in any terminal context. It doesn't depend on vault structure, project configuration, or external files.
|
||||
|
||||
---
|
||||
|
||||
### Q: Do I need to know prompting frameworks?
|
||||
**A:** No. The skill knows all 11 frameworks and selects the best one(s) automatically based on your task.
|
||||
|
||||
---
|
||||
|
||||
### Q: Will the skill explain which framework it used?
|
||||
**A:** No. It operates in "magic mode" - you get the polished prompt without technical explanations. If you want to know, you can ask explicitly.
|
||||
|
||||
---
|
||||
|
||||
### Q: How many questions will the skill ask me?
|
||||
**A:** Maximum 2-3 questions, and only when information is critically missing. Most of the time, it generates the prompt directly.
|
||||
|
||||
---
|
||||
|
||||
### Q: Can I customize the frameworks?
|
||||
**A:** The skill uses standard framework definitions. You can't customize them, but you can provide additional constraints in your input (e.g., "create a short prompt for...").
|
||||
|
||||
---
|
||||
|
||||
### Q: Does it support languages other than English?
|
||||
**A:** Yes. If you provide input in Portuguese, it generates the prompt in Portuguese. Same for English or mixed inputs.
|
||||
|
||||
---
|
||||
|
||||
### Q: What if I don't like the generated prompt?
|
||||
**A:** You can ask the skill to refine it: "make it shorter", "add more examples", "focus on X aspect", etc.
|
||||
|
||||
---
|
||||
|
||||
### Q: Can I use this for any AI model (Claude, ChatGPT, Gemini)?
|
||||
**A:** Yes. The prompts are model-agnostic and work with any conversational AI.
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Installation (Global Setup)
|
||||
|
||||
This skill is designed to work **globally** across all your projects.
|
||||
|
||||
### Option 1: Use from Repository
|
||||
|
||||
1. Clone the repository:
|
||||
```bash
|
||||
git clone https://github.com/eric.andrade/cli-ai-skills.git
|
||||
```
|
||||
|
||||
2. Configure Copilot to load skills globally:
|
||||
```bash
|
||||
# Add to ~/.copilot/config.json
|
||||
{
|
||||
"skills": {
|
||||
"directories": [
|
||||
"/path/to/cli-ai-skills/.github/skills"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Option 2: Copy to Global Skills Directory
|
||||
|
||||
```bash
|
||||
cp -r /path/to/cli-ai-skills/.github/skills/prompt-engineer ~/.copilot/global-skills/
|
||||
```
|
||||
|
||||
Then configure:
|
||||
```bash
|
||||
# Add to ~/.copilot/config.json
|
||||
{
|
||||
"skills": {
|
||||
"directories": [
|
||||
"~/.copilot/global-skills"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📖 Learn More
|
||||
|
||||
- **[Skill Development Guide](../../resources/skills-development.md)** - Learn how to create your own skills
|
||||
- **[SKILL.md](./SKILL.md)** - Full technical specification of this skill
|
||||
- **[Repository README](../../README.md)** - Overview of all available skills
|
||||
|
||||
---
|
||||
|
||||
## 📄 Version
|
||||
|
||||
**v1.0.1** | Zero-Config | Universal
|
||||
*Works in any project, any context, any terminal.*
|
||||
@@ -1,272 +1,252 @@
|
||||
---
|
||||
name: prompt-engineer
|
||||
description: Expert prompt engineer specializing in advanced prompting
|
||||
techniques, LLM optimization, and AI system design. Masters chain-of-thought,
|
||||
constitutional AI, and production prompt strategies. Use when building AI
|
||||
features, improving agent performance, or crafting system prompts.
|
||||
metadata:
|
||||
model: inherit
|
||||
description: "Transforms user prompts into optimized prompts using frameworks (RTF, RISEN, Chain of Thought, RODES, Chain of Density, RACE, RISE, STAR, SOAP, CLEAR, GROW)"
|
||||
version: 1.1.0
|
||||
author: Eric Andrade
|
||||
created: 2025-02-01
|
||||
updated: 2026-02-04
|
||||
platforms: [github-copilot-cli, claude-code, codex]
|
||||
category: automation
|
||||
tags: [prompt-engineering, optimization, frameworks, ai-enhancement]
|
||||
risk: safe
|
||||
---
|
||||
|
||||
## Use this skill when
|
||||
|
||||
- Working on prompt engineer tasks or workflows
|
||||
- Needing guidance, best practices, or checklists for prompt engineer
|
||||
|
||||
## Do not use this skill when
|
||||
|
||||
- The task is unrelated to prompt engineer
|
||||
- You need a different domain or tool outside this scope
|
||||
|
||||
## Instructions
|
||||
|
||||
- Clarify goals, constraints, and required inputs.
|
||||
- Apply relevant best practices and validate outcomes.
|
||||
- Provide actionable steps and verification.
|
||||
- If detailed examples are required, open `resources/implementation-playbook.md`.
|
||||
|
||||
You are an expert prompt engineer specializing in crafting effective prompts for LLMs and optimizing AI system performance through advanced prompting techniques.
|
||||
|
||||
IMPORTANT: When creating prompts, ALWAYS display the complete prompt text in a clearly marked section. Never describe a prompt without showing it. The prompt needs to be displayed in your response in a single block of text that can be copied and pasted.
|
||||
|
||||
## Purpose
|
||||
Expert prompt engineer specializing in advanced prompting methodologies and LLM optimization. Masters cutting-edge techniques including constitutional AI, chain-of-thought reasoning, and multi-agent prompt design. Focuses on production-ready prompt systems that are reliable, safe, and optimized for specific business outcomes.
|
||||
|
||||
## Capabilities
|
||||
This skill transforms raw, unstructured user prompts into highly optimized prompts using established prompting frameworks. It analyzes user intent, identifies task complexity, and intelligently selects the most appropriate framework(s) to maximize Claude/ChatGPT output quality.
|
||||
|
||||
### Advanced Prompting Techniques
|
||||
The skill operates in "magic mode" - it works silently behind the scenes, only interacting with users when clarification is critically needed. Users receive polished, ready-to-use prompts without technical explanations or framework jargon.
|
||||
|
||||
#### Chain-of-Thought & Reasoning
|
||||
- Chain-of-thought (CoT) prompting for complex reasoning tasks
|
||||
- Few-shot chain-of-thought with carefully crafted examples
|
||||
- Zero-shot chain-of-thought with "Let's think step by step"
|
||||
- Tree-of-thoughts for exploring multiple reasoning paths
|
||||
- Self-consistency decoding with multiple reasoning chains
|
||||
- Least-to-most prompting for complex problem decomposition
|
||||
- Program-aided language models (PAL) for computational tasks
|
||||
This is a **universal skill** that works in any terminal context, not limited to Obsidian vaults or specific project structures.
|
||||
|
||||
#### Constitutional AI & Safety
|
||||
- Constitutional AI principles for self-correction and alignment
|
||||
- Critique and revise patterns for output improvement
|
||||
- Safety prompting techniques to prevent harmful outputs
|
||||
- Jailbreak detection and prevention strategies
|
||||
- Content filtering and moderation prompt patterns
|
||||
- Ethical reasoning and bias mitigation in prompts
|
||||
- Red teaming prompts for adversarial testing
|
||||
## When to Use
|
||||
|
||||
#### Meta-Prompting & Self-Improvement
|
||||
- Meta-prompting for prompt optimization and generation
|
||||
- Self-reflection and self-evaluation prompt patterns
|
||||
- Auto-prompting for dynamic prompt generation
|
||||
- Prompt compression and efficiency optimization
|
||||
- A/B testing frameworks for prompt performance
|
||||
- Iterative prompt refinement methodologies
|
||||
- Performance benchmarking and evaluation metrics
|
||||
Invoke this skill when:
|
||||
|
||||
### Model-Specific Optimization
|
||||
- User provides a vague or generic prompt (e.g., "help me code Python")
|
||||
- User has a complex idea but struggles to articulate it clearly
|
||||
- User's prompt lacks structure, context, or specific requirements
|
||||
- Task requires step-by-step reasoning (debugging, analysis, design)
|
||||
- User needs a prompt for a specific AI task but doesn't know prompting frameworks
|
||||
- User wants to improve an existing prompt's effectiveness
|
||||
- User asks variations of "how do I ask AI to..." or "create a prompt for..."
|
||||
|
||||
#### OpenAI Models (GPT-4o, o1-preview, o1-mini)
|
||||
- Function calling optimization and structured outputs
|
||||
- JSON mode utilization for reliable data extraction
|
||||
- System message design for consistent behavior
|
||||
- Temperature and parameter tuning for different use cases
|
||||
- Token optimization strategies for cost efficiency
|
||||
- Multi-turn conversation management
|
||||
- Image and multimodal prompt engineering
|
||||
## Workflow
|
||||
|
||||
#### Anthropic Claude (4.5 Sonnet, Haiku, Opus)
|
||||
- Constitutional AI alignment with Claude's training
|
||||
- Tool use optimization for complex workflows
|
||||
- Computer use prompting for automation tasks
|
||||
- XML tag structuring for clear prompt organization
|
||||
- Context window optimization for long documents
|
||||
- Safety considerations specific to Claude's capabilities
|
||||
- Harmlessness and helpfulness balancing
|
||||
### Step 1: Analyze Intent
|
||||
|
||||
#### Open Source Models (Llama, Mixtral, Qwen)
|
||||
- Model-specific prompt formatting and special tokens
|
||||
- Fine-tuning prompt strategies for domain adaptation
|
||||
- Instruction-following optimization for different architectures
|
||||
- Memory and context management for smaller models
|
||||
- Quantization considerations for prompt effectiveness
|
||||
- Local deployment optimization strategies
|
||||
- Custom system prompt design for specialized models
|
||||
**Objective:** Understand what the user truly wants to accomplish.
|
||||
|
||||
### Production Prompt Systems
|
||||
**Actions:**
|
||||
1. Read the raw prompt provided by the user
|
||||
2. Detect task characteristics:
|
||||
- **Type:** coding, writing, analysis, design, learning, planning, decision-making, creative, etc.
|
||||
- **Complexity:** simple (one-step), moderate (multi-step), complex (requires reasoning/design)
|
||||
- **Clarity:** clear intention vs. ambiguous/vague
|
||||
- **Domain:** technical, business, creative, academic, personal, etc.
|
||||
3. Identify implicit requirements:
|
||||
- Does user need examples?
|
||||
- Is output format specified?
|
||||
- Are there constraints (time, resources, scope)?
|
||||
- Is this exploratory or execution-focused?
|
||||
|
||||
#### Prompt Templates & Management
|
||||
- Dynamic prompt templating with variable injection
|
||||
- Conditional prompt logic based on context
|
||||
- Multi-language prompt adaptation and localization
|
||||
- Version control and A/B testing for prompts
|
||||
- Prompt libraries and reusable component systems
|
||||
- Environment-specific prompt configurations
|
||||
- Rollback strategies for prompt deployments
|
||||
**Detection Patterns:**
|
||||
- **Simple tasks:** Short prompts (<50 chars), single verb, no context
|
||||
- **Complex tasks:** Long prompts (>200 chars), multiple requirements, conditional logic
|
||||
- **Ambiguous tasks:** Generic verbs ("help", "improve"), missing object/context
|
||||
- **Structured tasks:** Mentions steps, phases, deliverables, stakeholders
|
||||
|
||||
#### RAG & Knowledge Integration
|
||||
- Retrieval-augmented generation prompt optimization
|
||||
- Context compression and relevance filtering
|
||||
- Query understanding and expansion prompts
|
||||
- Multi-document reasoning and synthesis
|
||||
- Citation and source attribution prompting
|
||||
- Hallucination reduction techniques
|
||||
- Knowledge graph integration prompts
|
||||
|
||||
#### Agent & Multi-Agent Prompting
|
||||
- Agent role definition and persona creation
|
||||
- Multi-agent collaboration and communication protocols
|
||||
- Task decomposition and workflow orchestration
|
||||
- Inter-agent knowledge sharing and memory management
|
||||
- Conflict resolution and consensus building prompts
|
||||
- Tool selection and usage optimization
|
||||
- Agent evaluation and performance monitoring
|
||||
### Step 3: Select Framework(s)
|
||||
|
||||
### Specialized Applications
|
||||
**Objective:** Map task characteristics to optimal prompting framework(s).
|
||||
|
||||
#### Business & Enterprise
|
||||
- Customer service chatbot optimization
|
||||
- Sales and marketing copy generation
|
||||
- Legal document analysis and generation
|
||||
- Financial analysis and reporting prompts
|
||||
- HR and recruitment screening assistance
|
||||
- Executive summary and reporting automation
|
||||
- Compliance and regulatory content generation
|
||||
**Framework Mapping Logic:**
|
||||
|
||||
#### Creative & Content
|
||||
- Creative writing and storytelling prompts
|
||||
- Content marketing and SEO optimization
|
||||
- Brand voice and tone consistency
|
||||
- Social media content generation
|
||||
- Video script and podcast outline creation
|
||||
- Educational content and curriculum development
|
||||
- Translation and localization prompts
|
||||
| Task Type | Recommended Framework(s) | Rationale |
|
||||
|-----------|-------------------------|-----------|
|
||||
| **Role-based tasks** (act as expert, consultant) | **RTF** (Role-Task-Format) | Clear role definition + task + output format |
|
||||
| **Step-by-step reasoning** (debugging, proof, logic) | **Chain of Thought** | Encourages explicit reasoning steps |
|
||||
| **Structured projects** (multi-phase, deliverables) | **RISEN** (Role, Instructions, Steps, End goal, Narrowing) | Comprehensive structure for complex work |
|
||||
| **Complex design/analysis** (systems, architecture) | **RODES** (Role, Objective, Details, Examples, Sense check) | Balances detail with validation |
|
||||
| **Summarization** (compress, synthesize) | **Chain of Density** | Iterative refinement to essential info |
|
||||
| **Communication** (reports, presentations, storytelling) | **RACE** (Role, Audience, Context, Expectation) | Audience-aware messaging |
|
||||
| **Investigation/analysis** (research, diagnosis) | **RISE** (Research, Investigate, Synthesize, Evaluate) | Systematic analytical approach |
|
||||
| **Contextual situations** (problem-solving with background) | **STAR** (Situation, Task, Action, Result) | Context-rich problem framing |
|
||||
| **Documentation** (medical, technical, records) | **SOAP** (Subjective, Objective, Assessment, Plan) | Structured information capture |
|
||||
| **Goal-setting** (OKRs, objectives, targets) | **CLEAR** (Collaborative, Limited, Emotional, Appreciable, Refinable) | Goal clarity and actionability |
|
||||
| **Coaching/development** (mentoring, growth) | **GROW** (Goal, Reality, Options, Will) | Developmental conversation structure |
|
||||
|
||||
#### Technical & Code
|
||||
- Code generation and optimization prompts
|
||||
- Technical documentation and API documentation
|
||||
- Debugging and error analysis assistance
|
||||
- Architecture design and system analysis
|
||||
- Test case generation and quality assurance
|
||||
- DevOps and infrastructure as code prompts
|
||||
- Security analysis and vulnerability assessment
|
||||
**Blending Strategy:**
|
||||
- **Combine 2-3 frameworks** when task spans multiple types
|
||||
- Example: Complex technical project → **RODES + Chain of Thought** (structure + reasoning)
|
||||
- Example: Leadership decision → **CLEAR + GROW** (goal clarity + development)
|
||||
|
||||
### Evaluation & Testing
|
||||
**Selection Criteria:**
|
||||
- Primary framework = best match to core task type
|
||||
- Secondary framework(s) = address additional complexity dimensions
|
||||
- Avoid over-engineering: simple tasks get simple frameworks
|
||||
|
||||
#### Performance Metrics
|
||||
- Task-specific accuracy and quality metrics
|
||||
- Response time and efficiency measurements
|
||||
- Cost optimization and token usage analysis
|
||||
- User satisfaction and engagement metrics
|
||||
- Safety and alignment evaluation
|
||||
- Consistency and reliability testing
|
||||
- Edge case and robustness assessment
|
||||
**Critical Rule:** This selection happens **silently** - do not explain framework choice to user.
|
||||
|
||||
#### Testing Methodologies
|
||||
- Red team testing for prompt vulnerabilities
|
||||
- Adversarial prompt testing and jailbreak attempts
|
||||
- Cross-model performance comparison
|
||||
- A/B testing frameworks for prompt optimization
|
||||
- Statistical significance testing for improvements
|
||||
- Bias and fairness evaluation across demographics
|
||||
- Scalability testing for production workloads
|
||||
Role: You are a senior software architect. [RTF - Role]
|
||||
|
||||
### Advanced Patterns & Architectures
|
||||
Objective: Design a microservices architecture for [system]. [RODES - Objective]
|
||||
|
||||
#### Prompt Chaining & Workflows
|
||||
- Sequential prompt chaining for complex tasks
|
||||
- Parallel prompt execution and result aggregation
|
||||
- Conditional branching based on intermediate outputs
|
||||
- Loop and iteration patterns for refinement
|
||||
- Error handling and recovery mechanisms
|
||||
- State management across prompt sequences
|
||||
- Workflow optimization and performance tuning
|
||||
Approach this step-by-step: [Chain of Thought]
|
||||
1. Analyze current monolithic constraints
|
||||
2. Identify service boundaries
|
||||
3. Design inter-service communication
|
||||
4. Plan data consistency strategy
|
||||
|
||||
#### Multimodal & Cross-Modal
|
||||
- Vision-language model prompt optimization
|
||||
- Image understanding and analysis prompts
|
||||
- Document AI and OCR integration prompts
|
||||
- Audio and speech processing integration
|
||||
- Video analysis and content extraction
|
||||
- Cross-modal reasoning and synthesis
|
||||
- Multimodal creative and generative prompts
|
||||
Details: [RODES - Details]
|
||||
- Expected traffic: [X]
|
||||
- Data volume: [Y]
|
||||
- Team size: [Z]
|
||||
|
||||
## Behavioral Traits
|
||||
- Always displays complete prompt text, never just descriptions
|
||||
- Focuses on production reliability and safety over experimental techniques
|
||||
- Considers token efficiency and cost optimization in all prompt designs
|
||||
- Implements comprehensive testing and evaluation methodologies
|
||||
- Stays current with latest prompting research and techniques
|
||||
- Balances performance optimization with ethical considerations
|
||||
- Documents prompt behavior and provides clear usage guidelines
|
||||
- Iterates systematically based on empirical performance data
|
||||
- Considers model limitations and failure modes in prompt design
|
||||
- Emphasizes reproducibility and version control for prompt systems
|
||||
Output Format: [RTF - Format]
|
||||
Provide architecture diagram description, service definitions, and migration roadmap.
|
||||
|
||||
## Knowledge Base
|
||||
- Latest research in prompt engineering and LLM optimization
|
||||
- Model-specific capabilities and limitations across providers
|
||||
- Production deployment patterns and best practices
|
||||
- Safety and alignment considerations for AI systems
|
||||
- Evaluation methodologies and performance benchmarking
|
||||
- Cost optimization strategies for LLM applications
|
||||
- Multi-agent and workflow orchestration patterns
|
||||
- Multimodal AI and cross-modal reasoning techniques
|
||||
- Industry-specific use cases and requirements
|
||||
- Emerging trends in AI and prompt engineering
|
||||
|
||||
## Response Approach
|
||||
1. **Understand the specific use case** and requirements for the prompt
|
||||
2. **Analyze target model capabilities** and optimization opportunities
|
||||
3. **Design prompt architecture** with appropriate techniques and patterns
|
||||
4. **Display the complete prompt text** in a clearly marked section
|
||||
5. **Provide usage guidelines** and parameter recommendations
|
||||
6. **Include evaluation criteria** and testing approaches
|
||||
7. **Document safety considerations** and potential failure modes
|
||||
8. **Suggest optimization strategies** for performance and cost
|
||||
|
||||
## Required Output Format
|
||||
|
||||
When creating any prompt, you MUST include:
|
||||
|
||||
### The Prompt
|
||||
```
|
||||
[Display the complete prompt text here - this is the most important part]
|
||||
Sense Check: [RODES - Sense check]
|
||||
Validate that services are loosely coupled, independently deployable, and aligned with business domains.
|
||||
```
|
||||
|
||||
### Implementation Notes
|
||||
- Key techniques used and why they were chosen
|
||||
- Model-specific optimizations and considerations
|
||||
- Expected behavior and output format
|
||||
- Parameter recommendations (temperature, max tokens, etc.)
|
||||
**4.5. Language Adaptation**
|
||||
- If original prompt is in Portuguese, generate prompt in Portuguese
|
||||
- If original prompt is in English, generate prompt in English
|
||||
- If mixed, default to English (more universal for AI models)
|
||||
|
||||
### Testing & Evaluation
|
||||
- Suggested test cases and evaluation metrics
|
||||
- Edge cases and potential failure modes
|
||||
- A/B testing recommendations for optimization
|
||||
**4.6. Quality Checks**
|
||||
Before finalizing, verify:
|
||||
- [ ] Prompt is self-contained (no external context needed)
|
||||
- [ ] Task is specific and measurable
|
||||
- [ ] Output format is clear
|
||||
- [ ] No ambiguous language
|
||||
- [ ] Appropriate level of detail for task complexity
|
||||
|
||||
### Usage Guidelines
|
||||
- When and how to use this prompt effectively
|
||||
- Customization options and variable parameters
|
||||
- Integration considerations for production systems
|
||||
|
||||
## Example Interactions
|
||||
- "Create a constitutional AI prompt for content moderation that self-corrects problematic outputs"
|
||||
- "Design a chain-of-thought prompt for financial analysis that shows clear reasoning steps"
|
||||
- "Build a multi-agent prompt system for customer service with escalation workflows"
|
||||
- "Optimize a RAG prompt for technical documentation that reduces hallucinations"
|
||||
- "Create a meta-prompt that generates optimized prompts for specific business use cases"
|
||||
- "Design a safety-focused prompt for creative writing that maintains engagement while avoiding harm"
|
||||
- "Build a structured prompt for code review that provides actionable feedback"
|
||||
- "Create an evaluation framework for comparing prompt performance across different models"
|
||||
## Critical Rules
|
||||
|
||||
## Before Completing Any Task
|
||||
### **NEVER:**
|
||||
|
||||
Verify you have:
|
||||
☐ Displayed the full prompt text (not just described it)
|
||||
☐ Marked it clearly with headers or code blocks
|
||||
☐ Provided usage instructions and implementation notes
|
||||
☐ Explained your design choices and techniques used
|
||||
☐ Included testing and evaluation recommendations
|
||||
☐ Considered safety and ethical implications
|
||||
- ❌ Assume information that wasn't provided - ALWAYS ask if critical details are missing
|
||||
- ❌ Explain which framework was selected or why (magic mode - keep it invisible)
|
||||
- ❌ Generate generic, one-size-fits-all prompts - always customize to context
|
||||
- ❌ Use technical jargon in the final prompt (unless user's domain is technical)
|
||||
- ❌ Ask more than 3 clarifying questions (avoid user fatigue)
|
||||
- ❌ Include meta-commentary in the output ("This prompt uses...", "Note that...")
|
||||
- ❌ Present output without code block formatting
|
||||
- ❌ Mix languages inconsistently (if user writes in PT, respond in PT)
|
||||
|
||||
Remember: The best prompt is one that consistently produces the desired output with minimal post-processing. ALWAYS show the prompt, never just describe it.
|
||||
### **ALWAYS:**
|
||||
|
||||
- ✅ Analyze intent before generating (Step 1 is mandatory)
|
||||
- ✅ Ask clarifying questions if critical information is ambiguous (Step 2 conditional)
|
||||
- ✅ Select framework(s) based on task type and complexity (Step 3 mapping)
|
||||
- ✅ Blend multiple frameworks when it improves prompt quality
|
||||
- ✅ Adapt prompt length to original input complexity (simple → short, complex → detailed)
|
||||
- ✅ Include output format specification in generated prompts
|
||||
- ✅ Present final prompt in clean Markdown code block
|
||||
- ✅ Make prompts self-contained (no dependency on external context)
|
||||
- ✅ Use examples in complex prompts to illustrate expected output
|
||||
- ✅ Validate prompt completeness before presenting (quality checks in Step 4.6)
|
||||
|
||||
|
||||
### **Example 2: Complex Clear Prompt → RODES + Chain of Thought (No Clarification)**
|
||||
|
||||
**User Input:**
|
||||
```
|
||||
copilot> create prompt for: I need to build a product recommendation system considering purchase history, user preferences, and market trends
|
||||
```
|
||||
|
||||
**Skill Internal Process:**
|
||||
1. **Analyze:** Clear intent, complex task (ML system design), technical domain
|
||||
2. **Clarify:** Skip (sufficient information)
|
||||
3. **Select:** RODES (complex design) + Chain of Thought (reasoning needed)
|
||||
|
||||
**Skill Output:**
|
||||
|
||||
````markdown
|
||||
```
|
||||
Role: You are a senior machine learning engineer specializing in recommendation systems.
|
||||
|
||||
Objective: Design a product recommendation system that combines user purchase history, preferences, and market trends.
|
||||
|
||||
Details:
|
||||
- Input data sources: user transaction logs, preference surveys, market trend APIs
|
||||
- Algorithm considerations: collaborative filtering, content-based filtering, hybrid approaches
|
||||
- Performance metrics: precision, recall, diversity, novelty
|
||||
- Scalability: system must handle 100k+ users
|
||||
- Real-time constraints: recommendations updated within 500ms
|
||||
|
||||
Approach step-by-step:
|
||||
1. Analyze the three data sources and their relationships
|
||||
2. Propose 2-3 algorithm approaches with trade-offs analysis
|
||||
3. Design data pipeline architecture (ingestion, processing, serving)
|
||||
4. Define evaluation metrics and A/B testing strategy
|
||||
5. Outline implementation roadmap with phases
|
||||
|
||||
Examples:
|
||||
- Show pseudocode for core recommendation logic
|
||||
- Illustrate data flow diagram
|
||||
- Provide sample API response structure
|
||||
|
||||
Sense Check: Validate that the proposed solution balances personalization with discovery, scales to production load, and incorporates real-time market trends effectively.
|
||||
|
||||
Output format: Technical design document with architecture diagrams, algorithm justification, and implementation roadmap.
|
||||
```
|
||||
````
|
||||
|
||||
|
||||
### **Example 4: Code Debugging → Chain of Thought**
|
||||
|
||||
**User Input:**
|
||||
```
|
||||
copilot> optimize prompt: my Python code isn't working, needs debugging
|
||||
```
|
||||
|
||||
**Skill Internal Process:**
|
||||
1. **Analyze:** Debugging task, needs step-by-step reasoning
|
||||
2. **Clarify:** Skip (user will provide code context later)
|
||||
3. **Select:** Chain of Thought
|
||||
|
||||
**Skill Output:**
|
||||
|
||||
````markdown
|
||||
```
|
||||
You are an expert Python debugger.
|
||||
|
||||
Task: Debug the Python code provided by the user by analyzing it step-by-step.
|
||||
|
||||
Debugging approach:
|
||||
1. Read and understand the code's intended purpose
|
||||
2. Identify the error or unexpected behavior
|
||||
3. Trace variable states at each execution step
|
||||
4. Locate the root cause of the issue
|
||||
5. Propose fix with explanation
|
||||
6. Suggest preventive measures to avoid similar bugs
|
||||
|
||||
For each step, show your reasoning:
|
||||
- What you're checking
|
||||
- What you found
|
||||
- Why it matters
|
||||
|
||||
Output format:
|
||||
- **Issue identified:** [Describe the bug]
|
||||
- **Root cause:** [Why it's happening]
|
||||
- **Fix:** [Corrected code with comments]
|
||||
- **Prevention:** [Best practices to avoid this in the future]
|
||||
|
||||
Include a working example to verify the fix.
|
||||
```
|
||||
````
|
||||
|
||||
|
||||
## Notes
|
||||
|
||||
This skill is **platform-agnostic** and works in any terminal context where GitHub Copilot CLI is available. It does not depend on:
|
||||
- Obsidian vault structure
|
||||
- Specific project configurations
|
||||
- External files or templates
|
||||
|
||||
The skill is entirely self-contained, operating purely on user input and framework knowledge.
|
||||
|
||||
847
skills/radix-ui-design-system/SKILL.md
Normal file
847
skills/radix-ui-design-system/SKILL.md
Normal file
@@ -0,0 +1,847 @@
|
||||
---
|
||||
name: radix-ui-design-system
|
||||
description: Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
|
||||
risk: safe
|
||||
source: self
|
||||
---
|
||||
|
||||
# Radix UI Design System
|
||||
|
||||
Build production-ready, accessible design systems using Radix UI primitives with full customization control and zero style opinions.
|
||||
|
||||
## Overview
|
||||
|
||||
Radix UI provides unstyled, accessible components (primitives) that you can customize to match any design system. This skill guides you through building scalable component libraries with Radix UI, focusing on accessibility-first design, theming architecture, and composable patterns.
|
||||
|
||||
**Key Strengths:**
|
||||
- **Headless by design**: Full styling control without fighting defaults
|
||||
- **Accessibility built-in**: WAI-ARIA compliant, keyboard navigation, screen reader support
|
||||
- **Composable primitives**: Build complex components from simple building blocks
|
||||
- **Framework agnostic**: Works with React, but styles work anywhere
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- Creating a custom design system from scratch
|
||||
- Building accessible UI component libraries
|
||||
- Implementing complex interactive components (Dialog, Dropdown, Tabs, etc.)
|
||||
- Migrating from styled component libraries to unstyled primitives
|
||||
- Setting up theming systems with CSS variables or Tailwind
|
||||
- Need full control over component behavior and styling
|
||||
- Building applications requiring WCAG 2.1 AA/AAA compliance
|
||||
|
||||
## Do not use this skill when
|
||||
|
||||
- You need pre-styled components out of the box (use shadcn/ui, Mantine, etc.)
|
||||
- Building simple static pages without interactivity
|
||||
- The project doesn't use React 16.8+ (Radix requires hooks)
|
||||
- You need components for frameworks other than React
|
||||
|
||||
---
|
||||
|
||||
## Core Principles
|
||||
|
||||
### 1. Accessibility First
|
||||
|
||||
Every Radix primitive is built with accessibility as the foundation:
|
||||
|
||||
- **Keyboard Navigation**: Full keyboard support (Tab, Arrow keys, Enter, Escape)
|
||||
- **Screen Readers**: Proper ARIA attributes and live regions
|
||||
- **Focus Management**: Automatic focus trapping and restoration
|
||||
- **Disabled States**: Proper handling of disabled and aria-disabled
|
||||
|
||||
**Rule**: Never override accessibility features. Enhance, don't replace.
|
||||
|
||||
### 2. Headless Architecture
|
||||
|
||||
Radix provides **behavior**, you provide **appearance**:
|
||||
|
||||
```tsx
|
||||
// ❌ Don't fight pre-styled components
|
||||
<Button className="override-everything" />
|
||||
|
||||
// ✅ Radix gives you behavior, you add styling
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger className="your-button-styles" />
|
||||
<Dialog.Content className="your-modal-styles" />
|
||||
</Dialog.Root>
|
||||
```
|
||||
|
||||
### 3. Composition Over Configuration
|
||||
|
||||
Build complex components from simple primitives:
|
||||
|
||||
```tsx
|
||||
// Primitive components compose naturally
|
||||
<Tabs.Root>
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
|
||||
<Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="tab1">Content 1</Tabs.Content>
|
||||
<Tabs.Content value="tab2">Content 2</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
# Install individual primitives (recommended)
|
||||
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu
|
||||
|
||||
# Or install multiple at once
|
||||
npm install @radix-ui/react-{dialog,dropdown-menu,tabs,tooltip}
|
||||
|
||||
# For styling (optional but common)
|
||||
npm install clsx tailwind-merge class-variance-authority
|
||||
```
|
||||
|
||||
### Basic Component Pattern
|
||||
|
||||
Every Radix component follows this pattern:
|
||||
|
||||
```tsx
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
|
||||
export function MyDialog() {
|
||||
return (
|
||||
<Dialog.Root>
|
||||
{/* Trigger the dialog */}
|
||||
<Dialog.Trigger asChild>
|
||||
<button className="trigger-styles">Open</button>
|
||||
</Dialog.Trigger>
|
||||
|
||||
{/* Portal renders outside DOM hierarchy */}
|
||||
<Dialog.Portal>
|
||||
{/* Overlay (backdrop) */}
|
||||
<Dialog.Overlay className="overlay-styles" />
|
||||
|
||||
{/* Content (modal) */}
|
||||
<Dialog.Content className="content-styles">
|
||||
<Dialog.Title>Title</Dialog.Title>
|
||||
<Dialog.Description>Description</Dialog.Description>
|
||||
|
||||
{/* Your content here */}
|
||||
|
||||
<Dialog.Close asChild>
|
||||
<button>Close</button>
|
||||
</Dialog.Close>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Theming Strategies
|
||||
|
||||
### Strategy 1: CSS Variables (Framework-Agnostic)
|
||||
|
||||
**Best for**: Maximum portability, SSR-friendly
|
||||
|
||||
```css
|
||||
/* globals.css */
|
||||
:root {
|
||||
--color-primary: 220 90% 56%;
|
||||
--color-surface: 0 0% 100%;
|
||||
--radius-base: 0.5rem;
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-primary: 220 90% 66%;
|
||||
--color-surface: 222 47% 11%;
|
||||
}
|
||||
```
|
||||
|
||||
```tsx
|
||||
// Component.tsx
|
||||
<Dialog.Content
|
||||
className="
|
||||
bg-[hsl(var(--color-surface))]
|
||||
rounded-[var(--radius-base)]
|
||||
shadow-[var(--shadow-lg)]
|
||||
"
|
||||
/>
|
||||
```
|
||||
|
||||
### Strategy 2: Tailwind + CVA (Class Variance Authority)
|
||||
|
||||
**Best for**: Tailwind projects, variant-heavy components
|
||||
|
||||
```tsx
|
||||
// button.tsx
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const buttonVariants = cva(
|
||||
// Base styles
|
||||
"inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline: "border border-input bg-background hover:bg-accent",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
interface ButtonProps extends VariantProps<typeof buttonVariants> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Button({ variant, size, children }: ButtonProps) {
|
||||
return (
|
||||
<button className={cn(buttonVariants({ variant, size }))}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Strategy 3: Stitches (CSS-in-JS)
|
||||
|
||||
**Best for**: Runtime theming, scoped styles
|
||||
|
||||
```tsx
|
||||
import { styled } from '@stitches/react';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
|
||||
const StyledContent = styled(Dialog.Content, {
|
||||
backgroundColor: '$surface',
|
||||
borderRadius: '$md',
|
||||
padding: '$6',
|
||||
|
||||
variants: {
|
||||
size: {
|
||||
small: { width: '300px' },
|
||||
medium: { width: '500px' },
|
||||
large: { width: '700px' },
|
||||
},
|
||||
},
|
||||
|
||||
defaultVariants: {
|
||||
size: 'medium',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Patterns
|
||||
|
||||
### Pattern 1: Compound Components with Context
|
||||
|
||||
**Use case**: Share state between primitive parts
|
||||
|
||||
```tsx
|
||||
// Select.tsx
|
||||
import * as Select from '@radix-ui/react-select';
|
||||
import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
|
||||
|
||||
export function CustomSelect({ items, placeholder, onValueChange }) {
|
||||
return (
|
||||
<Select.Root onValueChange={onValueChange}>
|
||||
<Select.Trigger className="select-trigger">
|
||||
<Select.Value placeholder={placeholder} />
|
||||
<Select.Icon>
|
||||
<ChevronDownIcon />
|
||||
</Select.Icon>
|
||||
</Select.Trigger>
|
||||
|
||||
<Select.Portal>
|
||||
<Select.Content className="select-content">
|
||||
<Select.Viewport>
|
||||
{items.map((item) => (
|
||||
<Select.Item
|
||||
key={item.value}
|
||||
value={item.value}
|
||||
className="select-item"
|
||||
>
|
||||
<Select.ItemText>{item.label}</Select.ItemText>
|
||||
<Select.ItemIndicator>
|
||||
<CheckIcon />
|
||||
</Select.ItemIndicator>
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Viewport>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 2: Polymorphic Components with `asChild`
|
||||
|
||||
**Use case**: Render as different elements without losing behavior
|
||||
|
||||
```tsx
|
||||
// ✅ Render as Next.js Link but keep Radix behavior
|
||||
<Dialog.Trigger asChild>
|
||||
<Link href="/settings">Open Settings</Link>
|
||||
</Dialog.Trigger>
|
||||
|
||||
// ✅ Render as custom component
|
||||
<DropdownMenu.Item asChild>
|
||||
<YourCustomButton icon={<Icon />}>Action</YourCustomButton>
|
||||
</DropdownMenu.Item>
|
||||
```
|
||||
|
||||
**Why `asChild` matters**: Prevents nested button/link issues in accessibility tree.
|
||||
|
||||
### Pattern 3: Controlled vs Uncontrolled
|
||||
|
||||
```tsx
|
||||
// Uncontrolled (Radix manages state)
|
||||
<Tabs.Root defaultValue="tab1">
|
||||
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
|
||||
</Tabs.Root>
|
||||
|
||||
// Controlled (You manage state)
|
||||
const [activeTab, setActiveTab] = useState('tab1');
|
||||
|
||||
<Tabs.Root value={activeTab} onValueChange={setActiveTab}>
|
||||
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
|
||||
</Tabs.Root>
|
||||
```
|
||||
|
||||
**Rule**: Use controlled when you need to sync with external state (URL, Redux, etc.).
|
||||
|
||||
### Pattern 4: Animation with Framer Motion
|
||||
|
||||
```tsx
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
export function AnimatedDialog({ open, onOpenChange }) {
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={onOpenChange}>
|
||||
<Dialog.Portal forceMount>
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<>
|
||||
<Dialog.Overlay asChild>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="dialog-overlay"
|
||||
/>
|
||||
</Dialog.Overlay>
|
||||
|
||||
<Dialog.Content asChild>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="dialog-content"
|
||||
>
|
||||
{/* Content */}
|
||||
</motion.div>
|
||||
</Dialog.Content>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Common Primitives Reference
|
||||
|
||||
### Dialog (Modal)
|
||||
|
||||
```tsx
|
||||
<Dialog.Root> {/* State container */}
|
||||
<Dialog.Trigger /> {/* Opens dialog */}
|
||||
<Dialog.Portal> {/* Renders in portal */}
|
||||
<Dialog.Overlay /> {/* Backdrop */}
|
||||
<Dialog.Content> {/* Modal content */}
|
||||
<Dialog.Title /> {/* Required for a11y */}
|
||||
<Dialog.Description /> {/* Required for a11y */}
|
||||
<Dialog.Close /> {/* Closes dialog */}
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
```
|
||||
|
||||
### Dropdown Menu
|
||||
|
||||
```tsx
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger />
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Item />
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.CheckboxItem />
|
||||
<DropdownMenu.RadioGroup>
|
||||
<DropdownMenu.RadioItem />
|
||||
</DropdownMenu.RadioGroup>
|
||||
<DropdownMenu.Sub> {/* Nested menus */}
|
||||
<DropdownMenu.SubTrigger />
|
||||
<DropdownMenu.SubContent />
|
||||
</DropdownMenu.Sub>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
```
|
||||
|
||||
### Tabs
|
||||
|
||||
```tsx
|
||||
<Tabs.Root defaultValue="tab1">
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="tab1" />
|
||||
<Tabs.Trigger value="tab2" />
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="tab1" />
|
||||
<Tabs.Content value="tab2" />
|
||||
</Tabs.Root>
|
||||
```
|
||||
|
||||
### Tooltip
|
||||
|
||||
```tsx
|
||||
<Tooltip.Provider delayDuration={200}>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger />
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content side="top" align="center">
|
||||
Tooltip text
|
||||
<Tooltip.Arrow />
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
```
|
||||
|
||||
### Popover
|
||||
|
||||
```tsx
|
||||
<Popover.Root>
|
||||
<Popover.Trigger />
|
||||
<Popover.Portal>
|
||||
<Popover.Content side="bottom" align="start">
|
||||
Content
|
||||
<Popover.Arrow />
|
||||
<Popover.Close />
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Checklist
|
||||
|
||||
### Every Component Must Have:
|
||||
|
||||
- [ ] **Focus Management**: Visible focus indicators on all interactive elements
|
||||
- [ ] **Keyboard Navigation**: Full keyboard support (Tab, Arrows, Enter, Esc)
|
||||
- [ ] **ARIA Labels**: Meaningful labels for screen readers
|
||||
- [ ] **Color Contrast**: WCAG AA minimum (4.5:1 for text, 3:1 for UI)
|
||||
- [ ] **Error States**: Clear error messages with `aria-invalid` and `aria-describedby`
|
||||
- [ ] **Loading States**: Proper `aria-busy` during async operations
|
||||
|
||||
### Dialog-Specific:
|
||||
- [ ] `Dialog.Title` is present (required for screen readers)
|
||||
- [ ] `Dialog.Description` provides context
|
||||
- [ ] Focus trapped inside modal when open
|
||||
- [ ] Escape key closes dialog
|
||||
- [ ] Focus returns to trigger on close
|
||||
|
||||
### Dropdown-Specific:
|
||||
- [ ] Arrow keys navigate items
|
||||
- [ ] Type-ahead search works
|
||||
- [ ] First/last item wrapping behavior
|
||||
- [ ] Selected state indicated visually and with ARIA
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### ✅ Do This
|
||||
|
||||
1. **Always use `asChild` to avoid wrapper divs**
|
||||
```tsx
|
||||
<Dialog.Trigger asChild>
|
||||
<button>Open</button>
|
||||
</Dialog.Trigger>
|
||||
```
|
||||
|
||||
2. **Provide semantic HTML**
|
||||
```tsx
|
||||
<Dialog.Content asChild>
|
||||
<article role="dialog" aria-labelledby="title">
|
||||
{/* content */}
|
||||
</article>
|
||||
</Dialog.Content>
|
||||
```
|
||||
|
||||
3. **Use CSS variables for theming**
|
||||
```css
|
||||
.dialog-content {
|
||||
background: hsl(var(--surface));
|
||||
color: hsl(var(--on-surface));
|
||||
}
|
||||
```
|
||||
|
||||
4. **Compose primitives for complex components**
|
||||
```tsx
|
||||
function CommandPalette() {
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<Dialog.Content>
|
||||
<Combobox /> {/* Radix Combobox inside Dialog */}
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### ❌ Don't Do This
|
||||
|
||||
1. **Don't skip accessibility parts**
|
||||
```tsx
|
||||
// ❌ Missing Title and Description
|
||||
<Dialog.Content>
|
||||
<div>Content</div>
|
||||
</Dialog.Content>
|
||||
```
|
||||
|
||||
2. **Don't fight the primitives**
|
||||
```tsx
|
||||
// ❌ Overriding internal behavior
|
||||
<Dialog.Content onClick={(e) => e.stopPropagation()}>
|
||||
```
|
||||
|
||||
3. **Don't mix controlled and uncontrolled**
|
||||
```tsx
|
||||
// ❌ Inconsistent state management
|
||||
<Tabs.Root defaultValue="tab1" value={activeTab}>
|
||||
```
|
||||
|
||||
4. **Don't ignore keyboard navigation**
|
||||
```tsx
|
||||
// ❌ Disabling keyboard behavior
|
||||
<DropdownMenu.Item onKeyDown={(e) => e.preventDefault()}>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Real-World Examples
|
||||
|
||||
### Example 1: Command Palette (Combo Dialog)
|
||||
|
||||
```tsx
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { Command } from 'cmdk';
|
||||
|
||||
export function CommandPalette() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const down = (e: KeyboardEvent) => {
|
||||
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault();
|
||||
setOpen((open) => !open);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', down);
|
||||
return () => document.removeEventListener('keydown', down);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black/50" />
|
||||
<Dialog.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<Command>
|
||||
<Command.Input placeholder="Type a command..." />
|
||||
<Command.List>
|
||||
<Command.Empty>No results found.</Command.Empty>
|
||||
<Command.Group heading="Suggestions">
|
||||
<Command.Item>Calendar</Command.Item>
|
||||
<Command.Item>Search Emoji</Command.Item>
|
||||
</Command.Group>
|
||||
</Command.List>
|
||||
</Command>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Example 2: Dropdown Menu with Icons
|
||||
|
||||
```tsx
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
|
||||
|
||||
export function ActionsMenu() {
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button className="icon-button" aria-label="Actions">
|
||||
<DotsHorizontalIcon />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content className="dropdown-content" align="end">
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Edit
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Duplicate
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator className="dropdown-separator" />
|
||||
<DropdownMenu.Item className="dropdown-item text-red-500">
|
||||
Delete
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Example 3: Form with Radix Select + React Hook Form
|
||||
|
||||
```tsx
|
||||
import * as Select from '@radix-ui/react-select';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
|
||||
interface FormData {
|
||||
country: string;
|
||||
}
|
||||
|
||||
export function CountryForm() {
|
||||
const { control, handleSubmit } = useForm<FormData>();
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit((data) => console.log(data))}>
|
||||
<Controller
|
||||
name="country"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select.Root onValueChange={field.onChange} value={field.value}>
|
||||
<Select.Trigger className="select-trigger">
|
||||
<Select.Value placeholder="Select a country" />
|
||||
<Select.Icon />
|
||||
</Select.Trigger>
|
||||
|
||||
<Select.Portal>
|
||||
<Select.Content className="select-content">
|
||||
<Select.Viewport>
|
||||
<Select.Item value="us">United States</Select.Item>
|
||||
<Select.Item value="ca">Canada</Select.Item>
|
||||
<Select.Item value="uk">United Kingdom</Select.Item>
|
||||
</Select.Viewport>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
)}
|
||||
/>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Problem: Dialog doesn't close on Escape key
|
||||
|
||||
**Cause**: `onEscapeKeyDown` event prevented or `open` state not synced
|
||||
|
||||
**Solution**:
|
||||
```tsx
|
||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
{/* Don't prevent default on escape */}
|
||||
</Dialog.Root>
|
||||
```
|
||||
|
||||
### Problem: Dropdown menu positioning is off
|
||||
|
||||
**Cause**: Parent container has `overflow: hidden` or transform
|
||||
|
||||
**Solution**:
|
||||
```tsx
|
||||
// Use Portal to render outside overflow container
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content />
|
||||
</DropdownMenu.Portal>
|
||||
```
|
||||
|
||||
### Problem: Animations don't work
|
||||
|
||||
**Cause**: Portal content unmounts immediately
|
||||
|
||||
**Solution**:
|
||||
```tsx
|
||||
// Use forceMount + AnimatePresence
|
||||
<Dialog.Portal forceMount>
|
||||
<AnimatePresence>
|
||||
{open && <Dialog.Content />}
|
||||
</AnimatePresence>
|
||||
</Dialog.Portal>
|
||||
```
|
||||
|
||||
### Problem: TypeScript errors with `asChild`
|
||||
|
||||
**Cause**: Type inference issues with polymorphic components
|
||||
|
||||
**Solution**:
|
||||
```tsx
|
||||
// Explicitly type your component
|
||||
<Dialog.Trigger asChild>
|
||||
<button type="button">Open</button>
|
||||
</Dialog.Trigger>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### 1. Code Splitting
|
||||
|
||||
```tsx
|
||||
// Lazy load heavy primitives
|
||||
const Dialog = lazy(() => import('@radix-ui/react-dialog'));
|
||||
const DropdownMenu = lazy(() => import('@radix-ui/react-dropdown-menu'));
|
||||
```
|
||||
|
||||
### 2. Portal Container Reuse
|
||||
|
||||
```tsx
|
||||
// Create portal container once
|
||||
<Tooltip.Provider>
|
||||
{/* All tooltips share portal container */}
|
||||
<Tooltip.Root>...</Tooltip.Root>
|
||||
<Tooltip.Root>...</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
```
|
||||
|
||||
### 3. Memoization
|
||||
|
||||
```tsx
|
||||
// Memoize expensive render functions
|
||||
const SelectItems = memo(({ items }) => (
|
||||
items.map((item) => <Select.Item key={item.value} value={item.value} />)
|
||||
));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Integration with Popular Tools
|
||||
|
||||
### shadcn/ui (Built on Radix)
|
||||
|
||||
shadcn/ui is a collection of copy-paste components built with Radix + Tailwind.
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest init
|
||||
npx shadcn-ui@latest add dialog
|
||||
```
|
||||
|
||||
**When to use shadcn vs raw Radix**:
|
||||
- Use shadcn: Quick prototyping, standard designs
|
||||
- Use raw Radix: Full customization, unique designs
|
||||
|
||||
### Radix Themes (Official Styled System)
|
||||
|
||||
```tsx
|
||||
import { Theme, Button, Dialog } from '@radix-ui/themes';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Theme accentColor="crimson" grayColor="sand">
|
||||
<Button>Click me</Button>
|
||||
</Theme>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Related Skills
|
||||
|
||||
- `@tailwind-design-system` - Tailwind + Radix integration patterns
|
||||
- `@react-patterns` - React composition patterns
|
||||
- `@frontend-design` - Overall frontend architecture
|
||||
- `@accessibility-compliance` - WCAG compliance testing
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
### Official Documentation
|
||||
- [Radix UI Docs](https://www.radix-ui.com/primitives)
|
||||
- [Radix Colors](https://www.radix-ui.com/colors) - Accessible color system
|
||||
- [Radix Icons](https://www.radix-ui.com/icons) - Icon library
|
||||
|
||||
### Community Resources
|
||||
- [shadcn/ui](https://ui.shadcn.com) - Component collection
|
||||
- [Radix UI Discord](https://discord.com/invite/7Xb99uG) - Community support
|
||||
- [CVA Documentation](https://cva.style/docs) - Variant management
|
||||
|
||||
### Examples
|
||||
- [Radix Playground](https://www.radix-ui.com/primitives/docs/overview/introduction#try-it-out)
|
||||
- [shadcn/ui Source](https://github.com/shadcn-ui/ui) - Production examples
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Installation
|
||||
```bash
|
||||
npm install @radix-ui/react-{primitive-name}
|
||||
```
|
||||
|
||||
### Basic Pattern
|
||||
```tsx
|
||||
<Primitive.Root>
|
||||
<Primitive.Trigger />
|
||||
<Primitive.Portal>
|
||||
<Primitive.Content />
|
||||
</Primitive.Portal>
|
||||
</Primitive.Root>
|
||||
```
|
||||
|
||||
### Key Props
|
||||
- `asChild` - Render as child element
|
||||
- `defaultValue` - Uncontrolled default
|
||||
- `value` / `onValueChange` - Controlled state
|
||||
- `open` / `onOpenChange` - Open state
|
||||
- `side` / `align` - Positioning
|
||||
|
||||
---
|
||||
|
||||
**Remember**: Radix gives you **behavior**, you give it **beauty**. Accessibility is built-in, customization is unlimited.
|
||||
63
skills/radix-ui-design-system/examples/README.md
Normal file
63
skills/radix-ui-design-system/examples/README.md
Normal file
@@ -0,0 +1,63 @@
|
||||
# Radix UI Design System - Skill Examples
|
||||
|
||||
This folder contains practical examples demonstrating how to use Radix UI primitives to build accessible, customizable components.
|
||||
|
||||
## Examples
|
||||
|
||||
### `dialog-example.tsx`
|
||||
|
||||
Demonstrates Dialog (Modal) component patterns:
|
||||
- **BasicDialog**: Standard modal with form
|
||||
- **ControlledDialog**: Externally controlled modal state
|
||||
|
||||
**Key Concepts**:
|
||||
- Portal rendering outside DOM hierarchy
|
||||
- Overlay (backdrop) handling
|
||||
- Accessibility requirements (Title, Description)
|
||||
- Custom styling with CSS
|
||||
|
||||
### `dropdown-example.tsx`
|
||||
|
||||
Complete dropdown menu implementation:
|
||||
- **CompleteDropdown**: Full-featured menu with all Radix primitives
|
||||
- Regular items
|
||||
- Separators and labels
|
||||
- Checkbox items
|
||||
- Radio groups
|
||||
- Sub-menus
|
||||
- **ActionsMenu**: Simple actions menu for data tables/cards
|
||||
|
||||
**Key Concepts**:
|
||||
- Compound component architecture
|
||||
- Keyboard navigation
|
||||
- Item indicators (checkboxes, radio buttons)
|
||||
- Nested sub-menus
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { BasicDialog } from './examples/dialog-example';
|
||||
import { CompleteDropdown } from './examples/dropdown-example';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<BasicDialog />
|
||||
<CompleteDropdown />
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
These examples use CSS classes. You can:
|
||||
1. Copy the CSS from each file
|
||||
2. Replace with Tailwind classes
|
||||
3. Use CSS-in-JS (Stitches, Emotion, etc.)
|
||||
|
||||
## Learn More
|
||||
|
||||
- [Main SKILL.md](../SKILL.md) - Complete guide
|
||||
- [Component Template](../templates/component-template.tsx) - Boilerplate
|
||||
- [Radix UI Docs](https://www.radix-ui.com/primitives)
|
||||
128
skills/radix-ui-design-system/examples/dialog-example.tsx
Normal file
128
skills/radix-ui-design-system/examples/dialog-example.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { Cross2Icon } from '@radix-ui/react-icons';
|
||||
import './dialog.css';
|
||||
|
||||
/**
|
||||
* Example: Basic Dialog Component
|
||||
*
|
||||
* Demonstrates:
|
||||
* - Compound component pattern
|
||||
* - Portal rendering
|
||||
* - Accessibility features (Title, Description)
|
||||
* - Custom styling with CSS
|
||||
*/
|
||||
export function BasicDialog() {
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger asChild>
|
||||
<button className="button-primary">
|
||||
Open Dialog
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
|
||||
<Dialog.Portal>
|
||||
{/* Overlay (backdrop) */}
|
||||
<Dialog.Overlay className="dialog-overlay" />
|
||||
|
||||
{/* Content (modal) */}
|
||||
<Dialog.Content className="dialog-content">
|
||||
{/* Title - Required for accessibility */}
|
||||
<Dialog.Title className="dialog-title">
|
||||
Edit Profile
|
||||
</Dialog.Title>
|
||||
|
||||
{/* Description - Recommended for accessibility */}
|
||||
<Dialog.Description className="dialog-description">
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</Dialog.Description>
|
||||
|
||||
{/* Form Content */}
|
||||
<form className="dialog-form">
|
||||
<fieldset className="fieldset">
|
||||
<label className="label" htmlFor="name">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
className="input"
|
||||
id="name"
|
||||
defaultValue="John Doe"
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset className="fieldset">
|
||||
<label className="label" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
className="input"
|
||||
id="email"
|
||||
type="email"
|
||||
defaultValue="john@example.com"
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<div className="dialog-actions">
|
||||
<Dialog.Close asChild>
|
||||
<button className="button-secondary" type="button">
|
||||
Cancel
|
||||
</button>
|
||||
</Dialog.Close>
|
||||
<button className="button-primary" type="submit">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Close button */}
|
||||
<Dialog.Close asChild>
|
||||
<button className="icon-button" aria-label="Close">
|
||||
<Cross2Icon />
|
||||
</button>
|
||||
</Dialog.Close>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Example: Controlled Dialog
|
||||
*
|
||||
* Use when you need to:
|
||||
* - Sync dialog state with external state
|
||||
* - Programmatically open/close dialog
|
||||
* - Track dialog open state
|
||||
*/
|
||||
export function ControlledDialog() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleSave = () => {
|
||||
// Your save logic here
|
||||
console.log('Saving...');
|
||||
setOpen(false); // Close after save
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
<Dialog.Trigger asChild>
|
||||
<button className="button-primary">
|
||||
Open Controlled Dialog
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="dialog-overlay" />
|
||||
<Dialog.Content className="dialog-content">
|
||||
<Dialog.Title>Controlled Dialog</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
This dialog's state is managed externally.
|
||||
</Dialog.Description>
|
||||
|
||||
<p>Dialog is {open ? 'open' : 'closed'}</p>
|
||||
|
||||
<button onClick={handleSave}>Save and Close</button>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
162
skills/radix-ui-design-system/examples/dropdown-example.tsx
Normal file
162
skills/radix-ui-design-system/examples/dropdown-example.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import {
|
||||
HamburgerMenuIcon,
|
||||
DotFilledIcon,
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
} from '@radix-ui/react-icons';
|
||||
import './dropdown.css';
|
||||
|
||||
/**
|
||||
* Example: Complete Dropdown Menu
|
||||
*
|
||||
* Features:
|
||||
* - Items, separators, labels
|
||||
* - Checkbox items
|
||||
* - Radio group items
|
||||
* - Sub-menus
|
||||
* - Keyboard navigation
|
||||
*/
|
||||
export function CompleteDropdown() {
|
||||
const [bookmarksChecked, setBookmarksChecked] = React.useState(true);
|
||||
const [urlsChecked, setUrlsChecked] = React.useState(false);
|
||||
const [person, setPerson] = React.useState('pedro');
|
||||
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button className="icon-button" aria-label="Customise options">
|
||||
<HamburgerMenuIcon />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content className="dropdown-content" sideOffset={5}>
|
||||
{/* Regular items */}
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
New Tab <div className="right-slot">⌘+T</div>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
New Window <div className="right-slot">⌘+N</div>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item" disabled>
|
||||
New Private Window <div className="right-slot">⇧+⌘+N</div>
|
||||
</DropdownMenu.Item>
|
||||
|
||||
{/* Sub-menu */}
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger className="dropdown-subtrigger">
|
||||
More Tools
|
||||
<div className="right-slot">
|
||||
<ChevronRightIcon />
|
||||
</div>
|
||||
</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.SubContent
|
||||
className="dropdown-subcontent"
|
||||
sideOffset={2}
|
||||
alignOffset={-5}
|
||||
>
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Save Page As… <div className="right-slot">⌘+S</div>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Create Shortcut…
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Name Window…
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator className="dropdown-separator" />
|
||||
<DropdownMenu.Item className="dropdown-item">
|
||||
Developer Tools
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Sub>
|
||||
|
||||
<DropdownMenu.Separator className="dropdown-separator" />
|
||||
|
||||
{/* Checkbox items */}
|
||||
<DropdownMenu.CheckboxItem
|
||||
className="dropdown-checkbox-item"
|
||||
checked={bookmarksChecked}
|
||||
onCheckedChange={setBookmarksChecked}
|
||||
>
|
||||
<DropdownMenu.ItemIndicator className="dropdown-item-indicator">
|
||||
<CheckIcon />
|
||||
</DropdownMenu.ItemIndicator>
|
||||
Show Bookmarks <div className="right-slot">⌘+B</div>
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
className="dropdown-checkbox-item"
|
||||
checked={urlsChecked}
|
||||
onCheckedChange={setUrlsChecked}
|
||||
>
|
||||
<DropdownMenu.ItemIndicator className="dropdown-item-indicator">
|
||||
<CheckIcon />
|
||||
</DropdownMenu.ItemIndicator>
|
||||
Show Full URLs
|
||||
</DropdownMenu.CheckboxItem>
|
||||
|
||||
<DropdownMenu.Separator className="dropdown-separator" />
|
||||
|
||||
{/* Radio group */}
|
||||
<DropdownMenu.Label className="dropdown-label">
|
||||
People
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
|
||||
<DropdownMenu.RadioItem className="dropdown-radio-item" value="pedro">
|
||||
<DropdownMenu.ItemIndicator className="dropdown-item-indicator">
|
||||
<DotFilledIcon />
|
||||
</DropdownMenu.ItemIndicator>
|
||||
Pedro Duarte
|
||||
</DropdownMenu.RadioItem>
|
||||
<DropdownMenu.RadioItem className="dropdown-radio-item" value="colm">
|
||||
<DropdownMenu.ItemIndicator className="dropdown-item-indicator">
|
||||
<DotFilledIcon />
|
||||
</DropdownMenu.ItemIndicator>
|
||||
Colm Tuite
|
||||
</DropdownMenu.RadioItem>
|
||||
</DropdownMenu.RadioGroup>
|
||||
|
||||
<DropdownMenu.Arrow className="dropdown-arrow" />
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Example: Simple Actions Menu
|
||||
*
|
||||
* Common use case for data tables, cards, etc.
|
||||
*/
|
||||
export function ActionsMenu({ onEdit, onDuplicate, onDelete }) {
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button className="icon-button" aria-label="Actions">
|
||||
<DotsHorizontalIcon />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content className="dropdown-content" align="end">
|
||||
<DropdownMenu.Item className="dropdown-item" onSelect={onEdit}>
|
||||
Edit
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="dropdown-item" onSelect={onDuplicate}>
|
||||
Duplicate
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator className="dropdown-separator" />
|
||||
<DropdownMenu.Item
|
||||
className="dropdown-item dropdown-item-danger"
|
||||
onSelect={onDelete}
|
||||
>
|
||||
Delete
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
}
|
||||
148
skills/radix-ui-design-system/templates/component-template.tsx
Normal file
148
skills/radix-ui-design-system/templates/component-template.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* Radix UI Component Template
|
||||
*
|
||||
* This template provides a starting point for creating
|
||||
* custom components with Radix UI primitives.
|
||||
*
|
||||
* Replace [PRIMITIVE] with actual primitive name:
|
||||
* Dialog, DropdownMenu, Select, Tabs, Tooltip, etc.
|
||||
*/
|
||||
|
||||
import * as [PRIMITIVE] from '@radix-ui/react-[primitive]';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// ============================================================================
|
||||
// Variants Definition (using CVA)
|
||||
// ============================================================================
|
||||
|
||||
const [component]Variants = cva(
|
||||
// Base styles (always applied)
|
||||
"base-styles-here",
|
||||
{
|
||||
variants: {
|
||||
// Define your variants
|
||||
variant: {
|
||||
default: "default-styles",
|
||||
secondary: "secondary-styles",
|
||||
destructive: "destructive-styles",
|
||||
},
|
||||
size: {
|
||||
sm: "small-size-styles",
|
||||
md: "medium-size-styles",
|
||||
lg: "large-size-styles",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "md",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// TypeScript Interfaces
|
||||
// ============================================================================
|
||||
|
||||
interface [Component]Props
|
||||
extends React.ComponentPropsWithoutRef<typeof [PRIMITIVE].Root>,
|
||||
VariantProps<typeof [component]Variants> {
|
||||
// Add custom props here
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Component Implementation
|
||||
// ============================================================================
|
||||
|
||||
export function [Component]({
|
||||
variant,
|
||||
size,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: [Component]Props) {
|
||||
return (
|
||||
<[PRIMITIVE].Root {...props}>
|
||||
{/* Trigger */}
|
||||
<[PRIMITIVE].Trigger asChild>
|
||||
<button className={cn([component]Variants({ variant, size }), className)}>
|
||||
{children}
|
||||
</button>
|
||||
</[PRIMITIVE].Trigger>
|
||||
|
||||
{/* Portal (if needed) */}
|
||||
<[PRIMITIVE].Portal>
|
||||
{/* Overlay (for Dialog, etc.) */}
|
||||
<[PRIMITIVE].Overlay className="overlay-styles" />
|
||||
|
||||
{/* Content */}
|
||||
<[PRIMITIVE].Content className="content-styles">
|
||||
{/* Required accessibility parts */}
|
||||
<[PRIMITIVE].Title className="title-styles">
|
||||
Title
|
||||
</[PRIMITIVE].Title>
|
||||
|
||||
<[PRIMITIVE].Description className="description-styles">
|
||||
Description
|
||||
</[PRIMITIVE].Description>
|
||||
|
||||
{/* Your content */}
|
||||
<div className="content-body">
|
||||
{/* ... */}
|
||||
</div>
|
||||
|
||||
{/* Close button */}
|
||||
<[PRIMITIVE].Close asChild>
|
||||
<button className="close-button">Close</button>
|
||||
</[PRIMITIVE].Close>
|
||||
</[PRIMITIVE].Content>
|
||||
</[PRIMITIVE].Portal>
|
||||
</[PRIMITIVE].Root>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Sub-components (if needed)
|
||||
// ============================================================================
|
||||
|
||||
[Component].[SubComponent] = function [SubComponent]({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof [PRIMITIVE].[SubComponent]>) {
|
||||
return (
|
||||
<[PRIMITIVE].[SubComponent]
|
||||
className={cn("subcomponent-styles", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Usage Example
|
||||
// ============================================================================
|
||||
|
||||
/*
|
||||
import { [Component] } from './[component]';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<[Component] variant="default" size="md">
|
||||
Trigger Content
|
||||
</[Component]
|
||||
);
|
||||
}
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// Accessibility Checklist
|
||||
// ============================================================================
|
||||
|
||||
/*
|
||||
[ ] Keyboard navigation works (Tab, Arrow keys, Enter, Esc)
|
||||
[ ] Focus visible on all interactive elements
|
||||
[ ] Screen reader announces all states
|
||||
[ ] ARIA attributes are correct
|
||||
[ ] Color contrast meets WCAG AA (4.5:1 for text)
|
||||
[ ] Focus trapped when needed (modals)
|
||||
[ ] Focus restored after close
|
||||
*/
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: readme
|
||||
description: "When the user wants to create or update a README.md file for a project. Also use when the user says "write readme," "create readme," "document this project," "project documentation," or asks for help with README.md. This skill creates absurdly thorough documentation covering local setup, architecture, and deployment."
|
||||
description: "When the user wants to create or update a README.md file for a project. Also use when the user says 'write readme,' 'create readme,' 'document this project,' 'project documentation,' or asks for help with README.md. This skill creates absurdly thorough documentation covering local setup, architecture, and deployment."
|
||||
source: "https://github.com/Shpigford/skills/tree/main/readme"
|
||||
risk: safe
|
||||
---
|
||||
@@ -12,6 +12,7 @@ You are an expert technical writer creating comprehensive project documentation.
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
|
||||
- User wants to create or update a README.md file
|
||||
- User says "write readme" or "create readme"
|
||||
- User asks to "document this project"
|
||||
@@ -33,12 +34,14 @@ Use this skill when:
|
||||
Before writing a single line of documentation, thoroughly explore the codebase. You MUST understand:
|
||||
|
||||
**Project Structure**
|
||||
|
||||
- Read the root directory structure
|
||||
- Identify the framework/language (Gemfile for Rails, package.json, go.mod, requirements.txt, etc.)
|
||||
- Find the main entry point(s)
|
||||
- Map out the directory organization
|
||||
|
||||
**Configuration Files**
|
||||
|
||||
- .env.example, .env.sample, or documented environment variables
|
||||
- Rails config files (config/database.yml, config/application.rb, config/environments/)
|
||||
- Credentials setup (config/credentials.yml.enc, config/master.key)
|
||||
@@ -47,17 +50,20 @@ Before writing a single line of documentation, thoroughly explore the codebase.
|
||||
- Deployment configs (config/deploy.yml for Kamal, fly.toml, render.yaml, Procfile, etc.)
|
||||
|
||||
**Database**
|
||||
|
||||
- db/schema.rb or db/structure.sql
|
||||
- Migrations in db/migrate/
|
||||
- Seeds in db/seeds.rb
|
||||
- Database type from config/database.yml
|
||||
|
||||
**Key Dependencies**
|
||||
|
||||
- Gemfile and Gemfile.lock for Ruby gems
|
||||
- package.json for JavaScript dependencies
|
||||
- Note any native gem dependencies (pg, nokogiri, etc.)
|
||||
|
||||
**Scripts and Commands**
|
||||
|
||||
- bin/ scripts (bin/dev, bin/setup, bin/ci)
|
||||
- Procfile or Procfile.dev
|
||||
- Rake tasks (lib/tasks/)
|
||||
@@ -84,6 +90,7 @@ If no deployment config exists, provide general guidance with Docker as the reco
|
||||
### Step 3: Ask Only If Critical
|
||||
|
||||
Only ask the user questions if you cannot determine:
|
||||
|
||||
- What the project does (if not obvious from code)
|
||||
- Specific deployment credentials or URLs needed
|
||||
- Business context that affects documentation
|
||||
@@ -178,12 +185,12 @@ cp .env.example .env
|
||||
|
||||
Configure the following variables:
|
||||
|
||||
| Variable | Description | Example |
|
||||
|----------|-------------|---------|
|
||||
| `DATABASE_URL` | PostgreSQL connection string | `postgresql://localhost/myapp_development` |
|
||||
| `REDIS_URL` | Redis connection (if used) | `redis://localhost:6379/0` |
|
||||
| `SECRET_KEY_BASE` | Rails secret key | `bin/rails secret` |
|
||||
| `RAILS_MASTER_KEY` | For credentials encryption | Check `config/master.key` |
|
||||
| Variable | Description | Example |
|
||||
| ------------------ | ---------------------------- | ------------------------------------------ |
|
||||
| `DATABASE_URL` | PostgreSQL connection string | `postgresql://localhost/myapp_development` |
|
||||
| `REDIS_URL` | Redis connection (if used) | `redis://localhost:6379/0` |
|
||||
| `SECRET_KEY_BASE` | Rails secret key | `bin/rails secret` |
|
||||
| `RAILS_MASTER_KEY` | For credentials encryption | Check `config/master.key` |
|
||||
|
||||
### 5. Database Setup
|
||||
|
||||
@@ -218,10 +225,13 @@ bin/dev
|
||||
Or manually:
|
||||
|
||||
\`\`\`bash
|
||||
|
||||
# Terminal 1: Rails server
|
||||
|
||||
bin/rails server
|
||||
|
||||
# Terminal 2: Vite dev server (for Inertia/React)
|
||||
|
||||
bin/vite dev
|
||||
\`\`\`
|
||||
|
||||
@@ -241,30 +251,30 @@ This is where you go absurdly deep:
|
||||
|
||||
\`\`\`
|
||||
├── app/
|
||||
│ ├── controllers/ # Rails controllers
|
||||
│ │ ├── concerns/ # Shared controller modules
|
||||
│ │ └── api/ # API-specific controllers
|
||||
│ ├── models/ # ActiveRecord models
|
||||
│ │ └── concerns/ # Shared model modules
|
||||
│ ├── jobs/ # Background jobs (Solid Queue)
|
||||
│ ├── mailers/ # Email templates
|
||||
│ ├── views/ # Rails views (minimal with Inertia)
|
||||
│ └── frontend/ # Inertia.js React components
|
||||
│ ├── components/ # Reusable UI components
|
||||
│ ├── layouts/ # Page layouts
|
||||
│ ├── pages/ # Inertia page components
|
||||
│ └── lib/ # Frontend utilities
|
||||
│ ├── controllers/ # Rails controllers
|
||||
│ │ ├── concerns/ # Shared controller modules
|
||||
│ │ └── api/ # API-specific controllers
|
||||
│ ├── models/ # ActiveRecord models
|
||||
│ │ └── concerns/ # Shared model modules
|
||||
│ ├── jobs/ # Background jobs (Solid Queue)
|
||||
│ ├── mailers/ # Email templates
|
||||
│ ├── views/ # Rails views (minimal with Inertia)
|
||||
│ └── frontend/ # Inertia.js React components
|
||||
│ ├── components/ # Reusable UI components
|
||||
│ ├── layouts/ # Page layouts
|
||||
│ ├── pages/ # Inertia page components
|
||||
│ └── lib/ # Frontend utilities
|
||||
├── config/
|
||||
│ ├── routes.rb # Route definitions
|
||||
│ ├── database.yml # Database configuration
|
||||
│ └── initializers/ # App initializers
|
||||
│ ├── routes.rb # Route definitions
|
||||
│ ├── database.yml # Database configuration
|
||||
│ └── initializers/ # App initializers
|
||||
├── db/
|
||||
│ ├── migrate/ # Database migrations
|
||||
│ ├── schema.rb # Current schema
|
||||
│ └── seeds.rb # Seed data
|
||||
│ ├── migrate/ # Database migrations
|
||||
│ ├── schema.rb # Current schema
|
||||
│ └── seeds.rb # Seed data
|
||||
├── lib/
|
||||
│ └── tasks/ # Custom Rake tasks
|
||||
└── public/ # Static assets
|
||||
│ └── tasks/ # Custom Rake tasks
|
||||
└── public/ # Static assets
|
||||
\`\`\`
|
||||
|
||||
### Request Lifecycle
|
||||
@@ -280,28 +290,32 @@ This is where you go absurdly deep:
|
||||
|
||||
\`\`\`
|
||||
User Action → React Component → Inertia Visit → Rails Controller → ActiveRecord → PostgreSQL
|
||||
↓
|
||||
React Props ← Inertia Response ←
|
||||
↓
|
||||
React Props ← Inertia Response ←
|
||||
\`\`\`
|
||||
|
||||
### Key Components
|
||||
|
||||
**Authentication**
|
||||
|
||||
- Devise/Rodauth for user authentication
|
||||
- Session-based auth with encrypted cookies
|
||||
- `authenticate_user!` before_action for protected routes
|
||||
|
||||
**Inertia.js Integration (`app/frontend/`)**
|
||||
|
||||
- React components receive props from Rails controllers
|
||||
- `inertia_render` in controllers passes data to frontend
|
||||
- Shared data via `inertia_share` for layout props
|
||||
|
||||
**Background Jobs (`app/jobs/`)**
|
||||
|
||||
- Solid Queue for job processing
|
||||
- Jobs stored in PostgreSQL (no Redis required)
|
||||
- Dashboard at `/jobs` for monitoring
|
||||
|
||||
**Database (`app/models/`)**
|
||||
|
||||
- ActiveRecord models with associations
|
||||
- Query objects for complex queries
|
||||
- Concerns for shared model behavior
|
||||
@@ -345,32 +359,35 @@ Complete reference for all env vars:
|
||||
|
||||
### Required
|
||||
|
||||
| Variable | Description | How to Get |
|
||||
|----------|-------------|------------|
|
||||
| `DATABASE_URL` | PostgreSQL connection string | Your database provider |
|
||||
| `SECRET_KEY_BASE` | Rails secret for sessions/cookies | Run `bin/rails secret` |
|
||||
| `RAILS_MASTER_KEY` | Decrypts credentials file | Check `config/master.key` (not in git) |
|
||||
| Variable | Description | How to Get |
|
||||
| ------------------ | --------------------------------- | -------------------------------------- |
|
||||
| `DATABASE_URL` | PostgreSQL connection string | Your database provider |
|
||||
| `SECRET_KEY_BASE` | Rails secret for sessions/cookies | Run `bin/rails secret` |
|
||||
| `RAILS_MASTER_KEY` | Decrypts credentials file | Check `config/master.key` (not in git) |
|
||||
|
||||
### Optional
|
||||
|
||||
| Variable | Description | Default |
|
||||
|----------|-------------|---------|
|
||||
| `REDIS_URL` | Redis connection string (for caching/ActionCable) | - |
|
||||
| `RAILS_LOG_LEVEL` | Logging verbosity | `debug` (dev), `info` (prod) |
|
||||
| `RAILS_MAX_THREADS` | Puma thread count | `5` |
|
||||
| `WEB_CONCURRENCY` | Puma worker count | `2` |
|
||||
| `SMTP_ADDRESS` | Mail server hostname | - |
|
||||
| `SMTP_PORT` | Mail server port | `587` |
|
||||
| Variable | Description | Default |
|
||||
| ------------------- | ------------------------------------------------- | ---------------------------- |
|
||||
| `REDIS_URL` | Redis connection string (for caching/ActionCable) | - |
|
||||
| `RAILS_LOG_LEVEL` | Logging verbosity | `debug` (dev), `info` (prod) |
|
||||
| `RAILS_MAX_THREADS` | Puma thread count | `5` |
|
||||
| `WEB_CONCURRENCY` | Puma worker count | `2` |
|
||||
| `SMTP_ADDRESS` | Mail server hostname | - |
|
||||
| `SMTP_PORT` | Mail server port | `587` |
|
||||
|
||||
### Rails Credentials
|
||||
|
||||
Sensitive values should be stored in Rails encrypted credentials:
|
||||
|
||||
\`\`\`bash
|
||||
|
||||
# Edit credentials (opens in $EDITOR)
|
||||
|
||||
bin/rails credentials:edit
|
||||
|
||||
# Or for environment-specific credentials
|
||||
|
||||
RAILS_ENV=production bin/rails credentials:edit
|
||||
\`\`\`
|
||||
|
||||
@@ -378,11 +395,11 @@ Credentials file structure:
|
||||
\`\`\`yaml
|
||||
secret_key_base: xxx
|
||||
stripe:
|
||||
public_key: pk_xxx
|
||||
secret_key: sk_xxx
|
||||
public_key: pk_xxx
|
||||
secret_key: sk_xxx
|
||||
google:
|
||||
client_id: xxx
|
||||
client_secret: xxx
|
||||
client_id: xxx
|
||||
client_secret: xxx
|
||||
\`\`\`
|
||||
|
||||
Access in code: `Rails.application.credentials.stripe[:secret_key]`
|
||||
@@ -408,22 +425,22 @@ RAILS_SERVE_STATIC_FILES=true
|
||||
```markdown
|
||||
## Available Scripts
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `bin/dev` | Start development server (Rails + Vite via Foreman) |
|
||||
| `bin/rails server` | Start Rails server only |
|
||||
| `bin/vite dev` | Start Vite dev server only |
|
||||
| `bin/rails console` | Open Rails console (IRB with app loaded) |
|
||||
| `bin/rails db:migrate` | Run pending database migrations |
|
||||
| `bin/rails db:rollback` | Rollback last migration |
|
||||
| `bin/rails db:seed` | Run database seeds |
|
||||
| `bin/rails db:reset` | Drop, create, migrate, and seed database |
|
||||
| `bin/rails routes` | List all routes |
|
||||
| `bin/rails test` | Run test suite (Minitest) |
|
||||
| `bundle exec rspec` | Run test suite (RSpec, if used) |
|
||||
| `bin/rails assets:precompile` | Compile assets for production |
|
||||
| `bin/rubocop` | Run Ruby linter |
|
||||
| `yarn lint` | Run JavaScript/TypeScript linter |
|
||||
| Command | Description |
|
||||
| ----------------------------- | --------------------------------------------------- |
|
||||
| `bin/dev` | Start development server (Rails + Vite via Foreman) |
|
||||
| `bin/rails server` | Start Rails server only |
|
||||
| `bin/vite dev` | Start Vite dev server only |
|
||||
| `bin/rails console` | Open Rails console (IRB with app loaded) |
|
||||
| `bin/rails db:migrate` | Run pending database migrations |
|
||||
| `bin/rails db:rollback` | Rollback last migration |
|
||||
| `bin/rails db:seed` | Run database seeds |
|
||||
| `bin/rails db:reset` | Drop, create, migrate, and seed database |
|
||||
| `bin/rails routes` | List all routes |
|
||||
| `bin/rails test` | Run test suite (Minitest) |
|
||||
| `bundle exec rspec` | Run test suite (RSpec, if used) |
|
||||
| `bin/rails assets:precompile` | Compile assets for production |
|
||||
| `bin/rubocop` | Run Ruby linter |
|
||||
| `yarn lint` | Run JavaScript/TypeScript linter |
|
||||
```
|
||||
|
||||
### 8. Testing
|
||||
@@ -434,43 +451,50 @@ RAILS_SERVE_STATIC_FILES=true
|
||||
### Running Tests
|
||||
|
||||
\`\`\`bash
|
||||
|
||||
# Run all tests (Minitest)
|
||||
|
||||
bin/rails test
|
||||
|
||||
# Run all tests (RSpec, if used)
|
||||
|
||||
bundle exec rspec
|
||||
|
||||
# Run specific test file
|
||||
|
||||
bin/rails test test/models/user_test.rb
|
||||
bundle exec rspec spec/models/user_spec.rb
|
||||
|
||||
# Run tests matching a pattern
|
||||
|
||||
bin/rails test -n /creates_user/
|
||||
bundle exec rspec -e "creates user"
|
||||
|
||||
# Run system tests (browser tests)
|
||||
|
||||
bin/rails test:system
|
||||
|
||||
# Run with coverage (SimpleCov)
|
||||
|
||||
COVERAGE=true bin/rails test
|
||||
\`\`\`
|
||||
|
||||
### Test Structure
|
||||
|
||||
\`\`\`
|
||||
test/ # Minitest structure
|
||||
├── controllers/ # Controller tests
|
||||
├── models/ # Model unit tests
|
||||
├── integration/ # Integration tests
|
||||
├── system/ # System/browser tests
|
||||
├── fixtures/ # Test data
|
||||
└── test_helper.rb # Test configuration
|
||||
test/ # Minitest structure
|
||||
├── controllers/ # Controller tests
|
||||
├── models/ # Model unit tests
|
||||
├── integration/ # Integration tests
|
||||
├── system/ # System/browser tests
|
||||
├── fixtures/ # Test data
|
||||
└── test_helper.rb # Test configuration
|
||||
|
||||
spec/ # RSpec structure (if used)
|
||||
spec/ # RSpec structure (if used)
|
||||
├── models/
|
||||
├── requests/
|
||||
├── system/
|
||||
├── factories/ # FactoryBot factories
|
||||
├── factories/ # FactoryBot factories
|
||||
├── support/
|
||||
└── rails_helper.rb
|
||||
\`\`\`
|
||||
@@ -482,16 +506,16 @@ spec/ # RSpec structure (if used)
|
||||
require "test_helper"
|
||||
|
||||
class UserTest < ActiveSupport::TestCase
|
||||
test "creates user with valid attributes" do
|
||||
user = User.new(email: "test@example.com", name: "Test User")
|
||||
assert user.valid?
|
||||
end
|
||||
test "creates user with valid attributes" do
|
||||
user = User.new(email: "test@example.com", name: "Test User")
|
||||
assert user.valid?
|
||||
end
|
||||
|
||||
test "requires email" do
|
||||
user = User.new(name: "Test User")
|
||||
assert_not user.valid?
|
||||
assert_includes user.errors[:email], "can't be blank"
|
||||
end
|
||||
test "requires email" do
|
||||
user = User.new(name: "Test User")
|
||||
assert_not user.valid?
|
||||
assert_includes user.errors[:email], "can't be blank"
|
||||
end
|
||||
end
|
||||
\`\`\`
|
||||
|
||||
@@ -500,18 +524,19 @@ end
|
||||
require "rails_helper"
|
||||
|
||||
RSpec.describe User, type: :model do
|
||||
describe "validations" do
|
||||
it "is valid with valid attributes" do
|
||||
user = build(:user)
|
||||
expect(user).to be_valid
|
||||
end
|
||||
describe "validations" do
|
||||
it "is valid with valid attributes" do
|
||||
user = build(:user)
|
||||
expect(user).to be_valid
|
||||
end
|
||||
|
||||
it "requires an email" do
|
||||
user = build(:user, email: nil)
|
||||
expect(user).not_to be_valid
|
||||
expect(user.errors[:email]).to include("can't be blank")
|
||||
end
|
||||
end
|
||||
|
||||
end
|
||||
end
|
||||
\`\`\`
|
||||
|
||||
@@ -528,10 +553,10 @@ import { render, screen } from '@testing-library/react'
|
||||
import { Dashboard } from './Dashboard'
|
||||
|
||||
describe('Dashboard', () => {
|
||||
it('renders user name', () => {
|
||||
render(<Dashboard user={{ name: 'Josh' }} />)
|
||||
expect(screen.getByText('Josh')).toBeInTheDocument()
|
||||
})
|
||||
it('renders user name', () => {
|
||||
render(<Dashboard user={{ name: 'Josh' }} />)
|
||||
expect(screen.getByText('Josh')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
\`\`\`
|
||||
```
|
||||
@@ -548,19 +573,25 @@ Tailor this to detected platform (look for Dockerfile, fly.toml, render.yaml, ka
|
||||
If using Kamal for deployment:
|
||||
|
||||
\`\`\`bash
|
||||
|
||||
# Setup Kamal (first time)
|
||||
|
||||
kamal setup
|
||||
|
||||
# Deploy
|
||||
|
||||
kamal deploy
|
||||
|
||||
# Rollback to previous version
|
||||
|
||||
kamal rollback
|
||||
|
||||
# View logs
|
||||
|
||||
kamal app logs
|
||||
|
||||
# Run console on production
|
||||
|
||||
kamal app exec --interactive 'bin/rails console'
|
||||
\`\`\`
|
||||
|
||||
@@ -571,50 +602,64 @@ Configuration lives in `config/deploy.yml`.
|
||||
Build and run:
|
||||
|
||||
\`\`\`bash
|
||||
|
||||
# Build image
|
||||
|
||||
docker build -t myapp .
|
||||
|
||||
# Run with environment variables
|
||||
|
||||
docker run -p 3000:3000 \
|
||||
-e DATABASE_URL=postgresql://... \
|
||||
-e SECRET_KEY_BASE=... \
|
||||
-e RAILS_ENV=production \
|
||||
myapp
|
||||
-e DATABASE_URL=postgresql://... \
|
||||
-e SECRET_KEY_BASE=... \
|
||||
-e RAILS_ENV=production \
|
||||
myapp
|
||||
\`\`\`
|
||||
|
||||
### Heroku
|
||||
|
||||
\`\`\`bash
|
||||
|
||||
# Create app
|
||||
|
||||
heroku create myapp
|
||||
|
||||
# Add PostgreSQL
|
||||
|
||||
heroku addons:create heroku-postgresql:mini
|
||||
|
||||
# Set environment variables
|
||||
|
||||
heroku config:set SECRET_KEY_BASE=$(bin/rails secret)
|
||||
heroku config:set RAILS_MASTER_KEY=$(cat config/master.key)
|
||||
|
||||
# Deploy
|
||||
|
||||
git push heroku main
|
||||
|
||||
# Run migrations
|
||||
|
||||
heroku run bin/rails db:migrate
|
||||
\`\`\`
|
||||
|
||||
### Fly.io
|
||||
|
||||
\`\`\`bash
|
||||
|
||||
# Launch (first time)
|
||||
|
||||
fly launch
|
||||
|
||||
# Deploy
|
||||
|
||||
fly deploy
|
||||
|
||||
# Run migrations
|
||||
|
||||
fly ssh console -C "bin/rails db:migrate"
|
||||
|
||||
# Open console
|
||||
|
||||
fly ssh console -C "bin/rails console"
|
||||
\`\`\`
|
||||
|
||||
@@ -623,6 +668,7 @@ fly ssh console -C "bin/rails console"
|
||||
If `render.yaml` exists, connect your repo to Render and it will auto-deploy.
|
||||
|
||||
Manual setup:
|
||||
|
||||
1. Create new Web Service
|
||||
2. Connect GitHub repository
|
||||
3. Set build command: `bundle install && bin/rails assets:precompile`
|
||||
@@ -632,21 +678,27 @@ Manual setup:
|
||||
### Manual/VPS Deployment
|
||||
|
||||
\`\`\`bash
|
||||
|
||||
# On the server:
|
||||
|
||||
# Pull latest code
|
||||
|
||||
git pull origin main
|
||||
|
||||
# Install dependencies
|
||||
|
||||
bundle install --deployment
|
||||
|
||||
# Compile assets
|
||||
|
||||
RAILS_ENV=production bin/rails assets:precompile
|
||||
|
||||
# Run migrations
|
||||
|
||||
RAILS_ENV=production bin/rails db:migrate
|
||||
|
||||
# Restart application server (e.g., Puma via systemd)
|
||||
|
||||
sudo systemctl restart myapp
|
||||
\`\`\`
|
||||
```
|
||||
@@ -661,6 +713,7 @@ sudo systemctl restart myapp
|
||||
**Error:** `could not connect to server: Connection refused`
|
||||
|
||||
**Solution:**
|
||||
|
||||
1. Verify PostgreSQL is running: `pg_isready` or `docker ps`
|
||||
2. Check `DATABASE_URL` format: `postgresql://USER:PASSWORD@HOST:PORT/DATABASE`
|
||||
3. Ensure database exists: `bin/rails db:create`
|
||||
@@ -680,7 +733,9 @@ bin/rails db:migrate
|
||||
|
||||
**Solution:**
|
||||
\`\`\`bash
|
||||
|
||||
# Clear and recompile assets
|
||||
|
||||
bin/rails assets:clobber
|
||||
bin/rails assets:precompile
|
||||
\`\`\`
|
||||
@@ -690,14 +745,19 @@ bin/rails assets:precompile
|
||||
**Error:** Native extension build failures
|
||||
|
||||
**Solution:**
|
||||
|
||||
1. Ensure system dependencies are installed:
|
||||
\`\`\`bash
|
||||
|
||||
# macOS
|
||||
|
||||
brew install postgresql libpq
|
||||
|
||||
# Ubuntu
|
||||
|
||||
sudo apt-get install libpq-dev
|
||||
\`\`\`
|
||||
|
||||
2. Try again: `bundle install`
|
||||
|
||||
### Credentials Issues
|
||||
@@ -706,6 +766,7 @@ bin/rails assets:precompile
|
||||
|
||||
**Solution:**
|
||||
The master key doesn't match the credentials file. Either:
|
||||
|
||||
1. Get the correct `config/master.key` from another team member
|
||||
2. Or regenerate credentials: `rm config/credentials.yml.enc && bin/rails credentials:edit`
|
||||
|
||||
@@ -715,10 +776,13 @@ The master key doesn't match the credentials file. Either:
|
||||
|
||||
**Solution:**
|
||||
\`\`\`bash
|
||||
|
||||
# Clear Vite cache
|
||||
|
||||
rm -rf node_modules/.vite
|
||||
|
||||
# Reinstall JS dependencies
|
||||
|
||||
rm -rf node_modules && yarn install
|
||||
\`\`\`
|
||||
|
||||
@@ -730,7 +794,9 @@ rm -rf node_modules && yarn install
|
||||
Ensure the queue worker is running:
|
||||
\`\`\`bash
|
||||
bin/jobs
|
||||
|
||||
# or
|
||||
|
||||
bin/rails solid_queue:start
|
||||
\`\`\`
|
||||
```
|
||||
@@ -766,8 +832,9 @@ Include if open source or team project.
|
||||
## Output Format
|
||||
|
||||
Generate a complete README.md file with:
|
||||
|
||||
- Proper markdown formatting
|
||||
- Code blocks with language hints (```bash, ```typescript, etc.)
|
||||
- Code blocks with language hints (`bash, `typescript, etc.)
|
||||
- Tables where appropriate
|
||||
- Clear section hierarchy
|
||||
- Linked table of contents for long documents
|
||||
|
||||
270
skills/skill-creator/README.md
Normal file
270
skills/skill-creator/README.md
Normal file
@@ -0,0 +1,270 @@
|
||||
# skill-creator
|
||||
|
||||
**Automate CLI skill creation with best practices built-in.**
|
||||
|
||||
## What It Does
|
||||
|
||||
The skill-creator automates the entire workflow of creating new CLI skills for GitHub Copilot CLI and Claude Code. It guides you through brainstorming, applies standardized templates, validates content quality, and handles installation—all while following Anthropic's official best practices.
|
||||
|
||||
## Key Features
|
||||
|
||||
- **🎯 Interactive Brainstorming** - Collaborative session to define skill purpose and scope
|
||||
- **✨ Template Automation** - Automatic file generation with zero manual configuration
|
||||
- **🔍 Quality Validation** - Built-in checks for YAML, content quality, and writing style
|
||||
- **📦 Flexible Installation** - Choose repository-only, global, or hybrid installation
|
||||
- **📊 Visual Progress Bar** - Real-time progress indicator showing completion status (e.g., `[████████████░░░░░░] 60% - Step 3/5`)
|
||||
- **🔗 Prompt Engineer Integration** - Optional enhancement using prompt-engineer skill
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this skill when you want to:
|
||||
- Create a new CLI skill following official standards
|
||||
- Extend CLI functionality with custom capabilities
|
||||
- Package domain knowledge into a reusable skill format
|
||||
- Automate repetitive CLI tasks with a custom skill
|
||||
- Install skills locally or globally across your system
|
||||
|
||||
## Installation
|
||||
|
||||
### Prerequisites
|
||||
|
||||
This skill is part of the `cli-ai-skills` repository. To use it:
|
||||
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone https://github.com/yourusername/cli-ai-skills.git
|
||||
cd cli-ai-skills
|
||||
```
|
||||
|
||||
### Install Globally (Recommended)
|
||||
|
||||
Install via symlinks to make the skill available everywhere:
|
||||
|
||||
```bash
|
||||
# For GitHub Copilot CLI
|
||||
ln -sf "$(pwd)/.github/skills/skill-creator" ~/.copilot/skills/skill-creator
|
||||
|
||||
# For Claude Code
|
||||
ln -sf "$(pwd)/.claude/skills/skill-creator" ~/.claude/skills/skill-creator
|
||||
```
|
||||
|
||||
**Benefits of global installation:**
|
||||
- Works in any directory
|
||||
- Auto-updates when you `git pull` the repository
|
||||
- No configuration files needed
|
||||
|
||||
### Repository-Only Installation
|
||||
|
||||
If you prefer to use the skill only within this repository, no installation is needed. The skill will be available when working in the `cli-ai-skills` directory.
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Skill Creation
|
||||
|
||||
Simply ask the CLI to create a new skill:
|
||||
|
||||
```bash
|
||||
# GitHub Copilot CLI
|
||||
gh copilot "create a new skill for debugging Python errors"
|
||||
|
||||
# Claude Code
|
||||
claude "create a skill that helps with git workflows"
|
||||
```
|
||||
|
||||
The skill will guide you through with visual progress tracking:
|
||||
1. **Brainstorming** (20%) - Define purpose, triggers, and type
|
||||
2. **Prompt Enhancement** (40%, optional) - Enhance with prompt-engineer skill
|
||||
3. **File Generation** (60%) - Create files from templates
|
||||
4. **Validation** (80%) - Check quality and standards
|
||||
5. **Installation** (100%) - Choose local, global, or both
|
||||
|
||||
Each phase displays a progress bar:
|
||||
```
|
||||
[████████████░░░░░░] 60% - Step 3/5: File Generation
|
||||
```
|
||||
|
||||
### Advanced Usage
|
||||
|
||||
#### Create Code Generation Skill
|
||||
|
||||
```bash
|
||||
"Create a code skill that generates React components from descriptions"
|
||||
```
|
||||
|
||||
The skill will:
|
||||
- Use the specialized `code-skill-template.md`
|
||||
- Ask about specific frameworks (React, Vue, etc.)
|
||||
- Include code examples in the `examples/` folder
|
||||
|
||||
#### Create Documentation Skill
|
||||
|
||||
```bash
|
||||
"Build a skill that writes API documentation from code"
|
||||
```
|
||||
|
||||
The skill will:
|
||||
- Use `documentation-skill-template.md`
|
||||
- Ask about documentation formats
|
||||
- Set up references for style guides
|
||||
|
||||
#### Install for Specific Platform
|
||||
|
||||
```bash
|
||||
"Create a skill for Copilot only that analyzes TypeScript errors"
|
||||
```
|
||||
|
||||
The skill will:
|
||||
- Generate files only in `.github/skills/`
|
||||
- Skip Claude-specific installation
|
||||
- Validate against Copilot requirements
|
||||
|
||||
## Example Walkthrough
|
||||
|
||||
Here's what creating a skill looks like:
|
||||
|
||||
```
|
||||
You: "create a skill for database schema migrations"
|
||||
|
||||
[████░░░░░░░░░░░░░░] 20% - Step 1/5: Brainstorming & Planning
|
||||
|
||||
What should this skill do?
|
||||
> Helps users create and manage database schema migrations safely
|
||||
|
||||
When should it trigger? (3-5 phrases)
|
||||
> "create migration", "generate schema change", "migrate database"
|
||||
|
||||
What type of skill?
|
||||
> [×] General purpose
|
||||
|
||||
Which platforms?
|
||||
> [×] Both (Copilot + Claude)
|
||||
|
||||
[... continues through all phases ...]
|
||||
|
||||
🎉 Skill created successfully!
|
||||
|
||||
📦 Skill Name: database-migration
|
||||
📁 Location: .github/skills/database-migration/
|
||||
🔗 Installed: Global (Copilot + Claude)
|
||||
```
|
||||
|
||||
## File Structure
|
||||
|
||||
When you create a skill, this structure is generated:
|
||||
|
||||
```
|
||||
.github/skills/your-skill-name/
|
||||
├── SKILL.md # Main skill instructions (1.5-2k words)
|
||||
├── README.md # User-facing documentation (this file)
|
||||
├── references/ # Detailed guides (2k-5k words each)
|
||||
│ └── (empty, ready for extended docs)
|
||||
├── examples/ # Working code samples
|
||||
│ └── (empty, ready for examples)
|
||||
└── scripts/ # Executable utilities
|
||||
└── (empty, ready for automation)
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
**No configuration needed!** This skill uses runtime discovery to:
|
||||
- Detect installed platforms (Copilot CLI, Claude Code)
|
||||
- Find repository root automatically
|
||||
- Extract author info from git config
|
||||
- Determine optimal file locations
|
||||
|
||||
## Validation
|
||||
|
||||
Every skill created is automatically validated for:
|
||||
- ✅ **YAML Frontmatter** - Required fields and format
|
||||
- ✅ **Description Format** - Third-person, trigger phrases
|
||||
- ✅ **Word Count** - 1,500-2,000 ideal, under 5,000 max
|
||||
- ✅ **Writing Style** - Imperative form, no second-person
|
||||
- ✅ **Progressive Disclosure** - Proper content organization
|
||||
|
||||
## Frameworks Used
|
||||
|
||||
This skill leverages several established methodologies:
|
||||
|
||||
- **Progressive Disclosure** - 3-level content hierarchy (metadata → SKILL.md → bundled resources)
|
||||
- **Bundled Resources Pattern** - References, examples, and scripts as separate files
|
||||
- **Anthropic Best Practices** - Official skill development standards
|
||||
- **Zero-Config Design** - Runtime discovery, no hardcoded values
|
||||
- **Template-Driven Generation** - Consistent structure across all skills
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### "Template not found" Error
|
||||
|
||||
Ensure you're in the `cli-ai-skills` repository or have cloned it:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/yourusername/cli-ai-skills.git
|
||||
cd cli-ai-skills
|
||||
```
|
||||
|
||||
### "Platform not detected" Warning
|
||||
|
||||
If platforms aren't detected:
|
||||
1. Choose "Repository only" installation
|
||||
2. Manually specify platform during setup
|
||||
3. Install globally later using provided commands
|
||||
|
||||
### Validation Failures
|
||||
|
||||
If validation finds issues:
|
||||
- Review suggestions in the output
|
||||
- Choose automatic fixes for common problems
|
||||
- Manually edit files for complex issues
|
||||
- Re-run validation: `scripts/validate-skill-yaml.sh .github/skills/your-skill`
|
||||
|
||||
## Advanced Features
|
||||
|
||||
### Prompt Engineer Integration
|
||||
|
||||
Enhance your skill descriptions with AI:
|
||||
1. Enable during Phase 2 (Prompt Refinement)
|
||||
2. Skill will invoke `prompt-engineer` automatically
|
||||
3. Review enhanced output before proceeding
|
||||
|
||||
### Bundled Resources
|
||||
|
||||
For complex skills, use bundled resources:
|
||||
- **references/** - Detailed documentation (no word limit)
|
||||
- **examples/** - Working code samples users can run
|
||||
- **scripts/** - Automation utilities loaded on demand
|
||||
|
||||
### Version Management
|
||||
|
||||
Update existing skills:
|
||||
```bash
|
||||
scripts/update-skill-version.sh your-skill-name 1.1.0
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
Created a useful skill? Share it:
|
||||
1. Ensure validation passes
|
||||
2. Add usage examples
|
||||
3. Update main README.md
|
||||
4. Submit a pull request
|
||||
|
||||
## Resources
|
||||
|
||||
- **Writing Style Guide:** `resources/templates/writing-style-guide.md`
|
||||
- **Anthropic Official Guide:** https://github.com/anthropics/claude-plugins-official
|
||||
- **Templates Directory:** `resources/templates/`
|
||||
- **Validation Scripts:** `scripts/validate-*.sh`
|
||||
|
||||
## Support
|
||||
|
||||
For issues or questions:
|
||||
- Check existing skills in `.github/skills/` for examples
|
||||
- Review `resources/skills-development.md` for methodology
|
||||
- Open an issue in the repository
|
||||
|
||||
---
|
||||
|
||||
**Version:** 1.1.0
|
||||
**Platform:** GitHub Copilot CLI, Claude Code
|
||||
**Author:** Eric Andrade
|
||||
**Last Updated:** 2026-02-01
|
||||
@@ -1,356 +1,593 @@
|
||||
---
|
||||
name: skill-creator
|
||||
description: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
|
||||
license: Complete terms in LICENSE.txt
|
||||
description: "This skill should be used when the user asks to create a new skill, build a skill, make a custom skill, develop a CLI skill, or wants to extend the CLI with new capabilities. Automates the entire skill creation workflow from brainstorming to installation."
|
||||
version: 1.3.0
|
||||
author: Eric Andrade
|
||||
created: 2025-02-01
|
||||
updated: 2026-02-04
|
||||
platforms: [github-copilot-cli, claude-code, codex]
|
||||
category: meta
|
||||
tags: [automation, scaffolding, skill-creation, meta-skill]
|
||||
risk: safe
|
||||
---
|
||||
|
||||
# Skill Creator
|
||||
# skill-creator
|
||||
|
||||
This skill provides guidance for creating effective skills.
|
||||
## Purpose
|
||||
|
||||
## About Skills
|
||||
To create new CLI skills following Anthropic's official best practices with zero manual configuration. This skill automates brainstorming, template application, validation, and installation processes while maintaining progressive disclosure patterns and writing style standards.
|
||||
|
||||
Skills are modular, self-contained packages that extend Claude's capabilities by providing
|
||||
specialized knowledge, workflows, and tools. Think of them as "onboarding guides" for specific
|
||||
domains or tasks—they transform Claude from a general-purpose agent into a specialized agent
|
||||
equipped with procedural knowledge that no model can fully possess.
|
||||
## When to Use This Skill
|
||||
|
||||
### What Skills Provide
|
||||
This skill should be used when:
|
||||
- User wants to extend CLI functionality with custom capabilities
|
||||
- User needs to create a skill following official standards
|
||||
- User wants to automate repetitive CLI tasks with a reusable skill
|
||||
- User needs to package domain knowledge into a skill format
|
||||
- User wants both local and global skill installation options
|
||||
|
||||
1. Specialized workflows - Multi-step procedures for specific domains
|
||||
2. Tool integrations - Instructions for working with specific file formats or APIs
|
||||
3. Domain expertise - Company-specific knowledge, schemas, business logic
|
||||
4. Bundled resources - Scripts, references, and assets for complex and repetitive tasks
|
||||
## Core Capabilities
|
||||
|
||||
## Core Principles
|
||||
1. **Interactive Brainstorming** - Collaborative session to define skill purpose and scope
|
||||
2. **Prompt Enhancement** - Optional integration with prompt-engineer skill for refinement
|
||||
3. **Template Application** - Automatic file generation from standardized templates
|
||||
4. **Validation** - YAML, content, and style checks against Anthropic standards
|
||||
5. **Installation** - Local repository or global installation with symlinks
|
||||
6. **Progress Tracking** - Visual gauge showing completion status at each step
|
||||
|
||||
### Concise is Key
|
||||
## Step 0: Discovery
|
||||
|
||||
The context window is a public good. Skills share the context window with everything else Claude needs: system prompt, conversation history, other Skills' metadata, and the actual user request.
|
||||
|
||||
**Default assumption: Claude is already very smart.** Only add context Claude doesn't already have. Challenge each piece of information: "Does Claude really need this explanation?" and "Does this paragraph justify its token cost?"
|
||||
|
||||
Prefer concise examples over verbose explanations.
|
||||
|
||||
### Set Appropriate Degrees of Freedom
|
||||
|
||||
Match the level of specificity to the task's fragility and variability:
|
||||
|
||||
**High freedom (text-based instructions)**: Use when multiple approaches are valid, decisions depend on context, or heuristics guide the approach.
|
||||
|
||||
**Medium freedom (pseudocode or scripts with parameters)**: Use when a preferred pattern exists, some variation is acceptable, or configuration affects behavior.
|
||||
|
||||
**Low freedom (specific scripts, few parameters)**: Use when operations are fragile and error-prone, consistency is critical, or a specific sequence must be followed.
|
||||
|
||||
Think of Claude as exploring a path: a narrow bridge with cliffs needs specific guardrails (low freedom), while an open field allows many routes (high freedom).
|
||||
|
||||
### Anatomy of a Skill
|
||||
|
||||
Every skill consists of a required SKILL.md file and optional bundled resources:
|
||||
|
||||
```
|
||||
skill-name/
|
||||
├── SKILL.md (required)
|
||||
│ ├── YAML frontmatter metadata (required)
|
||||
│ │ ├── name: (required)
|
||||
│ │ └── description: (required)
|
||||
│ └── Markdown instructions (required)
|
||||
└── Bundled Resources (optional)
|
||||
├── scripts/ - Executable code (Python/Bash/etc.)
|
||||
├── references/ - Documentation intended to be loaded into context as needed
|
||||
└── assets/ - Files used in output (templates, icons, fonts, etc.)
|
||||
```
|
||||
|
||||
#### SKILL.md (required)
|
||||
|
||||
Every SKILL.md consists of:
|
||||
|
||||
- **Frontmatter** (YAML): Contains `name` and `description` fields. These are the only fields that Claude reads to determine when the skill gets used, thus it is very important to be clear and comprehensive in describing what the skill is, and when it should be used.
|
||||
- **Body** (Markdown): Instructions and guidance for using the skill. Only loaded AFTER the skill triggers (if at all).
|
||||
|
||||
#### Bundled Resources (optional)
|
||||
|
||||
##### Scripts (`scripts/`)
|
||||
|
||||
Executable code (Python/Bash/etc.) for tasks that require deterministic reliability or are repeatedly rewritten.
|
||||
|
||||
- **When to include**: When the same code is being rewritten repeatedly or deterministic reliability is needed
|
||||
- **Example**: `scripts/rotate_pdf.py` for PDF rotation tasks
|
||||
- **Benefits**: Token efficient, deterministic, may be executed without loading into context
|
||||
- **Note**: Scripts may still need to be read by Claude for patching or environment-specific adjustments
|
||||
|
||||
##### References (`references/`)
|
||||
|
||||
Documentation and reference material intended to be loaded as needed into context to inform Claude's process and thinking.
|
||||
|
||||
- **When to include**: For documentation that Claude should reference while working
|
||||
- **Examples**: `references/finance.md` for financial schemas, `references/mnda.md` for company NDA template, `references/policies.md` for company policies, `references/api_docs.md` for API specifications
|
||||
- **Use cases**: Database schemas, API documentation, domain knowledge, company policies, detailed workflow guides
|
||||
- **Benefits**: Keeps SKILL.md lean, loaded only when Claude determines it's needed
|
||||
- **Best practice**: If files are large (>10k words), include grep search patterns in SKILL.md
|
||||
- **Avoid duplication**: Information should live in either SKILL.md or references files, not both. Prefer references files for detailed information unless it's truly core to the skill—this keeps SKILL.md lean while making information discoverable without hogging the context window. Keep only essential procedural instructions and workflow guidance in SKILL.md; move detailed reference material, schemas, and examples to references files.
|
||||
|
||||
##### Assets (`assets/`)
|
||||
|
||||
Files not intended to be loaded into context, but rather used within the output Claude produces.
|
||||
|
||||
- **When to include**: When the skill needs files that will be used in the final output
|
||||
- **Examples**: `assets/logo.png` for brand assets, `assets/slides.pptx` for PowerPoint templates, `assets/frontend-template/` for HTML/React boilerplate, `assets/font.ttf` for typography
|
||||
- **Use cases**: Templates, images, icons, boilerplate code, fonts, sample documents that get copied or modified
|
||||
- **Benefits**: Separates output resources from documentation, enables Claude to use files without loading them into context
|
||||
|
||||
#### What to Not Include in a Skill
|
||||
|
||||
A skill should only contain essential files that directly support its functionality. Do NOT create extraneous documentation or auxiliary files, including:
|
||||
|
||||
- README.md
|
||||
- INSTALLATION_GUIDE.md
|
||||
- QUICK_REFERENCE.md
|
||||
- CHANGELOG.md
|
||||
- etc.
|
||||
|
||||
The skill should only contain the information needed for an AI agent to do the job at hand. It should not contain auxilary context about the process that went into creating it, setup and testing procedures, user-facing documentation, etc. Creating additional documentation files just adds clutter and confusion.
|
||||
|
||||
### Progressive Disclosure Design Principle
|
||||
|
||||
Skills use a three-level loading system to manage context efficiently:
|
||||
|
||||
1. **Metadata (name + description)** - Always in context (~100 words)
|
||||
2. **SKILL.md body** - When skill triggers (<5k words)
|
||||
3. **Bundled resources** - As needed by Claude (Unlimited because scripts can be executed without reading into context window)
|
||||
|
||||
#### Progressive Disclosure Patterns
|
||||
|
||||
Keep SKILL.md body to the essentials and under 500 lines to minimize context bloat. Split content into separate files when approaching this limit. When splitting out content into other files, it is very important to reference them from SKILL.md and describe clearly when to read them, to ensure the reader of the skill knows they exist and when to use them.
|
||||
|
||||
**Key principle:** When a skill supports multiple variations, frameworks, or options, keep only the core workflow and selection guidance in SKILL.md. Move variant-specific details (patterns, examples, configuration) into separate reference files.
|
||||
|
||||
**Pattern 1: High-level guide with references**
|
||||
|
||||
```markdown
|
||||
# PDF Processing
|
||||
|
||||
## Quick start
|
||||
|
||||
Extract text with pdfplumber:
|
||||
[code example]
|
||||
|
||||
## Advanced features
|
||||
|
||||
- **Form filling**: See [FORMS.md](FORMS.md) for complete guide
|
||||
- **API reference**: See [REFERENCE.md](REFERENCE.md) for all methods
|
||||
- **Examples**: See [EXAMPLES.md](EXAMPLES.md) for common patterns
|
||||
```
|
||||
|
||||
Claude loads FORMS.md, REFERENCE.md, or EXAMPLES.md only when needed.
|
||||
|
||||
**Pattern 2: Domain-specific organization**
|
||||
|
||||
For Skills with multiple domains, organize content by domain to avoid loading irrelevant context:
|
||||
|
||||
```
|
||||
bigquery-skill/
|
||||
├── SKILL.md (overview and navigation)
|
||||
└── reference/
|
||||
├── finance.md (revenue, billing metrics)
|
||||
├── sales.md (opportunities, pipeline)
|
||||
├── product.md (API usage, features)
|
||||
└── marketing.md (campaigns, attribution)
|
||||
```
|
||||
|
||||
When a user asks about sales metrics, Claude only reads sales.md.
|
||||
|
||||
Similarly, for skills supporting multiple frameworks or variants, organize by variant:
|
||||
|
||||
```
|
||||
cloud-deploy/
|
||||
├── SKILL.md (workflow + provider selection)
|
||||
└── references/
|
||||
├── aws.md (AWS deployment patterns)
|
||||
├── gcp.md (GCP deployment patterns)
|
||||
└── azure.md (Azure deployment patterns)
|
||||
```
|
||||
|
||||
When the user chooses AWS, Claude only reads aws.md.
|
||||
|
||||
**Pattern 3: Conditional details**
|
||||
|
||||
Show basic content, link to advanced content:
|
||||
|
||||
```markdown
|
||||
# DOCX Processing
|
||||
|
||||
## Creating documents
|
||||
|
||||
Use docx-js for new documents. See [DOCX-JS.md](DOCX-JS.md).
|
||||
|
||||
## Editing documents
|
||||
|
||||
For simple edits, modify the XML directly.
|
||||
|
||||
**For tracked changes**: See [REDLINING.md](REDLINING.md)
|
||||
**For OOXML details**: See [OOXML.md](OOXML.md)
|
||||
```
|
||||
|
||||
Claude reads REDLINING.md or OOXML.md only when the user needs those features.
|
||||
|
||||
**Important guidelines:**
|
||||
|
||||
- **Avoid deeply nested references** - Keep references one level deep from SKILL.md. All reference files should link directly from SKILL.md.
|
||||
- **Structure longer reference files** - For files longer than 100 lines, include a table of contents at the top so Claude can see the full scope when previewing.
|
||||
|
||||
## Skill Creation Process
|
||||
|
||||
Skill creation involves these steps:
|
||||
|
||||
1. Understand the skill with concrete examples
|
||||
2. Plan reusable skill contents (scripts, references, assets)
|
||||
3. Initialize the skill (run init_skill.py)
|
||||
4. Edit the skill (implement resources and write SKILL.md)
|
||||
5. Package the skill (run package_skill.py)
|
||||
6. Iterate based on real usage
|
||||
|
||||
Follow these steps in order, skipping only if there is a clear reason why they are not applicable.
|
||||
|
||||
### Step 1: Understanding the Skill with Concrete Examples
|
||||
|
||||
Skip this step only when the skill's usage patterns are already clearly understood. It remains valuable even when working with an existing skill.
|
||||
|
||||
To create an effective skill, clearly understand concrete examples of how the skill will be used. This understanding can come from either direct user examples or generated examples that are validated with user feedback.
|
||||
|
||||
For example, when building an image-editor skill, relevant questions include:
|
||||
|
||||
- "What functionality should the image-editor skill support? Editing, rotating, anything else?"
|
||||
- "Can you give some examples of how this skill would be used?"
|
||||
- "I can imagine users asking for things like 'Remove the red-eye from this image' or 'Rotate this image'. Are there other ways you imagine this skill being used?"
|
||||
- "What would a user say that should trigger this skill?"
|
||||
|
||||
To avoid overwhelming users, avoid asking too many questions in a single message. Start with the most important questions and follow up as needed for better effectiveness.
|
||||
|
||||
Conclude this step when there is a clear sense of the functionality the skill should support.
|
||||
|
||||
### Step 2: Planning the Reusable Skill Contents
|
||||
|
||||
To turn concrete examples into an effective skill, analyze each example by:
|
||||
|
||||
1. Considering how to execute on the example from scratch
|
||||
2. Identifying what scripts, references, and assets would be helpful when executing these workflows repeatedly
|
||||
|
||||
Example: When building a `pdf-editor` skill to handle queries like "Help me rotate this PDF," the analysis shows:
|
||||
|
||||
1. Rotating a PDF requires re-writing the same code each time
|
||||
2. A `scripts/rotate_pdf.py` script would be helpful to store in the skill
|
||||
|
||||
Example: When designing a `frontend-webapp-builder` skill for queries like "Build me a todo app" or "Build me a dashboard to track my steps," the analysis shows:
|
||||
|
||||
1. Writing a frontend webapp requires the same boilerplate HTML/React each time
|
||||
2. An `assets/hello-world/` template containing the boilerplate HTML/React project files would be helpful to store in the skill
|
||||
|
||||
Example: When building a `big-query` skill to handle queries like "How many users have logged in today?" the analysis shows:
|
||||
|
||||
1. Querying BigQuery requires re-discovering the table schemas and relationships each time
|
||||
2. A `references/schema.md` file documenting the table schemas would be helpful to store in the skill
|
||||
|
||||
To establish the skill's contents, analyze each concrete example to create a list of the reusable resources to include: scripts, references, and assets.
|
||||
|
||||
### Step 3: Initializing the Skill
|
||||
|
||||
At this point, it is time to actually create the skill.
|
||||
|
||||
Skip this step only if the skill being developed already exists, and iteration or packaging is needed. In this case, continue to the next step.
|
||||
|
||||
When creating a new skill from scratch, always run the `init_skill.py` script. The script conveniently generates a new template skill directory that automatically includes everything a skill requires, making the skill creation process much more efficient and reliable.
|
||||
|
||||
Usage:
|
||||
Before starting skill creation, gather runtime information:
|
||||
|
||||
```bash
|
||||
scripts/init_skill.py <skill-name> --path <output-directory>
|
||||
# Detect available platforms
|
||||
COPILOT_INSTALLED=false
|
||||
CLAUDE_INSTALLED=false
|
||||
CODEX_INSTALLED=false
|
||||
|
||||
if command -v gh &>/dev/null && gh copilot --version &>/dev/null 2>&1; then
|
||||
COPILOT_INSTALLED=true
|
||||
fi
|
||||
|
||||
if [[ -d "$HOME/.claude" ]]; then
|
||||
CLAUDE_INSTALLED=true
|
||||
fi
|
||||
|
||||
if [[ -d "$HOME/.codex" ]]; then
|
||||
CODEX_INSTALLED=true
|
||||
fi
|
||||
|
||||
# Determine working directory
|
||||
REPO_ROOT=$(git rev-parse --show-toplevel 2>/dev/null || pwd)
|
||||
SKILLS_REPO="$REPO_ROOT"
|
||||
|
||||
# Check if in cli-ai-skills repository
|
||||
if [[ ! -d "$SKILLS_REPO/.github/skills" ]]; then
|
||||
echo "⚠️ Not in cli-ai-skills repository. Creating standalone skill."
|
||||
STANDALONE=true
|
||||
fi
|
||||
|
||||
# Get user info from git config
|
||||
AUTHOR=$(git config user.name || echo "Unknown")
|
||||
EMAIL=$(git config user.email || echo "")
|
||||
```
|
||||
|
||||
The script:
|
||||
**Key Information Needed:**
|
||||
- Which platforms to target (Copilot, Claude, Codex, or all three)
|
||||
- Installation preference (local, global, or both)
|
||||
- Skill name and purpose
|
||||
- Skill type (general, code, documentation, analysis)
|
||||
|
||||
- Creates the skill directory at the specified path
|
||||
- Generates a SKILL.md template with proper frontmatter and TODO placeholders
|
||||
- Creates example resource directories: `scripts/`, `references/`, and `assets/`
|
||||
- Adds example files in each directory that can be customized or deleted
|
||||
## Main Workflow
|
||||
|
||||
After initialization, customize or remove the generated SKILL.md and example files as needed.
|
||||
### Progress Tracking Guidelines
|
||||
|
||||
### Step 4: Edit the Skill
|
||||
Throughout the workflow, display a visual progress bar before starting each phase to keep the user informed. The progress bar format is:
|
||||
|
||||
When editing the (newly-generated or existing) skill, remember that the skill is being created for another instance of Claude to use. Include information that would be beneficial and non-obvious to Claude. Consider what procedural knowledge, domain-specific details, or reusable assets would help another Claude instance execute these tasks more effectively.
|
||||
```
|
||||
[████████████░░░░░░] 60% - Step 3/5: Creating SKILL.md
|
||||
```
|
||||
|
||||
#### Learn Proven Design Patterns
|
||||
**Format specifications:**
|
||||
- 20 characters wide (use █ for filled, ░ for empty)
|
||||
- Percentage based on current step (Step 1=20%, Step 2=40%, Step 3=60%, Step 4=80%, Step 5=100%)
|
||||
- Step counter showing current/total (e.g., "Step 3/5")
|
||||
- Brief description of current phase
|
||||
|
||||
Consult these helpful guides based on your skill's needs:
|
||||
**Display the progress bar using:**
|
||||
```bash
|
||||
echo "[████░░░░░░░░░░░░░░] 20% - Step 1/5: Brainstorming & Planning"
|
||||
```
|
||||
|
||||
- **Multi-step processes**: See references/workflows.md for sequential workflows and conditional logic
|
||||
- **Specific output formats or quality standards**: See references/output-patterns.md for template and example patterns
|
||||
### Phase 1: Brainstorming & Planning
|
||||
|
||||
These files contain established best practices for effective skill design.
|
||||
**Progress:** Display before starting this phase:
|
||||
```bash
|
||||
echo "[████░░░░░░░░░░░░░░] 20% - Step 1/5: Brainstorming & Planning"
|
||||
```
|
||||
|
||||
#### Start with Reusable Skill Contents
|
||||
Display progress:
|
||||
```
|
||||
╔══════════════════════════════════════════════════════════════╗
|
||||
║ 🛠️ SKILL CREATOR - Creating New Skill ║
|
||||
╠══════════════════════════════════════════════════════════════╣
|
||||
║ → Phase 1: Brainstorming [10%] ║
|
||||
║ ○ Phase 2: Prompt Refinement ║
|
||||
║ ○ Phase 3: File Generation ║
|
||||
║ ○ Phase 4: Validation ║
|
||||
║ ○ Phase 5: Installation ║
|
||||
╠══════════════════════════════════════════════════════════════╣
|
||||
║ Progress: ███░░░░░░░░░░░░░░░░░░░░░░░░░░░ 10% ║
|
||||
╚══════════════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
To begin implementation, start with the reusable resources identified above: `scripts/`, `references/`, and `assets/` files. Note that this step may require user input. For example, when implementing a `brand-guidelines` skill, the user may need to provide brand assets or templates to store in `assets/`, or documentation to store in `references/`.
|
||||
**Ask the user:**
|
||||
|
||||
Added scripts must be tested by actually running them to ensure there are no bugs and that the output matches what is expected. If there are many similar scripts, only a representative sample needs to be tested to ensure confidence that they all work while balancing time to completion.
|
||||
1. **What should this skill do?** (Free-form description)
|
||||
- Example: "Help users debug Python code by analyzing stack traces"
|
||||
|
||||
2. **When should it trigger?** (Provide 3-5 trigger phrases)
|
||||
- Example: "debug Python error", "analyze stack trace", "fix Python exception"
|
||||
|
||||
Any example files and directories not needed for the skill should be deleted. The initialization script creates example files in `scripts/`, `references/`, and `assets/` to demonstrate structure, but most skills won't need all of them.
|
||||
3. **What type of skill is this?**
|
||||
- [ ] General purpose (default template)
|
||||
- [ ] Code generation/modification
|
||||
- [ ] Documentation creation/maintenance
|
||||
- [ ] Analysis/investigation
|
||||
|
||||
#### Update SKILL.md
|
||||
4. **Which platforms should support this skill?**
|
||||
- [ ] GitHub Copilot CLI
|
||||
- [ ] Claude Code
|
||||
- [ ] Codex
|
||||
- [ ] All three (recommended)
|
||||
|
||||
**Writing Guidelines:** Always use imperative/infinitive form.
|
||||
5. **Provide a one-sentence description** (will appear in metadata)
|
||||
- Example: "Analyzes Python stack traces and suggests fixes"
|
||||
|
||||
##### Frontmatter
|
||||
**Capture responses and prepare for next phase.**
|
||||
|
||||
Write the YAML frontmatter with `name` and `description`:
|
||||
### Phase 2: Prompt Enhancement (Optional)
|
||||
|
||||
- `name`: The skill name
|
||||
- `description`: This is the primary triggering mechanism for your skill, and helps Claude understand when to use the skill.
|
||||
- Include both what the Skill does and specific triggers/contexts for when to use it.
|
||||
- Include all "when to use" information here - Not in the body. The body is only loaded after triggering, so "When to Use This Skill" sections in the body are not helpful to Claude.
|
||||
- Example description for a `docx` skill: "Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. Use when Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks"
|
||||
**Progress:** Display before starting this phase:
|
||||
```bash
|
||||
echo "[████████░░░░░░░░░░] 40% - Step 2/5: Prompt Enhancement"
|
||||
```
|
||||
|
||||
Do not include any other fields in YAML frontmatter.
|
||||
Update progress:
|
||||
```
|
||||
╔══════════════════════════════════════════════════════════════╗
|
||||
║ ✓ Phase 1: Brainstorming ║
|
||||
║ → Phase 2: Prompt Refinement [30%] ║
|
||||
╠══════════════════════════════════════════════════════════════╣
|
||||
║ Progress: █████████░░░░░░░░░░░░░░░░░░░░░ 30% ║
|
||||
╚══════════════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
##### Body
|
||||
**Ask the user:**
|
||||
"Would you like to refine the skill description using the prompt-engineer skill?"
|
||||
- [ ] Yes - Use prompt-engineer to enhance clarity and structure
|
||||
- [ ] No - Proceed with current description
|
||||
|
||||
Write instructions for using the skill and its bundled resources.
|
||||
If **Yes**:
|
||||
1. Check if prompt-engineer skill is available
|
||||
2. Invoke with current description as input
|
||||
3. Review enhanced output with user
|
||||
4. Ask: "Accept enhanced version or keep original?"
|
||||
|
||||
### Step 5: Packaging a Skill
|
||||
If **No** or prompt-engineer unavailable:
|
||||
- Proceed with original user input
|
||||
|
||||
Once development of the skill is complete, it must be packaged into a distributable .skill file that gets shared with the user. The packaging process automatically validates the skill first to ensure it meets all requirements:
|
||||
### Phase 3: File Generation
|
||||
|
||||
**Progress:** Display before starting this phase:
|
||||
```bash
|
||||
echo "[████████████░░░░░░] 60% - Step 3/5: File Generation"
|
||||
```
|
||||
|
||||
Update progress:
|
||||
```
|
||||
╔══════════════════════════════════════════════════════════════╗
|
||||
║ ✓ Phase 1: Brainstorming ║
|
||||
║ ✓ Phase 2: Prompt Refinement ║
|
||||
║ → Phase 3: File Generation [50%] ║
|
||||
╠══════════════════════════════════════════════════════════════╣
|
||||
║ Progress: ███████████████░░░░░░░░░░░░░░░ 50% ║
|
||||
╚══════════════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
**Generate skill structure:**
|
||||
|
||||
```bash
|
||||
scripts/package_skill.py <path/to/skill-folder>
|
||||
# Convert skill name to kebab-case
|
||||
SKILL_NAME=$(echo "$USER_INPUT" | tr '[:upper:]' '[:lower:]' | tr ' ' '-')
|
||||
|
||||
# Create directories
|
||||
if [[ "$PLATFORM" =~ "copilot" ]]; then
|
||||
mkdir -p ".github/skills/$SKILL_NAME"/{references,examples,scripts}
|
||||
fi
|
||||
|
||||
if [[ "$PLATFORM" =~ "claude" ]]; then
|
||||
mkdir -p ".claude/skills/$SKILL_NAME"/{references,examples,scripts}
|
||||
fi
|
||||
|
||||
if [[ "$PLATFORM" =~ "codex" ]]; then
|
||||
mkdir -p ".codex/skills/$SKILL_NAME"/{references,examples,scripts}
|
||||
fi
|
||||
```
|
||||
|
||||
Optional output directory specification:
|
||||
**Apply templates:**
|
||||
|
||||
1. **SKILL.md** - Use appropriate template:
|
||||
- `skill-template-copilot.md`, `skill-template-claude.md`, or `skill-template-codex.md`
|
||||
- Substitute placeholders:
|
||||
- `{{SKILL_NAME}}` → kebab-case name
|
||||
- `{{DESCRIPTION}}` → one-line description
|
||||
- `{{TRIGGERS}}` → comma-separated trigger phrases
|
||||
- `{{PURPOSE}}` → detailed purpose from brainstorming
|
||||
- `{{AUTHOR}}` → from git config
|
||||
- `{{DATE}}` → current date (YYYY-MM-DD)
|
||||
- `{{VERSION}}` → "1.0.0"
|
||||
|
||||
2. **README.md** - Use `readme-template.md`:
|
||||
- User-facing documentation (300-500 words)
|
||||
- Include installation instructions
|
||||
- Add usage examples
|
||||
|
||||
3. **References/** (optional but recommended):
|
||||
- Create `detailed-guide.md` for extended documentation (2k-5k words)
|
||||
- Move lengthy content here to keep SKILL.md under 2k words
|
||||
|
||||
**File creation commands:**
|
||||
|
||||
```bash
|
||||
scripts/package_skill.py <path/to/skill-folder> ./dist
|
||||
# Apply template with substitution
|
||||
sed "s/{{SKILL_NAME}}/$SKILL_NAME/g; \
|
||||
s/{{DESCRIPTION}}/$DESCRIPTION/g; \
|
||||
s/{{AUTHOR}}/$AUTHOR/g; \
|
||||
s/{{DATE}}/$(date +%Y-%m-%d)/g" \
|
||||
resources/templates/skill-template-copilot.md \
|
||||
> ".github/skills/$SKILL_NAME/SKILL.md"
|
||||
|
||||
# Create README
|
||||
sed "s/{{SKILL_NAME}}/$SKILL_NAME/g" \
|
||||
resources/templates/readme-template.md \
|
||||
> ".github/skills/$SKILL_NAME/README.md"
|
||||
|
||||
# Apply template for Codex if selected
|
||||
if [[ "$PLATFORM" =~ "codex" ]]; then
|
||||
sed "s/{{SKILL_NAME}}/$SKILL_NAME/g; \
|
||||
s/{{DESCRIPTION}}/$DESCRIPTION/g; \
|
||||
s/{{AUTHOR}}/$AUTHOR/g; \
|
||||
s/{{DATE}}/$(date +%Y-%m-%d)/g" \
|
||||
resources/templates/skill-template-codex.md \
|
||||
> ".codex/skills/$SKILL_NAME/SKILL.md"
|
||||
|
||||
sed "s/{{SKILL_NAME}}/$SKILL_NAME/g" \
|
||||
resources/templates/readme-template.md \
|
||||
> ".codex/skills/$SKILL_NAME/README.md"
|
||||
fi
|
||||
```
|
||||
|
||||
The packaging script will:
|
||||
**Display created structure:**
|
||||
```
|
||||
✅ Created:
|
||||
.github/skills/your-skill-name/ (if Copilot selected)
|
||||
.claude/skills/your-skill-name/ (if Claude selected)
|
||||
.codex/skills/your-skill-name/ (if Codex selected)
|
||||
├── SKILL.md (832 lines)
|
||||
├── README.md (347 lines)
|
||||
├── references/
|
||||
├── examples/
|
||||
└── scripts/
|
||||
```
|
||||
|
||||
1. **Validate** the skill automatically, checking:
|
||||
### Phase 4: Validation
|
||||
|
||||
- YAML frontmatter format and required fields
|
||||
- Skill naming conventions and directory structure
|
||||
- Description completeness and quality
|
||||
- File organization and resource references
|
||||
**Progress:** Display before starting this phase:
|
||||
```bash
|
||||
echo "[████████████████░░] 80% - Step 4/5: Validation"
|
||||
```
|
||||
|
||||
2. **Package** the skill if validation passes, creating a .skill file named after the skill (e.g., `my-skill.skill`) that includes all files and maintains the proper directory structure for distribution. The .skill file is a zip file with a .skill extension.
|
||||
Update progress:
|
||||
```
|
||||
╔══════════════════════════════════════════════════════════════╗
|
||||
║ ✓ Phase 3: File Generation ║
|
||||
║ → Phase 4: Validation [70%] ║
|
||||
╠══════════════════════════════════════════════════════════════╣
|
||||
║ Progress: █████████████████████░░░░░░░░░ 70% ║
|
||||
╚══════════════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
If validation fails, the script will report the errors and exit without creating a package. Fix any validation errors and run the packaging command again.
|
||||
**Run validation scripts:**
|
||||
|
||||
### Step 6: Iterate
|
||||
```bash
|
||||
# Validate YAML frontmatter
|
||||
scripts/validate-skill-yaml.sh ".github/skills/$SKILL_NAME"
|
||||
|
||||
After testing the skill, users may request improvements. Often this happens right after using the skill, with fresh context of how the skill performed.
|
||||
# Validate content quality
|
||||
scripts/validate-skill-content.sh ".github/skills/$SKILL_NAME"
|
||||
```
|
||||
|
||||
**Iteration workflow:**
|
||||
**Expected output:**
|
||||
```
|
||||
🔍 Validating YAML frontmatter...
|
||||
✅ YAML frontmatter valid!
|
||||
|
||||
1. Use the skill on real tasks
|
||||
2. Notice struggles or inefficiencies
|
||||
3. Identify how SKILL.md or bundled resources should be updated
|
||||
4. Implement changes and test again
|
||||
🔍 Validating content...
|
||||
✅ Word count excellent: 1847 words
|
||||
✅ Content validation complete!
|
||||
```
|
||||
|
||||
**If validation fails:**
|
||||
- Display specific errors
|
||||
- Offer to fix automatically (common issues)
|
||||
- Ask user to manually correct complex issues
|
||||
|
||||
**Common auto-fixes:**
|
||||
- Convert second-person to imperative form
|
||||
- Reformat description to third-person
|
||||
- Add missing required fields
|
||||
|
||||
### Phase 5: Installation
|
||||
|
||||
**Progress:** Display before starting this phase:
|
||||
```bash
|
||||
echo "[████████████████████] 100% - Step 5/5: Installation"
|
||||
```
|
||||
|
||||
Update progress:
|
||||
```
|
||||
╔══════════════════════════════════════════════════════════════╗
|
||||
║ ✓ Phase 4: Validation ║
|
||||
║ → Phase 5: Installation [90%] ║
|
||||
╠══════════════════════════════════════════════════════════════╣
|
||||
║ Progress: ██████████████████████████░░░░░ 90% ║
|
||||
╚══════════════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
**Ask the user:**
|
||||
"How would you like to install this skill?"
|
||||
|
||||
- [ ] **Repository only** - Files created in `.github/skills/` (works when in repo)
|
||||
- [ ] **Global installation** - Create symlinks in `~/.copilot/skills/` (works everywhere)
|
||||
- [ ] **Both** - Repository + global symlinks (recommended, auto-updates with git pull)
|
||||
- [ ] **Skip installation** - Just create files
|
||||
|
||||
**If global installation selected:**
|
||||
|
||||
```bash
|
||||
# Detect which platforms to install for
|
||||
INSTALL_TARGETS=()
|
||||
|
||||
if [[ "$COPILOT_INSTALLED" == "true" ]] && [[ "$PLATFORM" =~ "copilot" ]]; then
|
||||
INSTALL_TARGETS+=("copilot")
|
||||
fi
|
||||
|
||||
if [[ "$CLAUDE_INSTALLED" == "true" ]] && [[ "$PLATFORM" =~ "claude" ]]; then
|
||||
INSTALL_TARGETS+=("claude")
|
||||
fi
|
||||
|
||||
if [[ "$CODEX_INSTALLED" == "true" ]] && [[ "$PLATFORM" =~ "codex" ]]; then
|
||||
INSTALL_TARGETS+=("codex")
|
||||
fi
|
||||
|
||||
# Ask user to confirm detected platforms
|
||||
echo "Detected platforms: ${INSTALL_TARGETS[*]}"
|
||||
echo "Install for these platforms? [Y/n]"
|
||||
```
|
||||
|
||||
**Installation process:**
|
||||
|
||||
```bash
|
||||
# GitHub Copilot CLI
|
||||
if [[ " ${INSTALL_TARGETS[*]} " =~ " copilot " ]]; then
|
||||
ln -sf "$SKILLS_REPO/.github/skills/$SKILL_NAME" \
|
||||
"$HOME/.copilot/skills/$SKILL_NAME"
|
||||
echo "✅ Installed for GitHub Copilot CLI"
|
||||
fi
|
||||
|
||||
# Claude Code
|
||||
if [[ " ${INSTALL_TARGETS[*]} " =~ " claude " ]]; then
|
||||
ln -sf "$SKILLS_REPO/.claude/skills/$SKILL_NAME" \
|
||||
"$HOME/.claude/skills/$SKILL_NAME"
|
||||
echo "✅ Installed for Claude Code"
|
||||
fi
|
||||
|
||||
# Codex
|
||||
if [[ " ${INSTALL_TARGETS[*]} " =~ " codex " ]]; then
|
||||
ln -sf "$SKILLS_REPO/.codex/skills/$SKILL_NAME" \
|
||||
"$HOME/.codex/skills/$SKILL_NAME"
|
||||
echo "✅ Installed for Codex"
|
||||
fi
|
||||
```
|
||||
|
||||
**Verify installation:**
|
||||
|
||||
```bash
|
||||
# Check symlinks
|
||||
ls -la ~/.copilot/skills/$SKILL_NAME 2>/dev/null
|
||||
ls -la ~/.claude/skills/$SKILL_NAME 2>/dev/null
|
||||
ls -la ~/.codex/skills/$SKILL_NAME 2>/dev/null
|
||||
```
|
||||
|
||||
### Phase 6: Completion
|
||||
|
||||
**Progress:** Display completion message:
|
||||
```bash
|
||||
echo "[████████████████████] 100% - ✓ Skill created successfully!"
|
||||
```
|
||||
|
||||
Update progress:
|
||||
```
|
||||
╔══════════════════════════════════════════════════════════════╗
|
||||
║ ✓ Phase 5: Installation ║
|
||||
║ ✅ SKILL CREATION COMPLETE! ║
|
||||
╠══════════════════════════════════════════════════════════════╣
|
||||
║ Progress: ██████████████████████████████ 100% ║
|
||||
╚══════════════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
**Display summary:**
|
||||
|
||||
```
|
||||
🎉 Skill created successfully!
|
||||
|
||||
📦 Skill Name: your-skill-name
|
||||
📁 Location: .github/skills/your-skill-name/
|
||||
🔗 Installed: Global (Copilot + Claude)
|
||||
|
||||
📋 Files Created:
|
||||
✅ SKILL.md (1,847 words)
|
||||
✅ README.md (423 words)
|
||||
✅ references/ (empty, ready for extended docs)
|
||||
✅ examples/ (empty, ready for code samples)
|
||||
✅ scripts/ (empty, ready for utilities)
|
||||
|
||||
🚀 Next Steps:
|
||||
1. Test the skill: Try trigger phrases in CLI
|
||||
2. Add examples: Create working code samples in examples/
|
||||
3. Extend docs: Add detailed guides to references/
|
||||
4. Commit changes: git add .github/skills/your-skill-name && git commit
|
||||
5. Share: Push to repository for team use
|
||||
|
||||
💡 Pro Tips:
|
||||
- Keep SKILL.md under 2,000 words (currently: 1,847)
|
||||
- Move detailed content to references/ folder
|
||||
- Add executable scripts to scripts/ folder
|
||||
- Update README.md with real usage examples
|
||||
- Run validation before committing: scripts/validate-skill-yaml.sh
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Platform Detection Issues
|
||||
|
||||
If platforms cannot be detected:
|
||||
```
|
||||
⚠️ Unable to detect GitHub Copilot CLI or Claude Code
|
||||
|
||||
Would you like to:
|
||||
1. Install for repository only (works when in repo)
|
||||
2. Specify platform manually
|
||||
3. Skip installation
|
||||
```
|
||||
|
||||
### Template Not Found
|
||||
|
||||
If templates are missing:
|
||||
```
|
||||
❌ Error: Template not found at resources/templates/
|
||||
|
||||
This skill requires the cli-ai-skills repository structure.
|
||||
|
||||
Options:
|
||||
1. Clone cli-ai-skills: git clone <repo-url>
|
||||
2. Create minimal skill structure manually
|
||||
3. Exit and set up templates first
|
||||
```
|
||||
|
||||
### Validation Failures
|
||||
|
||||
If content doesn't meet standards:
|
||||
```
|
||||
⚠️ Validation Issues Found:
|
||||
|
||||
1. YAML: Description not in third-person format
|
||||
Expected: "This skill should be used when..."
|
||||
Found: "Use this skill when..."
|
||||
|
||||
2. Content: Word count too high (5,342 words, max 5,000)
|
||||
Suggestion: Move detailed sections to references/
|
||||
|
||||
Fix automatically? [Y/n]
|
||||
```
|
||||
|
||||
### Installation Conflicts
|
||||
|
||||
If symlink already exists:
|
||||
```
|
||||
⚠️ Skill already installed at ~/.copilot/skills/your-skill-name
|
||||
|
||||
Options:
|
||||
1. Overwrite existing installation
|
||||
2. Rename new skill
|
||||
3. Skip installation
|
||||
4. Install to different location
|
||||
```
|
||||
|
||||
## Bundled Resources
|
||||
|
||||
This skill includes additional resources in subdirectories:
|
||||
|
||||
### references/
|
||||
|
||||
Detailed documentation loaded when needed:
|
||||
- `anthropic-best-practices.md` - Official Anthropic skill development guidelines
|
||||
- `writing-style-guide.md` - Writing standards and examples
|
||||
- `progressive-disclosure.md` - Content organization patterns
|
||||
- `validation-checklist.md` - Pre-commit quality checks
|
||||
|
||||
### examples/
|
||||
|
||||
Working examples demonstrating skill usage:
|
||||
- `basic-skill-creation.md` - Simple skill creation walkthrough
|
||||
- `advanced-skill-bundled-resources.md` - Complex skill with references/
|
||||
- `global-installation.md` - Installing skills system-wide
|
||||
|
||||
### scripts/
|
||||
|
||||
Executable utilities for skill maintenance:
|
||||
- `validate-all-skills.sh` - Batch validation of all skills in repository
|
||||
- `update-skill-version.sh` - Bump version and update changelog
|
||||
- `generate-skill-index.sh` - Auto-generate skills catalog
|
||||
|
||||
## Technical Implementation Notes
|
||||
|
||||
**Template Substitution:**
|
||||
- Use `sed` for simple replacements
|
||||
- Preserve YAML formatting exactly
|
||||
- Handle multi-line descriptions with proper escaping
|
||||
|
||||
**Symlink Strategy:**
|
||||
- Always use absolute paths: `ln -sf /full/path/to/source ~/.copilot/skills/name`
|
||||
- Verify symlink before considering installation complete
|
||||
- Benefits: Auto-updates when repository is pulled
|
||||
|
||||
**Validation Integration:**
|
||||
- Run validation before installation
|
||||
- Block installation if critical errors found
|
||||
- Warnings are informational only
|
||||
|
||||
**Git Integration:**
|
||||
- Extract author from `git config user.name`
|
||||
- Use repository root detection: `git rev-parse --show-toplevel`
|
||||
- Respect `.gitignore` patterns
|
||||
|
||||
## Quality Standards
|
||||
|
||||
**SKILL.md Requirements:**
|
||||
- 1,500-2,000 words (ideal)
|
||||
- Under 5,000 words (maximum)
|
||||
- Third-person description format
|
||||
- Imperative/infinitive writing style
|
||||
- Progressive disclosure pattern
|
||||
|
||||
**README.md Requirements:**
|
||||
- 300-500 words
|
||||
- User-facing language
|
||||
- Clear installation instructions
|
||||
- Practical usage examples
|
||||
|
||||
**Validation Checks:**
|
||||
- YAML frontmatter completeness
|
||||
- Description format (third-person)
|
||||
- Word count limits
|
||||
- Writing style (no second-person)
|
||||
- Required fields present
|
||||
|
||||
## References
|
||||
|
||||
- **Anthropic Official Skill Development Guide:** https://github.com/anthropics/claude-plugins-official/blob/main/plugins/plugin-dev/skills/skill-development/SKILL.md
|
||||
- **Repository:** https://github.com/yourusername/cli-ai-skills
|
||||
- **Writing Style Guide:** `resources/templates/writing-style-guide.md`
|
||||
- **Progress Tracker Template:** `resources/templates/progress-tracker.md`
|
||||
|
||||
165
skills/stitch-ui-design/README.md
Normal file
165
skills/stitch-ui-design/README.md
Normal file
@@ -0,0 +1,165 @@
|
||||
# Stitch UI Design Skill
|
||||
|
||||
Expert guidance for creating effective prompts in Google Stitch, the AI-powered UI design tool.
|
||||
|
||||
## Overview
|
||||
|
||||
This skill provides comprehensive guidance for crafting precise, actionable prompts that generate high-quality UI designs in Google Stitch. It covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows.
|
||||
|
||||
## What's Included
|
||||
|
||||
### SKILL.md
|
||||
Core prompting principles and techniques:
|
||||
- Specificity and detail requirements
|
||||
- Visual style definition
|
||||
- Multi-screen flow structuring
|
||||
- Platform and responsive specifications
|
||||
- Functional requirements
|
||||
- Prompt templates
|
||||
- Iteration strategies
|
||||
- Common use cases
|
||||
- Anti-patterns to avoid
|
||||
|
||||
### References
|
||||
|
||||
#### prompt-examples.md
|
||||
Comprehensive library of effective Stitch prompts organized by category:
|
||||
- Landing pages
|
||||
- Mobile apps
|
||||
- Dashboards
|
||||
- E-commerce
|
||||
- Forms & authentication
|
||||
- Content platforms
|
||||
- SaaS applications
|
||||
|
||||
Each example includes detailed component breakdowns, style specifications, and platform requirements.
|
||||
|
||||
#### advanced-techniques.md
|
||||
Advanced strategies for production-ready designs:
|
||||
- Image-to-UI workflows
|
||||
- Design system integration
|
||||
- Responsive design strategies
|
||||
- Accessibility considerations
|
||||
- Performance optimization
|
||||
- Component reusability
|
||||
- Atomic design methodology
|
||||
- Export and handoff best practices
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
- Creating UI designs in Google Stitch
|
||||
- Generating mobile or web app interfaces
|
||||
- Crafting effective Stitch prompts
|
||||
- Converting sketches or wireframes to digital UI
|
||||
- Building design systems
|
||||
- Creating responsive layouts
|
||||
- Ensuring accessibility compliance
|
||||
- Optimizing design-to-code workflows
|
||||
|
||||
## Key Principles
|
||||
|
||||
1. **Be Specific** - Generic prompts yield generic results
|
||||
2. **Define Visual Style** - Always include colors, aesthetics, and design direction
|
||||
3. **Structure Clearly** - List components and sections explicitly
|
||||
4. **Specify Platform** - Indicate mobile, tablet, desktop, or responsive
|
||||
5. **Include Functionality** - Describe interactions, states, and user flows
|
||||
6. **Iterate Incrementally** - Make focused changes rather than complete redesigns
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Basic Prompt Template
|
||||
|
||||
```
|
||||
[Screen/Component Type] for [User/Context]
|
||||
|
||||
Key Features:
|
||||
- [Feature 1 with specific details]
|
||||
- [Feature 2 with specific details]
|
||||
- [Feature 3 with specific details]
|
||||
|
||||
Visual Style:
|
||||
- [Color scheme]
|
||||
- [Design aesthetic]
|
||||
- [Layout approach]
|
||||
|
||||
Platform: [Mobile/Web/Responsive]
|
||||
```
|
||||
|
||||
### Example Usage
|
||||
|
||||
```
|
||||
Dashboard for SaaS analytics platform
|
||||
|
||||
Key Features:
|
||||
- Top metrics cards showing MRR, active users, churn rate
|
||||
- Line chart for revenue trends (last 30 days)
|
||||
- Recent activity feed with user actions
|
||||
- Quick action buttons for reports and exports
|
||||
|
||||
Visual Style:
|
||||
- Dark mode with blue/purple gradient accents
|
||||
- Modern glassmorphic cards with subtle shadows
|
||||
- Clean data visualization with accessible colors
|
||||
|
||||
Platform: Responsive web (desktop-first)
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Do's ✅
|
||||
- Provide specific component details
|
||||
- Define clear visual direction
|
||||
- Specify responsive behavior
|
||||
- Include interaction states
|
||||
- Use design terminology
|
||||
- Reference existing designs when helpful
|
||||
- Iterate with annotations
|
||||
- Consider accessibility from the start
|
||||
|
||||
### Don'ts ❌
|
||||
- Use vague descriptions ("nice website")
|
||||
- Omit visual style guidance
|
||||
- Forget platform specifications
|
||||
- Ignore responsive requirements
|
||||
- Skip accessibility considerations
|
||||
- Make complete redesigns instead of incremental changes
|
||||
|
||||
## Integration with Development
|
||||
|
||||
### Stitch → Figma → Code
|
||||
1. Generate UI in Stitch with detailed prompts
|
||||
2. Export to Figma for design system integration
|
||||
3. Hand off to developers with design specs
|
||||
4. Implement with production-ready code
|
||||
|
||||
### Stitch → HTML → Framework
|
||||
1. Generate and refine UI in Stitch
|
||||
2. Export HTML/CSS code
|
||||
3. Convert to React/Vue/Svelte components
|
||||
4. Integrate into application codebase
|
||||
|
||||
## Resources
|
||||
|
||||
- **SKILL.md** - Core prompting guide
|
||||
- **prompt-examples.md** - 30+ detailed prompt examples
|
||||
- **advanced-techniques.md** - Production-ready design strategies
|
||||
|
||||
## Tips for Success
|
||||
|
||||
1. Start with clear requirements and context
|
||||
2. Use the prompt template for consistency
|
||||
3. Reference examples for similar use cases
|
||||
4. Iterate incrementally with annotations
|
||||
5. Generate variants to explore options
|
||||
6. Always specify visual style and platform
|
||||
7. Consider accessibility in every prompt
|
||||
8. Refine exports before production use
|
||||
|
||||
## About Google Stitch
|
||||
|
||||
Google Stitch is an experimental AI UI generator powered by Gemini 2.5 Flash that transforms text prompts and visual references into functional UI designs. It supports text-to-UI generation, image-to-UI conversion, multi-screen flows, and exports to HTML/CSS, Figma, and code.
|
||||
|
||||
---
|
||||
|
||||
**Note:** This skill is designed to help you create effective prompts for Stitch. The quality of your output depends on the specificity and clarity of your prompts. Use the templates and examples as starting points, then customize for your unique requirements.
|
||||
378
skills/stitch-ui-design/SKILL.md
Normal file
378
skills/stitch-ui-design/SKILL.md
Normal file
@@ -0,0 +1,378 @@
|
||||
---
|
||||
name: stitch-ui-design
|
||||
description: Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows for Stitch by Google.
|
||||
risk: safe
|
||||
source: "self"
|
||||
---
|
||||
|
||||
# Stitch UI Design Prompting
|
||||
|
||||
Expert guidance for crafting effective prompts in Google Stitch, the AI-powered UI design tool by Google Labs. This skill helps create precise, actionable prompts that generate high-quality UI designs for web and mobile applications.
|
||||
|
||||
## What is Google Stitch?
|
||||
|
||||
Google Stitch is an experimental AI UI generator powered by Gemini 2.5 Flash that transforms text prompts and visual references into functional UI designs. It supports:
|
||||
|
||||
- Text-to-UI generation from natural language prompts
|
||||
- Image-to-UI conversion from sketches, wireframes, or screenshots
|
||||
- Multi-screen app flows and responsive layouts
|
||||
- Export to HTML/CSS, Figma, and code
|
||||
- Iterative refinement with variants and annotations
|
||||
|
||||
## Core Prompting Principles
|
||||
|
||||
### 1. Be Specific and Detailed
|
||||
|
||||
Generic prompts yield generic results. Specific prompts with clear requirements produce tailored, professional designs.
|
||||
|
||||
**Poor prompt:**
|
||||
```
|
||||
Create a dashboard
|
||||
```
|
||||
|
||||
**Effective prompt:**
|
||||
```
|
||||
Member dashboard with course modules grid, progress tracking bar,
|
||||
and community feed sidebar using purple theme and card-based layout
|
||||
```
|
||||
|
||||
**Why it works:** Specifies components (modules, progress, feed), layout structure (grid, sidebar), visual style (purple theme, cards), and context (member dashboard).
|
||||
|
||||
### 2. Define Visual Style and Theme
|
||||
|
||||
Always include color schemes, design aesthetics, and visual direction to avoid generic AI outputs.
|
||||
|
||||
**Components to specify:**
|
||||
- Color palette (primary colors, accent colors)
|
||||
- Design style (minimalist, modern, playful, professional, glassmorphic)
|
||||
- Typography preferences (if any)
|
||||
- Spacing and density (compact, spacious, balanced)
|
||||
|
||||
**Example:**
|
||||
```
|
||||
E-commerce product page with hero image gallery, add-to-cart CTA,
|
||||
reviews section, and related products carousel. Use clean minimalist
|
||||
design with sage green accents and generous white space.
|
||||
```
|
||||
|
||||
### 3. Structure Multi-Screen Flows Clearly
|
||||
|
||||
For apps with multiple screens, list each screen as bullet points before generation.
|
||||
|
||||
**Approach:**
|
||||
```
|
||||
Fitness tracking app with:
|
||||
- Onboarding screen with goal selection
|
||||
- Home dashboard with daily stats and activity rings
|
||||
- Workout library with category filters
|
||||
- Profile screen with achievements and settings
|
||||
```
|
||||
|
||||
Stitch will ask for confirmation before generating multiple screens, ensuring alignment with your vision.
|
||||
|
||||
### 4. Specify Platform and Responsive Behavior
|
||||
|
||||
Indicate whether the design is for mobile, tablet, desktop, or responsive web.
|
||||
|
||||
**Examples:**
|
||||
```
|
||||
Mobile app login screen (iOS style) with email/password fields and social auth buttons
|
||||
|
||||
Responsive landing page that adapts from mobile (320px) to desktop (1440px)
|
||||
with collapsible navigation
|
||||
```
|
||||
|
||||
### 5. Include Functional Requirements
|
||||
|
||||
Describe interactive elements, states, and user flows to generate more complete designs.
|
||||
|
||||
**Elements to specify:**
|
||||
- Button actions and CTAs
|
||||
- Form fields and validation
|
||||
- Navigation patterns
|
||||
- Loading states
|
||||
- Empty states
|
||||
- Error handling
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Checkout flow with:
|
||||
- Cart summary with quantity adjusters
|
||||
- Shipping address form with validation
|
||||
- Payment method selection (cards, PayPal, Apple Pay)
|
||||
- Order confirmation with tracking number
|
||||
```
|
||||
|
||||
## Prompt Structure Template
|
||||
|
||||
Use this template for comprehensive prompts:
|
||||
|
||||
```
|
||||
[Screen/Component Type] for [User/Context]
|
||||
|
||||
Key Features:
|
||||
- [Feature 1 with specific details]
|
||||
- [Feature 2 with specific details]
|
||||
- [Feature 3 with specific details]
|
||||
|
||||
Visual Style:
|
||||
- [Color scheme]
|
||||
- [Design aesthetic]
|
||||
- [Layout approach]
|
||||
|
||||
Platform: [Mobile/Web/Responsive]
|
||||
```
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Dashboard for SaaS analytics platform
|
||||
|
||||
Key Features:
|
||||
- Top metrics cards showing MRR, active users, churn rate
|
||||
- Line chart for revenue trends (last 30 days)
|
||||
- Recent activity feed with user actions
|
||||
- Quick action buttons for reports and exports
|
||||
|
||||
Visual Style:
|
||||
- Dark mode with blue/purple gradient accents
|
||||
- Modern glassmorphic cards with subtle shadows
|
||||
- Clean data visualization with accessible colors
|
||||
|
||||
Platform: Responsive web (desktop-first)
|
||||
```
|
||||
|
||||
## Iteration Strategies
|
||||
|
||||
### Refine with Annotations
|
||||
|
||||
Use Stitch's "annotate to edit" feature to make targeted changes without rewriting the entire prompt.
|
||||
|
||||
**Workflow:**
|
||||
1. Generate initial design from prompt
|
||||
2. Annotate specific elements that need changes
|
||||
3. Describe modifications in natural language
|
||||
4. Stitch updates only the annotated areas
|
||||
|
||||
**Example annotations:**
|
||||
- "Make this button larger and use primary color"
|
||||
- "Add more spacing between these cards"
|
||||
- "Change this to a horizontal layout"
|
||||
|
||||
### Generate Variants
|
||||
|
||||
Request multiple variations to explore different design directions:
|
||||
|
||||
```
|
||||
Generate 3 variants of this hero section:
|
||||
1. Image-focused with minimal text
|
||||
2. Text-heavy with supporting graphics
|
||||
3. Video background with overlay content
|
||||
```
|
||||
|
||||
### Progressive Refinement
|
||||
|
||||
Start broad, then add specificity in follow-up prompts:
|
||||
|
||||
**Initial:**
|
||||
```
|
||||
E-commerce homepage
|
||||
```
|
||||
|
||||
**Refinement 1:**
|
||||
```
|
||||
Add featured products section with 4-column grid and hover effects
|
||||
```
|
||||
|
||||
**Refinement 2:**
|
||||
```
|
||||
Update color scheme to earth tones (terracotta, sage, cream)
|
||||
and add promotional banner at top
|
||||
```
|
||||
|
||||
## Common Use Cases
|
||||
|
||||
### Landing Pages
|
||||
|
||||
```
|
||||
SaaS landing page for [product name]
|
||||
|
||||
Sections:
|
||||
- Hero with headline, subheadline, CTA, and product screenshot
|
||||
- Social proof with customer logos
|
||||
- Features grid (3 columns) with icons
|
||||
- Testimonials carousel
|
||||
- Pricing table (3 tiers)
|
||||
- FAQ accordion
|
||||
- Footer with links and newsletter signup
|
||||
|
||||
Style: Modern, professional, trust-building
|
||||
Colors: Navy blue primary, light blue accents, white background
|
||||
```
|
||||
|
||||
### Mobile Apps
|
||||
|
||||
```
|
||||
Food delivery app home screen
|
||||
|
||||
Components:
|
||||
- Search bar with location selector
|
||||
- Category chips (Pizza, Burgers, Sushi, etc.)
|
||||
- Restaurant cards with image, name, rating, delivery time, and price range
|
||||
- Bottom navigation (Home, Search, Orders, Profile)
|
||||
|
||||
Style: Vibrant, appetite-appealing, easy to scan
|
||||
Colors: Orange primary, white background, food photography
|
||||
Platform: iOS mobile (375px width)
|
||||
```
|
||||
|
||||
### Dashboards
|
||||
|
||||
```
|
||||
Admin dashboard for content management system
|
||||
|
||||
Layout:
|
||||
- Left sidebar navigation with collapsible menu
|
||||
- Top bar with search, notifications, and user profile
|
||||
- Main content area with:
|
||||
- Stats overview (4 metric cards)
|
||||
- Recent posts table with actions
|
||||
- Activity timeline
|
||||
- Quick actions panel
|
||||
|
||||
Style: Clean, data-focused, professional
|
||||
Colors: Neutral grays with blue accents
|
||||
Platform: Desktop web (1440px)
|
||||
```
|
||||
|
||||
### Forms and Inputs
|
||||
|
||||
```
|
||||
Multi-step signup form for B2B platform
|
||||
|
||||
Steps:
|
||||
1. Account details (company name, email, password)
|
||||
2. Company information (industry, size, role)
|
||||
3. Team setup (invite members)
|
||||
4. Confirmation with success message
|
||||
|
||||
Features:
|
||||
- Progress indicator at top
|
||||
- Field validation with inline errors
|
||||
- Back/Next navigation
|
||||
- Skip option for step 3
|
||||
|
||||
Style: Minimal, focused, low-friction
|
||||
Colors: White background, green for success states
|
||||
```
|
||||
|
||||
## Design-to-Code Workflow
|
||||
|
||||
### Export Options
|
||||
|
||||
Stitch provides multiple export formats:
|
||||
|
||||
1. **HTML/CSS** - Clean, semantic markup for web projects
|
||||
2. **Figma** - "Paste to Figma" for design system integration
|
||||
3. **Code snippets** - Component-level exports for frameworks
|
||||
|
||||
### Best Practices for Export
|
||||
|
||||
**Before exporting:**
|
||||
- Verify responsive breakpoints
|
||||
- Check color contrast for accessibility
|
||||
- Ensure interactive states are defined
|
||||
- Review component naming and structure
|
||||
|
||||
**After export:**
|
||||
- Refactor generated code for production standards
|
||||
- Add proper semantic HTML tags
|
||||
- Implement accessibility attributes (ARIA labels, alt text)
|
||||
- Optimize images and assets
|
||||
- Add animations and micro-interactions
|
||||
|
||||
## Anti-Patterns to Avoid
|
||||
|
||||
### ❌ Vague Prompts
|
||||
```
|
||||
Make a nice website
|
||||
```
|
||||
|
||||
### ✅ Specific Prompts
|
||||
```
|
||||
Portfolio website for photographer with full-screen image gallery,
|
||||
project case studies, and contact form. Minimalist black and white
|
||||
aesthetic with serif typography.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ❌ Missing Context
|
||||
```
|
||||
Create a login page
|
||||
```
|
||||
|
||||
### ✅ Context-Rich Prompts
|
||||
```
|
||||
Login page for healthcare portal with email/password fields,
|
||||
"Remember me" checkbox, "Forgot password" link, and SSO options
|
||||
(Google, Microsoft). Professional, trustworthy design with
|
||||
blue medical theme.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ❌ No Visual Direction
|
||||
```
|
||||
Design an app for task management
|
||||
```
|
||||
|
||||
### ✅ Clear Visual Direction
|
||||
```
|
||||
Task management app with kanban board layout, drag-and-drop cards,
|
||||
priority labels, and due date indicators. Modern, productivity-focused
|
||||
design with purple/teal gradient accents and dark mode support.
|
||||
```
|
||||
|
||||
## Tips for Better Results
|
||||
|
||||
1. **Reference existing designs** - Upload screenshots or sketches as visual references alongside text prompts
|
||||
|
||||
2. **Use design terminology** - Terms like "hero section," "card layout," "glassmorphic," "bento grid" help Stitch understand your intent
|
||||
|
||||
3. **Specify interactions** - Describe hover states, click actions, and transitions for more complete designs
|
||||
|
||||
4. **Think in components** - Break complex screens into reusable components (header, card, form, etc.)
|
||||
|
||||
5. **Iterate incrementally** - Make small, focused changes rather than complete redesigns
|
||||
|
||||
6. **Test responsiveness** - Always verify designs at multiple breakpoints (mobile, tablet, desktop)
|
||||
|
||||
7. **Consider accessibility** - Mention color contrast, font sizes, and touch target sizes in prompts
|
||||
|
||||
8. **Leverage variants** - Generate multiple options to explore different design directions quickly
|
||||
|
||||
## Integration with Development Workflow
|
||||
|
||||
### Stitch → Figma → Code
|
||||
1. Generate UI in Stitch with detailed prompts
|
||||
2. Export to Figma for design system integration
|
||||
3. Hand off to developers with design specs
|
||||
4. Implement with production-ready code
|
||||
|
||||
### Stitch → HTML → Framework
|
||||
1. Generate and refine UI in Stitch
|
||||
2. Export HTML/CSS code
|
||||
3. Convert to React/Vue/Svelte components
|
||||
4. Integrate into application codebase
|
||||
|
||||
### Rapid Prototyping
|
||||
1. Create multiple screen variations quickly
|
||||
2. Test with users or stakeholders
|
||||
3. Iterate based on feedback
|
||||
4. Finalize design for development
|
||||
|
||||
## Conclusion
|
||||
|
||||
Effective Stitch prompts are specific, context-rich, and visually descriptive. By following these principles and templates, you can generate professional UI designs that serve as strong foundations for production applications.
|
||||
|
||||
**Remember:** Stitch is a starting point, not a final product. Use it to accelerate the design process, explore ideas quickly, and establish visual direction—then refine with human judgment and production standards.
|
||||
541
skills/stitch-ui-design/references/advanced-techniques.md
Normal file
541
skills/stitch-ui-design/references/advanced-techniques.md
Normal file
@@ -0,0 +1,541 @@
|
||||
# Advanced Stitch Techniques
|
||||
|
||||
Advanced strategies for maximizing Stitch's capabilities and creating production-ready designs.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Image-to-UI Workflows](#image-to-ui-workflows)
|
||||
2. [Design System Integration](#design-system-integration)
|
||||
3. [Responsive Design Strategies](#responsive-design-strategies)
|
||||
4. [Accessibility Considerations](#accessibility-considerations)
|
||||
5. [Performance Optimization](#performance-optimization)
|
||||
6. [Component Reusability](#component-reusability)
|
||||
|
||||
---
|
||||
|
||||
## Image-to-UI Workflows
|
||||
|
||||
### Converting Sketches to Digital UI
|
||||
|
||||
Stitch can interpret hand-drawn sketches, wireframes, and rough mockups.
|
||||
|
||||
**Best practices:**
|
||||
|
||||
1. **Clear structure** - Draw distinct boxes for components
|
||||
2. **Label elements** - Annotate buttons, inputs, sections
|
||||
3. **Show hierarchy** - Use size and position to indicate importance
|
||||
4. **Include notes** - Add text describing interactions or states
|
||||
|
||||
**Example workflow:**
|
||||
```
|
||||
1. Sketch wireframe on paper or tablet
|
||||
2. Take clear photo or scan
|
||||
3. Upload to Stitch with prompt:
|
||||
"Convert this wireframe to a modern web interface with
|
||||
glassmorphic design and purple gradient accents"
|
||||
4. Refine generated design with annotations
|
||||
```
|
||||
|
||||
### Reference-Based Design
|
||||
|
||||
Upload screenshots of existing designs to create similar layouts with your own branding.
|
||||
|
||||
**Prompt structure:**
|
||||
```
|
||||
Create a [type] similar to this reference image, but with:
|
||||
- [Your color scheme]
|
||||
- [Your content/copy]
|
||||
- [Your brand style]
|
||||
- [Specific modifications]
|
||||
```
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Create a pricing page similar to this reference, but with:
|
||||
- Navy blue and gold color scheme
|
||||
- 4 pricing tiers instead of 3
|
||||
- Annual/monthly toggle
|
||||
- Feature comparison table below
|
||||
- Testimonials section at bottom
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Design System Integration
|
||||
|
||||
### Establishing Design Tokens
|
||||
|
||||
Define reusable design tokens in your initial prompt for consistency across screens.
|
||||
|
||||
**Token categories:**
|
||||
- Colors (primary, secondary, accent, neutral, semantic)
|
||||
- Typography (font families, sizes, weights, line heights)
|
||||
- Spacing (scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px)
|
||||
- Border radius (none, sm, md, lg, full)
|
||||
- Shadows (elevation levels)
|
||||
|
||||
**Example prompt:**
|
||||
```
|
||||
Dashboard using this design system:
|
||||
|
||||
Colors:
|
||||
- Primary: #2563EB (blue)
|
||||
- Secondary: #7C3AED (purple)
|
||||
- Success: #10B981 (green)
|
||||
- Warning: #F59E0B (amber)
|
||||
- Error: #EF4444 (red)
|
||||
- Neutral: #6B7280 (gray)
|
||||
|
||||
Typography:
|
||||
- Headings: Inter Bold
|
||||
- Body: Inter Regular
|
||||
- Code: JetBrains Mono
|
||||
|
||||
Spacing: 8px base unit
|
||||
Border radius: 8px for cards, 4px for buttons
|
||||
Shadows: Subtle elevation with 0 4px 6px rgba(0,0,0,0.1)
|
||||
```
|
||||
|
||||
### Component Library Approach
|
||||
|
||||
Create a component library by generating individual components first, then composing them into full screens.
|
||||
|
||||
**Workflow:**
|
||||
```
|
||||
1. Generate base components:
|
||||
- Button variants (primary, secondary, outline, ghost)
|
||||
- Input fields (text, email, password, search)
|
||||
- Cards (basic, with image, with actions)
|
||||
- Navigation (header, sidebar, tabs)
|
||||
|
||||
2. Document component specs:
|
||||
- States (default, hover, active, disabled)
|
||||
- Sizes (sm, md, lg)
|
||||
- Variants
|
||||
|
||||
3. Compose screens using established components:
|
||||
"Create a settings page using the button and input
|
||||
components from previous generations"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Responsive Design Strategies
|
||||
|
||||
### Mobile-First Approach
|
||||
|
||||
Start with mobile design, then scale up to tablet and desktop.
|
||||
|
||||
**Prompt sequence:**
|
||||
|
||||
**Step 1 - Mobile (375px):**
|
||||
```
|
||||
Mobile app home screen for recipe platform
|
||||
|
||||
Layout:
|
||||
- Stacked vertical sections
|
||||
- Full-width cards
|
||||
- Bottom navigation
|
||||
- Hamburger menu
|
||||
|
||||
Content:
|
||||
- Search bar at top
|
||||
- Featured recipe hero card
|
||||
- Category chips (horizontal scroll)
|
||||
- Recipe grid (1 column)
|
||||
```
|
||||
|
||||
**Step 2 - Tablet (768px):**
|
||||
```
|
||||
Adapt the mobile recipe home screen for tablet:
|
||||
- 2-column recipe grid
|
||||
- Persistent sidebar navigation (replaces hamburger)
|
||||
- Larger featured hero with side-by-side layout
|
||||
- Category chips remain scrollable
|
||||
```
|
||||
|
||||
**Step 3 - Desktop (1440px):**
|
||||
```
|
||||
Adapt for desktop:
|
||||
- 3-column recipe grid
|
||||
- Full sidebar with categories expanded
|
||||
- Hero section with 3 featured recipes
|
||||
- Top navigation bar with search and user menu
|
||||
```
|
||||
|
||||
### Breakpoint-Specific Prompts
|
||||
|
||||
Specify exact breakpoints and layout changes.
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Responsive product grid:
|
||||
|
||||
Mobile (< 640px):
|
||||
- 1 column
|
||||
- Full-width cards
|
||||
- Vertical image orientation
|
||||
|
||||
Tablet (640px - 1024px):
|
||||
- 2 columns
|
||||
- Square images
|
||||
- Compact card layout
|
||||
|
||||
Desktop (> 1024px):
|
||||
- 4 columns
|
||||
- Hover effects with overlay
|
||||
- Quick view button
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Considerations
|
||||
|
||||
### WCAG Compliance Prompts
|
||||
|
||||
Include accessibility requirements directly in prompts.
|
||||
|
||||
**Key areas to specify:**
|
||||
|
||||
1. **Color Contrast**
|
||||
```
|
||||
Ensure all text meets WCAG AA standards:
|
||||
- Normal text: 4.5:1 contrast ratio minimum
|
||||
- Large text (18pt+): 3:1 contrast ratio minimum
|
||||
- Interactive elements: clear focus states with 3:1 contrast
|
||||
```
|
||||
|
||||
2. **Touch Targets**
|
||||
```
|
||||
All interactive elements minimum 44x44px touch target size
|
||||
Adequate spacing between clickable elements (8px minimum)
|
||||
```
|
||||
|
||||
3. **Keyboard Navigation**
|
||||
```
|
||||
Clear focus indicators on all interactive elements
|
||||
Logical tab order following visual flow
|
||||
Skip navigation link for keyboard users
|
||||
```
|
||||
|
||||
4. **Screen Reader Support**
|
||||
```
|
||||
Descriptive button labels (not just "Click here")
|
||||
Alt text for all meaningful images
|
||||
Form labels properly associated with inputs
|
||||
Heading hierarchy (H1 → H2 → H3)
|
||||
```
|
||||
|
||||
**Comprehensive accessibility prompt:**
|
||||
```
|
||||
Create an accessible contact form:
|
||||
|
||||
Fields:
|
||||
- Name (required, with aria-required)
|
||||
- Email (required, with validation and error message)
|
||||
- Subject (dropdown with clear labels)
|
||||
- Message (textarea with character count)
|
||||
|
||||
Accessibility features:
|
||||
- All inputs have visible labels
|
||||
- Required fields marked with asterisk and aria-required
|
||||
- Error messages with role="alert"
|
||||
- Submit button with descriptive text
|
||||
- Focus indicators with 3px blue outline
|
||||
- Color contrast meets WCAG AA
|
||||
- Touch targets 44x44px minimum
|
||||
|
||||
Style: Clean, form-focused, high contrast
|
||||
Colors: Dark text on light background, red for errors
|
||||
```
|
||||
|
||||
### Inclusive Design Patterns
|
||||
|
||||
**Consider diverse users:**
|
||||
|
||||
```
|
||||
Design a video player interface that supports:
|
||||
- Captions/subtitles toggle
|
||||
- Audio description option
|
||||
- Keyboard shortcuts (space to play/pause, arrows to seek)
|
||||
- Playback speed control
|
||||
- High contrast mode
|
||||
- Reduced motion option (disable animations)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### Optimized Asset Prompts
|
||||
|
||||
Request performance-conscious designs from the start.
|
||||
|
||||
**Image optimization:**
|
||||
```
|
||||
E-commerce product gallery with performance optimization:
|
||||
- Lazy loading for images below fold
|
||||
- Thumbnail images (200x200px) for grid
|
||||
- Full-size images (1200x1200px) only on click
|
||||
- WebP format with JPEG fallback
|
||||
- Blur placeholder while loading
|
||||
```
|
||||
|
||||
**Code efficiency:**
|
||||
```
|
||||
Generate lightweight HTML/CSS without:
|
||||
- Unnecessary wrapper divs
|
||||
- Inline styles (use classes)
|
||||
- Large external dependencies
|
||||
- Redundant CSS rules
|
||||
```
|
||||
|
||||
### Progressive Enhancement
|
||||
|
||||
Design for core functionality first, then enhance.
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Create a filterable product list with progressive enhancement:
|
||||
|
||||
Base (no JavaScript):
|
||||
- Server-rendered product grid
|
||||
- Form-based filters with submit button
|
||||
- Pagination links
|
||||
|
||||
Enhanced (with JavaScript):
|
||||
- AJAX filter updates without page reload
|
||||
- Infinite scroll
|
||||
- Smooth animations
|
||||
- Real-time search
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Reusability
|
||||
|
||||
### Atomic Design Methodology
|
||||
|
||||
Build from atoms → molecules → organisms → templates → pages.
|
||||
|
||||
**Atoms (basic elements):**
|
||||
```
|
||||
Generate design system atoms:
|
||||
- Button (primary, secondary, outline, ghost, danger)
|
||||
- Input field (text, email, password, search, textarea)
|
||||
- Label, Badge, Tag
|
||||
- Icon set (24x24px, consistent style)
|
||||
- Avatar (circle, square, with status indicator)
|
||||
```
|
||||
|
||||
**Molecules (simple combinations):**
|
||||
```
|
||||
Create molecules using atoms:
|
||||
- Search bar (input + button + icon)
|
||||
- Form field (label + input + error message)
|
||||
- Card header (avatar + name + timestamp + menu)
|
||||
- Stat card (icon + label + value + trend)
|
||||
```
|
||||
|
||||
**Organisms (complex components):**
|
||||
```
|
||||
Build organisms from molecules:
|
||||
- Navigation bar (logo + search bar + user menu)
|
||||
- Product card (image + title + price + rating + button)
|
||||
- Comment thread (avatar + name + timestamp + text + actions)
|
||||
- Data table (headers + rows + pagination + filters)
|
||||
```
|
||||
|
||||
**Templates (page layouts):**
|
||||
```
|
||||
Compose templates from organisms:
|
||||
- Dashboard layout (sidebar + header + content grid)
|
||||
- Article layout (header + hero + content + sidebar)
|
||||
- Checkout flow (progress + form + summary)
|
||||
```
|
||||
|
||||
### Variant Generation
|
||||
|
||||
Create systematic variations of components.
|
||||
|
||||
**Button variants prompt:**
|
||||
```
|
||||
Generate button component with all variants:
|
||||
|
||||
Sizes: Small (32px), Medium (40px), Large (48px)
|
||||
|
||||
Types:
|
||||
- Primary (filled, brand color)
|
||||
- Secondary (filled, gray)
|
||||
- Outline (border only)
|
||||
- Ghost (transparent, hover background)
|
||||
- Danger (filled, red)
|
||||
|
||||
States for each:
|
||||
- Default
|
||||
- Hover
|
||||
- Active (pressed)
|
||||
- Disabled
|
||||
- Loading (with spinner)
|
||||
|
||||
Include: Icon support (left/right), full-width option
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Advanced Iteration Techniques
|
||||
|
||||
### Conditional Variations
|
||||
|
||||
Generate multiple versions based on different conditions.
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Create 3 hero section variants for A/B testing:
|
||||
|
||||
Variant A - Image-focused:
|
||||
- Large background image
|
||||
- Minimal text overlay
|
||||
- Single CTA button
|
||||
|
||||
Variant B - Text-focused:
|
||||
- Solid color background
|
||||
- Detailed copy with bullet points
|
||||
- Two CTA buttons (primary + secondary)
|
||||
|
||||
Variant C - Video-focused:
|
||||
- Background video
|
||||
- Minimal text
|
||||
- Play button + CTA
|
||||
|
||||
All variants use same brand colors and maintain mobile responsiveness
|
||||
```
|
||||
|
||||
### State-Based Design
|
||||
|
||||
Design for all possible states, not just the happy path.
|
||||
|
||||
**Comprehensive state prompt:**
|
||||
```
|
||||
Design a data table with all states:
|
||||
|
||||
Default state:
|
||||
- 10 rows of data
|
||||
- Sortable columns
|
||||
- Pagination
|
||||
|
||||
Loading state:
|
||||
- Skeleton loaders for rows
|
||||
- Disabled controls
|
||||
|
||||
Empty state:
|
||||
- Illustration
|
||||
- "No data found" message
|
||||
- "Add new" CTA button
|
||||
|
||||
Error state:
|
||||
- Error icon
|
||||
- Error message
|
||||
- "Retry" button
|
||||
|
||||
Search/Filter active:
|
||||
- Applied filters shown as chips
|
||||
- Clear filters option
|
||||
- Result count
|
||||
|
||||
Selected rows:
|
||||
- Checkbox selection
|
||||
- Bulk action toolbar
|
||||
- Select all option
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Export and Handoff Best Practices
|
||||
|
||||
### Preparing for Development
|
||||
|
||||
Before exporting, ensure designs are developer-ready.
|
||||
|
||||
**Pre-export checklist:**
|
||||
|
||||
1. **Naming conventions**
|
||||
- Use semantic class names
|
||||
- Follow BEM or consistent methodology
|
||||
- Name components clearly
|
||||
|
||||
2. **Documentation**
|
||||
- Add comments for complex interactions
|
||||
- Document responsive breakpoints
|
||||
- Note any required JavaScript behavior
|
||||
|
||||
3. **Asset organization**
|
||||
- Export images at correct sizes
|
||||
- Provide SVG for icons
|
||||
- Include font files or CDN links
|
||||
|
||||
4. **Specifications**
|
||||
- Document spacing values
|
||||
- List color hex codes
|
||||
- Specify font sizes and weights
|
||||
|
||||
### Figma Integration
|
||||
|
||||
Optimize Stitch → Figma workflow.
|
||||
|
||||
**Steps:**
|
||||
```
|
||||
1. Generate design in Stitch with detailed specifications
|
||||
2. Use "Paste to Figma" export
|
||||
3. In Figma:
|
||||
- Organize layers with clear naming
|
||||
- Create components from repeated elements
|
||||
- Set up auto-layout for responsive behavior
|
||||
- Define color and text styles
|
||||
- Add design system documentation
|
||||
4. Share with developers using Figma's inspect mode
|
||||
```
|
||||
|
||||
### Code Export Refinement
|
||||
|
||||
Improve exported HTML/CSS for production.
|
||||
|
||||
**Post-export tasks:**
|
||||
|
||||
1. **Semantic HTML**
|
||||
- Replace divs with semantic tags (header, nav, main, article, section, footer)
|
||||
- Add ARIA labels where needed
|
||||
- Ensure proper heading hierarchy
|
||||
|
||||
2. **CSS optimization**
|
||||
- Extract repeated styles into utility classes
|
||||
- Use CSS custom properties for theme values
|
||||
- Organize with methodology (BEM, SMACSS, etc.)
|
||||
- Add responsive media queries if missing
|
||||
|
||||
3. **Accessibility**
|
||||
- Add alt text to images
|
||||
- Ensure form labels are associated
|
||||
- Add focus styles
|
||||
- Test with screen reader
|
||||
|
||||
4. **Performance**
|
||||
- Optimize images
|
||||
- Minify CSS
|
||||
- Remove unused styles
|
||||
- Add loading strategies
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
These advanced techniques help you move beyond basic Stitch usage to create production-ready, accessible, and performant designs. Combine these strategies with the core prompting principles to maximize your efficiency and output quality.
|
||||
|
||||
**Key takeaways:**
|
||||
- Use images and references to accelerate design
|
||||
- Establish design systems early for consistency
|
||||
- Design responsively from the start
|
||||
- Prioritize accessibility in every prompt
|
||||
- Think in reusable components
|
||||
- Plan for all states, not just happy paths
|
||||
- Refine exports before production use
|
||||
601
skills/stitch-ui-design/references/prompt-examples.md
Normal file
601
skills/stitch-ui-design/references/prompt-examples.md
Normal file
@@ -0,0 +1,601 @@
|
||||
# Stitch Prompt Examples Library
|
||||
|
||||
Comprehensive collection of effective Stitch prompts organized by use case and complexity level.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Landing Pages](#landing-pages)
|
||||
2. [Mobile Apps](#mobile-apps)
|
||||
3. [Dashboards](#dashboards)
|
||||
4. [E-commerce](#e-commerce)
|
||||
5. [Forms & Authentication](#forms--authentication)
|
||||
6. [Content Platforms](#content-platforms)
|
||||
7. [SaaS Applications](#saas-applications)
|
||||
|
||||
---
|
||||
|
||||
## Landing Pages
|
||||
|
||||
### Startup Landing Page
|
||||
|
||||
```
|
||||
Landing page for AI writing assistant startup
|
||||
|
||||
Hero Section:
|
||||
- Bold headline: "Write Better, Faster with AI"
|
||||
- Subheadline explaining value proposition
|
||||
- Primary CTA button "Start Free Trial"
|
||||
- Secondary CTA "Watch Demo"
|
||||
- Hero illustration showing product interface
|
||||
|
||||
Features Section:
|
||||
- 3-column grid with icons
|
||||
- Feature 1: AI-powered suggestions
|
||||
- Feature 2: Multi-language support
|
||||
- Feature 3: Team collaboration
|
||||
|
||||
Social Proof:
|
||||
- Customer logos (6 companies)
|
||||
- Testimonial cards with photos and quotes
|
||||
|
||||
Pricing:
|
||||
- 3-tier pricing table (Free, Pro, Enterprise)
|
||||
- Feature comparison
|
||||
- Annual/Monthly toggle
|
||||
|
||||
Style: Modern, tech-forward, trustworthy
|
||||
Colors: Deep purple primary, cyan accents, white background
|
||||
Typography: Sans-serif, clean and readable
|
||||
Platform: Responsive web
|
||||
```
|
||||
|
||||
### Service Business Landing
|
||||
|
||||
```
|
||||
Landing page for boutique yoga studio
|
||||
|
||||
Above Fold:
|
||||
- Full-width hero image of studio space
|
||||
- Centered headline: "Find Your Balance"
|
||||
- Class schedule CTA button
|
||||
- Location and hours overlay
|
||||
|
||||
Class Offerings:
|
||||
- Card grid (2x3) with class types
|
||||
- Each card: class name, duration, difficulty level, instructor photo
|
||||
- Hover effect reveals class description
|
||||
|
||||
Instructor Profiles:
|
||||
- Horizontal scrolling carousel
|
||||
- Circular photos with names and specialties
|
||||
|
||||
Testimonials:
|
||||
- Large quote format with student photos
|
||||
- 5-star ratings
|
||||
|
||||
Call-to-Action:
|
||||
- "Book Your First Class Free" banner
|
||||
- Contact form with name, email, phone
|
||||
|
||||
Style: Calm, organic, welcoming
|
||||
Colors: Sage green, warm beige, soft white
|
||||
Typography: Serif headings, sans-serif body
|
||||
Platform: Responsive web with mobile-first approach
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Mobile Apps
|
||||
|
||||
### Fitness Tracking App
|
||||
|
||||
```
|
||||
Fitness tracking app - Home screen (iOS)
|
||||
|
||||
Top Section:
|
||||
- Greeting with user name and current date
|
||||
- Daily goal progress ring (calories, steps, active minutes)
|
||||
- Motivational message based on progress
|
||||
|
||||
Quick Stats Cards:
|
||||
- Today's steps with trend arrow
|
||||
- Active calories burned
|
||||
- Distance covered
|
||||
- Active time
|
||||
|
||||
Recent Workouts:
|
||||
- List of last 3 workouts with type, duration, calories
|
||||
- Thumbnail icons for workout type
|
||||
- Swipe actions for details/delete
|
||||
|
||||
Bottom Section:
|
||||
- "Start Workout" prominent button
|
||||
- Quick access to workout types (Run, Cycle, Strength, Yoga)
|
||||
|
||||
Bottom Navigation:
|
||||
- Home (active), Workouts, Progress, Profile
|
||||
|
||||
Style: Energetic, motivating, data-focused
|
||||
Colors: Vibrant orange primary, dark mode background, neon accents
|
||||
Typography: Bold headings, clear metrics
|
||||
Platform: iOS mobile (375x812px)
|
||||
```
|
||||
|
||||
### Food Delivery App
|
||||
|
||||
```
|
||||
Restaurant detail screen for food delivery app
|
||||
|
||||
Header:
|
||||
- Restaurant cover photo
|
||||
- Back button and favorite icon
|
||||
- Restaurant name, rating (4.5 stars), delivery time (25-35 min)
|
||||
- Cuisine tags (Italian, Pizza, Pasta)
|
||||
|
||||
Info Bar:
|
||||
- Delivery fee, minimum order, distance
|
||||
- Promo badge if applicable
|
||||
|
||||
Menu Categories:
|
||||
- Sticky horizontal scroll tabs (Popular, Pizza, Pasta, Salads, Drinks)
|
||||
|
||||
Menu Items:
|
||||
- Card layout with food photo, name, description, price
|
||||
- Add button with quantity selector
|
||||
- Dietary icons (vegetarian, spicy, etc.)
|
||||
|
||||
Floating Cart:
|
||||
- Bottom sheet showing cart summary
|
||||
- Item count and total price
|
||||
- "View Cart" button
|
||||
|
||||
Style: Appetite-appealing, easy to scan, vibrant
|
||||
Colors: Red primary (hunger-inducing), white background, food photography
|
||||
Typography: Friendly sans-serif
|
||||
Platform: Android mobile (360x800px)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dashboards
|
||||
|
||||
### Analytics Dashboard
|
||||
|
||||
```
|
||||
Web analytics dashboard for marketing team
|
||||
|
||||
Top Bar:
|
||||
- Date range selector (last 7 days, 30 days, custom)
|
||||
- Export button
|
||||
- Notification bell
|
||||
- User profile dropdown
|
||||
|
||||
Key Metrics Row:
|
||||
- 4 metric cards in a row
|
||||
- Card 1: Total visitors (with % change)
|
||||
- Card 2: Conversion rate (with trend sparkline)
|
||||
- Card 3: Bounce rate (with comparison to previous period)
|
||||
- Card 4: Average session duration
|
||||
|
||||
Main Chart:
|
||||
- Line chart showing traffic over time
|
||||
- Multiple lines for different sources (Organic, Paid, Social, Direct)
|
||||
- Interactive legend to toggle lines
|
||||
- Hover tooltips with exact values
|
||||
|
||||
Secondary Panels:
|
||||
- Left: Top pages table (page, views, avg time, bounce rate)
|
||||
- Right: Traffic sources pie chart with percentages
|
||||
|
||||
Bottom Section:
|
||||
- Recent conversions table with user, source, value, timestamp
|
||||
|
||||
Style: Clean, data-focused, professional
|
||||
Colors: Navy blue sidebar, white main area, colorful chart lines
|
||||
Typography: Monospace for numbers, sans-serif for labels
|
||||
Platform: Desktop web (1440px+)
|
||||
```
|
||||
|
||||
### Project Management Dashboard
|
||||
|
||||
```
|
||||
Project management dashboard - Team view
|
||||
|
||||
Sidebar:
|
||||
- Workspace selector dropdown
|
||||
- Navigation: Dashboard, Projects, Tasks, Team, Reports
|
||||
- Create new project button
|
||||
|
||||
Header:
|
||||
- Project name and status badge
|
||||
- Team member avatars (max 5, then +N)
|
||||
- Search bar
|
||||
- View options (Board, List, Calendar)
|
||||
|
||||
Kanban Board:
|
||||
- 4 columns: To Do, In Progress, Review, Done
|
||||
- Drag-and-drop cards
|
||||
- Each card shows: title, assignee avatar, due date, priority label, comment count
|
||||
- Add card button at bottom of each column
|
||||
|
||||
Right Panel:
|
||||
- Task details when card is selected
|
||||
- Description, attachments, comments, activity log
|
||||
|
||||
Quick Stats:
|
||||
- Progress bar showing completion percentage
|
||||
- Tasks by status mini chart
|
||||
- Upcoming deadlines list
|
||||
|
||||
Style: Modern, organized, collaborative
|
||||
Colors: Purple primary, light gray background, status color coding
|
||||
Typography: Clear sans-serif, readable at all sizes
|
||||
Platform: Desktop web (1280px+)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## E-commerce
|
||||
|
||||
### Product Detail Page
|
||||
|
||||
```
|
||||
Product detail page for fashion e-commerce
|
||||
|
||||
Image Gallery:
|
||||
- Main product image (large, zoomable)
|
||||
- Thumbnail strip below (5-6 images)
|
||||
- 360° view option
|
||||
- Video thumbnail if available
|
||||
|
||||
Product Info:
|
||||
- Brand name
|
||||
- Product title
|
||||
- Star rating (4.8) with review count (234 reviews)
|
||||
- Price with original price struck through if on sale
|
||||
- Sale badge if applicable
|
||||
|
||||
Options:
|
||||
- Size selector (XS, S, M, L, XL) with availability indicators
|
||||
- Color swatches with product image preview on hover
|
||||
- Quantity selector
|
||||
|
||||
Actions:
|
||||
- Add to Cart button (prominent)
|
||||
- Add to Wishlist button (outline)
|
||||
- Size guide link
|
||||
- Shipping calculator
|
||||
|
||||
Product Details:
|
||||
- Tabbed interface (Description, Specifications, Reviews, Shipping)
|
||||
- Expandable sections on mobile
|
||||
|
||||
Recommendations:
|
||||
- "You May Also Like" carousel
|
||||
- "Complete the Look" suggestions
|
||||
|
||||
Style: Clean, product-focused, trustworthy
|
||||
Colors: Black and white with brand accent color (burgundy)
|
||||
Typography: Elegant serif for headings, sans-serif for body
|
||||
Platform: Responsive web
|
||||
```
|
||||
|
||||
### Shopping Cart
|
||||
|
||||
```
|
||||
Shopping cart page with checkout flow
|
||||
|
||||
Cart Items:
|
||||
- List of products with thumbnail, name, size/color, price
|
||||
- Quantity adjuster (+/- buttons)
|
||||
- Remove item link
|
||||
- Save for later option
|
||||
|
||||
Order Summary:
|
||||
- Sticky sidebar on desktop, bottom sheet on mobile
|
||||
- Subtotal
|
||||
- Shipping (calculated or "Free over $50")
|
||||
- Tax (estimated)
|
||||
- Discount code input field
|
||||
- Total (prominent)
|
||||
- Checkout button (large, primary color)
|
||||
|
||||
Trust Signals:
|
||||
- Secure checkout badge
|
||||
- Free returns policy
|
||||
- Customer service contact
|
||||
|
||||
Recommendations:
|
||||
- "Frequently Bought Together" section
|
||||
- Promotional banner for free shipping threshold
|
||||
|
||||
Empty State:
|
||||
- Illustration
|
||||
- "Your cart is empty" message
|
||||
- "Continue Shopping" button
|
||||
- Recently viewed items
|
||||
|
||||
Style: Clean, conversion-focused, reassuring
|
||||
Colors: Green for checkout CTA, neutral grays, trust badges
|
||||
Typography: Clear pricing, readable product names
|
||||
Platform: Responsive web
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Forms & Authentication
|
||||
|
||||
### Multi-Step Signup Form
|
||||
|
||||
```
|
||||
B2B SaaS signup flow - 3 steps
|
||||
|
||||
Progress Indicator:
|
||||
- Step 1: Account (active)
|
||||
- Step 2: Company
|
||||
- Step 3: Team
|
||||
|
||||
Step 1 - Account Details:
|
||||
- Email input with validation
|
||||
- Password input with strength indicator
|
||||
- Confirm password
|
||||
- Terms and conditions checkbox
|
||||
- "Continue" button
|
||||
- "Already have an account? Sign in" link
|
||||
|
||||
Step 2 - Company Information:
|
||||
- Company name
|
||||
- Industry dropdown
|
||||
- Company size radio buttons (1-10, 11-50, 51-200, 201+)
|
||||
- Role/Title input
|
||||
- "Back" and "Continue" buttons
|
||||
|
||||
Step 3 - Invite Team:
|
||||
- Email input fields (dynamic, add more)
|
||||
- Role selector for each invite
|
||||
- "Skip for now" option
|
||||
- "Finish Setup" button
|
||||
|
||||
Success State:
|
||||
- Checkmark animation
|
||||
- "Welcome to [Product]!" message
|
||||
- "Go to Dashboard" button
|
||||
|
||||
Style: Minimal, focused, low-friction
|
||||
Colors: Blue primary, white background, green success states
|
||||
Typography: Clear labels, helpful microcopy
|
||||
Platform: Responsive web, mobile-optimized
|
||||
```
|
||||
|
||||
### Login Page
|
||||
|
||||
```
|
||||
Login page for enterprise software
|
||||
|
||||
Left Panel (Desktop):
|
||||
- Brand logo
|
||||
- Hero image or illustration
|
||||
- Value proposition headline
|
||||
- Key benefits (3 bullet points)
|
||||
|
||||
Right Panel (Form):
|
||||
- "Welcome back" heading
|
||||
- Email input field
|
||||
- Password input field with show/hide toggle
|
||||
- "Remember me" checkbox
|
||||
- "Forgot password?" link
|
||||
- "Sign In" button (full width)
|
||||
- Divider with "OR"
|
||||
- SSO options (Google, Microsoft, Okta) as buttons with logos
|
||||
- "Don't have an account? Sign up" link at bottom
|
||||
|
||||
Security Indicators:
|
||||
- SSL badge
|
||||
- "Your data is secure" message
|
||||
|
||||
Style: Professional, trustworthy, enterprise-grade
|
||||
Colors: Corporate blue, white, subtle grays
|
||||
Typography: Professional sans-serif
|
||||
Platform: Responsive (left panel hidden on mobile)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Content Platforms
|
||||
|
||||
### Blog Post Layout
|
||||
|
||||
```
|
||||
Blog article page for tech publication
|
||||
|
||||
Header:
|
||||
- Site navigation (logo, categories, search, subscribe)
|
||||
|
||||
Article Header:
|
||||
- Category tag
|
||||
- Article title (large, bold)
|
||||
- Subtitle/excerpt
|
||||
- Author info (photo, name, bio link, publish date)
|
||||
- Social share buttons
|
||||
- Reading time estimate
|
||||
|
||||
Article Body:
|
||||
- Readable column width (max 680px)
|
||||
- Paragraph text with proper line height
|
||||
- H2 and H3 subheadings
|
||||
- Pull quotes (styled distinctly)
|
||||
- Inline images with captions
|
||||
- Code blocks with syntax highlighting
|
||||
- Embedded videos
|
||||
- Table of contents (sticky sidebar on desktop)
|
||||
|
||||
Article Footer:
|
||||
- Tags
|
||||
- Share buttons
|
||||
- Author card (expanded)
|
||||
- Related articles (3 cards)
|
||||
- Comments section
|
||||
|
||||
Sidebar (Desktop):
|
||||
- Newsletter signup
|
||||
- Popular posts
|
||||
- Ad placement
|
||||
|
||||
Style: Editorial, readable, content-first
|
||||
Colors: Black text on white, accent color for links
|
||||
Typography: Serif for body text, sans-serif for UI
|
||||
Platform: Responsive web
|
||||
```
|
||||
|
||||
### Video Platform Interface
|
||||
|
||||
```
|
||||
Video streaming platform - Watch page
|
||||
|
||||
Video Player:
|
||||
- Full-width video player with controls
|
||||
- Quality selector, playback speed, captions, fullscreen
|
||||
- Progress bar with thumbnail preview on hover
|
||||
|
||||
Video Info:
|
||||
- Video title
|
||||
- View count and upload date
|
||||
- Like/Dislike buttons
|
||||
- Share button
|
||||
- Save to playlist button
|
||||
|
||||
Channel Info:
|
||||
- Channel avatar and name
|
||||
- Subscriber count
|
||||
- Subscribe button (prominent if not subscribed)
|
||||
|
||||
Description:
|
||||
- Expandable description text
|
||||
- Show more/less toggle
|
||||
- Hashtags and links
|
||||
|
||||
Comments Section:
|
||||
- Sort options (Top, Newest)
|
||||
- Comment input with user avatar
|
||||
- Comment cards with avatar, name, timestamp, text
|
||||
- Like/Reply buttons
|
||||
- Nested replies (indented)
|
||||
|
||||
Sidebar:
|
||||
- Up next autoplay preview
|
||||
- Recommended videos list (thumbnail, title, channel, views)
|
||||
|
||||
Style: Dark mode, video-focused, minimal distractions
|
||||
Colors: Dark gray background, white text, red accent for CTAs
|
||||
Typography: Sans-serif, readable at distance
|
||||
Platform: Responsive web
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## SaaS Applications
|
||||
|
||||
### Email Client Interface
|
||||
|
||||
```
|
||||
Email client - Inbox view
|
||||
|
||||
Left Sidebar:
|
||||
- Compose button (prominent)
|
||||
- Folder list (Inbox, Sent, Drafts, Spam, Trash)
|
||||
- Labels/Tags with color coding
|
||||
- Storage usage indicator
|
||||
|
||||
Email List (Center):
|
||||
- Search bar with filters
|
||||
- Sort and view options
|
||||
- Email rows showing:
|
||||
- Sender avatar/initial
|
||||
- Sender name (bold if unread)
|
||||
- Subject line
|
||||
- Preview text (truncated)
|
||||
- Timestamp
|
||||
- Attachment icon if present
|
||||
- Star/flag icons
|
||||
- Checkbox for bulk actions
|
||||
- Pagination or infinite scroll
|
||||
|
||||
Email Detail (Right):
|
||||
- Email header (from, to, cc, timestamp)
|
||||
- Subject line
|
||||
- Email body with formatting preserved
|
||||
- Attachments section
|
||||
- Action buttons (Reply, Reply All, Forward, Archive, Delete)
|
||||
- Previous emails in thread (collapsed)
|
||||
|
||||
Top Bar:
|
||||
- Refresh button
|
||||
- Settings icon
|
||||
- User profile dropdown
|
||||
|
||||
Style: Clean, productivity-focused, organized
|
||||
Colors: Blue accents, white background, gray dividers
|
||||
Typography: Sans-serif, scannable
|
||||
Platform: Desktop web (1280px+)
|
||||
```
|
||||
|
||||
### CRM Contact Detail
|
||||
|
||||
```
|
||||
CRM contact detail page
|
||||
|
||||
Header:
|
||||
- Contact name and company
|
||||
- Contact photo/avatar
|
||||
- Status badge (Lead, Customer, Inactive)
|
||||
- Quick actions (Email, Call, Schedule Meeting, Edit)
|
||||
|
||||
Info Tabs:
|
||||
- Overview (active), Activity, Deals, Notes, Files
|
||||
|
||||
Overview Tab:
|
||||
- Contact information card (email, phone, address, social links)
|
||||
- Company information card
|
||||
- Tags and custom fields
|
||||
- Assigned to (team member)
|
||||
|
||||
Activity Timeline:
|
||||
- Chronological list of interactions
|
||||
- Icons for type (email, call, meeting, note)
|
||||
- Timestamp and description
|
||||
- Filter by activity type
|
||||
|
||||
Deals Section:
|
||||
- Active deals table (deal name, value, stage, close date)
|
||||
- Won/Lost deals summary
|
||||
|
||||
Notes Section:
|
||||
- Add note input with rich text editor
|
||||
- Note cards with author, timestamp, content
|
||||
- Pin important notes
|
||||
|
||||
Right Sidebar:
|
||||
- Next scheduled activity
|
||||
- Recent emails
|
||||
- Related contacts
|
||||
- Deal pipeline stage
|
||||
|
||||
Style: Professional, data-rich, organized
|
||||
Colors: Navy blue, white, status color coding
|
||||
Typography: Clear hierarchy, readable data
|
||||
Platform: Desktop web (1440px+)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tips for Using These Examples
|
||||
|
||||
1. **Customize for your needs** - Replace placeholder content with your specific requirements
|
||||
2. **Combine elements** - Mix and match components from different examples
|
||||
3. **Adjust complexity** - Simplify or expand based on your project scope
|
||||
4. **Specify your brand** - Add your color palette, fonts, and visual style
|
||||
5. **Consider platform** - Adapt layouts for your target device (mobile/desktop)
|
||||
6. **Add context** - Include user personas or use cases for better results
|
||||
7. **Iterate** - Start with a basic prompt, then refine with annotations
|
||||
|
||||
Remember: These are starting points. Stitch works best when you provide specific details relevant to your unique project.
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: vercel-deploy-claimable
|
||||
description: "Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production", "Create a preview deployment", "Deploy and give me the link", or "Push this live". No authentication required - returns preview URL and claimable deployment link."
|
||||
description: "Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as 'Deploy my app', 'Deploy this to production', 'Create a preview deployment', 'Deploy and give me the link', or 'Push this live'. No authentication required - returns preview URL and claimable deployment link."
|
||||
source: "https://github.com/vercel-labs/agent-skills/tree/main/skills/claude.ai/vercel-deploy-claimable"
|
||||
risk: safe
|
||||
---
|
||||
@@ -12,6 +12,7 @@ Deploy any project to Vercel instantly. No authentication required.
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
|
||||
- User requests deployment actions like "Deploy my app"
|
||||
- Deploying to production
|
||||
- Creating preview deployments
|
||||
@@ -32,6 +33,7 @@ bash /mnt/skills/user/vercel-deploy/scripts/deploy.sh [path]
|
||||
```
|
||||
|
||||
**Arguments:**
|
||||
|
||||
- `path` - Directory to deploy, or a `.tgz` file (defaults to current directory)
|
||||
|
||||
**Examples:**
|
||||
@@ -88,6 +90,7 @@ For static HTML projects (no `package.json`), framework is set to `null`.
|
||||
## Static HTML Projects
|
||||
|
||||
For projects without a `package.json`:
|
||||
|
||||
- If there's a single `.html` file not named `index.html`, it gets renamed automatically
|
||||
- This ensures the page is served at the root URL (`/`)
|
||||
|
||||
|
||||
66
skills/youtube-summarizer/CHANGELOG.md
Normal file
66
skills/youtube-summarizer/CHANGELOG.md
Normal file
@@ -0,0 +1,66 @@
|
||||
# Changelog - youtube-summarizer
|
||||
|
||||
All notable changes to the youtube-summarizer skill will be documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
---
|
||||
|
||||
## [1.2.1] - 2026-02-04
|
||||
|
||||
### 🐛 Fixed
|
||||
|
||||
- **Exit code propagation in `--list` mode**
|
||||
- **Issue:** Script always exited with status 0 even when `list_available_transcripts()` failed
|
||||
- **Risk:** Broke automation pipelines that rely on exit codes to detect failures
|
||||
- **Root Cause:** Return value from `list_available_transcripts()` was ignored
|
||||
- **Solution:** Now properly checks return value and exits with code 1 on failure
|
||||
- **Impact:** Scripts in automation can now correctly detect when transcript listing fails (invalid video ID, network errors, etc.)
|
||||
|
||||
### 🔧 Changed
|
||||
|
||||
- `extract-transcript.py` (lines 58-60)
|
||||
- Before: `list_available_transcripts(video_id); sys.exit(0)`
|
||||
- After: `success = list_available_transcripts(video_id); sys.exit(0 if success else 1)`
|
||||
|
||||
### 📝 Notes
|
||||
|
||||
- **Breaking Change:** None - only affects error handling behavior
|
||||
- **Backward Compatibility:** Scripts that check exit codes will now work correctly
|
||||
- **Migration:** No changes needed for existing users
|
||||
|
||||
### 🔗 Related
|
||||
|
||||
- Identified by Codex automated review in antigravity-awesome-skills PR #62
|
||||
- Also fixed in antigravity-awesome-skills fork
|
||||
|
||||
---
|
||||
|
||||
## [1.2.0] - 2026-02-04
|
||||
|
||||
### ✨ Added
|
||||
|
||||
- Intelligent prompt workflow integration
|
||||
- LLM processing with Claude CLI or GitHub Copilot CLI
|
||||
- Progress indicators with rich terminal UI
|
||||
- Multiple output formats
|
||||
- Enhanced error handling
|
||||
|
||||
### 🔧 Changed
|
||||
|
||||
- Major refactor of transcript extraction logic
|
||||
- Improved documentation in SKILL.md
|
||||
- Updated installation requirements
|
||||
|
||||
---
|
||||
|
||||
## [1.0.0] - 2025-02-01
|
||||
|
||||
### ✨ Initial Release
|
||||
|
||||
- YouTube transcript extraction
|
||||
- Language detection and selection
|
||||
- Basic summarization
|
||||
- Markdown output format
|
||||
- Support for multiple languages
|
||||
365
skills/youtube-summarizer/README.md
Normal file
365
skills/youtube-summarizer/README.md
Normal file
@@ -0,0 +1,365 @@
|
||||
# 🎥 youtube-summarizer
|
||||
|
||||
> Extract transcripts from YouTube videos and generate comprehensive, detailed summaries
|
||||
|
||||
**Version:** 1.2.0
|
||||
**Status:** ✨ Zero-Config | 🌍 Universal
|
||||
**Platforms:** GitHub Copilot CLI, Claude Code
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The **youtube-summarizer** skill automates the extraction of YouTube video transcripts and generates verbose, structured summaries using the STAR + R-I-S-E framework. Perfect for documenting educational content, lectures, tutorials, or any informational videos without rewatching them.
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
- 🎯 **Automatic transcript extraction** using `youtube-transcript-api`
|
||||
- ✅ **Video validation** - Checks if video is accessible and has transcripts
|
||||
- 🌍 **Multi-language support** - Prefers Portuguese, falls back to English
|
||||
- 📊 **Comprehensive summaries** - Prioritizes detail and completeness
|
||||
- 📝 **Structured output** - Markdown with headers, sections, insights
|
||||
- 🔍 **Metadata included** - Video title, channel, duration, URL
|
||||
- ⚡ **Error handling** - Clear messages for all failure scenarios
|
||||
- 🛠️ **Dependency management** - Offers to install requirements automatically
|
||||
- 📊 **Progress gauge** - Visual processing tracker across all steps
|
||||
- 💾 **Flexible save options** - Summary-only, summary+transcript, or transcript-only (NEW v1.2.0)
|
||||
|
||||
---
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Triggers
|
||||
|
||||
Activate this skill with any of these phrases:
|
||||
|
||||
```bash
|
||||
# English
|
||||
copilot> summarize this video: https://www.youtube.com/watch?v=VIDEO_ID
|
||||
copilot> summarize youtube video https://youtu.be/VIDEO_ID
|
||||
copilot> extract youtube transcript https://youtube.com/watch?v=VIDEO_ID
|
||||
|
||||
# Portuguese (also supported)
|
||||
copilot> resume este video: https://www.youtube.com/watch?v=VIDEO_ID
|
||||
```
|
||||
|
||||
### First-Time Setup
|
||||
|
||||
The skill will automatically check for dependencies and offer to install them:
|
||||
|
||||
```bash
|
||||
⚠️ youtube-transcript-api not installed
|
||||
|
||||
Would you like me to install it now?
|
||||
- [x] Yes - Install with pip
|
||||
- [ ] No - I'll install manually
|
||||
```
|
||||
|
||||
Select "Yes" and the skill handles installation automatically.
|
||||
|
||||
---
|
||||
|
||||
## Use Cases
|
||||
|
||||
### 1. **Educational Video Documentation**
|
||||
|
||||
```bash
|
||||
copilot> summarize this video: https://www.youtube.com/watch?v=abc123
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- Comprehensive summary of lecture content
|
||||
- Key concepts and terminology
|
||||
- Examples and practical applications
|
||||
- Resources mentioned in the video
|
||||
|
||||
### 2. **Technical Tutorial Analysis**
|
||||
|
||||
```bash
|
||||
copilot> summarize youtube video https://youtu.be/xyz789
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- Step-by-step breakdown of tutorial
|
||||
- Code snippets and commands mentioned
|
||||
- Best practices highlighted
|
||||
- Troubleshooting tips documented
|
||||
|
||||
### 3. **Conference Talk Reference**
|
||||
|
||||
```bash
|
||||
copilot> extract youtube transcript https://youtube.com/watch?v=def456
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- Speaker insights and arguments
|
||||
- Statistics and data points
|
||||
- Case studies and examples
|
||||
- Q&A session summary
|
||||
|
||||
### 4. **Language Learning Content**
|
||||
|
||||
```bash
|
||||
copilot> summarize youtube video https://youtu.be/ghi789
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- Vocabulary and expressions used
|
||||
- Grammar points explained
|
||||
- Cultural references
|
||||
- Practice exercises mentioned
|
||||
|
||||
### 5. **Research and Investigation**
|
||||
|
||||
```bash
|
||||
copilot> summarize youtube video https://www.youtube.com/watch?v=jkl012
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- Research findings presented
|
||||
- Methodology explained
|
||||
- Results and conclusions
|
||||
- Future work suggestions
|
||||
|
||||
---
|
||||
|
||||
## Output Structure
|
||||
|
||||
Every summary follows this comprehensive structure:
|
||||
|
||||
```markdown
|
||||
# [Video Title]
|
||||
|
||||
**Canal:** [Channel Name]
|
||||
**Duração:** [Duration]
|
||||
**URL:** [Video URL]
|
||||
**Data de Publicação:** [Date]
|
||||
|
||||
---
|
||||
|
||||
## 📊 Síntese Executiva
|
||||
[High-level overview, 2-3 paragraphs]
|
||||
|
||||
---
|
||||
|
||||
## 📝 Resumo Detalhado
|
||||
### [Topic 1]
|
||||
[Detailed analysis with examples, data, quotes]
|
||||
|
||||
### [Topic 2]
|
||||
[Continued breakdown...]
|
||||
|
||||
---
|
||||
|
||||
## 💡 Principais Insights
|
||||
- **Insight 1:** [Explanation]
|
||||
- **Insight 2:** [Explanation]
|
||||
|
||||
---
|
||||
|
||||
## 📚 Conceitos e Terminologia
|
||||
- **Term 1:** [Definition]
|
||||
- **Term 2:** [Definition]
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Recursos Mencionados
|
||||
- [Resource 1]
|
||||
- [Resource 2]
|
||||
|
||||
---
|
||||
|
||||
## 📌 Conclusão
|
||||
[Final synthesis and key takeaways]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Requirements
|
||||
|
||||
- **Python 3.x** (usually pre-installed on macOS/Linux)
|
||||
- **pip** (Python package manager)
|
||||
- **[youtube-transcript-api](https://github.com/jdepoix/youtube-transcript-api)** by [Julien Depoix](https://github.com/jdepoix) (installed automatically by the skill)
|
||||
|
||||
### Manual Installation (Optional)
|
||||
|
||||
If you prefer to install dependencies manually:
|
||||
|
||||
```bash
|
||||
pip install youtube-transcript-api
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Supported URL Formats
|
||||
|
||||
The skill recognizes these YouTube URL formats:
|
||||
|
||||
- `https://www.youtube.com/watch?v=VIDEO_ID`
|
||||
- `https://youtube.com/watch?v=VIDEO_ID`
|
||||
- `https://youtu.be/VIDEO_ID`
|
||||
- `https://m.youtube.com/watch?v=VIDEO_ID`
|
||||
|
||||
---
|
||||
|
||||
## Limitations
|
||||
|
||||
### Videos That Work
|
||||
|
||||
✅ Public videos with auto-generated captions
|
||||
✅ Videos with manual subtitles/captions
|
||||
✅ Videos with transcripts in any supported language
|
||||
|
||||
### Videos That Don't Work
|
||||
|
||||
❌ Private or unlisted videos
|
||||
❌ Videos with transcripts disabled
|
||||
❌ Age-restricted videos (may require authentication)
|
||||
❌ Videos without any captions/subtitles
|
||||
|
||||
---
|
||||
|
||||
## Error Messages
|
||||
|
||||
### No Transcript Available
|
||||
|
||||
```
|
||||
❌ No transcript available for this video
|
||||
|
||||
This skill requires videos with auto-generated captions or manual subtitles.
|
||||
Unfortunately, transcripts are not enabled for this video.
|
||||
```
|
||||
|
||||
**Solution:** Try a different video that has captions enabled.
|
||||
|
||||
### Invalid URL
|
||||
|
||||
```
|
||||
❌ Invalid YouTube URL format
|
||||
|
||||
Expected format examples:
|
||||
- https://www.youtube.com/watch?v=VIDEO_ID
|
||||
- https://youtu.be/VIDEO_ID
|
||||
```
|
||||
|
||||
**Solution:** Ensure you're providing a complete, valid YouTube URL.
|
||||
|
||||
### Video Not Accessible
|
||||
|
||||
```
|
||||
❌ Unable to access video
|
||||
|
||||
Possible reasons:
|
||||
1. Video is private or unlisted
|
||||
2. Video has been removed
|
||||
3. Invalid video ID
|
||||
```
|
||||
|
||||
**Solution:** Verify the URL and ensure the video is public.
|
||||
|
||||
---
|
||||
|
||||
## FAQ
|
||||
|
||||
### Q: How long does it take to generate a summary?
|
||||
|
||||
**A:** Depends on video length:
|
||||
- Short videos (5-10 min): 30-60 seconds
|
||||
- Medium videos (20-40 min): 1-2 minutes
|
||||
- Long videos (60+ min): 2-5 minutes
|
||||
|
||||
### Q: Can I summarize videos in languages other than English/Portuguese?
|
||||
|
||||
**A:** Yes! The skill attempts to extract transcripts in the video's original language. If unavailable, it falls back to English.
|
||||
|
||||
### Q: Will this work with YouTube Music videos?
|
||||
|
||||
**A:** Only if the music video has captions/transcripts enabled. Most music videos don't have transcripts.
|
||||
|
||||
### Q: Can I customize the summary length?
|
||||
|
||||
**A:** The skill prioritizes completeness by design (verbose summaries). If you need shorter summaries, you can ask the AI to condense the output afterward.
|
||||
|
||||
### Q: Does this download the video?
|
||||
|
||||
**A:** No. Only the text transcript is extracted via YouTube's API. No video files are downloaded.
|
||||
|
||||
### Q: Can I save the summary to a file?
|
||||
|
||||
**A:** Yes! After the summary is generated, the skill offers flexible save options:
|
||||
- **Summary only** - Markdown file with structured summary
|
||||
- **Summary + transcript** - Markdown file with summary and raw transcript appended
|
||||
- **Transcript only** - Plain text file with raw transcript (NEW in v1.2.0)
|
||||
- **Display only** - No files saved, summary shown in terminal
|
||||
|
||||
Files are saved as `resumo-{VIDEO_ID}-{YYYY-MM-DD}.md` (summary) or `transcript-{VIDEO_ID}-{YYYY-MM-DD}.txt` (transcript-only).
|
||||
|
||||
### Q: When should I save just the transcript?
|
||||
|
||||
**A:** Use the transcript-only option when you:
|
||||
- Need raw content for further analysis
|
||||
- Want to process the text with other tools
|
||||
- Prefer to create your own summary later
|
||||
- Need the transcript for documentation or archival purposes
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
### Global Installation (Recommended)
|
||||
|
||||
Install the skill globally to use it across all projects:
|
||||
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone https://github.com/ericgandrade/cli-ai-skills.git
|
||||
cd cli-ai-skills
|
||||
|
||||
# Run the install script
|
||||
./scripts/install-skills.sh $(pwd)
|
||||
```
|
||||
|
||||
This creates symlinks in:
|
||||
- `~/.copilot/skills/youtube-summarizer/` (GitHub Copilot CLI)
|
||||
- `~/.claude/skills/youtube-summarizer/` (Claude Code)
|
||||
|
||||
### Repository Installation
|
||||
|
||||
Add to a specific project:
|
||||
|
||||
```bash
|
||||
# Copy skill to your project
|
||||
cp -r cli-ai-skills/.github/skills/youtube-summarizer .github/skills/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Contributing
|
||||
|
||||
Found a bug or have a feature request? Contributions welcome!
|
||||
|
||||
1. Fork the repository
|
||||
2. Create a feature branch: `git checkout -b feature/youtube-enhancement`
|
||||
3. Commit changes: `git commit -m "feat(youtube-summarizer): add feature X"`
|
||||
4. Push and create a Pull Request
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
MIT License - see [LICENSE](../../../LICENSE) for details.
|
||||
|
||||
---
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
- **[youtube-transcript-api](https://github.com/jdepoix/youtube-transcript-api)** by [Julien Depoix](https://github.com/jdepoix) - Python library for extracting YouTube video transcripts
|
||||
- **Anthropic STAR/R-I-S-E frameworks** - For structured summarization
|
||||
|
||||
---
|
||||
|
||||
**Built with ❤️ by Eric Andrade**
|
||||
|
||||
*Version 1.1.0 | Last updated: February 2026*
|
||||
411
skills/youtube-summarizer/SKILL.md
Normal file
411
skills/youtube-summarizer/SKILL.md
Normal file
@@ -0,0 +1,411 @@
|
||||
---
|
||||
name: youtube-summarizer
|
||||
description: "Extract transcripts from YouTube videos and generate comprehensive, detailed summaries using intelligent analysis frameworks"
|
||||
version: 1.2.1
|
||||
author: Eric Andrade
|
||||
created: 2025-02-01
|
||||
updated: 2026-02-04
|
||||
platforms: [github-copilot-cli, claude-code, codex]
|
||||
category: content
|
||||
tags: [video, summarization, transcription, youtube, content-analysis]
|
||||
risk: safe
|
||||
---
|
||||
|
||||
# youtube-summarizer
|
||||
|
||||
## Purpose
|
||||
|
||||
This skill extracts transcripts from YouTube videos and generates comprehensive, verbose summaries using the STAR + R-I-S-E framework. It validates video availability, extracts transcripts using the `youtube-transcript-api` Python library, and produces detailed documentation capturing all insights, arguments, and key points.
|
||||
|
||||
The skill is designed for users who need thorough content analysis and reference documentation from educational videos, lectures, tutorials, or informational content.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
This skill should be used when:
|
||||
|
||||
- User provides a YouTube video URL and wants a detailed summary
|
||||
- User needs to document video content for reference without rewatching
|
||||
- User wants to extract insights, key points, and arguments from educational content
|
||||
- User needs transcripts from YouTube videos for analysis
|
||||
- User asks to "summarize", "resume", or "extract content" from YouTube videos
|
||||
- User wants comprehensive documentation prioritizing completeness over brevity
|
||||
|
||||
## Step 0: Discovery & Setup
|
||||
|
||||
Before processing videos, validate the environment and dependencies:
|
||||
|
||||
```bash
|
||||
# Check if youtube-transcript-api is installed
|
||||
python3 -c "import youtube_transcript_api" 2>/dev/null
|
||||
if [ $? -ne 0 ]; then
|
||||
echo "⚠️ youtube-transcript-api not found"
|
||||
# Offer to install
|
||||
fi
|
||||
|
||||
# Check Python availability
|
||||
if ! command -v python3 &>/dev/null; then
|
||||
echo "❌ Python 3 is required but not installed"
|
||||
exit 1
|
||||
fi
|
||||
```
|
||||
|
||||
**Ask the user if dependency is missing:**
|
||||
|
||||
```
|
||||
youtube-transcript-api is required but not installed.
|
||||
|
||||
Would you like to install it now?
|
||||
- [ ] Yes - Install with pip (pip install youtube-transcript-api)
|
||||
- [ ] No - I'll install it manually
|
||||
```
|
||||
|
||||
**If user selects "Yes":**
|
||||
|
||||
```bash
|
||||
pip install youtube-transcript-api
|
||||
```
|
||||
|
||||
**Verify installation:**
|
||||
|
||||
```bash
|
||||
python3 -c "import youtube_transcript_api; print('✅ youtube-transcript-api installed successfully')"
|
||||
```
|
||||
|
||||
## Main Workflow
|
||||
|
||||
### Progress Tracking Guidelines
|
||||
|
||||
Throughout the workflow, display a visual progress gauge before each step to keep the user informed. The gauge format is:
|
||||
|
||||
```bash
|
||||
echo "[████░░░░░░░░░░░░░░░░] 20% - Step 1/5: Validating URL"
|
||||
```
|
||||
|
||||
**Format specifications:**
|
||||
- 20 characters wide (use █ for filled, ░ for empty)
|
||||
- Percentage increments: Step 1=20%, Step 2=40%, Step 3=60%, Step 4=80%, Step 5=100%
|
||||
- Step counter showing current/total (e.g., "Step 3/5")
|
||||
- Brief description of current phase
|
||||
|
||||
**Display the initial status box before Step 1:**
|
||||
|
||||
```
|
||||
╔══════════════════════════════════════════════════════════════╗
|
||||
║ 📹 YOUTUBE SUMMARIZER - Processing Video ║
|
||||
╠══════════════════════════════════════════════════════════════╣
|
||||
║ → Step 1: Validating URL [IN PROGRESS] ║
|
||||
║ ○ Step 2: Checking Availability ║
|
||||
║ ○ Step 3: Extracting Transcript ║
|
||||
║ ○ Step 4: Generating Summary ║
|
||||
║ ○ Step 5: Formatting Output ║
|
||||
╠══════════════════════════════════════════════════════════════╣
|
||||
║ Progress: ██████░░░░░░░░░░░░░░░░░░░░░░░░ 20% ║
|
||||
╚══════════════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
### Step 1: Validate YouTube URL
|
||||
|
||||
**Objective:** Extract video ID and validate URL format.
|
||||
|
||||
**Supported URL Formats:**
|
||||
- `https://www.youtube.com/watch?v=VIDEO_ID`
|
||||
- `https://youtube.com/watch?v=VIDEO_ID`
|
||||
- `https://youtu.be/VIDEO_ID`
|
||||
- `https://m.youtube.com/watch?v=VIDEO_ID`
|
||||
|
||||
**Actions:**
|
||||
|
||||
```bash
|
||||
# Extract video ID using regex or URL parsing
|
||||
URL="$USER_PROVIDED_URL"
|
||||
|
||||
# Pattern 1: youtube.com/watch?v=VIDEO_ID
|
||||
if echo "$URL" | grep -qE 'youtube\.com/watch\?v='; then
|
||||
VIDEO_ID=$(echo "$URL" | sed -E 's/.*[?&]v=([^&]+).*/\1/')
|
||||
# Pattern 2: youtu.be/VIDEO_ID
|
||||
elif echo "$URL" | grep -qE 'youtu\.be/'; then
|
||||
VIDEO_ID=$(echo "$URL" | sed -E 's/.*youtu\.be\/([^?]+).*/\1/')
|
||||
else
|
||||
echo "❌ Invalid YouTube URL format"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "📹 Video ID extracted: $VIDEO_ID"
|
||||
```
|
||||
|
||||
**If URL is invalid:**
|
||||
|
||||
```
|
||||
❌ Invalid YouTube URL
|
||||
|
||||
Please provide a valid YouTube URL in one of these formats:
|
||||
- https://www.youtube.com/watch?v=VIDEO_ID
|
||||
- https://youtu.be/VIDEO_ID
|
||||
|
||||
Example: https://www.youtube.com/watch?v=dQw4w9WgXcQ
|
||||
```
|
||||
|
||||
### Step 2: Check Video & Transcript Availability
|
||||
|
||||
**Progress:**
|
||||
```bash
|
||||
echo "[████████░░░░░░░░░░░░] 40% - Step 2/5: Checking Availability"
|
||||
```
|
||||
|
||||
**Objective:** Verify video exists and transcript is accessible.
|
||||
|
||||
**Actions:**
|
||||
|
||||
```python
|
||||
from youtube_transcript_api import YouTubeTranscriptApi, TranscriptsDisabled, NoTranscriptFound
|
||||
import sys
|
||||
|
||||
video_id = sys.argv[1]
|
||||
|
||||
try:
|
||||
# Get list of available transcripts
|
||||
transcript_list = YouTubeTranscriptApi.list_transcripts(video_id)
|
||||
|
||||
print(f"✅ Video accessible: {video_id}")
|
||||
print("📝 Available transcripts:")
|
||||
|
||||
for transcript in transcript_list:
|
||||
print(f" - {transcript.language} ({transcript.language_code})")
|
||||
if transcript.is_generated:
|
||||
print(" [Auto-generated]")
|
||||
|
||||
except TranscriptsDisabled:
|
||||
print(f"❌ Transcripts are disabled for video {video_id}")
|
||||
sys.exit(1)
|
||||
|
||||
except NoTranscriptFound:
|
||||
print(f"❌ No transcript found for video {video_id}")
|
||||
sys.exit(1)
|
||||
|
||||
except Exception as e:
|
||||
print(f"❌ Error accessing video: {e}")
|
||||
sys.exit(1)
|
||||
```
|
||||
|
||||
**Error Handling:**
|
||||
|
||||
| Error | Message | Action |
|
||||
|-------|---------|--------|
|
||||
| Video not found | "❌ Video does not exist or is private" | Ask user to verify URL |
|
||||
| Transcripts disabled | "❌ Transcripts are disabled for this video" | Cannot proceed |
|
||||
| No transcript available | "❌ No transcript found (not auto-generated or manually added)" | Cannot proceed |
|
||||
| Private/restricted video | "❌ Video is private or restricted" | Ask for public video |
|
||||
|
||||
### Step 3: Extract Transcript
|
||||
|
||||
**Progress:**
|
||||
```bash
|
||||
echo "[████████████░░░░░░░░] 60% - Step 3/5: Extracting Transcript"
|
||||
```
|
||||
|
||||
**Objective:** Retrieve transcript in preferred language.
|
||||
|
||||
**Actions:**
|
||||
|
||||
```python
|
||||
from youtube_transcript_api import YouTubeTranscriptApi
|
||||
|
||||
video_id = "VIDEO_ID"
|
||||
|
||||
try:
|
||||
# Try to get transcript in user's preferred language first
|
||||
# Fall back to English if not available
|
||||
transcript = YouTubeTranscriptApi.get_transcript(
|
||||
video_id,
|
||||
languages=['pt', 'en'] # Prefer Portuguese, fallback to English
|
||||
)
|
||||
|
||||
# Combine transcript segments into full text
|
||||
full_text = " ".join([entry['text'] for entry in transcript])
|
||||
|
||||
# Get video metadata
|
||||
from youtube_transcript_api import YouTubeTranscriptApi
|
||||
transcript_list = YouTubeTranscriptApi.list_transcripts(video_id)
|
||||
|
||||
print("✅ Transcript extracted successfully")
|
||||
print(f"📊 Transcript length: {len(full_text)} characters")
|
||||
|
||||
# Save to temporary file for processing
|
||||
with open(f"/tmp/transcript_{video_id}.txt", "w") as f:
|
||||
f.write(full_text)
|
||||
|
||||
except Exception as e:
|
||||
print(f"❌ Error extracting transcript: {e}")
|
||||
exit(1)
|
||||
```
|
||||
|
||||
**Transcript Processing:**
|
||||
|
||||
- Combine all transcript segments into coherent text
|
||||
- Preserve punctuation and formatting where available
|
||||
- Remove duplicate or overlapping segments (if auto-generated artifacts)
|
||||
- Store in temporary file for analysis
|
||||
|
||||
### Step 4: Generate Comprehensive Summary
|
||||
|
||||
**Progress:**
|
||||
```bash
|
||||
echo "[████████████████░░░░] 80% - Step 4/5: Generating Summary"
|
||||
```
|
||||
|
||||
**Objective:** Apply enhanced STAR + R-I-S-E prompt to create detailed summary.
|
||||
|
||||
**Prompt Applied:**
|
||||
|
||||
Use the enhanced prompt from Phase 2 (STAR + R-I-S-E framework) with the extracted transcript as input.
|
||||
|
||||
**Actions:**
|
||||
|
||||
1. Load the full transcript text
|
||||
2. Apply the comprehensive summarization prompt
|
||||
3. Use AI model (Claude/GPT) to generate structured summary
|
||||
4. Ensure output follows the defined structure:
|
||||
- Header with video metadata
|
||||
- Executive synthesis
|
||||
- Detailed section-by-section breakdown
|
||||
- Key insights and conclusions
|
||||
- Concepts and terminology
|
||||
- Resources and references
|
||||
|
||||
**Implementation:**
|
||||
|
||||
```bash
|
||||
# Use the transcript file as input to the AI prompt
|
||||
TRANSCRIPT_FILE="/tmp/transcript_${VIDEO_ID}.txt"
|
||||
|
||||
# The AI agent will:
|
||||
# 1. Read the transcript
|
||||
# 2. Apply the STAR + R-I-S-E summarization framework
|
||||
# 3. Generate comprehensive Markdown output
|
||||
# 4. Structure with headers, lists, and highlights
|
||||
|
||||
Read "$TRANSCRIPT_FILE" # Read transcript into context
|
||||
```
|
||||
|
||||
Then apply the full summarization prompt (from enhanced version in Phase 2).
|
||||
|
||||
### Step 5: Format and Present Output
|
||||
|
||||
**Progress:**
|
||||
```bash
|
||||
echo "[████████████████████] 100% - Step 5/5: Formatting Output"
|
||||
```
|
||||
|
||||
**Objective:** Deliver the summary in clean, well-structured Markdown.
|
||||
|
||||
**Output Structure:**
|
||||
|
||||
```markdown
|
||||
# [Video Title]
|
||||
|
||||
**Canal:** [Channel Name]
|
||||
**Duração:** [Duration]
|
||||
**URL:** [https://youtube.com/watch?v=VIDEO_ID]
|
||||
**Data de Publicação:** [Date if available]
|
||||
|
||||
|
||||
## 📝 Detailed Summary
|
||||
|
||||
### [Topic 1]
|
||||
|
||||
[Comprehensive explanation with examples, data, quotes...]
|
||||
|
||||
#### [Subtopic 1.1]
|
||||
|
||||
[Detailed breakdown...]
|
||||
|
||||
### [Topic 2]
|
||||
|
||||
[Continued detailed analysis...]
|
||||
|
||||
|
||||
## 📚 Concepts and Terminology
|
||||
|
||||
- **[Term 1]:** [Definition and context]
|
||||
- **[Term 2]:** [Definition and context]
|
||||
|
||||
|
||||
## 📌 Conclusion
|
||||
|
||||
[Final synthesis and takeaways]
|
||||
|
||||
|
||||
### **Example 2: Missing Dependency**
|
||||
|
||||
**User Input:**
|
||||
```
|
||||
claude> summarize this youtube video https://youtu.be/abc123
|
||||
```
|
||||
|
||||
**Skill Response:**
|
||||
|
||||
```
|
||||
⚠️ youtube-transcript-api not installed
|
||||
|
||||
This skill requires the Python library 'youtube-transcript-api'.
|
||||
|
||||
Would you like me to install it now?
|
||||
- [ ] Yes - Install with pip
|
||||
- [ ] No - I'll install manually
|
||||
```
|
||||
|
||||
**User selects "Yes":**
|
||||
|
||||
```bash
|
||||
$ pip install youtube-transcript-api
|
||||
Successfully installed youtube-transcript-api-0.6.1
|
||||
|
||||
✅ Installation complete! Proceeding with video summary...
|
||||
```
|
||||
|
||||
|
||||
### **Example 4: Invalid URL**
|
||||
|
||||
**User Input:**
|
||||
```
|
||||
claude> summarize youtube video www.youtube.com/some-video
|
||||
```
|
||||
|
||||
**Skill Response:**
|
||||
|
||||
```
|
||||
❌ Invalid YouTube URL format
|
||||
|
||||
Expected format examples:
|
||||
- https://www.youtube.com/watch?v=VIDEO_ID
|
||||
- https://youtu.be/VIDEO_ID
|
||||
|
||||
Please provide a valid YouTube video URL.
|
||||
```
|
||||
|
||||
|
||||
## 📊 Executive Summary
|
||||
|
||||
This video provides a comprehensive introduction to the fundamental concepts of Artificial Intelligence (AI), designed for beginners and professionals who want to understand the technical foundations and practical applications of modern AI. The instructor covers everything from basic definitions to machine learning algorithms, using practical examples and visualizations to facilitate understanding.
|
||||
|
||||
[... continued detailed summary ...]
|
||||
```
|
||||
|
||||
**Save Options:**
|
||||
|
||||
```
|
||||
What would you like to save?
|
||||
→ Summary + raw transcript
|
||||
|
||||
✅ File saved: resumo-exemplo123-2026-02-01.md (includes raw transcript)
|
||||
[████████████████████] 100% - ✓ Processing complete!
|
||||
```
|
||||
|
||||
|
||||
Welcome to this comprehensive tutorial on machine learning fundamentals. In today's video, we'll explore the core concepts that power modern AI systems...
|
||||
```
|
||||
|
||||
|
||||
**Version:** 1.2.0
|
||||
**Last Updated:** 2026-02-02
|
||||
**Maintained By:** Eric Andrade
|
||||
65
skills/youtube-summarizer/scripts/extract-transcript.py
Normal file
65
skills/youtube-summarizer/scripts/extract-transcript.py
Normal file
@@ -0,0 +1,65 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Extract YouTube video transcript
|
||||
Usage: ./extract-transcript.py VIDEO_ID [LANGUAGE_CODE]
|
||||
"""
|
||||
|
||||
import sys
|
||||
from youtube_transcript_api import YouTubeTranscriptApi, TranscriptsDisabled, NoTranscriptFound
|
||||
|
||||
def extract_transcript(video_id, language='en'):
|
||||
"""Extract transcript from YouTube video"""
|
||||
try:
|
||||
# Try to get transcript in specified language with fallback to English
|
||||
transcript = YouTubeTranscriptApi.get_transcript(
|
||||
video_id,
|
||||
languages=[language, 'en']
|
||||
)
|
||||
|
||||
# Combine all transcript segments
|
||||
full_text = " ".join([entry['text'] for entry in transcript])
|
||||
return full_text
|
||||
|
||||
except TranscriptsDisabled:
|
||||
print(f"❌ Transcripts are disabled for video {video_id}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
except NoTranscriptFound:
|
||||
print(f"❌ No transcript found for video {video_id}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
except Exception as e:
|
||||
print(f"❌ Error: {e}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
|
||||
def list_available_transcripts(video_id):
|
||||
"""List all available transcripts for a video"""
|
||||
try:
|
||||
transcript_list = YouTubeTranscriptApi.list_transcripts(video_id)
|
||||
print(f"✅ Available transcripts for {video_id}:")
|
||||
|
||||
for transcript in transcript_list:
|
||||
generated = "[Auto-generated]" if transcript.is_generated else "[Manual]"
|
||||
translatable = "(translatable)" if transcript.is_translatable else ""
|
||||
print(f" - {transcript.language} ({transcript.language_code}) {generated} {translatable}")
|
||||
|
||||
return True
|
||||
except Exception as e:
|
||||
print(f"❌ Error listing transcripts: {e}", file=sys.stderr)
|
||||
return False
|
||||
|
||||
if __name__ == "__main__":
|
||||
if len(sys.argv) < 2:
|
||||
print("Usage: ./extract-transcript.py VIDEO_ID [LANGUAGE_CODE]")
|
||||
print(" ./extract-transcript.py VIDEO_ID --list (list available transcripts)")
|
||||
sys.exit(1)
|
||||
|
||||
video_id = sys.argv[1]
|
||||
|
||||
# Check if user wants to list available transcripts
|
||||
if len(sys.argv) > 2 and sys.argv[2] == "--list":
|
||||
success = list_available_transcripts(video_id)
|
||||
sys.exit(0 if success else 1)
|
||||
|
||||
# Extract transcript
|
||||
language = sys.argv[2] if len(sys.argv) > 2 else 'en'
|
||||
transcript = extract_transcript(video_id, language)
|
||||
print(transcript)
|
||||
28
skills/youtube-summarizer/scripts/install-dependencies.sh
Normal file
28
skills/youtube-summarizer/scripts/install-dependencies.sh
Normal file
@@ -0,0 +1,28 @@
|
||||
#!/usr/bin/env bash
|
||||
# Install youtube-transcript-api dependency
|
||||
|
||||
set -e
|
||||
|
||||
echo "📦 Installing youtube-transcript-api..."
|
||||
|
||||
if command -v pip3 &>/dev/null; then
|
||||
pip3 install youtube-transcript-api
|
||||
echo "✅ Installation complete using pip3!"
|
||||
elif command -v pip &>/dev/null; then
|
||||
pip install youtube-transcript-api
|
||||
echo "✅ Installation complete using pip!"
|
||||
else
|
||||
echo "❌ Error: pip not found"
|
||||
echo "Please install Python pip first:"
|
||||
echo " macOS: brew install python3"
|
||||
echo " Ubuntu/Debian: sudo apt install python3-pip"
|
||||
echo " Fedora: sudo dnf install python3-pip"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Verify installation
|
||||
python3 -c "import youtube_transcript_api; print('✅ youtube-transcript-api is ready to use!')" 2>/dev/null || {
|
||||
echo "⚠️ Installation completed but verification failed"
|
||||
echo "Try running: python3 -c 'import youtube_transcript_api'"
|
||||
exit 1
|
||||
}
|
||||
@@ -197,6 +197,24 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "angular",
|
||||
"path": "skills/angular",
|
||||
"category": "uncategorized",
|
||||
"name": "angular",
|
||||
"description": "Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.",
|
||||
"risk": "safe",
|
||||
"source": "self"
|
||||
},
|
||||
{
|
||||
"id": "angular-best-practices",
|
||||
"path": "skills/angular-best-practices",
|
||||
"category": "uncategorized",
|
||||
"name": "angular-best-practices",
|
||||
"description": "Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.",
|
||||
"risk": "safe",
|
||||
"source": "self"
|
||||
},
|
||||
{
|
||||
"id": "angular-migration",
|
||||
"path": "skills/angular-migration",
|
||||
@@ -206,6 +224,24 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "angular-state-management",
|
||||
"path": "skills/angular-state-management",
|
||||
"category": "uncategorized",
|
||||
"name": "angular-state-management",
|
||||
"description": "Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.",
|
||||
"risk": "safe",
|
||||
"source": "self"
|
||||
},
|
||||
{
|
||||
"id": "angular-ui-patterns",
|
||||
"path": "skills/angular-ui-patterns",
|
||||
"category": "uncategorized",
|
||||
"name": "angular-ui-patterns",
|
||||
"description": "Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.",
|
||||
"risk": "safe",
|
||||
"source": "self"
|
||||
},
|
||||
{
|
||||
"id": "anti-reversing-techniques",
|
||||
"path": "skills/anti-reversing-techniques",
|
||||
@@ -368,6 +404,15 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "audio-transcriber",
|
||||
"path": "skills/audio-transcriber",
|
||||
"category": "uncategorized",
|
||||
"name": "audio-transcriber",
|
||||
"description": "Transform audio recordings into professional Markdown documentation with intelligent summaries using LLM integration",
|
||||
"risk": "safe",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "auth-implementation-patterns",
|
||||
"path": "skills/auth-implementation-patterns",
|
||||
@@ -1106,6 +1151,15 @@
|
||||
"risk": "unknown",
|
||||
"source": "vibeship-spawner-skills (Apache 2.0)"
|
||||
},
|
||||
{
|
||||
"id": "computer-vision-expert",
|
||||
"path": "skills/computer-vision-expert",
|
||||
"category": "uncategorized",
|
||||
"name": "computer-vision-expert",
|
||||
"description": "SOTA Computer Vision Expert (2026). Specialized in YOLO26, Segment Anything 3 (SAM 3), Vision Language Models, and real-time spatial analysis.",
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "concise-planning",
|
||||
"path": "skills/concise-planning",
|
||||
@@ -2249,15 +2303,6 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "frontend-slides",
|
||||
"path": "skills/frontend-slides",
|
||||
"category": "uncategorized",
|
||||
"name": "Frontend Slides",
|
||||
"description": "Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. This skill helps non-designers discover their preferred aesthetic through visual exploration (\"show, don't tell\"), then generates production-quality slide dec",
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "frontend-design",
|
||||
"path": "skills/frontend-design",
|
||||
@@ -2321,6 +2366,15 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "frontend-slides",
|
||||
"path": "skills/frontend-slides",
|
||||
"category": "uncategorized",
|
||||
"name": "frontend-slides",
|
||||
"description": "Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.",
|
||||
"risk": "safe",
|
||||
"source": "https://github.com/zarazhangrui/frontend-slides"
|
||||
},
|
||||
{
|
||||
"id": "full-stack-orchestration-full-stack-feature",
|
||||
"path": "skills/full-stack-orchestration-full-stack-feature",
|
||||
@@ -3536,6 +3590,15 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "oss-hunter",
|
||||
"path": "skills/oss-hunter",
|
||||
"category": "uncategorized",
|
||||
"name": "oss-hunter",
|
||||
"description": "Automatically hunt for high-impact OSS contribution opportunities in trending repositories.",
|
||||
"risk": "safe",
|
||||
"source": "https://github.com/jackjin1997/ClawForge"
|
||||
},
|
||||
{
|
||||
"id": "page-cro",
|
||||
"path": "skills/page-cro",
|
||||
@@ -3865,8 +3928,8 @@
|
||||
"path": "skills/prompt-engineer",
|
||||
"category": "uncategorized",
|
||||
"name": "prompt-engineer",
|
||||
"description": "Expert prompt engineer specializing in advanced prompting techniques, LLM optimization, and AI system design. Masters chain-of-thought, constitutional AI, and production prompt strategies. Use when building AI features, improving agent performance, or crafting system prompts.",
|
||||
"risk": "unknown",
|
||||
"description": "Transforms user prompts into optimized prompts using frameworks (RTF, RISEN, Chain of Thought, RODES, Chain of Density, RACE, RISE, STAR, SOAP, CLEAR, GROW)",
|
||||
"risk": "safe",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
@@ -3977,6 +4040,15 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "radix-ui-design-system",
|
||||
"path": "skills/radix-ui-design-system",
|
||||
"category": "uncategorized",
|
||||
"name": "radix-ui-design-system",
|
||||
"description": "Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.",
|
||||
"risk": "safe",
|
||||
"source": "self"
|
||||
},
|
||||
{
|
||||
"id": "rag-engineer",
|
||||
"path": "skills/rag-engineer",
|
||||
@@ -4044,10 +4116,10 @@
|
||||
"id": "readme",
|
||||
"path": "skills/readme",
|
||||
"category": "uncategorized",
|
||||
"name": "Readme",
|
||||
"description": "You are an expert technical writer creating comprehensive project documentation. Your goal is to write a README.md that is absurdly thorough\u2014the kind of documentation you wish every project had.",
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
"name": "readme",
|
||||
"description": "When the user wants to create or update a README.md file for a project. Also use when the user says 'write readme,' 'create readme,' 'document this project,' 'project documentation,' or asks for help with README.md. This skill creates absurdly thorough documentation covering local setup, architecture, and deployment.",
|
||||
"risk": "safe",
|
||||
"source": "https://github.com/Shpigford/skills/tree/main/readme"
|
||||
},
|
||||
{
|
||||
"id": "receiving-code-review",
|
||||
@@ -4585,8 +4657,8 @@
|
||||
"path": "skills/skill-creator",
|
||||
"category": "uncategorized",
|
||||
"name": "skill-creator",
|
||||
"description": "Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.",
|
||||
"risk": "unknown",
|
||||
"description": "This skill should be used when the user asks to create a new skill, build a skill, make a custom skill, develop a CLI skill, or wants to extend the CLI with new capabilities. Automates the entire skill creation workflow from brainstorming to installation.",
|
||||
"risk": "safe",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
@@ -4787,6 +4859,15 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "stitch-ui-design",
|
||||
"path": "skills/stitch-ui-design",
|
||||
"category": "uncategorized",
|
||||
"name": "stitch-ui-design",
|
||||
"description": "Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows for Stitch by Google.",
|
||||
"risk": "safe",
|
||||
"source": "self"
|
||||
},
|
||||
{
|
||||
"id": "stride-analysis-patterns",
|
||||
"path": "skills/stride-analysis-patterns",
|
||||
@@ -5358,10 +5439,10 @@
|
||||
"id": "vercel-deploy-claimable",
|
||||
"path": "skills/vercel-deploy-claimable",
|
||||
"category": "uncategorized",
|
||||
"name": "Vercel Deploy Claimable",
|
||||
"description": "Deploy any project to Vercel instantly. No authentication required.",
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
"name": "vercel-deploy-claimable",
|
||||
"description": "Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as 'Deploy my app', 'Deploy this to production', 'Create a preview deployment', 'Deploy and give me the link', or 'Push this live'. No authentication required - returns preview URL and claimable deployment link.",
|
||||
"risk": "safe",
|
||||
"source": "https://github.com/vercel-labs/agent-skills/tree/main/skills/claude.ai/vercel-deploy-claimable"
|
||||
},
|
||||
{
|
||||
"id": "vercel-deployment",
|
||||
@@ -5606,6 +5687,15 @@
|
||||
"risk": "unknown",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "youtube-summarizer",
|
||||
"path": "skills/youtube-summarizer",
|
||||
"category": "uncategorized",
|
||||
"name": "youtube-summarizer",
|
||||
"description": "Extract transcripts from YouTube videos and generate comprehensive, detailed summaries using intelligent analysis frameworks",
|
||||
"risk": "safe",
|
||||
"source": "unknown"
|
||||
},
|
||||
{
|
||||
"id": "zapier-make-patterns",
|
||||
"path": "skills/zapier-make-patterns",
|
||||
|
||||
Reference in New Issue
Block a user