\n\nLinear · editorial #fff / #0f0f14 / #5e6ad2 \n\nOllama · terminal \n \n \n\n\n# Awesome Claude Skills\n\n[](https://awesome.re)\n[]()\n[](CONTRIBUTING.md)\n\n> A curated list of awesome Claude Skills, resources, and tools for customizing Claude AI workflows\n\n**Claude Skills** teach Claude how to **perform tasks in a repeatable way**\n\nThey are specialized folders containing instructions, scripts, and resources that Claude dynamically discovers and loads when relevant to tasks.\n\n### How Skills Work\n\nSkills employ a **progressive disclosure architecture** for efficiency:\n\n1. **Metadata loading** (~100 tokens): Claude scans available Skills to identify relevant matches\n2. **Full instructions** (<5k tokens): Load when Claude determines the Skill applies\n3. **Bundled resources**: Files and executable code load only as needed\n\nThis design allows multiple Skills to remain available without overwhelming Claude's context window.\n\n## 🚀 Getting Started\n\n### Claude.ai Web Interface\n\n1. Go to [Settings > Capabilities](https://claude.ai/settings/capabilities)\n2. Enable Skills toggle\n3. Browse available skills or upload custom skills\n4. **For Team/Enterprise**: Admin must enable Skills organization-wide first\n\n### Claude Code CLI\n\n```bash\n# Install skills from marketplace\n/plugin marketplace add anthropics/skills\n\n# Or install from local directory\n/plugin add /path/to/skill-directory\n```\n\n### Claude API\n\nSkills are accessible via the `/v1/skills` API endpoint. See the [Skills API documentation](https://platform.claude.com/docs/en/api/beta/skills) for detailed integration examples.\n\n```python\nimport anthropic\n\nclient = anthropic.Client(api_key=\"your-api-key\")\n# See API docs for full implementation details\n```\n\n## 🎯 Official Skills\n\n### Document Skills\n\nSkills for working with complex file formats:\n\n- **[docx](https://github.com/anthropics/skills/tree/main/skills/docx)** - Create, edit, and analyze Word documents with support for tracked changes, comments, formatting preservation, and text extraction\n- **[pdf](https://github.com/anthropics/skills/tree/main/skills/pdf)** - Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms\n- **[pptx](https://github.com/anthropics/skills/tree/main/skills/pptx)** - Create, edit, and analyze PowerPoint presentations with support for layouts, templates, charts, and automated slide generation\n- **[xlsx](https://github.com/anthropics/skills/tree/main/skills/xlsx)** - Create, edit, and analyze Excel spreadsheets with support for formulas, formatting, data analysis, and visualization\n\n### Design & Creative\n\n- **[algorithmic-art](https://github.com/anthropics/skills/tree/main/skills/algorithmic-art)** - Create generative art using p5.js with seeded randomness, flow fields, and particle systems\n- **[canvas-design](https://github.com/anthropics/skills/tree/main/skills/canvas-design)** - Design beautiful visual art in .png and .pdf formats using design philosophies\n- **[slack-gif-creator](https://github.com/anthropics/skills/tree/main/skills/slack-gif-creator)** - Create animated GIFs optimized for Slack's size constraints\n\n### Development\n\n- **[frontend-design](https://github.com/anthropics/skills/blob/main/skills/frontend-design)** - Instructs Claude to avoid \"AI slop\" or generic aesthetics and to make bold design decisions. Works very well for React & Tailwind.\n- **[web-artifacts-builder](https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder)** - Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui components\n- **[mcp-builder](https://github.com/anthropics/skills/tree/main","createdAt":"2026-09-25T10:52:07.766Z","updatedAt":"2026-09-25T10:52:07.766Z"},{"id":"cmugud4s300wbqu06ircpvef9","slug":"ikaijua-awesome-aitools","name":"Awesome-AITools","description":"Collection of AI-related utilities. Welcome to submit pull requests /收藏AI相关的实用工具，欢迎提交pull requests","authorId":"gh:ikaijua","authorName":"ikaijua","version":"0.1.0","category":"MCP","securityLevel":"Community","downloadsCount":0,"githubStars":6194,"pricePerCall":0,"manifest":{"name":"Awesome-AITools","tools":[],"category":"MCP","entrypoint":{"args":["-y","github:ikaijua/Awesome-AITools"],"type":"mcp-stdio","command":"npx"},"description":"Collection of AI-related utilities. Welcome to submit pull requests /收藏AI相关的实用工具，欢迎提交pull requests","permissions":["shell","network"],"schemaVersion":1},"repoUrl":"https://github.com/ikaijua/Awesome-AITools","tags":["agent-skills","ai","artificial-intelligence","awesome","awesome-list","awesome-lists","chatgpt","claude","claude-skills","claudecode","deepseek","gemini"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"Awesome-AITools","audit":{"files":[],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T10:52:20.205Z","lockfiles":[]},"forks":796,"owner":"ikaijua","stars":6194,"topics":["agent-skills","ai","artificial-intelligence","awesome","awesome-list","awesome-lists","chatgpt","claude","claude-skills","claudecode","deepseek","gemini","gpt","gpt-image-2","llm","machinelearning","nanobanana","seedance","tools"],"license":null,"fullName":"ikaijua/Awesome-AITools","homepage":null,"language":"Python","pushedAt":"2026-09-25T08:15:06Z","avatarUrl":"https://avatars.githubusercontent.com/u/126046795?v=4","crawledAt":"2026-09-25T10:52:19.985Z","openIssues":37,"manifestFile":"README.md","manifestPath":"README.md","defaultBranch":"main"},"readme":"\n
Awesome AI Tools \n
\n
\n
\n
\n
\n
\n A huge thank you to our sponsors for their generous support!\n
\n\n\nClick to collapse \n\n \n \n \n \n \n Xuanshu API is a next-generation AI model routing gateway for enterprises, technical teams, and individual developers. It provides one-stop API access to world-class top models (Claude, GPT, Grok, etc.) with enterprise-grade stability. Recharge and enjoy 20% off, models starting from 20% of the original price, $5 free upon registration, invoice support for enterprises. Click this link to register and get an extra $5 credit.】\n \n \n \n \n \n
\n \n\n## All Categories\n- [All Categories](#all-categories)\n - [AI Assistants & Proprietary Models](#ai-assistants--proprietary-models)\n - [Open Source LLMs](#open-source-llms)\n - [LLM Leaderboard](#llm-leaderboard)\n - [AI Agent](#ai-agent)\n - [Agent Skills](#agent-skills)\n - [AI News & Information](#ai-news--information)\n - [AI Coding](#ai-coding)\n - [General LLM Applications](#general-llm-applications)\n - [Office Collaboration CLI/MCP](#office-collaboration-climcp)\n - [AI Finance & Quant Investment](#ai-finance--quant-investment)\n - [AI Image Creation and UI Design](#ai-image-creation-and-ui-design)\n - [Video Creation](#video-creation)\n - [AI Infrastructure Platform](#ai-infrastructure-platform)\n - [GPU Programming](#gpu-programming)\n - [LLM Prompts](#llm-prompts)\n - [LLM training platform](#llm-training-platform)\n - [LLM Inference & Deployment](#llm-inference--deployment)\n - [Writing](#writing)\n - [Translation](#translation)\n - [Speech Recognition](#speech-recognition)\n - [Text To Speech](#text-to-speech)\n - [Music Recognition](#music-recognition)\n - [Voice Processing](#voice-processing)\n - [AI generated music or sound effects](#ai-generated-music-or-sound-effects)\n - [Speech translation](#speech-translation)\n - [Video Content Summary](#video-content-summary)\n - [Academic research](#academic-research)\n - [OCR](#ocr)\n - [AI Detection](#ai-detection)\n - ","createdAt":"2026-09-25T10:52:20.212Z","updatedAt":"2026-09-25T10:52:20.212Z"},{"id":"cmugucjhs003kqu06p59dyw8w","slug":"voltagent-awesome-agent-skills-awesome-agent-skills","name":"Awesome Agent Skills","description":"A curated collection of 1000+ agent skills from official dev teams and the community, compatible with Claude Code, Codex, Gemini CLI, Cursor, and more.","authorId":"gh:voltagent","authorName":"VoltAgent","version":"0.1.0","category":"MCP","securityLevel":"Community","downloadsCount":0,"githubStars":34835,"pricePerCall":0,"manifest":{"name":"Awesome Agent Skills","tools":[],"category":"MCP","entrypoint":{"args":["-y","skills"],"type":"mcp-stdio","command":"npx"},"description":"A curated collection of 1000+ agent skills from official dev teams and the community, compatible with Claude Code, Codex, Gemini CLI, Cursor, and more.","permissions":["shell","network"],"schemaVersion":1},"repoUrl":"https://github.com/VoltAgent/awesome-agent-skills","tags":["agent-skills","ai-agents","awesome","awesome-list","claude-code","claude-code-skills","claude-skills","codex-skills","cursor-skills","gemini-skills","opencode-skills","skills"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"awesome-agent-skills","audit":{"files":[],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T10:51:52.615Z","lockfiles":[]},"forks":3717,"owner":"VoltAgent","stars":34835,"topics":["agent-skills","ai-agents","awesome","awesome-list","claude-code","claude-code-skills","claude-skills","codex-skills","cursor-skills","gemini-skills","opencode-skills","skills"],"license":"MIT","fullName":"VoltAgent/awesome-agent-skills","homepage":"https://officialskills.sh/","language":null,"pushedAt":"2026-09-23T07:18:28Z","avatarUrl":"https://avatars.githubusercontent.com/u/201282378?v=4","crawledAt":"2026-09-25T10:51:52.410Z","openIssues":39,"manifestFile":"README.md","manifestPath":"README.md","defaultBranch":"main"},"readme":"\n\n \n\n\n\n A collection of official Agent Skills from leading development teams and the community.\n \n
\n\n\n\n[](https://awesome.re)\n\n\n[](https://s.voltagent.dev/discord)\n\n\n
\n\n\n\n# Awesome Agent Skills\n\nUnlike many bulk-generated skill repositories, this collection focuses on real-world Agent Skills created and used by actual engineering teams, not mass AI‑generated stuff.\n\n\nCompatible with Claude Code, Codex, Antigravity, Gemini CLI, Cursor, GitHub Copilot, OpenCode, Windsurf, and more. See the table below for paths and documentation.\n\nThe most contributed Agent Skills repository, built and maintained together with the community.\n\n\n## 💛 Sponsors\n\n| | |\n| :-: | :-- |\n| \n\n
\n\n
English · 简体中文
\n\n
\n
\n\n
=10.0.0, imageio>=2.31.0, imageio-ffmpeg>=0.4.9, numpy>=1.24.0","severity":"medium"}],"packages":4,"auditedAt":"2026-09-25T11:52:30.068Z","lockfiles":[]},"forks":313,"owner":"Prat011","stars":1761,"topics":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms","openai","opencode","qwen","qwen-coder","skills"],"license":"Complete terms in LICENSE.txt","fullName":"Prat011/awesome-llm-skills","homepage":null,"language":"Python","pushedAt":"2026-07-14T09:53:56Z","avatarUrl":"https://avatars.githubusercontent.com/u/67639393?v=4","crawledAt":"2026-09-25T11:52:22.319Z","openIssues":170,"manifestFile":"SKILL.md","manifestPath":"canvas-design/SKILL.md","defaultBranch":"master"},"readme":"These are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files.\n\nComplete this in two steps:\n1. Design Philosophy Creation (.md file)\n2. Express by creating it on a canvas (.pdf file or .png file)\n\nFirst, undertake this task:\n\n## DESIGN PHILOSOPHY CREATION\n\nTo begin, create a VISUAL PHILOSOPHY (not layouts or templates) that will be interpreted through:\n- Form, space, color, composition\n- Images, graphics, shapes, patterns\n- Minimal text as visual accent\n\n### THE CRITICAL UNDERSTANDING\n- What is received: Some subtle input or instructions by the user that should be taken into account, but used as a foundation; it should not constrain creative freedom.\n- What is created: A design philosophy/aesthetic movement.\n- What happens next: Then, the same version receives the philosophy and EXPRESSES IT VISUALLY - creating artifacts that are 90% visual design, 10% essential text.\n\nConsider this approach:\n- Write a manifesto for an art movement\n- The next phase involves making the artwork\n\nThe philosophy must emphasize: Visual expression. Spatial communication. Artistic interpretation. Minimal words.\n\n### HOW TO GENERATE A VISUAL PHILOSOPHY\n\n**Name the movement** (1-2 words): \"Brutalist Joy\" / \"Chromatic Silence\" / \"Metabolist Dreams\"\n\n**Articulate the philosophy** (4-6 paragraphs - concise but complete):\n\nTo capture the VISUAL essence, express how the philosophy manifests through:\n- Space and form\n- Color and material\n- Scale and rhythm\n- Composition and balance\n- Visual hierarchy\n\n**CRITICAL GUIDELINES:**\n- **Avoid redundancy**: Each design aspect should be mentioned once. Avoid repeating points about color theory, spatial relationships, or typographic principles unless adding new depth.\n- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final work should appear as though it took countless hours to create, was labored over with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like \"meticulously crafted,\" \"the product of deep expertise,\" \"painstaking attention,\" \"master-level execution.\"\n- **Leave creative space**: Remain specific about the aesthetic direction, but concise enough that the next Claude has room to make interpretive choices also at a extremely high level of craftmanship.\n\nThe philosophy must guide the next version to express ideas VISUALLY, not through text. Information lives in design, not paragraphs.\n\n### PHILOSOPHY EXAMPLES\n\n**\"Concrete Poetry\"**\nPhilosophy: Communication through monumental form and bold geometry.\nVisual expression: Massive color blocks, sculptural typography (huge single words, tiny labels), Brutalist spatial divisions, Polish poster energy meets Le Corbusier. Ideas expressed through visual weight and spatial tension, not explanation. Text as rare, powerful gesture - never paragraphs, only essential words integrated into the visual architecture. Every element placed with the precision of a master craftsman.\n\n**\"Chromatic Language\"**\nPhilosophy: Color as the primary information system.\nVisual expression: Geometric precision where color zones create meaning. Typography minimal - small sans-serif labels letting chromatic fields communicate. Think Josef Albers' interaction meets data visualization. Information encoded spatially and chromatically. Words only to anchor what color already shows. The result of painstaking chromatic calibration.\n\n**\"Analog Meditation\"**\nPhilosophy: Quiet visual contemplation through texture and breathing room.\nVisual expression: Paper grain, ink bleeds, vast negative space. Photography and illustration dominate. Typography whispered (small, restrained, serving the visual). Japanese photobook aesthetic. Images breathe across pages. Text appears sparingly - short phrases, never explanatory blocks. Each composition balanced with the care of a meditation practice.\n\n**\"Organic Systems\"**","createdAt":"2026-09-25T11:52:30.154Z","updatedAt":"2026-09-25T11:52:30.154Z"},{"id":"cmugud08v00ohqu06600szooa","slug":"wenyuchiou-awesome-agentic-ai-zh","name":"awesome-agentic-ai-zh","description":"A trilingual (繁中 / English / 简中) learning roadmap for agentic AI: from LLM basics to multi-agent systems, with 240+ curated resources and hands-on examples. 中文 AI agent 學習地圖。","authorId":"gh:wenyuchiou","authorName":"WenyuChiou","version":"0.1.0","category":"MCP","securityLevel":"Community","downloadsCount":0,"githubStars":7175,"pricePerCall":0,"manifest":{"name":"awesome-agentic-ai-zh","tools":[],"category":"MCP","entrypoint":{"args":["-y","github:WenyuChiou/awesome-agentic-ai-zh"],"type":"mcp-stdio","command":"npx"},"description":"A trilingual (繁中 / English / 简中) learning roadmap for agentic AI: from LLM basics to multi-agent systems, with 240+ curated resources and hands-on examples. 中文 AI agent 學習地圖。","permissions":["shell","network"],"schemaVersion":1},"repoUrl":"https://github.com/WenyuChiou/awesome-agentic-ai-zh","tags":["agentic-ai","agentic-workflows","ai-agent","ai-agents","awesome-list","chinese-llm","claude-code","claude-skills","cli","learning-roadmap","llm","llm-agents"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"awesome-agentic-ai-zh","audit":{"files":[],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T10:52:14.324Z","lockfiles":[]},"forks":975,"owner":"WenyuChiou","stars":7175,"topics":["agentic-ai","agentic-workflows","ai-agent","ai-agents","awesome-list","chinese-llm","claude-code","claude-skills","cli","learning-roadmap","llm","llm-agents","mcp","model-context-protocol","multi-agent-systems","prompt-engineering","rag","trilingual","tutorial"],"license":"MIT","fullName":"WenyuChiou/awesome-agentic-ai-zh","homepage":"https://wenyuchiou.github.io/awesome-agentic-ai-zh/","language":"Python","pushedAt":"2026-09-23T01:16:31Z","avatarUrl":"https://avatars.githubusercontent.com/u/162016108?v=4","crawledAt":"2026-09-25T10:52:14.002Z","openIssues":3,"manifestFile":"README.md","manifestPath":"README.md","defaultBranch":"main"},"readme":"
\n\n\n\n\n\n# awesome-agentic-ai-zh\n\n**🤖 一張從「AI Agent 是什麼」走到「能做出可靠系統」的學習地圖**\n\n**先選一條路，再一步一步走。重要概念、動手練習與精選資源都幫你排好順序。**\n\n[](LICENSE)\n[](README.md)\n[](README.zh-Hans.md)\n[](README.en.md)\n\n[](https://wenyuchiou.github.io/awesome-agentic-ai-zh/)\n\n
\n\n> 📱 手機閱讀請使用[線上文件站](https://wenyuchiou.github.io/awesome-agentic-ai-zh/)。\n\n## 🎯 這份地圖幫你做什麼？\n\n**AI Agent**（AI 代理人）是「能為了人的目標，自己判斷下一步並採取行動的 AI 系統」。人給它目標後，它會看目前情況、選擇下一步，必要時使用工具，再依結果繼續、修正、停止，或把控制權交還給人。它可以自動替人完成工作，但只能在人給的規則與權限內行動。只回答一次的聊天機器人，或每一步都固定寫好的腳本，不一定是 Agent。這個 repo 不要求你一開始就懂所有名詞，而是帶你依序完成三件事：\n\n1. **先懂基礎**：LLM、Prompt、API 與 Token 是什麼。\n2. **再做出東西**：讓模型呼叫工具、跑 Agent Loop、讀文件與記住事情。\n3. **最後做得可靠**：加入權限、Eval、人工批准、觀測與失敗復原。\n\n這裡的角色是**學習路線圖 + 精選資源 + 可直接執行的小練習**。需要完整章節時，我們會帶你去官方文件、[Datawhale Hello-Agents](https://github.com/datawhalechina/hello-agents) 或對應的 Cookbook，不重寫另一套百科全書。需要連模型時，每個練習會再說明雲端或本機路徑。\n\n重要技術詞第一次出現時會先用白話說明，再保留正式英文。忘記某個詞時，直接查[名詞表](resources/glossary.md)。\n\n## 🚀 現在就開始\n\n1. **完全沒寫過程式**：從 [Stage 0：基礎準備](stages/00-foundations.md)開始；API 或 CLI Agent 不熟時，搭配[零基礎設定指南](resources/setup-guide.md)。\n2. **已經會 Python、Git 與 API**：從 [Stage 1：LLM 基礎](stages/01-llm-basics.md)開始。\n3. **還不確定要走哪條路**：先看下面的 Track A／Track B 選擇表。\n\n走 Track A 或 Track B 前，先確認 Stage 0–2；只走日常使用者路線的人可以直接打開角色指南。\n\n| 你現在想做什麼？ | 建議路線 | 路線入口 |\n|---|---|---|\n| 用 Claude Code、Codex、OpenCode 等 CLI Agent 完成工作 | **Track A — CLI Power User** | [A1：選一個 CLI Agent](tracks/cli/A1-cli-intro.md) |\n| 自己寫 Agent、工具迴圈、Workflow 與服務 | **Track B — Agent Builder** | [Stage 3：第一個 Agent Loop](stages/03-tool-use-and-hello-agent.md) |\n| 只想在日常生活安全使用 AI，暫時不寫程式 | **日常使用者路線** | [日常使用者指南](branches/for-everyday-users.md) |\n\n\n💻 展開：下載到本機 \n\n```powershell\ngit clone https://github.com/WenyuChiou/awesome-agentic-ai-zh.git\ncd awesome-agentic-ai-zh\n```\n\n下載後先開啟 `stages/00-foundations.md`，或依上表直接前往適合你的第一站。\n\n \n\n## 從 Stage 0 到 Stage 8，另有 Stage 7.5 閱讀站\n\n\n\n這張地圖共有 **8 個主題 Stage + Stage 0 準備關 + Stage 7.5 進階閱讀站**，也就是 **10 個學習站**。Track A／B 讀者先確認 **Stage 0–2 共用基礎**；已經會 Python、Git 與 API 的人可以跳過 Stage 0。日常使用者可以直接走角色指南。\n\n### 共用基礎：Stage 0–2\n\n| Stage | 這一步解決什麼？ | 完成後你能做什麼？ |\n|---|---|---|\n| **0** · [基礎準備](stages/00-foundations.md) | 電腦與基本工具準備好了嗎？ | 用 Python 呼叫公開 API、讀 JSON，並用 Git 保存成果 |\n| **1** · [LLM 基礎](stages/01-llm-basics.md) | LLM、Token、Context 與模型差在哪裡？ | 呼叫一個 LLM，並依需求選雲端或本機模型 |\n| **2** · [Prompt 設計](stages/02-prompt-engineering.md) | 怎麼把目標、資料、規則與輸出說清楚？ | 用固定案例比較 Zero-Shot、One-Shot、Few-Shot 與 CoT 的邊界 |\n\n### Track A：使用 CLI Agent 把工作做完\n\n正式順序是 `A1 → A2 → Stage 5 → A3 → Stage 8`。\n\n| 順序 | 這一步解決什麼？ | 完成後你能做什麼？ |\n|---|---|---|\n| **A1** · [選一個 CLI Agent](tracks/cli/A1-cli-intro.md) | OpenRouter、OpenCode、Pi、Ollama 分別是什麼？ | 選對工具並完成第一個小任務 |\n| **A2** · [建立可重複流程](tracks/cli/A2-cli-workflow.md) | 怎麼把規則與步驟留給下一次使用？ | 寫 Project Instructions、Skill 與可重用工作流程 |\n| **5** · [Claude Code 生態](stages/05-claude-code-ecosystem.md) | MCP、Skills、Plugins、Hooks 與 Subagents 怎麼分？ | 先讀核心 5.1–5.4；5.5–5.8 依工作需要選讀 |\n| **A3** · [接進真實工作](tracks/cli/A3-cli-production.md) | 怎麼安全連接外部工具、CI 與團隊流程？ | 用最小權限、人工檢查與紀錄完成整合 |\n| **8** · [Agent 操作介面](stages/08-agent-interfaces.md) | Agent 怎麼操作瀏覽器、畫面與 Sandbox？ | 判斷任務該用 CLI、Browser、Computer Use 還是 API |\n\n### Track B：從零打造 Agent\n\n| 順序 | 這一步解決什麼？ | 完成後你能做什麼？ |\n|---|---|---|\n| **3** · [工具使用與第一個 Agent Loop](stages/03-tool-use-and-hello-a","createdAt":"2026-09-25T10:52:14.335Z","updatedAt":"2026-09-25T10:52:14.335Z"},{"id":"cmuguctor00gbqu06jicjiuo1","slug":"alirezarezvani-claude-skills-agent-designer","name":"agent-designer","description":"../../../engineering/skills/agent-designer/SKILL.md","authorId":"gh:alirezarezvani","authorName":"alirezarezvani","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":26438,"pricePerCall":0,"manifest":{"name":"agent-designer","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"../../../engineering/skills/agent-designer/SKILL.md","permissions":[],"systemPrompt":"../../../engineering/skills/agent-designer/SKILL.md","schemaVersion":1},"repoUrl":"https://github.com/alirezarezvani/claude-skills/tree/main/.gemini/skills/agent-designer","tags":["agent-plugins","agent-skills","agentic-ai","ai-coding-agent","anthropic-claude","claude-ai","claude-code","claude-code-plugins","claude-code-skills","claude-skills","codex-skills","coding-agent-plugins"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"claude-skills","audit":{"files":["pyproject.toml"],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T10:52:05.586Z","lockfiles":[]},"forks":3727,"owner":"alirezarezvani","stars":26438,"topics":["agent-plugins","agent-skills","agentic-ai","ai-coding-agent","anthropic-claude","claude-ai","claude-code","claude-code-plugins","claude-code-skills","claude-skills","codex-skills","coding-agent-plugins","cursor-skills","developer-tools","gemini-cli-skills","openai-codex","openclaw","openclaw-plugins","openclaw-skills","prompt-engineering"],"license":"MIT","fullName":"alirezarezvani/claude-skills","homepage":"https://alirezarezvani.medium.com/","language":"Python","pushedAt":"2026-08-30T09:46:16Z","avatarUrl":"https://avatars.githubusercontent.com/u/5697919?v=4","crawledAt":"2026-09-25T10:51:56.130Z","openIssues":26,"manifestFile":"SKILL.md","manifestPath":".gemini/skills/agent-designer/SKILL.md","defaultBranch":"main"},"readme":"../../../engineering/skills/agent-designer/SKILL.md","createdAt":"2026-09-25T10:52:05.835Z","updatedAt":"2026-09-25T10:52:05.835Z"},{"id":"cmugwibtb01ztqu06airg4cs4","slug":"zanwei-design-dna","name":"design-dna","description":"Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on \"design DNA\", \"extract design style\", \"analyze design\", \"design tokens from reference\", \"generate design from JSON\", \"design system from screenshot\", \"design profile\", \"style guide JSON\", \"visual effects analysis\", \"design with effects\", \"3d design analysis\".","authorId":"gh:zanwei","authorName":"zanwei","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1840,"pricePerCall":0,"manifest":{"name":"design-dna","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on \"design DNA\", \"extract design style\", \"analyze design\", \"design tokens from reference\", \"generate design from JSON\", \"design system from screenshot\", \"design profile\", \"style guide JSON\", \"visual effects analysis\", \"design with effects\", \"3d design analysis\".","permissions":[],"systemPrompt":"# Design DNA\n\nA 3-phase workflow for extracting, structuring, and applying design identity across three dimensions:\n\n1. **Design System** — measurable tokens (color, typography, spacing, layout, shape, elevation, motion, components)\n2. **Design Style** — qualitative perception (mood, visual language, composition, imagery, interaction feel, brand voice)\n3. **Visual Effects** — special rendering (Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor effects, SVG animations, glassmorphism, etc.)\n\n## Phases\n\n### Phase 1: Structure — Output the Schema\n\nWhen the user asks for the structural dimensions or schema:\n\n1. Read [references/schema.md](references/schema.md)\n2. Present the full schema with field descriptions\n3. Explain the three dimensions and their roles:\n - **design_system**: What you can measure — exact hex values, pixel sizes, rem scales\n - **design_style**: What you can feel — mood, personality, composition strategy\n - **visual_effects**: What you can see but can't express in CSS alone — WebGL scenes, particle systems, shader distortions, scroll-driven animations\n4. Ask if the user wants to customize or extend any dimensions\n\n### Phase 2: Analyze — Extract DNA from References\n\nWhen the user provides images, screenshots, or links representing a target design style:\n\n1. Read [references/schema.md](references/schema.md) for the full field list\n2. For each reference provided:\n - If image/screenshot: **first run the deterministic color measurement** (see below), then analyze the remaining visual properties directly\n - If URL: fetch and analyze the page's visual design\n3. For every field in the schema, extract or infer a value from the references\n4. When multiple references conflict, note the dominant pattern and mention variants\n5. Output a complete Design DNA JSON — every field populated, no empty strings\n6. After output, ask: \"Want to adjust any values before using this for generation?\"\n\n**Analysis approach per dimension:**\n\n#### Dimension 1: design_system\n- **color**: Do not estimate hex values by eye — perceived colors drift toward familiar palette defaults (often by a ΔE of 10+). When the reference is an image file, measure instead. Resolve `SKILL_ROOT` to the absolute directory containing this `SKILL.md`; never assume the current project directory contains the skill's `scripts/` folder. Use absolute paths for the reference and output, and keep one uniquely named measurement file per reference:\n ```bash\n npm install --prefix \"$SKILL_ROOT/scripts\" --silent\n node \"$SKILL_ROOT/scripts/measure-colors.mjs\" \"$REFERENCE_IMAGE\" > \"$MEASUREMENT_JSON\"\n ```\n Use the measured hexes verbatim in the DNA JSON: map the `background` role to `surface.background`; map `text` to the end of `neutral.scale` that contrasts with the measured background and document that foreground use in `neutral.usage`; and map `accent` to `accent.hex`. Keep both the measured palette and its `measurement` configuration in `design_system.color.measured_palette` and `design_system.color.measurement` so verification can reuse the same clustering configuration. Coverage values are fractions from `0` to `1`. Only fall back to visual sampling when measurement is impossible (for example, a URL-only reference that cannot be screenshotted). Choose primary and secondary colors by semantic role, use accent for CTA emphasis, and order the neutral scale from lightest to darkest regardless of theme.\n- **typography**: Identify font families by visual characteristics (geometric, humanist, serif class). Estimate scale ratios from heading/body size relationships.\n- **spacing**: Assess density by element proximity. Measure rhythm by section gap consistency.\n- **layout**: Identify grid by content alignment patterns. Note max-width, column count, asymmetry.\n- **shape**: Measure border-radius by comparing to element height. Note border and divider presence.\n- **elevation**: Classify shadow softness, spread, and layering approach.\n- **motion**: If observable (video/interactive), note easing curves and duration feel.\n\n#### Dimension 2: design_style\n- Synthesize holistic impressions — mood, personality, composition strategy\n- Compare against genre archetypes (SaaS, editorial, brutalist, etc.)\n- Note ornamentation level and whitespace philosophy\n\n#### Dimension 3: visual_effects\n- **From code**: Scan for ``, WebGL contexts, Three.js/Pixi.js imports, GSAP/Lottie usage, custom shaders, IntersectionObserver scroll triggers, SVG `` elements\n- **From screenshots**: Describe visible effects that go beyond standard CSS — glowing particles, 3D object renders, noise textures, gradient animations, parallax depth, cursor trails, text distortions, glassmorphic surfaces. Note these in `composite_notes` when exact implementation can't be determined.\n- **From video/interaction demos**: Note scroll behaviors, hover distortions, transition choreography, loading sequences\n- Set `enabled: false` for any effect category not present in the reference\n- Rate `overview.effect_intensity` and `overview.performance_tier` based on what's observed\n\n### Phase 3: Generate — Apply DNA to Content\n\nWhen the user provides DNA JSON + content to design:\n\n1. Read [references/generation-guide.md](references/generation-guide.md)\n2. Parse the DNA JSON and extract all tokens across three dimensions\n3. Build CSS custom properties from `design_system` values\n4. Apply `design_style` qualitative fields to guide subjective design decisions\n5. When the design needs assets or source materials, fetch them from the original source whenever possible. If the user provided a URL, retrieve the real asset from that URL instead of recreating, approximating, or substituting it.\n6. Implement `visual_effects` using appropriate technologies:\n - Lightweight effects → CSS animations, SVG, vanilla JS\n - Medium effects → Canvas 2D, GSAP, Lottie\n - Heavy effects → Three.js, custom GLSL shaders, Pixi.js\n7. Generate the design output (default: self-contained HTML with inline CSS/JS)\n8. Run quality checks from the generation guide\n9. **Verify (when the DNA contains a measured palette)**: save the current Design DNA JSON if it is not already a file, screenshot the generated output, then score it against that DNA file. Resolve `SKILL_ROOT` from this `SKILL.md` and use absolute paths; do not assume a temporary file named `measured-colors.json` exists:\n ```bash\n node \"$SKILL_ROOT/scripts/verify.mjs\" \"$IMPLEMENTATION_SCREENSHOT\" \"$DESIGN_DNA_JSON\"\n ```\n A standalone measurement JSON may be used instead of the DNA file when that is the only persisted artifact. For multiple image references, verify against each reference's measurement separately. The report gives per-color ΔE and coverage drift with PASS/FAIL thresholds. If it fails, fix the offending colors and re-verify instead of asking the user to judge fidelity by eye.\n\n**If the user provides only content without DNA JSON**, ask whether to:\n- Analyze a reference first (go to Phase 2)\n- Use a described style (extract DNA from description, then generate)\n\n## Phase Combinations\n\nUsers may invoke any combination:\n- **Phase 1 only**: \"Show me the design structure/schema\"\n- **Phase 2 only**: \"Analyze this design\" (with images/links)\n- **Phase 2 → 3**: \"Analyze this design and build me a landing page in the same style\"\n- **Phase 1 → 2 → 3**: Full pipeline\n- **Phase 3 only**: User already has DNA JSON\n\nDetect which phase(s) are needed from context and execute accordingly.","schemaVersion":1},"repoUrl":"https://github.com/zanwei/design-dna","tags":["agent-skills","claude-skills","codex-skills","cursor-skills","design-dna","design-system","design-tokens","skills-cli","ui-design","visual-design","prompt"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"design-dna","audit":{"files":[],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T11:52:21.831Z","lockfiles":[]},"forks":100,"owner":"zanwei","stars":1840,"topics":["agent-skills","claude-skills","codex-skills","cursor-skills","design-dna","design-system","design-tokens","skills-cli","ui-design","visual-design"],"license":"MIT","fullName":"zanwei/design-dna","homepage":null,"language":"JavaScript","pushedAt":"2026-08-28T01:58:49Z","avatarUrl":"https://avatars.githubusercontent.com/u/40333372?v=4","crawledAt":"2026-09-25T11:52:21.378Z","openIssues":1,"manifestFile":"SKILL.md","manifestPath":"SKILL.md","defaultBranch":"main"},"readme":"# Design DNA\n\nA 3-phase workflow for extracting, structuring, and applying design identity across three dimensions:\n\n1. **Design System** — measurable tokens (color, typography, spacing, layout, shape, elevation, motion, components)\n2. **Design Style** — qualitative perception (mood, visual language, composition, imagery, interaction feel, brand voice)\n3. **Visual Effects** — special rendering (Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor effects, SVG animations, glassmorphism, etc.)\n\n## Phases\n\n### Phase 1: Structure — Output the Schema\n\nWhen the user asks for the structural dimensions or schema:\n\n1. Read [references/schema.md](references/schema.md)\n2. Present the full schema with field descriptions\n3. Explain the three dimensions and their roles:\n - **design_system**: What you can measure — exact hex values, pixel sizes, rem scales\n - **design_style**: What you can feel — mood, personality, composition strategy\n - **visual_effects**: What you can see but can't express in CSS alone — WebGL scenes, particle systems, shader distortions, scroll-driven animations\n4. Ask if the user wants to customize or extend any dimensions\n\n### Phase 2: Analyze — Extract DNA from References\n\nWhen the user provides images, screenshots, or links representing a target design style:\n\n1. Read [references/schema.md](references/schema.md) for the full field list\n2. For each reference provided:\n - If image/screenshot: **first run the deterministic color measurement** (see below), then analyze the remaining visual properties directly\n - If URL: fetch and analyze the page's visual design\n3. For every field in the schema, extract or infer a value from the references\n4. When multiple references conflict, note the dominant pattern and mention variants\n5. Output a complete Design DNA JSON — every field populated, no empty strings\n6. After output, ask: \"Want to adjust any values before using this for generation?\"\n\n**Analysis approach per dimension:**\n\n#### Dimension 1: design_system\n- **color**: Do not estimate hex values by eye — perceived colors drift toward familiar palette defaults (often by a ΔE of 10+). When the reference is an image file, measure instead. Resolve `SKILL_ROOT` to the absolute directory containing this `SKILL.md`; never assume the current project directory contains the skill's `scripts/` folder. Use absolute paths for the reference and output, and keep one uniquely named measurement file per reference:\n ```bash\n npm install --prefix \"$SKILL_ROOT/scripts\" --silent\n node \"$SKILL_ROOT/scripts/measure-colors.mjs\" \"$REFERENCE_IMAGE\" > \"$MEASUREMENT_JSON\"\n ```\n Use the measured hexes verbatim in the DNA JSON: map the `background` role to `surface.background`; map `text` to the end of `neutral.scale` that contrasts with the measured background and document that foreground use in `neutral.usage`; and map `accent` to `accent.hex`. Keep both the measured palette and its `measurement` configuration in `design_system.color.measured_palette` and `design_system.color.measurement` so verification can reuse the same clustering configuration. Coverage values are fractions from `0` to `1`. Only fall back to visual sampling when measurement is impossible (for example, a URL-only reference that cannot be screenshotted). Choose primary and secondary colors by semantic role, use accent for CTA emphasis, and order the neutral scale from lightest to darkest regardless of theme.\n- **typography**: Identify font families by visual characteristics (geometric, humanist, serif class). Estimate scale ratios from heading/body size relationships.\n- **spacing**: Assess density by element proximity. Measure rhythm by section gap consistency.\n- **layout**: Identify grid by content alignment patterns. Note max-width, column count, asymmetry.\n- **shape**: Measure border-radius by comparing to element height. Note border and divider presence.\n- **elevation**: Classify shadow softness, spread, and layering approach.\n- **motion**: If observable (","createdAt":"2026-09-25T11:52:21.840Z","updatedAt":"2026-09-25T11:52:21.840Z"},{"id":"cmuguctqf00gqqu06vd60uqvn","slug":"alirezarezvani-claude-skills-agent-workflow-designer","name":"agent-workflow-designer","description":"../../../engineering/skills/agent-workflow-designer/SKILL.md","authorId":"gh:alirezarezvani","authorName":"alirezarezvani","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":26438,"pricePerCall":0,"manifest":{"name":"agent-workflow-designer","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"../../../engineering/skills/agent-workflow-designer/SKILL.md","permissions":[],"systemPrompt":"../../../engineering/skills/agent-workflow-designer/SKILL.md","schemaVersion":1},"repoUrl":"https://github.com/alirezarezvani/claude-skills/tree/main/.gemini/skills/agent-workflow-designer","tags":["agent-plugins","agent-skills","agentic-ai","ai-coding-agent","anthropic-claude","claude-ai","claude-code","claude-code-plugins","claude-code-skills","claude-skills","codex-skills","coding-agent-plugins"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"claude-skills","audit":{"files":["pyproject.toml"],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T10:52:05.586Z","lockfiles":[]},"forks":3727,"owner":"alirezarezvani","stars":26438,"topics":["agent-plugins","agent-skills","agentic-ai","ai-coding-agent","anthropic-claude","claude-ai","claude-code","claude-code-plugins","claude-code-skills","claude-skills","codex-skills","coding-agent-plugins","cursor-skills","developer-tools","gemini-cli-skills","openai-codex","openclaw","openclaw-plugins","openclaw-skills","prompt-engineering"],"license":"MIT","fullName":"alirezarezvani/claude-skills","homepage":"https://alirezarezvani.medium.com/","language":"Python","pushedAt":"2026-08-30T09:46:16Z","avatarUrl":"https://avatars.githubusercontent.com/u/5697919?v=4","crawledAt":"2026-09-25T10:51:56.130Z","openIssues":26,"manifestFile":"SKILL.md","manifestPath":".gemini/skills/agent-workflow-designer/SKILL.md","defaultBranch":"main"},"readme":"../../../engineering/skills/agent-workflow-designer/SKILL.md","createdAt":"2026-09-25T10:52:05.896Z","updatedAt":"2026-09-25T10:52:05.896Z"},{"id":"cmugwiic2026equ063zpuzxvf","slug":"prat011-awesome-llm-skills-mcp-builder","name":"mcp-builder","description":"Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).","authorId":"gh:prat011","authorName":"Prat011","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1761,"pricePerCall":0,"manifest":{"name":"mcp-builder","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).","permissions":[],"systemPrompt":"# MCP Server Development Guide\n\n## Overview\n\nTo create high-quality MCP (Model Context Protocol) servers that enable LLMs to effectively interact with external services, use this skill. An MCP server provides tools that allow LLMs to access external services and APIs. The quality of an MCP server is measured by how well it enables LLMs to accomplish real-world tasks using the tools provided.\n\n---\n\n# Process\n\n## 🚀 High-Level Workflow\n\nCreating a high-quality MCP server involves four main phases:\n\n### Phase 1: Deep Research and Planning\n\n#### 1.1 Understand Agent-Centric Design Principles\n\nBefore diving into implementation, understand how to design tools for AI agents by reviewing these principles:\n\n**Build for Workflows, Not Just API Endpoints:**\n- Don't simply wrap existing API endpoints - build thoughtful, high-impact workflow tools\n- Consolidate related operations (e.g., `schedule_event` that both checks availability and creates event)\n- Focus on tools that enable complete tasks, not just individual API calls\n- Consider what workflows agents actually need to accomplish\n\n**Optimize for Limited Context:**\n- Agents have constrained context windows - make every token count\n- Return high-signal information, not exhaustive data dumps\n- Provide \"concise\" vs \"detailed\" response format options\n- Default to human-readable identifiers over technical codes (names over IDs)\n- Consider the agent's context budget as a scarce resource\n\n**Design Actionable Error Messages:**\n- Error messages should guide agents toward correct usage patterns\n- Suggest specific next steps: \"Try using filter='active_only' to reduce results\"\n- Make errors educational, not just diagnostic\n- Help agents learn proper tool usage through clear feedback\n\n**Follow Natural Task Subdivisions:**\n- Tool names should reflect how humans think about tasks\n- Group related tools with consistent prefixes for discoverability\n- Design tools around natural workflows, not just API structure\n\n**Use Evaluation-Driven Development:**\n- Create realistic evaluation scenarios early\n- Let agent feedback drive tool improvements\n- Prototype quickly and iterate based on actual agent performance\n\n#### 1.3 Study MCP Protocol Documentation\n\n**Fetch the latest MCP protocol documentation:**\n\nUse WebFetch to load: `https://modelcontextprotocol.io/llms-full.txt`\n\nThis comprehensive document contains the complete MCP specification and guidelines.\n\n#### 1.4 Study Framework Documentation\n\n**Load and read the following reference files:**\n\n- **MCP Best Practices**: [📋 View Best Practices](./reference/mcp_best_practices.md) - Core guidelines for all MCP servers\n\n**For Python implementations, also load:**\n- **Python SDK Documentation**: Use WebFetch to load `https://raw.githubusercontent.com/modelcontextprotocol/python-sdk/main/README.md`\n- [🐍 Python Implementation Guide](./reference/python_mcp_server.md) - Python-specific best practices and examples\n\n**For Node/TypeScript implementations, also load:**\n- **TypeScript SDK Documentation**: Use WebFetch to load `https://raw.githubusercontent.com/modelcontextprotocol/typescript-sdk/main/README.md`\n- [⚡ TypeScript Implementation Guide](./reference/node_mcp_server.md) - Node/TypeScript-specific best practices and examples\n\n#### 1.5 Exhaustively Study API Documentation\n\nTo integrate a service, read through **ALL** available API documentation:\n- Official API reference documentation\n- Authentication and authorization requirements\n- Rate limiting and pagination patterns\n- Error responses and status codes\n- Available endpoints and their parameters\n- Data models and schemas\n\n**To gather comprehensive information, use web search and the WebFetch tool as needed.**\n\n#### 1.6 Create a Comprehensive Implementation Plan\n\nBased on your research, create a detailed plan that includes:\n\n**Tool Selection:**\n- List the most valuable endpoints/operations to implement\n- Prioritize tools that enable the most common and important use cases\n- Consider which tools work together to enable complex workflows\n\n**Shared Utilities and Helpers:**\n- Identify common API request patterns\n- Plan pagination helpers\n- Design filtering and formatting utilities\n- Plan error handling strategies\n\n**Input/Output Design:**\n- Define input validation models (Pydantic for Python, Zod for TypeScript)\n- Design consistent response formats (e.g., JSON or Markdown), and configurable levels of detail (e.g., Detailed or Concise)\n- Plan for large-scale usage (thousands of users/resources)\n- Implement character limits and truncation strategies (e.g., 25,000 tokens)\n\n**Error Handling Strategy:**\n- Plan graceful failure modes\n- Design clear, actionable, LLM-friendly, natural language error messages which prompt further action\n- Consider rate limiting and timeout scenarios\n- Handle authentication and authorization errors\n\n---\n\n### Phase 2: Implementation\n\nNow that you have a comprehensive plan, begin implementation following language-specific best practices.\n\n#### 2.1 Set Up Project Structure\n\n**For Python:**\n- Create a single `.py` file or organize into modules if complex (see [🐍 Python Guide](./reference/python_mcp_server.md))\n- Use the MCP Python SDK for tool registration\n- Define Pydantic models for input validation\n\n**For Node/TypeScript:**\n- Create proper project structure (see [⚡ TypeScript Guide](./reference/node_mcp_server.md))\n- Set up `package.json` and `tsconfig.json`\n- Use MCP TypeScript SDK\n- Define Zod schemas for input validation\n\n#### 2.2 Implement Core Infrastructure First\n\n**To begin implementation, create shared utilities before implementing tools:**\n- API request helper functions\n- Error handling utilities\n- Response formatting functions (JSON and Markdown)\n- Pagination helpers\n- Authentication/token management\n\n#### 2.3 Implement Tools Systematically\n\nFor each tool in the plan:\n\n**Define Input Schema:**\n- Use Pydantic (Python) or Zod (TypeScript) for validation\n- Include proper constraints (min/max length, regex patterns, min/max values, ranges)\n- Provide clear, descriptive field descriptions\n- Include diverse examples in field descriptions\n\n**Write Comprehensive Docstrings/Descriptions:**\n- One-line summary of what the tool does\n- Detailed explanation of purpose and functionality\n- Explicit parameter types with examples\n- Complete return type schema\n- Usage examples (when to use, when not to use)\n- Error handling documentation, which outlines how to proceed given specific errors\n\n**Implement Tool Logic:**\n- Use shared utilities to avoid code duplication\n- Follow async/await patterns for all I/O\n- Implement proper error handling\n- Support multiple response formats (JSON and Markdown)\n- Respect pagination parameters\n- Check character limits and truncate appropriately\n\n**Add Tool Annotations:**\n- `readOnlyHint`: true (for read-only operations)\n- `destructiveHint`: false (for non-destructive operations)\n- `idempotentHint`: true (if repeated calls have same effect)\n- `openWorldHint`: true (if interacting with external systems)\n\n#### 2.4 Follow Language-Specific Best Practices\n\n**At this point, load the appropriate language guide:**\n\n**For Python: Load [🐍 Python Implementation Guide](./reference/python_mcp_server.md) and ensure the following:**\n- Using MCP Python SDK with proper tool registration\n- Pydantic v2 models with `model_config`\n- Type hints throughout\n- Async/await for all I/O operations\n- Proper imports organization\n- Module-level constants (CHARACTER_LIMIT, API_BASE_URL)\n\n**For Node/TypeScript: Load [⚡ TypeScript Implementation Guide](./reference/node_mcp_server.md) and ensure the following:**\n- Using `server.registerTool` properly\n- Zod schemas with `.strict()`\n- TypeScript strict mode enabled\n- No `any` types - use proper types\n- Explicit Promise return types\n- Build process configured (`npm run build`)\n\n---\n\n### Phase 3: Review and Refine\n\nAfter initial implementation:\n\n#### 3.1 Code Quality Review\n\nTo ensure quality, review the code for:\n- **DRY Principle**: No duplicated code between tools\n- **Composability**: Shared logic extracted into functions\n- **Consistency**: Similar operations return similar formats\n- **Error Handling**: All external calls have error handling\n- **Type Safety**: Full type coverage (Python type hints, TypeScript types)\n- **Documentation**: Every tool has comprehensive docstrings/descriptions\n\n#### 3.2 Test and Build\n\n**Important:** MCP servers are long-running processes that wait for requests over stdio/stdin or sse/http. Running them directly in your main process (e.g., `python server.py` or `node dist/index.js`) will cause your process to hang indefinitely.\n\n**Safe ways to test the server:**\n- Use the evaluation harness (see Phase 4) - recommended approach\n- Run the server in tmux to keep it outside your main process\n- Use a timeout when testing: `timeout 5s python server.py`\n\n**For Python:**\n- Verify Python syntax: `python -m py_compile your_server.py`\n- Check imports work correctly by reviewing the file\n- To manually test: Run server in tmux, then test with evaluation harness in main process\n- Or use the evaluation harness directly (it manages the server for stdio transport)\n\n**For Node/TypeScript:**\n- Run `npm run build` and ensure it completes without errors\n- Verify dist/index.js is created\n- To manually test: Run server in tmux, then test with evaluation harness in main process\n- Or use the evaluation harness directly (it manages the server for stdio transport)\n\n#### 3.3 Use Quality Checklist\n\nTo verify implementation quality, load the appropriate checklist from the language-specific guide:\n- Python: see \"Quality Checklist\" in [🐍 Python Guide](./reference/python_mcp_server.md)\n- Node/TypeScript: see \"Quality Checklist\" in [⚡ TypeScript Guide](./reference/node_mcp_server.md)\n\n---\n\n### Phase 4: Create Evaluations\n\nAfter implementing your MCP server, create comprehensive evaluations to test its effectiveness.\n\n**Load [✅ Evaluation Guide](./reference/evaluation.md) for complete evaluation guidelines.**\n\n#### 4.1 Understand Evaluation Purpose\n\nEvaluations test whether LLMs can effectively use your MCP server to answer realistic, complex questions.\n\n#### 4.2 Create 10 Evaluation Questions\n\nTo create effective evaluations, follow the process outlined in the evaluation guide:\n\n1. **Tool Inspection**: List available tools and understand their capabilities\n2. **Content Exploration**: Use READ-ONLY operations to explore available data\n3. **Question Generation**: Create 10 complex, realistic questions\n4. **Answer Verification**: Solve each question yourself to verify answers\n\n#### 4.3 Evaluation Requirements\n\nEach question must be:\n- **Independent**: Not dependent on other questions\n- **Read-only**: Only non-destructive operations required\n- **Complex**: Requiring multiple tool calls and deep exploration\n- **Realistic**: Based on real use cases humans would care about\n- **Verifiable**: Single, clear answer that can be verified by string comparison\n- **Stable**: Answer won't change over time\n\n#### 4.4 Output Format\n\nCreate an XML file with this structure:\n\n```xml\n\n \n Find discussions about AI model launches with animal codenames. One model needed a specific safety designation that uses the format ASL-X. What number X was being determined for the model named after a spotted wild cat? \n 3 \n \n\n \n```\n\n---\n\n# Reference Files\n\n## 📚 Documentation Library\n\nLoad these resources as needed during development:\n\n### Core MCP Documentation (Load First)\n- **MCP Protocol**: Fetch from `https://modelcontextprotocol.io/llms-full.txt` - Complete MCP specification\n- [📋 MCP Best Practices](./reference/mcp_best_practices.md) - Universal MCP guidelines including:\n - Server and tool naming conventions\n - Response format guidelines (JSON vs Markdown)\n - Pagination best practices\n - Character limits and truncation strategies\n - Tool development guidelines\n - Security and error handling standards\n\n### SDK Documentation (Load During Phase 1/2)\n- **Python SDK**: Fetch from `https://raw.githubusercontent.com/modelcontextprotocol/python-sdk/main/README.md`\n- **TypeScript SDK**: Fetch from `https://raw.githubusercontent.com/modelcontextprotocol/typescript-sdk/main/README.md`\n\n### Language-Specific Implementation Guides (Load During Phase 2)\n- [🐍 Python Implementation Guide](./reference/python_mcp_server.md) - Complete Python/FastMCP guide with:\n - Server initialization patterns\n - Pydantic model examples\n - Tool registration with `@mcp.tool`\n - Complete working examples\n - Quality checklist\n\n- [⚡ TypeScript Implementation Guide](./reference/node_mcp_server.md) - Complete TypeScript guide with:\n - Project structure\n - Zod schema patterns\n - Tool registration with `server.registerTool`\n - Complete working examples\n - Quality checklist\n\n### Evaluation Guide (Load During Phase 4)\n- [✅ Evaluation Guide](./reference/evaluation.md) - Complete evaluation creation guide with:\n - Question creation guidelines\n - Answer verification strategies\n - XML format specifications\n - Example questions and answers\n - Running an evaluation with the provided scripts","schemaVersion":1},"repoUrl":"https://github.com/Prat011/awesome-llm-skills/tree/master/mcp-builder","tags":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"awesome-llm-skills","audit":{"files":["slack-gif-creator/requirements.txt"],"binaries":[],"findings":[{"kind":"dependency","rule":"DP-04","message":"Python dependencies are not pinned and there is no lock file.","surface":"slack-gif-creator/requirements.txt","evidence":"pillow>=10.0.0, imageio>=2.31.0, imageio-ffmpeg>=0.4.9, numpy>=1.24.0","severity":"medium"}],"packages":4,"auditedAt":"2026-09-25T11:52:30.068Z","lockfiles":[]},"forks":313,"owner":"Prat011","stars":1761,"topics":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms","openai","opencode","qwen","qwen-coder","skills"],"license":"Complete terms in LICENSE.txt","fullName":"Prat011/awesome-llm-skills","homepage":null,"language":"Python","pushedAt":"2026-07-14T09:53:56Z","avatarUrl":"https://avatars.githubusercontent.com/u/67639393?v=4","crawledAt":"2026-09-25T11:52:22.319Z","openIssues":170,"manifestFile":"SKILL.md","manifestPath":"mcp-builder/SKILL.md","defaultBranch":"master"},"readme":"# MCP Server Development Guide\n\n## Overview\n\nTo create high-quality MCP (Model Context Protocol) servers that enable LLMs to effectively interact with external services, use this skill. An MCP server provides tools that allow LLMs to access external services and APIs. The quality of an MCP server is measured by how well it enables LLMs to accomplish real-world tasks using the tools provided.\n\n---\n\n# Process\n\n## 🚀 High-Level Workflow\n\nCreating a high-quality MCP server involves four main phases:\n\n### Phase 1: Deep Research and Planning\n\n#### 1.1 Understand Agent-Centric Design Principles\n\nBefore diving into implementation, understand how to design tools for AI agents by reviewing these principles:\n\n**Build for Workflows, Not Just API Endpoints:**\n- Don't simply wrap existing API endpoints - build thoughtful, high-impact workflow tools\n- Consolidate related operations (e.g., `schedule_event` that both checks availability and creates event)\n- Focus on tools that enable complete tasks, not just individual API calls\n- Consider what workflows agents actually need to accomplish\n\n**Optimize for Limited Context:**\n- Agents have constrained context windows - make every token count\n- Return high-signal information, not exhaustive data dumps\n- Provide \"concise\" vs \"detailed\" response format options\n- Default to human-readable identifiers over technical codes (names over IDs)\n- Consider the agent's context budget as a scarce resource\n\n**Design Actionable Error Messages:**\n- Error messages should guide agents toward correct usage patterns\n- Suggest specific next steps: \"Try using filter='active_only' to reduce results\"\n- Make errors educational, not just diagnostic\n- Help agents learn proper tool usage through clear feedback\n\n**Follow Natural Task Subdivisions:**\n- Tool names should reflect how humans think about tasks\n- Group related tools with consistent prefixes for discoverability\n- Design tools around natural workflows, not just API structure\n\n**Use Evaluation-Driven Development:**\n- Create realistic evaluation scenarios early\n- Let agent feedback drive tool improvements\n- Prototype quickly and iterate based on actual agent performance\n\n#### 1.3 Study MCP Protocol Documentation\n\n**Fetch the latest MCP protocol documentation:**\n\nUse WebFetch to load: `https://modelcontextprotocol.io/llms-full.txt`\n\nThis comprehensive document contains the complete MCP specification and guidelines.\n\n#### 1.4 Study Framework Documentation\n\n**Load and read the following reference files:**\n\n- **MCP Best Practices**: [📋 View Best Practices](./reference/mcp_best_practices.md) - Core guidelines for all MCP servers\n\n**For Python implementations, also load:**\n- **Python SDK Documentation**: Use WebFetch to load `https://raw.githubusercontent.com/modelcontextprotocol/python-sdk/main/README.md`\n- [🐍 Python Implementation Guide](./reference/python_mcp_server.md) - Python-specific best practices and examples\n\n**For Node/TypeScript implementations, also load:**\n- **TypeScript SDK Documentation**: Use WebFetch to load `https://raw.githubusercontent.com/modelcontextprotocol/typescript-sdk/main/README.md`\n- [⚡ TypeScript Implementation Guide](./reference/node_mcp_server.md) - Node/TypeScript-specific best practices and examples\n\n#### 1.5 Exhaustively Study API Documentation\n\nTo integrate a service, read through **ALL** available API documentation:\n- Official API reference documentation\n- Authentication and authorization requirements\n- Rate limiting and pagination patterns\n- Error responses and status codes\n- Available endpoints and their parameters\n- Data models and schemas\n\n**To gather comprehensive information, use web search and the WebFetch tool as needed.**\n\n#### 1.6 Create a Comprehensive Implementation Plan\n\nBased on your research, create a detailed plan that includes:\n\n**Tool Selection:**\n- List the most valuable endpoints/operations to implement\n- Prioritize tools that enable the most common and important use cases\n- Consider which tools work together to ena","createdAt":"2026-09-25T11:52:30.290Z","updatedAt":"2026-09-25T11:52:30.290Z"},{"id":"cmugymuga02imqu06scfq953q","slug":"plugin87-ux-ui-agent-skills-design-review","name":"design-review","description":"Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.","authorId":"gh:plugin87","authorName":"plugin87","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1463,"pricePerCall":0,"manifest":{"name":"design-review","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.","permissions":[],"systemPrompt":"# Skill: Design Review\n\nRun a structured, scored review.\n\n## Steps\n1. Read `workflows/design-review.md` (rubric, scoring guide, Nielsen heuristics, process).\n2. Gather context: the screen(s)/flow, target users, platform, constraints.\n3. Score the 6 dimensions (Visual Hierarchy 20%, Consistency 20%, Accessibility 20%, Usability 20%, Responsiveness 10%, Performance 10%); compute the weighted overall.\n4. Run the accessibility lens with `accessibility/wcag-checklist.md`; use `scripts/contrast.py` for any color-pair doubts.\n5. Check against the anti-slop tells in `taste/design-taste.md` (Banned Defaults checklist).\n6. Apply Nielsen's 10 heuristics; flag violations by number.\n\n## Output\n- The 6-dimension scored table + overall score.\n- A prioritized findings table: # · Severity (Critical → Major → Minor → Enhancement) · Finding · Recommendation.\n- Concrete, token-referenced fixes.","schemaVersion":1},"repoUrl":"https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-review","tags":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"ux-ui-agent-skills","audit":{"files":["package.json"],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T12:51:51.746Z","lockfiles":[]},"forks":153,"owner":"plugin87","stars":1463,"topics":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react","tailwindcss","ui","ux","wcag"],"license":"MIT","fullName":"plugin87/ux-ui-agent-skills","homepage":"https://plugin87.github.io/ux-ui-agent-skills/","language":"JavaScript","pushedAt":"2026-09-16T02:33:41Z","avatarUrl":"https://avatars.githubusercontent.com/u/5790381?v=4","crawledAt":"2026-09-25T12:51:46.935Z","openIssues":6,"manifestFile":"SKILL.md","manifestPath":".claude/skills/design-review/SKILL.md","defaultBranch":"main"},"readme":"# Skill: Design Review\n\nRun a structured, scored review.\n\n## Steps\n1. Read `workflows/design-review.md` (rubric, scoring guide, Nielsen heuristics, process).\n2. Gather context: the screen(s)/flow, target users, platform, constraints.\n3. Score the 6 dimensions (Visual Hierarchy 20%, Consistency 20%, Accessibility 20%, Usability 20%, Responsiveness 10%, Performance 10%); compute the weighted overall.\n4. Run the accessibility lens with `accessibility/wcag-checklist.md`; use `scripts/contrast.py` for any color-pair doubts.\n5. Check against the anti-slop tells in `taste/design-taste.md` (Banned Defaults checklist).\n6. Apply Nielsen's 10 heuristics; flag violations by number.\n\n## Output\n- The 6-dimension scored table + overall score.\n- A prioritized findings table: # · Severity (Critical → Major → Minor → Enhancement) · Finding · Recommendation.\n- Concrete, token-referenced fixes.","createdAt":"2026-09-25T12:51:51.850Z","updatedAt":"2026-09-25T12:51:51.850Z"},{"id":"cmugymufd02idqu062zgrqjan","slug":"plugin87-ux-ui-agent-skills-design-component","name":"design-component","description":"Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.","authorId":"gh:plugin87","authorName":"plugin87","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1463,"pricePerCall":0,"manifest":{"name":"design-component","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.","permissions":[],"systemPrompt":"# Skill: Design Component\n\nProduce a complete component specification matching the project format.\n\n## Steps\n1. Read `.claude/rules/components.md` → \"Component Quality Bar\" (the 8-state table) and \"Atomic Design\"; the always-on 8-state table is in `CLAUDE.md` → Non-Negotiables.\n2. Check if it already exists: `components/atoms.md`, `molecules.md`, `organisms.md`, `templates.md`, `navigation.md`, `feedback.md`, `forms-advanced.md`, `overlays.md`. Match the existing spec format.\n3. Pull the ARIA pattern from `accessibility/aria-patterns.md` and contrast/target rules from `accessibility/wcag-checklist.md`.\n4. Map every value to tokens (`tokens/*.json`) — sizes via `sizing.json`, states via `states.json`.\n5. Apply visual judgment from `taste/design-taste.md` (states, focus, no slop).\n6. Optional fast start: `python3 scripts/scaffold_component.py \"\"` to emit a stub, then fill it in.\n\n## Output\nSpec with: anatomy diagram, variants table, sizes table, all 8 applicable states, token mapping, accessibility (role/keyboard/SR), and a note to render via `frameworks/adapter-protocol.md`.\n\n## Accuracy — verify every state, don't assume (mandatory when code is produced)\nA component is only \"correct\" when **every variant × state** renders right — not just the resting default. Build a **states harness**: render the component in each applicable state (default, hover, focus, active, disabled, loading `aria-busy`, error `aria-invalid`, selected `aria-pressed`/`aria-selected`) × each variant in one HTML file (see `examples/component-states/button.html`). Then RUN the gates and report their real output (CLAUDE.md → Verification Protocol):\n- `node scripts/verify_states.mjs [--dark]` — contrast of every element in default/hover/focus\n- `node scripts/axe_audit.mjs [--dark]` — ARIA/role/name/label correctness\n- `node scripts/measure_render.mjs [--dark]` — every text element AA\n- overlays/modals also: `node scripts/verify_focustrap.mjs --open=`\nEvery state must pass in light AND dark before the component is \"done\". Never claim a state is correct without a gate proving it.\n\n## Gates prove contrast/a11y — they do NOT prove pixels. RENDER AND LOOK.\nThe contrast/axe gates pass while the UI is still visibly broken: a checkbox that doesn't toggle, a dash sitting at the bottom of its box, a checkmark and an indeterminate dash with mismatched stroke weight, a control that's too heavy. **You must screenshot the harness and inspect it** before claiming done — for every state, and after interaction. Playwright + system Chrome:\n```js\nconst b = await chromium.launch({channel:'chrome'});\nconst p = await b.newPage({deviceScaleFactor:4});\nawait p.goto('file://'+abs); await p.addStyleTag({content:'*{transition:none!important}'});\nawait p.mouse.move(2000,2000); // park pointer OFF the component\nawait p.locator('.stack').first().screenshot({path:'/tmp/x.png'});\n```\nRead the PNG. Then look for, specifically:\n- **Functional**: click each interactive element and assert the state actually changed (`await loc.click(); expect(await loc.isChecked())`). A custom control whose overlay box covers the real `` forwards the click).\n- **Geometry**: glyphs centered, not stacked/offset. If a `display:grid` box holds an `opacity:0` sibling plus a `::after`, the pseudo lands in row 2 → use `display:none` on the hidden sibling, or one container child.\n- **Stroke consistency**: a checkmark and its indeterminate dash must use the **same** rendering method (one ``, two `` toggled by state — same `stroke-width`), never an svg check vs a CSS `::after` rect (they read as different weights).\n- **Transition artifact**: screenshot WITHOUT disabling transitions and a just-clicked control looks half-faded mid-animation — that is not a bug. Always disable transitions and park the pointer before judging a state.\n\n**Consistency across files is non-negotiable.** The same component (e.g. checkbox) must use byte-identical CSS + markup in every harness/page. A checkbox that looks thin in `form-controls` and heavy (native `accent-color`) in `data-table` is a bug. Factor one pattern, reuse it verbatim.\n\n### Verified custom checkbox/radio pattern (thin, token-driven, gated + eyeballed)\nReal `` in one `` toggled by `:checked` / `:indeterminate`; 1.5px `border-strong`, `.25rem` radius, `.62rem` glyph, `stroke-width:2` round caps. Reference: `examples/component-states/form-controls.html` and `data-table.html` (select-all uses `indeterminate`). Native `accent-color` renders too heavy — do not use it when the house look is \"thin\".\n\n## Responsive — every component, no sideways scroll (gated)\nBuild mobile-first; a fixed-px width that can't shrink is a bug. Run `node scripts/verify_responsive.mjs ` — it loads each harness at 280/320/414px and fails on any horizontal overflow. The four recurring causes and their fixes:\n- **fixed `inline-size:Npx`** → `inline-size:100%;max-inline-size:Npx` (cap, don't pin).\n- **``/`` default 40px inline-start padding** (a `*{margin:0}` reset does NOT clear padding) → `padding:0;margin:0` on every list. This also silently mis-aligns a list's edge vs a sibling block (looks like unequal widths) — same fix.\n- **non-wrapping flex rows** (breadcrumb, stepper, tabs) → `flex-wrap:wrap`, or for tabs `overflow-x:auto` + `.tab{flex:none}`.\n- **`grid minmax(Npx,1fr)` min larger than viewport** → `minmax(min(Npx,100%),1fr)`.\n\n## Motion — tokenized, real easing, animate the thing that moves\nTiming/easing are tokens (`--duration-fast|normal|slow`, `--ease-out|in|in-out|emphasized` in the theme; `--transition-micro` = `fast ease-out`). Never hardcode ms/curves. A component that toggles open/closed must animate its **height**, not just rotate a chevron — collapse via `hidden`/`display:none` alone reads as \"rigid, no transition\". Smooth-height pattern (no JS measuring): wrap content in an inner that clips overflow, animate the grid track:\n```css\n.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-normal) var(--ease-emphasized)}\n.panel.open{grid-template-rows:1fr}\n.panel > .inner{overflow:hidden;min-block-size:0}\n```\nKeep a11y: expand = remove `hidden` then add `.open` next frame; collapse = remove `.open`, set `hidden` on `transitionend`. Reference: accordion in `examples/component-states/overlays.html`. Always honor `@media(prefers-reduced-motion:reduce){…transition:none}`.\n\n## Layout — fill the space, don't ship AI-empty filler\n- **`auto-fit`, never `auto-fill`** for card grids. `auto-fill` keeps empty phantom tracks so 3 cards cluster left with a void on the right; `auto-fit` collapses empties so cards stretch to fill the row. Always `repeat(auto-fit,minmax(min(Npx,100%),1fr))`.\n- **Equal-height panels in a row**: `align-items:stretch` on the grid, AND make the shorter panel's body fill — `.panel{display:flex;flex-direction:column}` + the inner region `flex:1`. A child sized with `block-size:%` (e.g. chart bars) needs a **definite-height** ancestor (a `flex:1` box or explicit height), or the % resolves to 0 and the element collapses. Wrap the bar in a `flex:1` `.barbox` and give the bar `block-size:%` of that.\n- **A main region that's 80% whitespace reads as machine-generated.** Fill a dashboard with real, plausible content (stats row + activity list + a chart), not one lonely widget. Intentional density is the difference between \"designed\" and \"AI slop\".\n- **Trailing gap in a toolbar/header**: a flex item with `flex:1` capped by `max-inline-size` stops growing and leaves empty space *after* the last item. Push the right-hand cluster with `margin-inline-start:auto` on its first element.\n- **Mobile nav must not overlap.** Putting the sidebar and main in the same grid area makes an opened sidebar paint over content. On mobile switch the shell to `display:block` so opening the sidebar pushes main *down*. Reference: `examples/component-states/app-shell.html`.\n\n## Icons — real lucide, referenced by name (never hand-draw paths)\nHand-approximated SVG path data renders as broken glyphs (a help \"?\" became a dot; settings became a hamburger). Use **verbatim lucide** paths, referenced by name via an injected `` sprite — `examples/component-states/icons.js` defines each icon once and `` keeps the UA `color:buttontext` (≈black) regardless of theme → set its `color` to the actual indicator color and drive the visual via `currentColor` (e.g. dot is a `::before{background:currentColor}`), so the gate measures the real thing.\n- **Theme-flipping tokens** (`--color-chart-N`, `--color-surface-brand`) invert between light/dark; white text or a teal indicator on them passes in one mode and fails the other. Use **dark-aware** values (override in `[data-theme=\"dark\"]`) or **stable** tokens (`--color-action-primary`, `--color-text-link` which adapts) for avatars, active dots, and selected states.","schemaVersion":1},"repoUrl":"https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-component","tags":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"ux-ui-agent-skills","audit":{"files":["package.json"],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T12:51:51.746Z","lockfiles":[]},"forks":153,"owner":"plugin87","stars":1463,"topics":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react","tailwindcss","ui","ux","wcag"],"license":"MIT","fullName":"plugin87/ux-ui-agent-skills","homepage":"https://plugin87.github.io/ux-ui-agent-skills/","language":"JavaScript","pushedAt":"2026-09-16T02:33:41Z","avatarUrl":"https://avatars.githubusercontent.com/u/5790381?v=4","crawledAt":"2026-09-25T12:51:46.935Z","openIssues":6,"manifestFile":"SKILL.md","manifestPath":".claude/skills/design-component/SKILL.md","defaultBranch":"main"},"readme":"# Skill: Design Component\n\nProduce a complete component specification matching the project format.\n\n## Steps\n1. Read `.claude/rules/components.md` → \"Component Quality Bar\" (the 8-state table) and \"Atomic Design\"; the always-on 8-state table is in `CLAUDE.md` → Non-Negotiables.\n2. Check if it already exists: `components/atoms.md`, `molecules.md`, `organisms.md`, `templates.md`, `navigation.md`, `feedback.md`, `forms-advanced.md`, `overlays.md`. Match the existing spec format.\n3. Pull the ARIA pattern from `accessibility/aria-patterns.md` and contrast/target rules from `accessibility/wcag-checklist.md`.\n4. Map every value to tokens (`tokens/*.json`) — sizes via `sizing.json`, states via `states.json`.\n5. Apply visual judgment from `taste/design-taste.md` (states, focus, no slop).\n6. Optional fast start: `python3 scripts/scaffold_component.py \"\"` to emit a stub, then fill it in.\n\n## Output\nSpec with: anatomy diagram, variants table, sizes table, all 8 applicable states, token mapping, accessibility (role/keyboard/SR), and a note to render via `frameworks/adapter-protocol.md`.\n\n## Accuracy — verify every state, don't assume (mandatory when code is produced)\nA component is only \"correct\" when **every variant × state** renders right — not just the resting default. Build a **states harness**: render the component in each applicable state (default, hover, focus, active, disabled, loading `aria-busy`, error `aria-invalid`, selected `aria-pressed`/`aria-selected`) × each variant in one HTML file (see `examples/component-states/button.html`). Then RUN the gates and report their real output (CLAUDE.md → Verification Protocol):\n- `node scripts/verify_states.mjs [--dark]` — contrast of every element in default/hover/focus\n- `node scripts/axe_audit.mjs [--dark]` — ARIA/role/name/label correctness\n- `node scripts/measure_render.mjs [--dark]` — every text element AA\n- overlays/modals also: `node scripts/verify_focustrap.mjs --open=`\nEvery state must pass in light AND dark before the component is \"done\". Never claim a state is correct without a gate proving it.\n\n## Gates prove contrast/a11y — they do NOT prove pixels. RENDER AND LOOK.\nThe contrast/axe gates pass while the UI is still visibly broken: a checkbox that doesn't toggle, a dash sitting at the bottom of its box, a checkmark and an indeterminate dash with mismatched stroke weight, a control that's too heavy. **You must screenshot the harness and inspect it** before claiming done — for every state, and after interaction. Playwright + system Chrome:\n```js\nconst b = await chromium.launch({channel:'chrome'});\nconst p = await b.newPage({deviceScaleFactor:4});\nawait p.goto('file://'+abs); await p.addStyleTag({content:'*{transition:none!important}'});\nawait p.mouse.move(2000,2000); // park pointer OFF the component\nawait p.locator('.stack').first().screenshot({path:'/tmp/x.png'});\n```\nRead the PNG. Then look for, specifically:\n- **Functional**: click each interactive element and assert the state actually changed (`await loc.click(); expect(await loc.isChecked())`). A custom control whose overlay box covers the real `` forwards the click).\n- **Geometry**: glyphs centered, not stacked/offset. If a `display:grid` box holds an `opacity:0` sibling plus a `::after`, the pseudo lands in row 2 → use `display:none` on the hidden sibling, or one container child.\n- **Stroke consistency**: a checkmark and its indeterminate dash must use the **same** rendering method (one ``, two `` toggled by state — same `stroke-width`), never an svg check vs a CSS `::after` rect (they read as different weights).\n- **Transition artifact**: screenshot WITHOUT disabling transitions and a just-clicked control looks half-faded mid-animation — that is not a bug. Always disable transitions and park the pointer before judging a state.\n\n**Consistency across ","createdAt":"2026-09-25T12:51:51.817Z","updatedAt":"2026-09-25T12:51:51.817Z"},{"id":"cmugymug302ijqu06t28vj6k6","slug":"plugin87-ux-ui-agent-skills-design-qa","name":"design-qa","description":"Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design regressions, or to QA a component/screen before shipping.","authorId":"gh:plugin87","authorName":"plugin87","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1463,"pricePerCall":0,"manifest":{"name":"design-qa","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design regressions, or to QA a component/screen before shipping.","permissions":[],"systemPrompt":"# Skill: Design QA\n\nStand up the automated + manual gates that stop quality from regressing.\n\n## Steps\n1. Read `workflows/design-qa.md` (the QA pyramid: token/lint gates → automated a11y → visual regression → manual a11y).\n2. Wire the **fast gates** first (every commit/PR): `python3 scripts/validate_tokens.py`, `python3 scripts/validate_contrast.py` (batch WCAG over the token pairs), and `python3 scripts/lint_hardcodes.py ` (no raw hex/px/timing in component code). The repo's `.github/workflows/ci.yml` runs these.\n3. Add **automated a11y** (axe-core / Pa11y) over each component's states (error/loading/disabled/expanded/selected), zero serious/critical to merge. Run the **real-render contrast gate** `node scripts/measure_render.mjs ` (and `--dark`) — it opens the page in headless Chromium, disables transitions, and measures the true computed-style + alpha-composited contrast of every text element (catches what static token checks miss).\n4. Add **visual regression** snapshots across variants × sizes × states × light/dark + key breakpoints + RTL; freeze animations + deterministic data.\n5. Sign off the **manual a11y** checklist per release (keyboard, screen reader, 400% reflow, 200% text-spacing, reduced-motion, forced-colors — `accessibility/*`).\n\n## Verification (definition of done)\n- An unreviewed PR cannot introduce an unresolved token alias, a contrast failure, a raw hex/px, or an axe violation — a gate blocks each.\n- Snapshots cover dark mode + RTL + the semantic-changing states, not just the happy path.\n- Manual a11y checklist signed off for the release.","schemaVersion":1},"repoUrl":"https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-qa","tags":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"ux-ui-agent-skills","audit":{"files":["package.json"],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T12:51:51.746Z","lockfiles":[]},"forks":153,"owner":"plugin87","stars":1463,"topics":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react","tailwindcss","ui","ux","wcag"],"license":"MIT","fullName":"plugin87/ux-ui-agent-skills","homepage":"https://plugin87.github.io/ux-ui-agent-skills/","language":"JavaScript","pushedAt":"2026-09-16T02:33:41Z","avatarUrl":"https://avatars.githubusercontent.com/u/5790381?v=4","crawledAt":"2026-09-25T12:51:46.935Z","openIssues":6,"manifestFile":"SKILL.md","manifestPath":".claude/skills/design-qa/SKILL.md","defaultBranch":"main"},"readme":"# Skill: Design QA\n\nStand up the automated + manual gates that stop quality from regressing.\n\n## Steps\n1. Read `workflows/design-qa.md` (the QA pyramid: token/lint gates → automated a11y → visual regression → manual a11y).\n2. Wire the **fast gates** first (every commit/PR): `python3 scripts/validate_tokens.py`, `python3 scripts/validate_contrast.py` (batch WCAG over the token pairs), and `python3 scripts/lint_hardcodes.py ` (no raw hex/px/timing in component code). The repo's `.github/workflows/ci.yml` runs these.\n3. Add **automated a11y** (axe-core / Pa11y) over each component's states (error/loading/disabled/expanded/selected), zero serious/critical to merge. Run the **real-render contrast gate** `node scripts/measure_render.mjs ` (and `--dark`) — it opens the page in headless Chromium, disables transitions, and measures the true computed-style + alpha-composited contrast of every text element (catches what static token checks miss).\n4. Add **visual regression** snapshots across variants × sizes × states × light/dark + key breakpoints + RTL; freeze animations + deterministic data.\n5. Sign off the **manual a11y** checklist per release (keyboard, screen reader, 400% reflow, 200% text-spacing, reduced-motion, forced-colors — `accessibility/*`).\n\n## Verification (definition of done)\n- An unreviewed PR cannot introduce an unresolved token alias, a contrast failure, a raw hex/px, or an axe violation — a gate blocks each.\n- Snapshots cover dark mode + RTL + the semantic-changing states, not just the happy path.\n- Manual a11y checklist signed off for the release.","createdAt":"2026-09-25T12:51:51.843Z","updatedAt":"2026-09-25T12:51:51.843Z"},{"id":"cmugymuhq02j1qu06in4eay9b","slug":"plugin87-ux-ui-agent-skills-migrate-design-system","name":"migrate-design-system","description":"Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) — adopt their look, build on their stack, or migrate between systems. Use when the user mentions interop, migration, or a specific design-system/component-library bridge.","authorId":"gh:plugin87","authorName":"plugin87","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1463,"pricePerCall":0,"manifest":{"name":"migrate-design-system","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) — adopt their look, build on their stack, or migrate between systems. Use when the user mentions interop, migration, or a specific design-system/component-library bridge.","permissions":[],"systemPrompt":"# Skill: Migrate / Interop Design System\n\nBridge to or from external design systems via a role-based crosswalk.\n\n## Steps\n1. Read `design-systems/interop-protocol.md` (Crosswalk Method, the three directions, headless-vs-styled guidance, verification).\n2. Use the curated tables in `design-systems/crosswalk.md` for Material 3 / Apple HIG / Fluent 2 / Carbon / shadcn/ui / Radix. For others, derive a mapping with the Crosswalk Method (map by role/intent across 6 axes: color roles, type scale, spacing unit, radius, elevation, motion).\n3. Choose the direction:\n - **FROM** external → our tokens (adopt their look): re-point `semantic.*`.\n - **TO** external stack (our components on their foundation): theme their primitives with our tokens.\n - **Migrate**: Audit → Map → Bridge (alias layer) → Verify, screen by screen.\n4. **Verify** every mapped color pair for contrast (`scripts/contrast.py` / `a11y-audit`); confirm all 8 states + dark mode survive the mapping.\n\n## Output\nA crosswalk table (our token → their token → value note), a bridge plan if migrating, and verified token overrides. Render via `design-code`.","schemaVersion":1},"repoUrl":"https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/migrate-design-system","tags":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"ux-ui-agent-skills","audit":{"files":["package.json"],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T12:51:51.746Z","lockfiles":[]},"forks":153,"owner":"plugin87","stars":1463,"topics":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react","tailwindcss","ui","ux","wcag"],"license":"MIT","fullName":"plugin87/ux-ui-agent-skills","homepage":"https://plugin87.github.io/ux-ui-agent-skills/","language":"JavaScript","pushedAt":"2026-09-16T02:33:41Z","avatarUrl":"https://avatars.githubusercontent.com/u/5790381?v=4","crawledAt":"2026-09-25T12:51:46.935Z","openIssues":6,"manifestFile":"SKILL.md","manifestPath":".claude/skills/migrate-design-system/SKILL.md","defaultBranch":"main"},"readme":"# Skill: Migrate / Interop Design System\n\nBridge to or from external design systems via a role-based crosswalk.\n\n## Steps\n1. Read `design-systems/interop-protocol.md` (Crosswalk Method, the three directions, headless-vs-styled guidance, verification).\n2. Use the curated tables in `design-systems/crosswalk.md` for Material 3 / Apple HIG / Fluent 2 / Carbon / shadcn/ui / Radix. For others, derive a mapping with the Crosswalk Method (map by role/intent across 6 axes: color roles, type scale, spacing unit, radius, elevation, motion).\n3. Choose the direction:\n - **FROM** external → our tokens (adopt their look): re-point `semantic.*`.\n - **TO** external stack (our components on their foundation): theme their primitives with our tokens.\n - **Migrate**: Audit → Map → Bridge (alias layer) → Verify, screen by screen.\n4. **Verify** every mapped color pair for contrast (`scripts/contrast.py` / `a11y-audit`); confirm all 8 states + dark mode survive the mapping.\n\n## Output\nA crosswalk table (our token → their token → value note), a bridge plan if migrating, and verified token overrides. Render via `design-code`.","createdAt":"2026-09-25T12:51:51.903Z","updatedAt":"2026-09-25T12:51:51.903Z"},{"id":"cmugucism0025qu06ncgxcjyp","slug":"thedotmack-claude-mem-design-is","name":"design-is","description":"Audit a design against Dieter Rams' ten \"Good design is...\" principles, then hand off a /make-plan prompt for one of three outcomes — new design, refine design, or redesign. Use when the user says \"audit this design\", \"design review\", \"check this UI against Rams\", \"is this UI good\", \"critique this design\", \"design audit\", or asks for a critique that should lead to a plan.","authorId":"gh:thedotmack","authorName":"thedotmack","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":94658,"pricePerCall":0,"manifest":{"name":"design-is","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Audit a design against Dieter Rams' ten \"Good design is...\" principles, then hand off a /make-plan prompt for one of three outcomes — new design, refine design, or redesign. Use when the user says \"audit this design\", \"design review\", \"check this UI against Rams\", \"is this UI good\", \"critique this design\", \"design audit\", or asks for a critique that should lead to a plan.","permissions":[],"systemPrompt":"# Design Is\n\n## Do not use for\n\n- Routine UI code reviews → use `/review`\n- Pure copy edits → use a separate copy pass\n- Pre-design ideation with no artifact yet → start with `/make-plan` directly\n\nYou are an ORCHESTRATOR. Audit a design against Dieter Rams' ten principles, score each principle with evidence, decide the outcome verdict (NEW / REFINE / REDESIGN), and hand off to `/make-plan` with a ready-to-run prompt.\n\nYou do not write implementation code. You produce: evidence-cited scores, a verdict, and a `/make-plan` handoff prompt.\n\n## The Ten Principles (Dieter Rams)\n\nAudit each principle in this exact order. Each gets a score 0–3 and ≥1 piece of evidence (`file:line`, screenshot region, copy excerpt, or measured value).\n\n1. **Good design is innovative** — Does it advance the form, or imitate? Innovation rides on technology; never an end in itself.\n2. **Good design makes a product useful** — Does it serve the primary task? Emphasizes usefulness; disregards anything that detracts.\n3. **Good design is aesthetic** — Is it beautiful? Only well-executed objects can be beautiful; aesthetic quality affects well-being.\n4. **Good design makes a product understandable** — Does the structure clarify function? Or is it self-explanatory at best?\n5. **Good design is unobtrusive** — Does it stay out of the way? Neither decorative objects nor works of art — leave room for self-expression.\n6. **Good design is honest** — Does it claim only what it is? No false promises, no manipulation, no inflated value.\n7. **Good design is long-lasting** — Will it age well? Avoids being fashionable; never appears antiquated.\n8. **Good design is thorough down to the last detail** — Are edges, empty states, errors, focus rings, motion curves all considered? Care and accuracy express respect for the user.\n9. **Good design is environmentally friendly** — Does it conserve resources? Minimizes pollution — in software: bundle weight, energy, attention, cognitive load.\n10. **Good design is as little design as possible** — Less, but better. Concentrates on essentials; back to purity, back to simplicity.\n\n> The user wrote \"Dieter Braun\" — they mean Dieter Rams. Don't correct them inline; just use the right principles.\n\n## Delegation Model\n\nUse subagents for *evidence gathering* (reading components, measuring contrast, counting elements, inspecting tokens, screenshotting via agent-browser). Keep *scoring and verdict synthesis* with the orchestrator. Reject subagent reports that score without citing evidence and redeploy.\n\n### Subagent Reporting Contract (MANDATORY)\n\nEach evidence subagent response must include:\n1. Sources consulted — exact file paths and line ranges, or screenshot regions\n2. Concrete findings — what is present, what is missing, with quotes/values\n3. Per-principle facts (not opinions) — leave scoring to the orchestrator\n4. Known gaps — what could not be inspected and why\n\n## Output Artifacts\n\nAll artifacts go in `DESIGN-IS-/` at repo root (or the project the user points at):\n\n- `00-scope.md` — what was audited (URL, component paths, screens), input materials\n- `01-evidence.md` — per-principle evidence collected by subagents\n- `02-scorecard.md` — per-principle 0–3 score with one-line justification + total\n- `03-verdict.md` — NEW / REFINE / REDESIGN with reasoning\n- `04-handoff-prompt.md` — copy-pasteable `/make-plan` prompt for the chosen outcome\n\n## Phases\n\n### Phase 0: Scope Lock (ALWAYS FIRST)\n\nAsk the user (or infer from the request) and write `00-scope.md`:\n- What is being audited? (live URL, repo path, Figma frame, component name)\n- Who is the primary user, and what is the primary task?\n- Constraints (brand, stack, deadline)\n- Reference designs or competitors, if any\n\nIf the user is asking about a design that doesn't exist yet, skip Phases 1–2 and go straight to Phase 3 with verdict = **NEW**.\n\n### Phase 1: Evidence Gathering (FAN OUT)\n\nDeploy subagents in parallel. Each must return ONLY the required fields below — no prose paragraphs, no scoring.\n\n**1. Structural Evidence** subagent (always deploy)\nRequired fields returned:\n- Total interactive-element count on audited surface\n- Max nesting depth of the primary component tree\n- Repeated-pattern count (same affordance appearing >1 place with the same purpose)\n- Dead-prop / unused-import count\n- File:line citations for every count\n\n**2. Visual Evidence** subagent (always deploy)\nMode: if target is a reachable URL or running dev server → use the `agent-browser` skill for screenshots and computed-style inspection. If target is a static repo with no running instance → read source CSS / tokens / component files and report inferred facts only (mark these \"INFERRED\").\nRequired fields returned:\n- Spacing scale observed (px array)\n- Type scale observed (px array)\n- Distinct color count (count of unique hex/oklch tokens actually rendered or referenced)\n- Lowest contrast ratio observed across primary text\n- States present checklist: empty / loading / error / success / focus / disabled — present or missing for each\n\n**3. Copy & Honesty** subagent (always deploy)\nRequired fields returned:\n- List of every user-facing string with file:line\n- Flagged inflations (marketing superlatives without backing)\n- Flagged dark patterns (forced continuity, hidden cost, fake scarcity, confirmshaming)\n- Flagged jargon / unclear labels with proposed plain replacement\n- Label→behavior mismatches with file:line of both\n\n**4. Weight & Friction** subagent (always deploy)\nRequired fields returned:\n- Initial JS bytes (number)\n- Network request count for primary view (number)\n- Time-to-interactive ms (number, measured or estimated with method noted)\n- Animation count on idle screen (number)\n- Notification / badge / modal count on initial load (number)\n\n**5. Accessibility Evidence** subagent (OPTIONAL — deploy only if target has a meaningful interactive UI surface; skip for static landing pages without interaction)\nRequired fields returned:\n- WCAG contrast pass/fail per text token\n- Focus order list across primary controls\n- Keyboard reachability of every primary action (yes/no per action)\n- ARIA landmark count\n- Skip-link present (yes/no)\n\n**Principle → subagent mapping** (orchestrator uses this when scoring):\n\n| Principle | Fed by |\n|-----------|--------|\n| #1 innovative | orchestrator-only (judgment using all evidence) |\n| #2 useful | Structural, Accessibility |\n| #3 aesthetic | Visual |\n| #4 understandable | Structural, Copy & Honesty, Accessibility |\n| #5 unobtrusive | Structural, Visual |\n| #6 honest | Copy & Honesty |\n| #7 long-lasting | orchestrator-only (judgment using all evidence) |\n| #8 thorough | Visual |\n| #9 environmentally friendly | Weight & Friction |\n| #10 as little design as possible | Structural |\n\nThe orchestrator writes `01-evidence.md` consolidating all subagent reports. Reject any finding without a source citation. Subagents are explicitly forbidden from scoring — only the orchestrator scores, using the rubric in Phase 2.\n\n### Phase 2: Scorecard (ORCHESTRATOR)\n\nThe orchestrator scores each of the ten principles itself — do NOT delegate scoring.\n\nFor each principle, write to `02-scorecard.md`:\n\n```\nN. Good design is — Score: X/3\n Evidence: \n Justification: \n```\n\nPer-principle scoring anchors (apply verbatim — pick the level whose signal best matches the audited surface):\n\n#1 innovative — 3: introduces a pattern not seen in 5+ peer products and ships it with restraint. 2: refreshes an existing pattern with a clear improvement. 1: imitates competitors with minor variation. 0: copies a competitor's flow wholesale.\n#2 useful — 3: primary task completes in fewest possible steps; no decoy actions. 2: primary task completes but adjacent surface adds steps. 1: primary task requires unnecessary detours. 0: primary task is not directly supported on the screen audited.\n#3 aesthetic — 3: spacing/type/color obey a single visible system; no orphan styles. 2: ≤2 minor inconsistencies across audited surface. 1: 3–5 inconsistencies OR one jarring violation. 0: no visible system OR active visual noise.\n#4 understandable — 3: a first-time user names every primary control correctly. 2: 1 control needs a tooltip. 1: 2–3 controls unclear; jargon present. 0: primary action is not identifiable without help.\n#5 unobtrusive — 3: chrome recedes; content is the figure, UI the ground. 2: chrome visible but quiet. 1: decoration competes with content. 0: chrome dominates content.\n#6 honest — 3: every claim, badge, and label maps 1:1 to actual behavior. 2: ≤1 minor inflation (e.g. \"powerful\" once). 1: 2+ inflations OR one dark pattern. 0: any deceptive flow (forced continuity, hidden cost, fake scarcity).\n#7 long-lasting — 3: visual language has no dated trend markers; would read as current 3 years from now. 2: 1 dated marker. 1: 2–3 dated markers (skeuomorph residue, fad gradients, trend typography). 0: design reads as a specific year's trend.\n#8 thorough — 3: empty / loading / error / success / focus / disabled all present and considered. 2: 1 state missing or rough. 1: 2–3 states missing. 0: 4+ states missing or default-browser.\n#9 environmentally friendly — 3: initial JS <100KB, no idle animation, dark mode honored, prefers-reduced-motion respected. 2: <500KB, motion gated. 1: 500KB–2MB, motion always on. 0: >2MB OR autoplay video OR dark mode ignored.\n#10 as little design as possible — 3: every element earns its place; removing any one breaks the task. 2: ≤2 removable elements. 1: 3–5 removable elements. 0: page is dominated by decoration or duplicated affordances.\n\nScoring rules:\n- **Tie-breaker rule**: When uncertain between two scores, pick the lower one. Convergence > generosity.\n- **Score worst, not mean**: When a principle has multiple representative instances on the audited surface, score the worst instance — not the average.\n- **No bonuses, no weights**: Scores stay 0–3 integer. Principles are equally weighted. Total is sum of ten scores, max 30.\n\n### Phase 3: Verdict (ORCHESTRATOR)\n\nWrite `03-verdict.md` with one of three verdicts, chosen by these rules:\n\n- **NEW DESIGN** — No design exists yet, OR the existing artifact is a stub/wireframe with no real decisions to preserve.\n- **REFINE** — Total score ≥ 20 AND no individual principle scored 0. The bones are good; iterate.\n- **REDESIGN** — Total score < 20, OR any principle scored 0 on a load-bearing dimension (typically #2 useful, #4 understandable, or #6 honest). Start over from purpose.\n\nState the verdict in one sentence. Then list the 3–5 highest-leverage moves — each tied to a specific principle and evidence anchor. These become the spine of the next phase's plan.\n\n**Anti-patterns to reject in your own verdict:**\n- Recommending REFINE because the codebase is large (sunk cost is not a design principle)\n- Recommending REDESIGN because a single screen is ugly (scope it)\n- Recommending NEW when an honest REDESIGN is warranted (don't dodge the critique)\n\n### Phase 4: /make-plan Handoff\n\nWrite `04-handoff-prompt.md` containing exactly ONE fenced `/make-plan` prompt matching the verdict. The prompt must be self-contained — the next session won't see this audit unless it's quoted in.\n\nUse the matching template below. Fill every ``. Include the top 3–5 moves from Phase 3 verbatim, each with its evidence anchor.\n\n**Quote-in step (mandatory, applies to all three templates below):** Before emitting the handoff, replace EVERY `` placeholder with concrete content from the audit. Inline the verdict paragraph from `03-verdict.md` and the top 3–5 moves verbatim into the template. Do NOT leave bare references like \"see DESIGN-IS-.../03-verdict.md\" — the next session won't have file access to the audit. The emitted handoff must be readable and actionable with zero external lookups.\n\n#### Template: NEW DESIGN\n\n````\n/make-plan Design from scratch.\n\nPrimary user: \nPrimary task: \nConstraints: \n\nNon-goals (do not design these now):\n- \n- \n- \n\nReference principles to optimize for, in order:\n1. Useful (#2) — \n2. Understandable (#4) — \n3. As little design as possible (#10) — \n\nDeliverables for the plan:\n- Information architecture (one screen map or component tree)\n- Primary flow wireframe (low-fi, labeled)\n- Token decisions (type scale, spacing scale, color count cap)\n- States checklist (empty, loading, error, success, focus, disabled)\n- Honesty audit on every user-facing string before ship\n\nAnti-patterns to guard against (specific to NEW):\n- Decoration without function\n- Novel interactions without precedent\n- Copy that overpromises\n- Designing for screens the Non-goals list excluded\n````\n\n#### Template: REFINE DESIGN\n\n````\n/make-plan Refine based on a Dieter Rams audit (total /30).\n\nVerdict paragraph (quoted from 03-verdict.md):\n> \n\nKeep (already strong, do NOT touch in this pass):\n- Principle # () scored 3 — Evidence: . Regression check: .\n- \n\nFix in priority order (top 3–5 moves from the audit, verbatim):\n1. : . Evidence: .\n2. : . Evidence: .\n3. : . Evidence: .\n4. \n5. \n\nOut of scope for this refine pass: \n\nDeliverables for the plan:\n- Per-fix: target files, exact change, verification step\n- Token/spec changes consolidated in one place\n- Regression checklist for every \"Keep\" item above\n\nAnti-patterns to guard against (specific to REFINE):\n- Adding new abstractions where a direct change suffices\n- Restyling areas that already scored 3\n- Scope creep into structural redesign (if structure must change, this should be REDESIGN, not REFINE)\n- Letting fixes mutate principles outside the priority list\n````\n\n#### Template: REDESIGN\n\n````\n/make-plan Redesign . Current design failed audit at /30 with critical gaps in principles .\n\nVerdict paragraph (quoted from 03-verdict.md):\n> \n\nWhy redesign and not refine: \n\nPreserve from current design (MUST be non-empty — at minimum, name the brand tokens):\n- \n- \n- (if structurally nothing survives, write: \"Brand tokens only — color palette and logo. Discard everything else.\")\n\nDiscard (MUST be non-empty — name the structural patterns causing the failures):\n- . Evidence: . Caused failure on principle #.\n- . Evidence: . Caused failure on principle #.\n\nTop 3–5 moves from the audit (verbatim):\n1. : . Evidence: .\n2. : . Evidence: .\n3. : . Evidence: .\n\nRedesign principles in priority order:\n1. — \n2. — \n3. — \n\nDeliverables for the plan:\n- New information architecture (not derived from old)\n- New primary flow (low-fi, labeled, compared side-by-side to current)\n- States checklist (empty, loading, error, success, focus, disabled)\n- Migration path for users currently on the old design\n- Cutover criteria (when is the old design retired)\n\nAnti-patterns to guard against (specific to REDESIGN):\n- Porting old structure under new styling\n- Keeping both designs behind a flag indefinitely\n- Redesigning to follow a trend rather than the principles above\n- Treating the Preserve list as optional — it must be filled before this handoff is valid\n````\n\n## Key Principles (for the auditor)\n\n- **Evidence over taste** — every score cites a source; \"feels wrong\" is not a finding\n- **Score what is, not what was intended** — design is what ships, not what was drawn\n- **Honesty applies to the audit too** — if total is 28/30, say REFINE even if the user wanted a redesign; if it's 12/30, say REDESIGN even if the user wanted a refine\n- **One verdict, not three** — pick NEW or REFINE or REDESIGN; do not hedge\n- **Handoff, don't implement** — `design-is` ends at the `/make-plan` prompt; `/make-plan` and `/do` take it from there\n- **Verdict commitment** — Once `02-scorecard.md` is written, the verdict follows the Phase 3 rule mechanically. Never re-score to back into a preferred verdict; if the scorecard says REDESIGN, the handoff is REDESIGN.\n\n## Failure Modes to Prevent\n\n- Scoring from screenshots alone without reading the code — redeploy with structural subagent\n- Scoring the codebase instead of the design — re-anchor on user-facing evidence\n- Awarding 3s generously to soften the verdict — recalibrate against the per-principle anchors in Phase 2\n- Producing a handoff prompt that doesn't quote the verdict and top moves — the next session is blind without them\n- Skipping Phase 0 scope lock — auditing the wrong surface wastes Phase 1\n- **Sunk-cost reasoning** — recommending REFINE because the codebase is large; sunk cost is not a design principle\n- **Hedging across verdicts** — \"could be REFINE or REDESIGN depending on...\" — pick one\n- **Score inflation to match a desired verdict** — score the evidence, then read the verdict off the rule\n- **Letting Phase 0 user preference override Phase 3 evidence** — the user can disagree with the verdict, but the audit reports what the evidence says","schemaVersion":1},"repoUrl":"https://github.com/thedotmack/claude-mem/tree/main/plugin/skills/design-is","tags":["ai","ai-agents","ai-memory","anthropic","artificial-intelligence","chromadb","claude","claude-agent-sdk","claude-agents","claude-code","claude-code-plugin","claude-skills"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"claude-mem","audit":{"files":["openclaw/package.json","package.json"],"binaries":[],"findings":[{"kind":"dependency","rule":"DP-04","message":"No npm lock file: installs resolve whatever the ranges allow today.","surface":"package.json","evidence":"@better-auth/api-key@^1.6.16, better-auth@^1.6.16","severity":"medium"}],"packages":2,"auditedAt":"2026-09-25T10:51:51.575Z","lockfiles":[]},"forks":8366,"owner":"thedotmack","stars":94658,"topics":["ai","ai-agents","ai-memory","anthropic","artificial-intelligence","chromadb","claude","claude-agent-sdk","claude-agents","claude-code","claude-code-plugin","claude-skills","embeddings","long-term-memory","mem0","memory-engine","openmemory","rag","sqlite","supermemory"],"license":"Apache-2.0","fullName":"thedotmack/claude-mem","homepage":"https://claude-mem.ai","language":"TypeScript","pushedAt":"2026-09-25T01:11:49Z","avatarUrl":"https://avatars.githubusercontent.com/u/683968?v=4","crawledAt":"2026-09-25T10:51:42.785Z","openIssues":296,"manifestFile":"SKILL.md","manifestPath":"plugin/skills/design-is/SKILL.md","defaultBranch":"main"},"readme":"# Design Is\n\n## Do not use for\n\n- Routine UI code reviews → use `/review`\n- Pure copy edits → use a separate copy pass\n- Pre-design ideation with no artifact yet → start with `/make-plan` directly\n\nYou are an ORCHESTRATOR. Audit a design against Dieter Rams' ten principles, score each principle with evidence, decide the outcome verdict (NEW / REFINE / REDESIGN), and hand off to `/make-plan` with a ready-to-run prompt.\n\nYou do not write implementation code. You produce: evidence-cited scores, a verdict, and a `/make-plan` handoff prompt.\n\n## The Ten Principles (Dieter Rams)\n\nAudit each principle in this exact order. Each gets a score 0–3 and ≥1 piece of evidence (`file:line`, screenshot region, copy excerpt, or measured value).\n\n1. **Good design is innovative** — Does it advance the form, or imitate? Innovation rides on technology; never an end in itself.\n2. **Good design makes a product useful** — Does it serve the primary task? Emphasizes usefulness; disregards anything that detracts.\n3. **Good design is aesthetic** — Is it beautiful? Only well-executed objects can be beautiful; aesthetic quality affects well-being.\n4. **Good design makes a product understandable** — Does the structure clarify function? Or is it self-explanatory at best?\n5. **Good design is unobtrusive** — Does it stay out of the way? Neither decorative objects nor works of art — leave room for self-expression.\n6. **Good design is honest** — Does it claim only what it is? No false promises, no manipulation, no inflated value.\n7. **Good design is long-lasting** — Will it age well? Avoids being fashionable; never appears antiquated.\n8. **Good design is thorough down to the last detail** — Are edges, empty states, errors, focus rings, motion curves all considered? Care and accuracy express respect for the user.\n9. **Good design is environmentally friendly** — Does it conserve resources? Minimizes pollution — in software: bundle weight, energy, attention, cognitive load.\n10. **Good design is as little design as possible** — Less, but better. Concentrates on essentials; back to purity, back to simplicity.\n\n> The user wrote \"Dieter Braun\" — they mean Dieter Rams. Don't correct them inline; just use the right principles.\n\n## Delegation Model\n\nUse subagents for *evidence gathering* (reading components, measuring contrast, counting elements, inspecting tokens, screenshotting via agent-browser). Keep *scoring and verdict synthesis* with the orchestrator. Reject subagent reports that score without citing evidence and redeploy.\n\n### Subagent Reporting Contract (MANDATORY)\n\nEach evidence subagent response must include:\n1. Sources consulted — exact file paths and line ranges, or screenshot regions\n2. Concrete findings — what is present, what is missing, with quotes/values\n3. Per-principle facts (not opinions) — leave scoring to the orchestrator\n4. Known gaps — what could not be inspected and why\n\n## Output Artifacts\n\nAll artifacts go in `DESIGN-IS-/` at repo root (or the project the user points at):\n\n- `00-scope.md` — what was audited (URL, component paths, screens), input materials\n- `01-evidence.md` — per-principle evidence collected by subagents\n- `02-scorecard.md` — per-principle 0–3 score with one-line justification + total\n- `03-verdict.md` — NEW / REFINE / REDESIGN with reasoning\n- `04-handoff-prompt.md` — copy-pasteable `/make-plan` prompt for the chosen outcome\n\n## Phases\n\n### Phase 0: Scope Lock (ALWAYS FIRST)\n\nAsk the user (or infer from the request) and write `00-scope.md`:\n- What is being audited? (live URL, repo path, Figma frame, component name)\n- Who is the primary user, and what is the primary task?\n- Constraints (brand, stack, deadline)\n- Reference designs or competitors, if any\n\nIf the user is asking about a design that doesn't exist yet, skip Phases 1–2 and go straight to Phase 3 with verdict = **NEW**.\n\n### Phase 1: Evidence Gathering (FAN OUT)\n\nDeploy subagents in parallel. Each must return ONLY the required fields below — no prose paragra","createdAt":"2026-09-25T10:51:51.719Z","updatedAt":"2026-09-25T10:51:51.719Z"},{"id":"cmugwib4501vbqu06n2jewwlt","slug":"composio-community-awesome-claude-plugins-canvas-design","name":"canvas-design","description":"Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.","authorId":"gh:composio-community","authorName":"composio-community","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1977,"pricePerCall":0,"manifest":{"name":"canvas-design","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.","permissions":[],"systemPrompt":"These are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files.\n\nComplete this in two steps:\n1. Design Philosophy Creation (.md file)\n2. Express by creating it on a canvas (.pdf file or .png file)\n\n## DESIGN PHILOSOPHY CREATION\n\nTo begin, create a VISUAL PHILOSOPHY (not layouts or templates) that will be interpreted through:\n- Form, space, color, composition\n- Images, graphics, shapes, patterns\n- Minimal text as visual accent\n\n### THE CRITICAL UNDERSTANDING\n- What is received: Some subtle input or instructions by the user that should be taken into account, but used as a foundation; it should not constrain creative freedom.\n- What is created: A design philosophy/aesthetic movement.\n- What happens next: Then, the same version receives the philosophy and EXPRESSES IT VISUALLY - creating artifacts that are 90% visual design, 10% essential text.\n\n### HOW TO GENERATE A VISUAL PHILOSOPHY\n\n**Name the movement** (1-2 words): \"Brutalist Joy\" / \"Chromatic Silence\" / \"Metabolist Dreams\"\n\n**Articulate the philosophy** (4-6 paragraphs - concise but complete):\n\nTo capture the VISUAL essence, express how the philosophy manifests through:\n- Space and form\n- Color and material\n- Scale and rhythm\n- Composition and balance\n- Visual hierarchy\n\n**CRITICAL GUIDELINES:**\n- **Avoid redundancy**: Each design aspect should be mentioned once.\n- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final work should appear as though it took countless hours to create, was labored over with care, and comes from someone at the absolute top of their field.\n- **Leave creative space**: Remain specific about the aesthetic direction, but concise enough that there's room for interpretive choices.\n\n### PHILOSOPHY EXAMPLES\n\n**\"Concrete Poetry\"**\nPhilosophy: Communication through monumental form and bold geometry.\nVisual expression: Massive color blocks, sculptural typography (huge single words, tiny labels), Brutalist spatial divisions, Polish poster energy meets Le Corbusier.\n\n**\"Chromatic Language\"**\nPhilosophy: Color as the primary information system.\nVisual expression: Geometric precision where color zones create meaning. Typography minimal - small sans-serif labels letting chromatic fields communicate. Think Josef Albers' interaction meets data visualization.\n\n**\"Analog Meditation\"**\nPhilosophy: Quiet visual contemplation through texture and breathing room.\nVisual expression: Paper grain, ink bleeds, vast negative space. Photography and illustration dominate. Typography whispered (small, restrained, serving the visual). Japanese photobook aesthetic.\n\n## CANVAS CREATION\n\nWith both the philosophy and the conceptual framework established, express it on a canvas. Use the design philosophy created and the instructions below to craft a masterpiece.\n\n**IMPORTANT**: For any type of content, even if the user requests something for a movie/game/book, the approach should still be sophisticated. Never lose sight of the idea that this should be art, not something that's cartoony or amateur.\n\nTo create museum or magazine quality work, use the design philosophy as the foundation. Create one single page, highly visual, design-forward PDF or PNG output. Generally use repeating patterns and perfect shapes. Treat the abstract philosophical design as if it were a scientific bible.\n\n**Text as a contextual element**: Text is always minimal and visual-first, but let context guide whether that means whisper-quiet labels or bold typographic gestures. Most of the time, font should be thin. All use of fonts must be design-forward and prioritize visual communication. Regardless of text scale, nothing falls off the page and nothing overlaps.\n\n**CRITICAL**: To achieve human-crafted quality (not AI-generated), create work that looks like it took countless hours. Make it appear as though someone at the absolute top of their field labored over every detail with painstaking care.\n\nOutput the final result as a single, downloadable .pdf or .png file, alongside the design philosophy used as a .md file.","schemaVersion":1},"repoUrl":"https://github.com/composio-community/awesome-claude-plugins/tree/master/canvas-design/skills/canvas-design","tags":["anthropic","claude-ai","claude-code","claude-code-plugin","claude-code-plugin-marketplace","claude-code-plugins","claude-code-plugins-marketplace","claude-cowork","claude-desktop","claude-plugins","claude-skills","plugins"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"awesome-claude-plugins","audit":{"files":[],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T11:52:20.904Z","lockfiles":[]},"forks":629,"owner":"composio-community","stars":1977,"topics":["anthropic","claude-ai","claude-code","claude-code-plugin","claude-code-plugin-marketplace","claude-code-plugins","claude-code-plugins-marketplace","claude-cowork","claude-desktop","claude-plugins","claude-skills","plugins"],"license":null,"fullName":"composio-community/awesome-claude-plugins","homepage":null,"language":"JavaScript","pushedAt":"2026-07-26T09:02:02Z","avatarUrl":"https://avatars.githubusercontent.com/u/267807433?v=4","crawledAt":"2026-09-25T11:52:15.057Z","openIssues":357,"manifestFile":"SKILL.md","manifestPath":"canvas-design/skills/canvas-design/SKILL.md","defaultBranch":"master"},"readme":"These are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files.\n\nComplete this in two steps:\n1. Design Philosophy Creation (.md file)\n2. Express by creating it on a canvas (.pdf file or .png file)\n\n## DESIGN PHILOSOPHY CREATION\n\nTo begin, create a VISUAL PHILOSOPHY (not layouts or templates) that will be interpreted through:\n- Form, space, color, composition\n- Images, graphics, shapes, patterns\n- Minimal text as visual accent\n\n### THE CRITICAL UNDERSTANDING\n- What is received: Some subtle input or instructions by the user that should be taken into account, but used as a foundation; it should not constrain creative freedom.\n- What is created: A design philosophy/aesthetic movement.\n- What happens next: Then, the same version receives the philosophy and EXPRESSES IT VISUALLY - creating artifacts that are 90% visual design, 10% essential text.\n\n### HOW TO GENERATE A VISUAL PHILOSOPHY\n\n**Name the movement** (1-2 words): \"Brutalist Joy\" / \"Chromatic Silence\" / \"Metabolist Dreams\"\n\n**Articulate the philosophy** (4-6 paragraphs - concise but complete):\n\nTo capture the VISUAL essence, express how the philosophy manifests through:\n- Space and form\n- Color and material\n- Scale and rhythm\n- Composition and balance\n- Visual hierarchy\n\n**CRITICAL GUIDELINES:**\n- **Avoid redundancy**: Each design aspect should be mentioned once.\n- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final work should appear as though it took countless hours to create, was labored over with care, and comes from someone at the absolute top of their field.\n- **Leave creative space**: Remain specific about the aesthetic direction, but concise enough that there's room for interpretive choices.\n\n### PHILOSOPHY EXAMPLES\n\n**\"Concrete Poetry\"**\nPhilosophy: Communication through monumental form and bold geometry.\nVisual expression: Massive color blocks, sculptural typography (huge single words, tiny labels), Brutalist spatial divisions, Polish poster energy meets Le Corbusier.\n\n**\"Chromatic Language\"**\nPhilosophy: Color as the primary information system.\nVisual expression: Geometric precision where color zones create meaning. Typography minimal - small sans-serif labels letting chromatic fields communicate. Think Josef Albers' interaction meets data visualization.\n\n**\"Analog Meditation\"**\nPhilosophy: Quiet visual contemplation through texture and breathing room.\nVisual expression: Paper grain, ink bleeds, vast negative space. Photography and illustration dominate. Typography whispered (small, restrained, serving the visual). Japanese photobook aesthetic.\n\n## CANVAS CREATION\n\nWith both the philosophy and the conceptual framework established, express it on a canvas. Use the design philosophy created and the instructions below to craft a masterpiece.\n\n**IMPORTANT**: For any type of content, even if the user requests something for a movie/game/book, the approach should still be sophisticated. Never lose sight of the idea that this should be art, not something that's cartoony or amateur.\n\nTo create museum or magazine quality work, use the design philosophy as the foundation. Create one single page, highly visual, design-forward PDF or PNG output. Generally use repeating patterns and perfect shapes. Treat the abstract philosophical design as if it were a scientific bible.\n\n**Text as a contextual element**: Text is always minimal and visual-first, but let context guide whether that means whisper-quiet labels or bold typographic gestures. Most of the time, font should be thin. All use of fonts must be design-forward and prioritize visual communication. Regardless of text scale, nothing falls off the page and nothing overlaps.\n\n**CRITICAL**: To achieve human-crafted quality (not AI-generated), create work that looks like it took countless hours. Make it appear as though someone at the absolute top of their field labored over every detail wit","createdAt":"2026-09-25T11:52:20.933Z","updatedAt":"2026-09-25T11:52:20.933Z"},{"id":"cmugymufr02igqu0670il5n4j","slug":"plugin87-ux-ui-agent-skills-design-doctrine","name":"design-doctrine","description":"The house rules for ANY design or UI work - the verification protocol (run the gate, never claim a number), the absolute no-emoji rule, token by intent, one shared theme, the eight states, one thing leads, and output completeness. Load this FIRST whenever building, reviewing, or theming a screen, component, or token set. Installed as a plugin, this skill carries what CLAUDE.md carries in the repo.","authorId":"gh:plugin87","authorName":"plugin87","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1463,"pricePerCall":0,"manifest":{"name":"design-doctrine","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"The house rules for ANY design or UI work - the verification protocol (run the gate, never claim a number), the absolute no-emoji rule, token by intent, one shared theme, the eight states, one thing leads, and output completeness. Load this FIRST whenever building, reviewing, or theming a screen, component, or token set. Installed as a plugin, this skill carries what CLAUDE.md carries in the repo.","permissions":[],"systemPrompt":"# Skill: Design Doctrine\n\nA plugin's root `CLAUDE.md` is not loaded as project context, so the always-on\nbrief travels here instead. Read this before the first line of any design work,\nthen load the rule file for the territory you are actually in.\n\n## Verification protocol - run gates, never claim\n\n1. **Never state a number you did not measure.** Any contrast ratio, \"WCAG pass\",\n or \"100%\" must come from running a gate and reporting its real output. If you\n have not run it, say \"not verified yet.\"\n2. **Verify every state, not just resting.** `node scripts/verify_states.mjs [--dark]`\n measures default, hover and focus - a button that passes at rest can fail on hover.\n3. **One command before reporting done:** `node scripts/accuracy_report.mjs`.\n Report the real `N/N` line. It is all-or-nothing.\n4. **Build with the gates, not after them.** Fix and re-run until green; never\n announce success between failures.\n5. **Render and LOOK.** Gates pass while a UI is still visibly broken. Screenshot\n the harness in both themes, click every control, and confirm the state changed.\n6. **Responsive is gated too:** `node scripts/verify_responsive.mjs ` -\n no horizontal overflow at 280/320/414px.\n7. **Honest scope.** The gates prove objective correctness. They never prove taste.\n For that, run `/critique` and look at the work yourself.\n8. **SKIPPED is not a pass.** With no browser installed a render gate prints\n `SKIPPED` and exits 0, reporting nothing. Run single render gates behind\n `DS_REQUIRE_BROWSER=1` so that becomes `REQUIRED, FAILING`, and fix it with\n `npx playwright install chrome` rather than by removing the flag.\n\n> ABSOLUTE: zero emoji in any output - UI, code, JSON, copy, comments, commit\n> messages. Not as an icon, a bullet, a status dot, or \"polish\". Emoji are the\n> number-one tell of machine-generated work. Use a lucide icon (inline SVG,\n> `currentColor`) or plain words. Enforced by `scripts/check_no_emoji.py`.\n\n## The five non-negotiables\n\n1. **Token by intent.** Pick the token whose meaning matches the action.\n Destructive actions (Delete, Remove, Revoke) wear `action.destructive` in every\n place they appear - the trigger and the confirm dialog both. A blue Delete is a\n bug. Measured by `scripts/lint_intent.mjs`.\n2. **One theme, one source of truth.** Every page renders from the same\n `tokens/*.json` through one CSS-variable layer imported once at the app root.\n No per-page palette, no hardcoded hex, px, or timing.\n3. **Every interactive element ships eight states:** default, hover, focus,\n active, disabled, loading (if async), error (if input), and selected (if\n selectable). The eighth is not optional when the thing can be selected.\n4. **One thing leads.** Every screen has a first place for the eye, and display\n type is at least 2.5x the body size. Four equal cards means the eye lands\n nowhere and the screen reads as generated.\n5. **Output completeness.** A partial output is a broken output. Deliver full\n files, never placeholders. Asked for N components, deliver all N.\n\n## Decision framework\n\nUser needs, then accessibility, then consistency, then aesthetics, then developer\nexperience. Never sacrifice a higher tier for a lower one. Beautiful but\ninaccessible is broken; consistent but confusing is the wrong pattern.\n\n## Where the depth lives\n\n| Read it when | File |\n|---|---|\n| Tokens, palettes, theming, dark mode, any colour decision | `.claude/rules/tokens-and-color.md` |\n| Type scale, line length, the 4px spacing rhythm | `.claude/rules/typography-and-spacing.md` |\n| Building any screen or component, composition, empty states | `.claude/rules/components.md` |\n| Auditing, or finishing any interactive element | `.claude/rules/accessibility.md` |\n| Generating code for React, Next.js, SwiftUI, or any adapter | `.claude/rules/frameworks.md` |\n| Design review, prototyping, research, handoff | `.claude/rules/review-and-research.md` |\n| Aesthetic direction, motion, voice and tone, governance, QA | `.claude/rules/brand-and-operations.md` |\n\nThen pick the runnable skill for the job: `design-tokens`, `design-component`,\n`design-code`, `design-review`, `a11y-audit`, `apply-aesthetic`, `brandkit`,\n`image-to-code`, `redesign`, and the rest. Interrogate the brief first with\n`/grill-me`; prove the result with `/gate`; judge it with `/critique`.","schemaVersion":1},"repoUrl":"https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-doctrine","tags":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"ux-ui-agent-skills","audit":{"files":["package.json"],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T12:51:51.746Z","lockfiles":[]},"forks":153,"owner":"plugin87","stars":1463,"topics":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react","tailwindcss","ui","ux","wcag"],"license":"MIT","fullName":"plugin87/ux-ui-agent-skills","homepage":"https://plugin87.github.io/ux-ui-agent-skills/","language":"JavaScript","pushedAt":"2026-09-16T02:33:41Z","avatarUrl":"https://avatars.githubusercontent.com/u/5790381?v=4","crawledAt":"2026-09-25T12:51:46.935Z","openIssues":6,"manifestFile":"SKILL.md","manifestPath":".claude/skills/design-doctrine/SKILL.md","defaultBranch":"main"},"readme":"# Skill: Design Doctrine\n\nA plugin's root `CLAUDE.md` is not loaded as project context, so the always-on\nbrief travels here instead. Read this before the first line of any design work,\nthen load the rule file for the territory you are actually in.\n\n## Verification protocol - run gates, never claim\n\n1. **Never state a number you did not measure.** Any contrast ratio, \"WCAG pass\",\n or \"100%\" must come from running a gate and reporting its real output. If you\n have not run it, say \"not verified yet.\"\n2. **Verify every state, not just resting.** `node scripts/verify_states.mjs [--dark]`\n measures default, hover and focus - a button that passes at rest can fail on hover.\n3. **One command before reporting done:** `node scripts/accuracy_report.mjs`.\n Report the real `N/N` line. It is all-or-nothing.\n4. **Build with the gates, not after them.** Fix and re-run until green; never\n announce success between failures.\n5. **Render and LOOK.** Gates pass while a UI is still visibly broken. Screenshot\n the harness in both themes, click every control, and confirm the state changed.\n6. **Responsive is gated too:** `node scripts/verify_responsive.mjs ` -\n no horizontal overflow at 280/320/414px.\n7. **Honest scope.** The gates prove objective correctness. They never prove taste.\n For that, run `/critique` and look at the work yourself.\n8. **SKIPPED is not a pass.** With no browser installed a render gate prints\n `SKIPPED` and exits 0, reporting nothing. Run single render gates behind\n `DS_REQUIRE_BROWSER=1` so that becomes `REQUIRED, FAILING`, and fix it with\n `npx playwright install chrome` rather than by removing the flag.\n\n> ABSOLUTE: zero emoji in any output - UI, code, JSON, copy, comments, commit\n> messages. Not as an icon, a bullet, a status dot, or \"polish\". Emoji are the\n> number-one tell of machine-generated work. Use a lucide icon (inline SVG,\n> `currentColor`) or plain words. Enforced by `scripts/check_no_emoji.py`.\n\n## The five non-negotiables\n\n1. **Token by intent.** Pick the token whose meaning matches the action.\n Destructive actions (Delete, Remove, Revoke) wear `action.destructive` in every\n place they appear - the trigger and the confirm dialog both. A blue Delete is a\n bug. Measured by `scripts/lint_intent.mjs`.\n2. **One theme, one source of truth.** Every page renders from the same\n `tokens/*.json` through one CSS-variable layer imported once at the app root.\n No per-page palette, no hardcoded hex, px, or timing.\n3. **Every interactive element ships eight states:** default, hover, focus,\n active, disabled, loading (if async), error (if input), and selected (if\n selectable). The eighth is not optional when the thing can be selected.\n4. **One thing leads.** Every screen has a first place for the eye, and display\n type is at least 2.5x the body size. Four equal cards means the eye lands\n nowhere and the screen reads as generated.\n5. **Output completeness.** A partial output is a broken output. Deliver full\n files, never placeholders. Asked for N components, deliver all N.\n\n## Decision framework\n\nUser needs, then accessibility, then consistency, then aesthetics, then developer\nexperience. Never sacrifice a higher tier for a lower one. Beautiful but\ninaccessible is broken; consistent but confusing is the wrong pattern.\n\n## Where the depth lives\n\n| Read it when | File |\n|---|---|\n| Tokens, palettes, theming, dark mode, any colour decision | `.claude/rules/tokens-and-color.md` |\n| Type scale, line length, the 4px spacing rhythm | `.claude/rules/typography-and-spacing.md` |\n| Building any screen or component, composition, empty states | `.claude/rules/components.md` |\n| Auditing, or finishing any interactive element | `.claude/rules/accessibility.md` |\n| Generating code for React, Next.js, SwiftUI, or any adapter | `.claude/rules/frameworks.md` |\n| Design review, prototyping, research, handoff | `.claude/rules/review-and-research.md` |\n| Aesthetic direction, motion, voice and","createdAt":"2026-09-25T12:51:51.831Z","updatedAt":"2026-09-25T12:51:51.831Z"},{"id":"cmugymugk02ipqu06gtr4zlrg","slug":"plugin87-ux-ui-agent-skills-design-tokens","name":"design-tokens","description":"Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.","authorId":"gh:plugin87","authorName":"plugin87","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1463,"pricePerCall":0,"manifest":{"name":"design-tokens","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.","permissions":[],"systemPrompt":"# Skill: Design Tokens\n\nProduce and maintain DTCG (`$type`/`$value`) tokens following the project's 3-tier system.\n\n## Steps\n1. Read `.claude/rules/tokens-and-color.md` → \"Token System\" + \"Color Guidelines\" and `.claude/rules/typography-and-spacing.md` for the rules (4px base, Major Third scale, OKLCH palette generation, dark-mode-at-semantic-layer).\n2. Read the relevant existing files in `tokens/` to match structure: `colors.json`, `typography.json`, `spacing.json`, `shadows.json`, `borders.json`, `breakpoints.json`, `motion.json`, `gradients.json`, `opacity.json`, `blur.json`, `sizing.json`, `states.json`, `theming.json`.\n3. Generate/extend tokens:\n - Primitives = raw values (never used directly). Semantic = purpose aliases. Component = component-scoped.\n - New palettes: generate 11 OKLCH shades; verify 500 ≥ 4.5:1 on white (text), 600 ≥ 3:1 (UI) using the `a11y-audit` skill / `scripts/contrast.py`.\n - Multi-brand/density → `theming.json`.\n4. **Validate**: run `python3 scripts/validate_tokens.py` (JSON validity + alias resolution).\n\n## Output\nDTCG JSON. Preserve `$description` on every token. Reference, never hardcode.","schemaVersion":1},"repoUrl":"https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-tokens","tags":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"ux-ui-agent-skills","audit":{"files":["package.json"],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T12:51:51.746Z","lockfiles":[]},"forks":153,"owner":"plugin87","stars":1463,"topics":["accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react","tailwindcss","ui","ux","wcag"],"license":"MIT","fullName":"plugin87/ux-ui-agent-skills","homepage":"https://plugin87.github.io/ux-ui-agent-skills/","language":"JavaScript","pushedAt":"2026-09-16T02:33:41Z","avatarUrl":"https://avatars.githubusercontent.com/u/5790381?v=4","crawledAt":"2026-09-25T12:51:46.935Z","openIssues":6,"manifestFile":"SKILL.md","manifestPath":".claude/skills/design-tokens/SKILL.md","defaultBranch":"main"},"readme":"# Skill: Design Tokens\n\nProduce and maintain DTCG (`$type`/`$value`) tokens following the project's 3-tier system.\n\n## Steps\n1. Read `.claude/rules/tokens-and-color.md` → \"Token System\" + \"Color Guidelines\" and `.claude/rules/typography-and-spacing.md` for the rules (4px base, Major Third scale, OKLCH palette generation, dark-mode-at-semantic-layer).\n2. Read the relevant existing files in `tokens/` to match structure: `colors.json`, `typography.json`, `spacing.json`, `shadows.json`, `borders.json`, `breakpoints.json`, `motion.json`, `gradients.json`, `opacity.json`, `blur.json`, `sizing.json`, `states.json`, `theming.json`.\n3. Generate/extend tokens:\n - Primitives = raw values (never used directly). Semantic = purpose aliases. Component = component-scoped.\n - New palettes: generate 11 OKLCH shades; verify 500 ≥ 4.5:1 on white (text), 600 ≥ 3:1 (UI) using the `a11y-audit` skill / `scripts/contrast.py`.\n - Multi-brand/density → `theming.json`.\n4. **Validate**: run `python3 scripts/validate_tokens.py` (JSON validity + alias resolution).\n\n## Output\nDTCG JSON. Preserve `$description` on every token. Reference, never hardcode.","createdAt":"2026-09-25T12:51:51.860Z","updatedAt":"2026-09-25T12:51:51.860Z"},{"id":"cmugwii9t025qqu066ciqnzcp","slug":"prat011-awesome-llm-skills-domain-name-brainstormer","name":"domain-name-brainstormer","description":"Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.","authorId":"gh:prat011","authorName":"Prat011","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1761,"pricePerCall":0,"manifest":{"name":"domain-name-brainstormer","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.","permissions":[],"systemPrompt":"# Domain Name Brainstormer\n\nThis skill helps you find the perfect domain name for your project by generating creative options and checking what's actually available to register.\n\n## When to Use This Skill\n\n- Starting a new project or company\n- Launching a product or service\n- Creating a personal brand or portfolio site\n- Rebranding an existing project\n- Registering a domain for a side project\n- Finding available alternatives when your first choice is taken\n\n## What This Skill Does\n\n1. **Understands Your Project**: Analyzes what you're building and who it's for\n2. **Generates Creative Names**: Creates relevant, memorable domain options\n3. **Checks Availability**: Verifies which domains are actually available across multiple TLDs\n4. **Multiple Extensions**: Suggests .com, .io, .dev, .ai, .app, and more\n5. **Provides Alternatives**: Offers variations if top choices are taken\n6. **Branding Insights**: Explains why certain names work well\n\n## How to Use\n\n### Basic Brainstorming\n\n```\nI'm building a project management tool for remote teams. \nSuggest domain names.\n```\n\n```\nHelp me brainstorm domain names for a personal finance app\n```\n\n### Specific Preferences\n\n```\nI need a domain name for my AI writing assistant. \nPrefer short names with .ai or .io extension.\n```\n\n### With Keywords\n\n```\nSuggest domain names using the words \"pixel\" or \"studio\" \nfor my design agency\n```\n\n## Example\n\n**User**: \"I'm building a tool for developers to share code snippets. Suggest creative domain names.\"\n\n**Output**:\n```\nAnalyzing your project...\nTarget audience: Developers\nKey features: Code sharing, snippets, collaboration\n\n🎯 Domain Name Suggestions\n\n## Available (.com)\n1. ✓ snippetbox.com - Clear, memorable, available!\n Why: Directly describes the product, easy to remember\n\n2. ✓ codeclip.com - Short and snappy\n Why: Implies quick code sharing, only 8 characters\n\n3. ✓ devpaste.com - Developer-focused\n Why: Familiar to devs (like pastebin), clear purpose\n\n## Available (Alternative TLDs)\n4. ✓ snippet.dev - Perfect extension for developers\n Why: .dev extension signals developer tool\n\n5. ✓ codebox.io - Tech-forward\n Why: .io popular with tech startups, clean name\n\n6. ✓ sharecode.app - Descriptive\n Why: .app extension, clearly states the action\n\n## Premium/Taken (.com)\n- codeshare.com (Taken, est. $2,500)\n- snippets.com (Taken, premium domain)\n\n## Recommendations\n\n🏆 Top Pick: snippet.dev\n- Perfect for developer audience\n- Short and memorable \n- .dev extension adds credibility\n- Available now!\n\n🥈 Runner-up: snippetbox.com\n- .com is universally recognized\n- Slightly longer but descriptive\n- Great brandability\n\nNext steps:\n1. Register your favorite before someone else does!\n2. Want me to check more variations?\n3. Need help with logo ideas for these names?\n```\n\n**Inspired by:** Ben Aiad's use case from Lenny's Newsletter\n\n## Domain Naming Tips\n\n### What Makes a Good Domain\n\n✓ **Short**: Under 15 characters ideal\n✓ **Memorable**: Easy to recall and spell\n✓ **Pronounceable**: Can be said in conversation\n✓ **Descriptive**: Hints at what you do\n✓ **Brandable**: Unique enough to stand out\n✓ **No hyphens**: Easier to share verbally\n\n### TLD Guide\n\n- **.com**: Universal, trusted, great for businesses\n- **.io**: Tech startups, developer tools\n- **.dev**: Developer-focused products\n- **.ai**: AI/ML products\n- **.app**: Mobile or web applications\n- **.co**: Alternative to .com\n- **.xyz**: Modern, creative projects\n- **.design**: Creative/design agencies\n- **.tech**: Technology companies\n\n## Advanced Features\n\n### Check Similar Variations\n\n```\nCheck availability for \"codebase\" and similar variations \nacross .com, .io, .dev\n```\n\n### Industry-Specific\n\n```\nSuggest domain names for a sustainable fashion brand, \nchecking .eco and .fashion TLDs\n```\n\n### Multilingual Options\n\n```\nBrainstorm domain names in English and Spanish for \na language learning app\n```\n\n### Competitor Analysis\n\n```\nShow me domain patterns used by successful project \nmanagement tools, then suggest similar available ones\n```\n\n## Example Workflows\n\n### Startup Launch\n1. Describe your startup idea\n2. Get 10-15 domain suggestions across TLDs\n3. Review availability and pricing\n4. Pick top 3 favorites\n5. Register immediately\n\n### Personal Brand\n1. Share your name and profession\n2. Get variations (firstname.com, firstnamelastname.dev, etc.)\n3. Check social media handle availability too\n4. Register consistent brand across platforms\n\n### Product Naming\n1. Describe product and target market\n2. Get creative, brandable names\n3. Check trademark conflicts\n4. Verify domain and social availability\n5. Test names with target audience\n\n## Tips for Success\n\n1. **Act Fast**: Good domains get taken quickly\n2. **Register Variations**: Get .com and .io to protect brand\n3. **Avoid Numbers**: Hard to communicate verbally\n4. **Check Social Media**: Make sure @username is available too\n5. **Say It Out Loud**: Test if it's easy to pronounce\n6. **Check Trademarks**: Ensure no legal conflicts\n7. **Think Long-term**: Will it still make sense in 5 years?\n\n## Pricing Context\n\nWhen suggesting domains, I'll note:\n- Standard domains: ~$10-15/year\n- Premium TLDs (.io, .ai): ~$30-50/year\n- Taken domains: Market price if listed\n- Premium domains: $hundreds to $thousands\n\n## Related Tools\n\nAfter picking a domain:\n- Check logo design options\n- Verify social media handles\n- Research trademark availability\n- Plan brand identity colors/fonts","schemaVersion":1},"repoUrl":"https://github.com/Prat011/awesome-llm-skills/tree/master/domain-name-brainstormer","tags":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"awesome-llm-skills","audit":{"files":["slack-gif-creator/requirements.txt"],"binaries":[],"findings":[{"kind":"dependency","rule":"DP-04","message":"Python dependencies are not pinned and there is no lock file.","surface":"slack-gif-creator/requirements.txt","evidence":"pillow>=10.0.0, imageio>=2.31.0, imageio-ffmpeg>=0.4.9, numpy>=1.24.0","severity":"medium"}],"packages":4,"auditedAt":"2026-09-25T11:52:30.068Z","lockfiles":[]},"forks":313,"owner":"Prat011","stars":1761,"topics":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms","openai","opencode","qwen","qwen-coder","skills"],"license":null,"fullName":"Prat011/awesome-llm-skills","homepage":null,"language":"Python","pushedAt":"2026-07-14T09:53:56Z","avatarUrl":"https://avatars.githubusercontent.com/u/67639393?v=4","crawledAt":"2026-09-25T11:52:22.319Z","openIssues":170,"manifestFile":"SKILL.md","manifestPath":"domain-name-brainstormer/SKILL.md","defaultBranch":"master"},"readme":"# Domain Name Brainstormer\n\nThis skill helps you find the perfect domain name for your project by generating creative options and checking what's actually available to register.\n\n## When to Use This Skill\n\n- Starting a new project or company\n- Launching a product or service\n- Creating a personal brand or portfolio site\n- Rebranding an existing project\n- Registering a domain for a side project\n- Finding available alternatives when your first choice is taken\n\n## What This Skill Does\n\n1. **Understands Your Project**: Analyzes what you're building and who it's for\n2. **Generates Creative Names**: Creates relevant, memorable domain options\n3. **Checks Availability**: Verifies which domains are actually available across multiple TLDs\n4. **Multiple Extensions**: Suggests .com, .io, .dev, .ai, .app, and more\n5. **Provides Alternatives**: Offers variations if top choices are taken\n6. **Branding Insights**: Explains why certain names work well\n\n## How to Use\n\n### Basic Brainstorming\n\n```\nI'm building a project management tool for remote teams. \nSuggest domain names.\n```\n\n```\nHelp me brainstorm domain names for a personal finance app\n```\n\n### Specific Preferences\n\n```\nI need a domain name for my AI writing assistant. \nPrefer short names with .ai or .io extension.\n```\n\n### With Keywords\n\n```\nSuggest domain names using the words \"pixel\" or \"studio\" \nfor my design agency\n```\n\n## Example\n\n**User**: \"I'm building a tool for developers to share code snippets. Suggest creative domain names.\"\n\n**Output**:\n```\nAnalyzing your project...\nTarget audience: Developers\nKey features: Code sharing, snippets, collaboration\n\n🎯 Domain Name Suggestions\n\n## Available (.com)\n1. ✓ snippetbox.com - Clear, memorable, available!\n Why: Directly describes the product, easy to remember\n\n2. ✓ codeclip.com - Short and snappy\n Why: Implies quick code sharing, only 8 characters\n\n3. ✓ devpaste.com - Developer-focused\n Why: Familiar to devs (like pastebin), clear purpose\n\n## Available (Alternative TLDs)\n4. ✓ snippet.dev - Perfect extension for developers\n Why: .dev extension signals developer tool\n\n5. ✓ codebox.io - Tech-forward\n Why: .io popular with tech startups, clean name\n\n6. ✓ sharecode.app - Descriptive\n Why: .app extension, clearly states the action\n\n## Premium/Taken (.com)\n- codeshare.com (Taken, est. $2,500)\n- snippets.com (Taken, premium domain)\n\n## Recommendations\n\n🏆 Top Pick: snippet.dev\n- Perfect for developer audience\n- Short and memorable \n- .dev extension adds credibility\n- Available now!\n\n🥈 Runner-up: snippetbox.com\n- .com is universally recognized\n- Slightly longer but descriptive\n- Great brandability\n\nNext steps:\n1. Register your favorite before someone else does!\n2. Want me to check more variations?\n3. Need help with logo ideas for these names?\n```\n\n**Inspired by:** Ben Aiad's use case from Lenny's Newsletter\n\n## Domain Naming Tips\n\n### What Makes a Good Domain\n\n✓ **Short**: Under 15 characters ideal\n✓ **Memorable**: Easy to recall and spell\n✓ **Pronounceable**: Can be said in conversation\n✓ **Descriptive**: Hints at what you do\n✓ **Brandable**: Unique enough to stand out\n✓ **No hyphens**: Easier to share verbally\n\n### TLD Guide\n\n- **.com**: Universal, trusted, great for businesses\n- **.io**: Tech startups, developer tools\n- **.dev**: Developer-focused products\n- **.ai**: AI/ML products\n- **.app**: Mobile or web applications\n- **.co**: Alternative to .com\n- **.xyz**: Modern, creative projects\n- **.design**: Creative/design agencies\n- **.tech**: Technology companies\n\n## Advanced Features\n\n### Check Similar Variations\n\n```\nCheck availability for \"codebase\" and similar variations \nacross .com, .io, .dev\n```\n\n### Industry-Specific\n\n```\nSuggest domain names for a sustainable fashion brand, \nchecking .eco and .fashion TLDs\n```\n\n### Multilingual Options\n\n```\nBrainstorm domain names in English and Spanish for \na language learning app\n```\n\n### Competitor Analysis\n\n```\nShow me domain patterns used by successful project \nmanagement tools, then sug","createdAt":"2026-09-25T11:52:30.209Z","updatedAt":"2026-09-25T11:52:30.209Z"},{"id":"cmugwiidn026tqu069q5j035i","slug":"prat011-awesome-llm-skills-notion-spec-to-implementation","name":"notion-spec-to-implementation","description":"Turns product or tech specs into concrete Notion tasks that Claude code can implement. Breaks down spec pages into detailed implementation plans with clear tasks, acceptance criteria, and progress tracking to guide development from requirements to completion.","authorId":"gh:prat011","authorName":"Prat011","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1761,"pricePerCall":0,"manifest":{"name":"notion-spec-to-implementation","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Turns product or tech specs into concrete Notion tasks that Claude code can implement. Breaks down spec pages into detailed implementation plans with clear tasks, acceptance criteria, and progress tracking to guide development from requirements to completion.","permissions":[],"systemPrompt":"# Spec to Implementation\n\nTransforms specifications into actionable implementation plans with progress tracking. Fetches spec documents, extracts requirements, breaks down into tasks, and manages implementation workflow.\n\n## Quick Start\n\nWhen asked to implement a specification:\n\n1. **Find spec**: Use `Notion:notion-search` to locate specification page\n2. **Fetch spec**: Use `Notion:notion-fetch` to read specification content\n3. **Extract requirements**: Parse and structure requirements from spec\n4. **Create plan**: Use `Notion:notion-create-pages` for implementation plan\n5. **Find task database**: Use `Notion:notion-search` to locate tasks database\n6. **Create tasks**: Use `Notion:notion-create-pages` for individual tasks in task database\n7. **Track progress**: Use `Notion:notion-update-page` to log progress and update status\n\n## Implementation Workflow\n\n### Step 1: Find the specification\n\n```\n1. Search for spec:\n - Use Notion:notion-search with spec name or topic\n - Apply filters if needed (e.g., created_date_range, teamspace_id)\n - Look for spec title or keyword matches\n - If not found or ambiguous, ask user for spec URL/ID\n\nExample searches:\n- \"User Authentication spec\"\n- \"Payment Integration specification\"\n- \"Mobile App Redesign PRD\"\n```\n\n### Step 2: Fetch and analyze specification\n\n```\n1. Fetch spec page:\n - Use Notion:notion-fetch with spec URL/ID from search results\n - Read full content including requirements, design, constraints\n\n2. Parse specification:\n - Identify functional requirements\n - Note non-functional requirements (performance, security, etc.)\n - Extract acceptance criteria\n - Identify dependencies and blockers\n```\n\nSee [reference/spec-parsing.md](reference/spec-parsing.md) for parsing patterns.\n\n### Step 3: Create implementation plan\n\n```\n1. Break down into phases/milestones\n2. Identify technical approach\n3. List required tasks\n4. Estimate effort\n5. Identify risks\n\nUse implementation plan template (see [reference/standard-implementation-plan.md](reference/standard-implementation-plan.md) or [reference/quick-implementation-plan.md](reference/quick-implementation-plan.md))\n```\n\n### Step 4: Create implementation plan page\n\n```\nUse Notion:notion-create-pages:\n- Title: \"Implementation Plan: [Feature Name]\"\n- Content: Structured plan with phases, tasks, timeline\n- Link back to original spec\n- Add to appropriate location (project page, database)\n```\n\n### Step 5: Find task database\n\n```\n1. Search for task database:\n - Use Notion:notion-search to find \"Tasks\" or \"Task Management\" database\n - Look for engineering/project task tracking system\n - If not found or ambiguous, ask user for database location\n\n2. Fetch database schema:\n - Use Notion:notion-fetch with database URL/ID\n - Get property names, types, and options\n - Identify correct data source from tags\n - Note required properties for new tasks\n```\n\n### Step 6: Create implementation tasks\n\n```\nFor each task in plan:\n1. Create task in task database using Notion:notion-create-pages\n2. Use parent: { data_source_id: 'collection://...' }\n3. Set properties from schema:\n - Name/Title: Task description\n - Status: To Do\n - Priority: Based on criticality\n - Related Tasks: Link to spec and plan\n4. Add implementation details in content\n```\n\nSee [reference/task-creation.md](reference/task-creation.md) for task patterns.\n\n### Step 7: Begin implementation\n\n```\n1. Update task status to \"In Progress\"\n2. Add initial progress note\n3. Document approach and decisions\n4. Link relevant resources\n```\n\n### Step 8: Track progress\n\n```\nRegular updates:\n1. Update task properties (status, progress)\n2. Add progress notes with:\n - What's completed\n - Current focus\n - Blockers/issues\n3. Update implementation plan with milestone completion\n4. Link to related work (PRs, designs, etc.)\n```\n\nSee [reference/progress-tracking.md](reference/progress-tracking.md) for tracking patterns.\n\n## Spec Analysis Patterns\n\n**Functional Requirements**: User stories, feature descriptions, workflows, data requirements, integration points\n\n**Non-Functional Requirements**: Performance targets, security requirements, scalability needs, availability, compliance\n\n**Acceptance Criteria**: Testable conditions, user validation points, performance benchmarks, completion definitions\n\nSee [reference/spec-parsing.md](reference/spec-parsing.md) for detailed parsing techniques.\n\n## Implementation Plan Structure\n\n**Plan includes**: Overview → Linked Spec → Requirements Summary → Technical Approach → Implementation Phases (Goal, Tasks checklist, Estimated effort) → Dependencies → Risks & Mitigation → Timeline → Success Criteria\n\nSee [reference/standard-implementation-plan.md](reference/standard-implementation-plan.md) for full plan template.\n\n## Task Breakdown Patterns\n\n**By Component**: Database, API endpoints, frontend components, integration, testing\n**By Feature Slice**: Vertical slices (auth flow, data entry, report generation)\n**By Priority**: P0 (must have), P1 (important), P2 (nice to have)\n\n\n## Progress Logging\n\n**Daily Updates** (active work): Add progress note with completed items, current focus, blockers\n**Milestone Updates** (major progress): Update plan checkboxes, add milestone summary, adjust timeline\n**Status Changes** (task transitions): Update properties (In Progress → In Review → Done), add completion notes, link deliverables\n\n**Progress Format**: Date heading → Completed → In Progress → Next Steps → Blockers → Notes\n\nSee [reference/progress-tracking.md](reference/progress-tracking.md) for detailed patterns.\n\n## Linking Spec to Implementation\n\n**Forward Links**: Update spec page with \"Implementation\" section linking to plan and tasks\n**Backward Links**: Reference spec in plan and tasks with \"Specification\" section\n**Bidirectional Traceability**: Maintain both directions for easy tracking\n\n## Implementation Status Tracking\n\n**Plan Status**: Update with phase completion (✅ Complete, 🔄 In Progress %, ⏳ Not Started) and overall percentage\n**Task Aggregation**: Query task database by plan ID to generate summary (complete, in progress, blocked, not started)\n\n## Handling Spec Changes\n\n**Detection**: Fetch updated spec → compare with plan → identify new requirements → assess impact\n**Propagation**: Update plan → create new tasks → update affected tasks → add change note → notify via comments\n**Change Log**: Track spec evolution with date, what changed, and impact\n\n## Common Patterns\n\n**Feature Flag**: Backend (behind flag) → Testing → Frontend (flagged) → Internal rollout → External rollout\n**Database Migration**: Schema design → Migration script → Staging test → Production migration → Validation\n**API Development**: API design → Backend implementation → Testing & docs → Client integration → Deployment\n\n\n## Best Practices\n\n1. **Always link spec and implementation**: Maintain bidirectional references\n2. **Break down into small tasks**: Each task should be completable in 1-2 days\n3. **Extract clear acceptance criteria**: Know when \"done\" is done\n4. **Identify dependencies early**: Note blockers in plan\n5. **Update progress regularly**: Daily notes for active work\n6. **Track changes**: Document spec updates and their impact\n7. **Use checklists**: Visual progress indicators help everyone\n8. **Link deliverables**: PRs, designs, docs should link back to tasks\n\n## Advanced Features\n\nFor additional implementation patterns and techniques, see the reference files in [reference/](reference/).\n\n## Common Issues\n\n**\"Can't find spec\"**: Use Notion:notion-search with spec name/topic, try broader terms, or ask user for URL\n**\"Multiple specs found\"**: Ask user which spec to implement or show options\n**\"Can't find task database\"**: Search for \"Tasks\" or \"Task Management\", or ask user for database location\n**\"Spec unclear\"**: Note ambiguities in plan, create clarification tasks\n**\"Requirements conflicting\"**: Document conflicts, create decision task\n**\"Scope too large\"**: Break into smaller specs/phases\n\n## Examples\n\nSee [examples/](examples/) for complete workflows:\n- [examples/api-feature.md](examples/api-feature.md) - API feature implementation\n- [examples/ui-component.md](examples/ui-component.md) - Frontend component\n- [examples/database-migration.md](examples/database-migration.md) - Schema changes","schemaVersion":1},"repoUrl":"https://github.com/Prat011/awesome-llm-skills/tree/master/notion-spec-to-implementation","tags":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"awesome-llm-skills","audit":{"files":["slack-gif-creator/requirements.txt"],"binaries":[],"findings":[{"kind":"dependency","rule":"DP-04","message":"Python dependencies are not pinned and there is no lock file.","surface":"slack-gif-creator/requirements.txt","evidence":"pillow>=10.0.0, imageio>=2.31.0, imageio-ffmpeg>=0.4.9, numpy>=1.24.0","severity":"medium"}],"packages":4,"auditedAt":"2026-09-25T11:52:30.068Z","lockfiles":[]},"forks":313,"owner":"Prat011","stars":1761,"topics":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms","openai","opencode","qwen","qwen-coder","skills"],"license":null,"fullName":"Prat011/awesome-llm-skills","homepage":null,"language":"Python","pushedAt":"2026-07-14T09:53:56Z","avatarUrl":"https://avatars.githubusercontent.com/u/67639393?v=4","crawledAt":"2026-09-25T11:52:22.319Z","openIssues":170,"manifestFile":"SKILL.md","manifestPath":"notion-spec-to-implementation/SKILL.md","defaultBranch":"master"},"readme":"# Spec to Implementation\n\nTransforms specifications into actionable implementation plans with progress tracking. Fetches spec documents, extracts requirements, breaks down into tasks, and manages implementation workflow.\n\n## Quick Start\n\nWhen asked to implement a specification:\n\n1. **Find spec**: Use `Notion:notion-search` to locate specification page\n2. **Fetch spec**: Use `Notion:notion-fetch` to read specification content\n3. **Extract requirements**: Parse and structure requirements from spec\n4. **Create plan**: Use `Notion:notion-create-pages` for implementation plan\n5. **Find task database**: Use `Notion:notion-search` to locate tasks database\n6. **Create tasks**: Use `Notion:notion-create-pages` for individual tasks in task database\n7. **Track progress**: Use `Notion:notion-update-page` to log progress and update status\n\n## Implementation Workflow\n\n### Step 1: Find the specification\n\n```\n1. Search for spec:\n - Use Notion:notion-search with spec name or topic\n - Apply filters if needed (e.g., created_date_range, teamspace_id)\n - Look for spec title or keyword matches\n - If not found or ambiguous, ask user for spec URL/ID\n\nExample searches:\n- \"User Authentication spec\"\n- \"Payment Integration specification\"\n- \"Mobile App Redesign PRD\"\n```\n\n### Step 2: Fetch and analyze specification\n\n```\n1. Fetch spec page:\n - Use Notion:notion-fetch with spec URL/ID from search results\n - Read full content including requirements, design, constraints\n\n2. Parse specification:\n - Identify functional requirements\n - Note non-functional requirements (performance, security, etc.)\n - Extract acceptance criteria\n - Identify dependencies and blockers\n```\n\nSee [reference/spec-parsing.md](reference/spec-parsing.md) for parsing patterns.\n\n### Step 3: Create implementation plan\n\n```\n1. Break down into phases/milestones\n2. Identify technical approach\n3. List required tasks\n4. Estimate effort\n5. Identify risks\n\nUse implementation plan template (see [reference/standard-implementation-plan.md](reference/standard-implementation-plan.md) or [reference/quick-implementation-plan.md](reference/quick-implementation-plan.md))\n```\n\n### Step 4: Create implementation plan page\n\n```\nUse Notion:notion-create-pages:\n- Title: \"Implementation Plan: [Feature Name]\"\n- Content: Structured plan with phases, tasks, timeline\n- Link back to original spec\n- Add to appropriate location (project page, database)\n```\n\n### Step 5: Find task database\n\n```\n1. Search for task database:\n - Use Notion:notion-search to find \"Tasks\" or \"Task Management\" database\n - Look for engineering/project task tracking system\n - If not found or ambiguous, ask user for database location\n\n2. Fetch database schema:\n - Use Notion:notion-fetch with database URL/ID\n - Get property names, types, and options\n - Identify correct data source from tags\n - Note required properties for new tasks\n```\n\n### Step 6: Create implementation tasks\n\n```\nFor each task in plan:\n1. Create task in task database using Notion:notion-create-pages\n2. Use parent: { data_source_id: 'collection://...' }\n3. Set properties from schema:\n - Name/Title: Task description\n - Status: To Do\n - Priority: Based on criticality\n - Related Tasks: Link to spec and plan\n4. Add implementation details in content\n```\n\nSee [reference/task-creation.md](reference/task-creation.md) for task patterns.\n\n### Step 7: Begin implementation\n\n```\n1. Update task status to \"In Progress\"\n2. Add initial progress note\n3. Document approach and decisions\n4. Link relevant resources\n```\n\n### Step 8: Track progress\n\n```\nRegular updates:\n1. Update task properties (status, progress)\n2. Add progress notes with:\n - What's completed\n - Current focus\n - Blockers/issues\n3. Update implementation plan with milestone completion\n4. Link to related work (PRs, designs, etc.)\n```\n\nSee [reference/progress-tracking.md](reference/progress-tracking.md) for tracking patterns.\n\n## Spec Analysis Patterns\n\n**Functional Requirements**: ","createdAt":"2026-09-25T11:52:30.347Z","updatedAt":"2026-09-25T11:52:30.347Z"},{"id":"cmugwii7i024tqu065dz4edew","slug":"prat011-awesome-llm-skills-artifacts-builder","name":"artifacts-builder","description":"Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.","authorId":"gh:prat011","authorName":"Prat011","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1761,"pricePerCall":0,"manifest":{"name":"artifacts-builder","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.","permissions":[],"systemPrompt":"# Artifacts Builder\n\nTo build powerful frontend claude.ai artifacts, follow these steps:\n1. Initialize the frontend repo using `scripts/init-artifact.sh`\n2. Develop your artifact by editing the generated code\n3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`\n4. Display artifact to user\n5. (Optional) Test the artifact\n\n**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui\n\n## Design & Style Guidelines\n\nVERY IMPORTANT: To avoid what is often referred to as \"AI slop\", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.\n\n## Quick Start\n\n### Step 1: Initialize Project\n\nRun the initialization script to create a new React project:\n```bash\nbash scripts/init-artifact.sh \ncd \n```\n\nThis creates a fully configured project with:\n- ✅ React + TypeScript (via Vite)\n- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system\n- ✅ Path aliases (`@/`) configured\n- ✅ 40+ shadcn/ui components pre-installed\n- ✅ All Radix UI dependencies included\n- ✅ Parcel configured for bundling (via .parcelrc)\n- ✅ Node 18+ compatibility (auto-detects and pins Vite version)\n\n### Step 2: Develop Your Artifact\n\nTo build the artifact, edit the generated files. See **Common Development Tasks** below for guidance.\n\n### Step 3: Bundle to Single HTML File\n\nTo bundle the React app into a single HTML artifact:\n```bash\nbash scripts/bundle-artifact.sh\n```\n\nThis creates `bundle.html` - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.\n\n**Requirements**: Your project must have an `index.html` in the root directory.\n\n**What the script does**:\n- Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)\n- Creates `.parcelrc` config with path alias support\n- Builds with Parcel (no source maps)\n- Inlines all assets into single HTML using html-inline\n\n### Step 4: Share Artifact with User\n\nFinally, share the bundled HTML file in conversation with the user so they can view it as an artifact.\n\n### Step 5: Testing/Visualizing the Artifact (Optional)\n\nNote: This is a completely optional step. Only perform if necessary or requested.\n\nTo test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.\n\n## Reference\n\n- **shadcn/ui components**: https://ui.shadcn.com/docs/components","schemaVersion":1},"repoUrl":"https://github.com/Prat011/awesome-llm-skills/tree/master/artifacts-builder","tags":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"awesome-llm-skills","audit":{"files":["slack-gif-creator/requirements.txt"],"binaries":[],"findings":[{"kind":"dependency","rule":"DP-04","message":"Python dependencies are not pinned and there is no lock file.","surface":"slack-gif-creator/requirements.txt","evidence":"pillow>=10.0.0, imageio>=2.31.0, imageio-ffmpeg>=0.4.9, numpy>=1.24.0","severity":"medium"}],"packages":4,"auditedAt":"2026-09-25T11:52:30.068Z","lockfiles":[]},"forks":313,"owner":"Prat011","stars":1761,"topics":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms","openai","opencode","qwen","qwen-coder","skills"],"license":"Complete terms in LICENSE.txt","fullName":"Prat011/awesome-llm-skills","homepage":null,"language":"Python","pushedAt":"2026-07-14T09:53:56Z","avatarUrl":"https://avatars.githubusercontent.com/u/67639393?v=4","crawledAt":"2026-09-25T11:52:22.319Z","openIssues":170,"manifestFile":"SKILL.md","manifestPath":"artifacts-builder/SKILL.md","defaultBranch":"master"},"readme":"# Artifacts Builder\n\nTo build powerful frontend claude.ai artifacts, follow these steps:\n1. Initialize the frontend repo using `scripts/init-artifact.sh`\n2. Develop your artifact by editing the generated code\n3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`\n4. Display artifact to user\n5. (Optional) Test the artifact\n\n**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui\n\n## Design & Style Guidelines\n\nVERY IMPORTANT: To avoid what is often referred to as \"AI slop\", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.\n\n## Quick Start\n\n### Step 1: Initialize Project\n\nRun the initialization script to create a new React project:\n```bash\nbash scripts/init-artifact.sh \ncd \n```\n\nThis creates a fully configured project with:\n- ✅ React + TypeScript (via Vite)\n- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system\n- ✅ Path aliases (`@/`) configured\n- ✅ 40+ shadcn/ui components pre-installed\n- ✅ All Radix UI dependencies included\n- ✅ Parcel configured for bundling (via .parcelrc)\n- ✅ Node 18+ compatibility (auto-detects and pins Vite version)\n\n### Step 2: Develop Your Artifact\n\nTo build the artifact, edit the generated files. See **Common Development Tasks** below for guidance.\n\n### Step 3: Bundle to Single HTML File\n\nTo bundle the React app into a single HTML artifact:\n```bash\nbash scripts/bundle-artifact.sh\n```\n\nThis creates `bundle.html` - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.\n\n**Requirements**: Your project must have an `index.html` in the root directory.\n\n**What the script does**:\n- Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)\n- Creates `.parcelrc` config with path alias support\n- Builds with Parcel (no source maps)\n- Inlines all assets into single HTML using html-inline\n\n### Step 4: Share Artifact with User\n\nFinally, share the bundled HTML file in conversation with the user so they can view it as an artifact.\n\n### Step 5: Testing/Visualizing the Artifact (Optional)\n\nNote: This is a completely optional step. Only perform if necessary or requested.\n\nTo test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.\n\n## Reference\n\n- **shadcn/ui components**: https://ui.shadcn.com/docs/components","createdAt":"2026-09-25T11:52:30.126Z","updatedAt":"2026-09-25T11:52:30.126Z"},{"id":"cmugwiicy026nqu06xg9fmwss","slug":"prat011-awesome-llm-skills-notion-meeting-intelligence","name":"notion-meeting-intelligence","description":"Prepares meeting materials by gathering context from Notion, enriching with Claude research, and creating both an internal pre-read and external agenda saved to Notion. Helps you arrive prepared with comprehensive background and structured meeting docs.","authorId":"gh:prat011","authorName":"Prat011","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1761,"pricePerCall":0,"manifest":{"name":"notion-meeting-intelligence","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Prepares meeting materials by gathering context from Notion, enriching with Claude research, and creating both an internal pre-read and external agenda saved to Notion. Helps you arrive prepared with comprehensive background and structured meeting docs.","permissions":[],"systemPrompt":"# Meeting Intelligence\n\nPrepares you for meetings by gathering context from Notion, enriching it with Claude research, and creating comprehensive meeting materials. Generates both an internal pre-read for attendees and an external-facing agenda for the meeting itself.\n\n## Quick Start\n\nWhen asked to prep for a meeting:\n\n1. **Gather Notion context**: Use `Notion:notion-search` to find related pages\n2. **Fetch details**: Use `Notion:notion-fetch` to read relevant content\n3. **Enrich with research**: Use Claude's knowledge to add context, industry insights, or best practices\n4. **Create internal pre-read**: Use `Notion:notion-create-pages` for background context document (for attendees)\n5. **Create external agenda**: Use `Notion:notion-create-pages` for meeting agenda (shared with all participants)\n6. **Link resources**: Connect both docs to related projects and each other\n\n## Meeting Prep Workflow\n\n### Step 1: Understand meeting context\n\n```\nCollect meeting details:\n- Meeting topic/title\n- Attendees (internal team + external participants)\n- Meeting purpose (decision, brainstorm, status update, customer demo, etc.)\n- Meeting type (internal only vs. external participants)\n- Related project/initiative\n- Specific topics to cover\n```\n\n### Step 2: Search for Notion context\n\n```\nUse Notion:notion-search to find:\n- Project pages related to meeting topic\n- Previous meeting notes\n- Specifications or design docs\n- Related tasks or issues\n- Recent updates or reports\n- Customer/partner information (if applicable)\n\nSearch strategies:\n- Topic-based: \"mobile app redesign\"\n- Project-scoped: search within project teamspace\n- Attendee-created: filter by created_by_user_ids\n- Recent updates: use created_date_range filters\n```\n\n### Step 3: Fetch and analyze Notion content\n\n```\nFor each relevant page:\n1. Fetch with Notion:notion-fetch\n2. Extract key information:\n - Project status and timeline\n - Recent decisions and updates\n - Open questions or blockers\n - Relevant metrics or data\n - Action items from previous meetings\n3. Note gaps in information\n```\n\n### Step 4: Enrich with Claude research\n\n```\nBeyond Notion context, add value through:\n\nFor technical meetings:\n- Explain complex concepts for broader audience\n- Summarize industry best practices\n- Provide competitive context\n- Suggest discussion frameworks\n\nFor customer meetings:\n- Research company background (if public info)\n- Industry trends relevant to discussion\n- Common pain points in their sector\n- Best practices for similar customers\n\nFor decision meetings:\n- Decision-making frameworks\n- Risk analysis patterns\n- Trade-off considerations\n- Implementation best practices\n\nNote: Use general knowledge only - don't fabricate specific facts\n```\n\n### Step 5: Create internal pre-read\n\n```\nUse Notion:notion-create-pages for internal doc:\n\nTitle: \"[Meeting Topic] - Pre-Read (Internal)\"\n\nContent structure:\n- **Meeting Overview**: Date, time, attendees, purpose\n- **Background Context**: \n - What this meeting is about (2-3 sentences)\n - Why it matters (business context)\n - Links to related Notion pages\n- **Current Status**: \n - Where we are now (from Notion content)\n - Recent updates and progress\n - Key metrics or data\n- **Context & Insights** (from Claude research):\n - Industry context or best practices\n - Relevant considerations\n - Potential approaches to discuss\n- **Key Discussion Points**:\n - Topics that need airtime\n - Open questions to resolve\n - Decisions required\n- **What We Need from This Meeting**:\n - Expected outcomes\n - Decisions to make\n - Next steps to define\n\nAudience: Internal attendees only\nPurpose: Give team full context and alignment before meeting\n```\n\n### Step 6: Create external agenda\n\n```\nUse Notion:notion-create-pages for meeting doc:\n\nTitle: \"[Meeting Topic] - Agenda\"\n\nContent structure:\n- **Meeting Details**: Date, time, attendees\n- **Objective**: Clear meeting goal (1-2 sentences)\n- **Agenda Items** (with time allocations):\n 1. Topic 1 (10 min)\n 2. Topic 2 (20 min)\n 3. Topic 3 (15 min)\n- **Discussion Topics**: \n - Key items to cover\n - Questions to answer\n- **Decisions Needed**: \n - Clear decision points\n- **Action Items**: \n - (To be filled during meeting)\n- **Related Resources**:\n - Links to relevant pages\n - Link to pre-read document\n\nAudience: All participants (internal + external)\nPurpose: Structure the meeting, keep it on track\nTone: Professional, focused, clear\n```\n\nSee [reference/template-selection-guide.md](reference/template-selection-guide.md) for full templates.\n\n### Step 7: Link documents\n\n```\n1. Link pre-read to agenda:\n - Add mention in agenda: \"See Pre-Read for background\"\n\n2. Link both to project:\n - Update project page with meeting links\n - Add to \"Meetings\" section\n\n3. Cross-reference:\n - Agenda mentions pre-read for internal attendees\n - Pre-read mentions agenda for meeting structure\n```\n\n## Document Types\n\n### Internal Pre-Read (for team)\n\nMore comprehensive, internal context:\n- Full background and history\n- Internal metrics and data\n- Honest assessment of challenges\n- Strategic considerations\n- What we need to achieve\n- Internal discussion points\n\n**When to create**: Always for important meetings with internal team\n\n### External Agenda (for all participants)\n\nClean, professional, focused:\n- Clear objectives\n- Structured agenda with times\n- Discussion topics\n- Decision items\n- Professional tone\n\n**When to create**: Every meeting\n\n### Agenda Types by Meeting Purpose\n\n**Decision Meeting**: Meeting Details → Objective → Options (Pros/Cons) → Recommendation → Discussion → Decision → Action Items\n\n**Status Update**: Meeting Details → Project Status → Progress → Upcoming Work → Blockers → Discussion → Action Items\n\n**Customer/External**: Meeting Details → Objective → Agenda Items (timed) → Discussion Topics → Next Steps\n\n**Brainstorming**: Meeting Details → Objective → Constraints → Ideas → Discussion → Next Steps\n\nSee [reference/template-selection-guide.md](reference/template-selection-guide.md) for complete templates.\n\n## Research Enrichment Patterns\n\nBeyond Notion content, add value through Claude's capabilities:\n\n**Technical Context**: Explain technologies, architectures, or approaches. Provide industry standard practices. Compare common solutions. Suggest evaluation criteria.\n\n**Business Context**: Industry trends affecting topic. Competitive landscape insights. Common challenges in space. ROI considerations.\n\n**Decision Support**: Decision-making frameworks (e.g., RICE, cost-benefit). Risk assessment patterns. Trade-off analysis approaches. Success criteria suggestions.\n\n**Customer Context** (for external meetings): Industry-specific challenges. Common pain points. Best practices from similar companies. Value proposition framing.\n\n**Process Guidance**: Meeting facilitation techniques. Discussion frameworks. Retrospective patterns. Brainstorming structures.\n\nNote: Use general knowledge and analytical capabilities. Don't fabricate specific facts. Clearly distinguish Notion facts from Claude insights.\n\n## Meeting Context Sources\n\n**Project Pages**: Status, goals, team, timelines (most important)\n**Previous Meeting Notes**: Historical discussions, action items, decisions (recurring meetings)\n**Task/Issue Database**: Current status, blockers, completed/upcoming work (project meetings)\n**Specifications/Designs**: Requirements, decisions, approach, open questions (technical meetings)\n**Reports/Dashboards**: Metrics, KPIs, performance data, trends (executive meetings)\n\n## Linking Meetings to Projects\n\n**Forward Link**: Add meeting to project page's \"Meetings\" section\n**Backward Link**: Include \"Related Project\" section in agenda with project mention\n**Maintain bidirectional** links for easy navigation\n\n## Meeting Series Management\n\n**Recurring Meetings**: Create series parent page with schedule, meeting notes list, standing agenda, and action items tracker. Link individual meetings to parent.\n\n**Meeting Database**: For organizations, use database with properties: Meeting Title, Date, Type (Decision/Status/Brainstorm), Project, Attendees, Status (Scheduled/Completed)\n\n## Post-Meeting Actions\n\nUpdate agenda with:\n\n**Decisions**: List each decision with rationale and owner\n**Action Items**: Checkbox list with owner and due date (consider creating tasks in database)\n**Key Outcomes**: Bullet list of main outcomes\n\n## Meeting Prep Timing\n\n**Day-Before** (next-day meetings): Gather context → create agenda → share with attendees → allow review time\n**Hour-Before** (last-minute): Quick context → brief pre-read → basic agenda → essentials only\n**Week-Before** (major meetings): Comprehensive research → detailed pre-read → structured agenda → pre-meeting reviews\n\n## Best Practices\n\n1. **Create both documents**: Internal pre-read + external agenda for important meetings\n2. **Distinguish sources**: Label what's from Notion vs. Claude research\n3. **Start with search**: Cast wide net in Notion, then narrow\n4. **Keep pre-read concise**: 2-3 pages maximum, even with research\n5. **Professional external docs**: Agenda should be polished and focused\n6. **Enrich thoughtfully**: Claude research should add real value, not fluff\n7. **Link documents**: Pre-read mentions agenda, agenda mentions pre-read\n8. **Include metrics**: Data from Notion helps ground discussions\n9. **Share appropriately**: Pre-read to internal team, agenda to all participants\n10. **Share early**: Give attendees time to review (24hr+ for important meetings)\n11. **Update post-meeting**: Capture decisions and actions in agenda\n\n## Advanced Features\n\n**Meeting templates**: See [reference/template-selection-guide.md](reference/template-selection-guide.md) for comprehensive template library\n\n## Common Issues\n\n**\"Too much context\"**: Split into pre-read (internal, comprehensive) and agenda (external, focused)\n**\"Can't find relevant pages\"**: Broaden search, try different terms, ask user for page URLs\n**\"Meeting purpose unclear\"**: Ask user to clarify before proceeding\n**\"No recent updates\"**: Note that in pre-read, focus on historical context and strategic considerations\n**\"External meeting - no internal context\"**: Create simpler structure with just agenda, skip internal pre-read or keep it minimal\n**\"Claude research too generic\"**: Focus on specific insights relevant to the actual meeting topic, not general platitudes\n\n## Examples\n\nSee [examples/](examples/) for complete workflows:\n- [examples/project-decision.md](examples/project-decision.md) - Decision meeting prep with pre-read\n- [examples/sprint-planning.md](examples/sprint-planning.md) - Sprint planning meeting\n- [examples/executive-review.md](examples/executive-review.md) - Executive review prep\n- [examples/customer-meeting.md](examples/customer-meeting.md) - External meeting with customer (pre-read + agenda)","schemaVersion":1},"repoUrl":"https://github.com/Prat011/awesome-llm-skills/tree/master/notion-meeting-intelligence","tags":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"awesome-llm-skills","audit":{"files":["slack-gif-creator/requirements.txt"],"binaries":[],"findings":[{"kind":"dependency","rule":"DP-04","message":"Python dependencies are not pinned and there is no lock file.","surface":"slack-gif-creator/requirements.txt","evidence":"pillow>=10.0.0, imageio>=2.31.0, imageio-ffmpeg>=0.4.9, numpy>=1.24.0","severity":"medium"}],"packages":4,"auditedAt":"2026-09-25T11:52:30.068Z","lockfiles":[]},"forks":313,"owner":"Prat011","stars":1761,"topics":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms","openai","opencode","qwen","qwen-coder","skills"],"license":null,"fullName":"Prat011/awesome-llm-skills","homepage":null,"language":"Python","pushedAt":"2026-07-14T09:53:56Z","avatarUrl":"https://avatars.githubusercontent.com/u/67639393?v=4","crawledAt":"2026-09-25T11:52:22.319Z","openIssues":170,"manifestFile":"SKILL.md","manifestPath":"notion-meeting-intelligence/SKILL.md","defaultBranch":"master"},"readme":"# Meeting Intelligence\n\nPrepares you for meetings by gathering context from Notion, enriching it with Claude research, and creating comprehensive meeting materials. Generates both an internal pre-read for attendees and an external-facing agenda for the meeting itself.\n\n## Quick Start\n\nWhen asked to prep for a meeting:\n\n1. **Gather Notion context**: Use `Notion:notion-search` to find related pages\n2. **Fetch details**: Use `Notion:notion-fetch` to read relevant content\n3. **Enrich with research**: Use Claude's knowledge to add context, industry insights, or best practices\n4. **Create internal pre-read**: Use `Notion:notion-create-pages` for background context document (for attendees)\n5. **Create external agenda**: Use `Notion:notion-create-pages` for meeting agenda (shared with all participants)\n6. **Link resources**: Connect both docs to related projects and each other\n\n## Meeting Prep Workflow\n\n### Step 1: Understand meeting context\n\n```\nCollect meeting details:\n- Meeting topic/title\n- Attendees (internal team + external participants)\n- Meeting purpose (decision, brainstorm, status update, customer demo, etc.)\n- Meeting type (internal only vs. external participants)\n- Related project/initiative\n- Specific topics to cover\n```\n\n### Step 2: Search for Notion context\n\n```\nUse Notion:notion-search to find:\n- Project pages related to meeting topic\n- Previous meeting notes\n- Specifications or design docs\n- Related tasks or issues\n- Recent updates or reports\n- Customer/partner information (if applicable)\n\nSearch strategies:\n- Topic-based: \"mobile app redesign\"\n- Project-scoped: search within project teamspace\n- Attendee-created: filter by created_by_user_ids\n- Recent updates: use created_date_range filters\n```\n\n### Step 3: Fetch and analyze Notion content\n\n```\nFor each relevant page:\n1. Fetch with Notion:notion-fetch\n2. Extract key information:\n - Project status and timeline\n - Recent decisions and updates\n - Open questions or blockers\n - Relevant metrics or data\n - Action items from previous meetings\n3. Note gaps in information\n```\n\n### Step 4: Enrich with Claude research\n\n```\nBeyond Notion context, add value through:\n\nFor technical meetings:\n- Explain complex concepts for broader audience\n- Summarize industry best practices\n- Provide competitive context\n- Suggest discussion frameworks\n\nFor customer meetings:\n- Research company background (if public info)\n- Industry trends relevant to discussion\n- Common pain points in their sector\n- Best practices for similar customers\n\nFor decision meetings:\n- Decision-making frameworks\n- Risk analysis patterns\n- Trade-off considerations\n- Implementation best practices\n\nNote: Use general knowledge only - don't fabricate specific facts\n```\n\n### Step 5: Create internal pre-read\n\n```\nUse Notion:notion-create-pages for internal doc:\n\nTitle: \"[Meeting Topic] - Pre-Read (Internal)\"\n\nContent structure:\n- **Meeting Overview**: Date, time, attendees, purpose\n- **Background Context**: \n - What this meeting is about (2-3 sentences)\n - Why it matters (business context)\n - Links to related Notion pages\n- **Current Status**: \n - Where we are now (from Notion content)\n - Recent updates and progress\n - Key metrics or data\n- **Context & Insights** (from Claude research):\n - Industry context or best practices\n - Relevant considerations\n - Potential approaches to discuss\n- **Key Discussion Points**:\n - Topics that need airtime\n - Open questions to resolve\n - Decisions required\n- **What We Need from This Meeting**:\n - Expected outcomes\n - Decisions to make\n - Next steps to define\n\nAudience: Internal attendees only\nPurpose: Give team full context and alignment before meeting\n```\n\n### Step 6: Create external agenda\n\n```\nUse Notion:notion-create-pages for meeting doc:\n\nTitle: \"[Meeting Topic] - Agenda\"\n\nContent structure:\n- **Meeting Details**: Date, time, attendees\n- **Objective**: Clear meeting goal (1-2 sentences)\n- **Agenda Items** (with time allocations):\n 1. Topic 1 (10 min)\n 2. Topic 2 ","createdAt":"2026-09-25T11:52:30.323Z","updatedAt":"2026-09-25T11:52:30.323Z"},{"id":"cmugwiif00275qu062yht5g62","slug":"prat011-awesome-llm-skills-slack-gif-creator","name":"slack-gif-creator","description":"Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like \"make me a GIF for Slack of X doing Y\".","authorId":"gh:prat011","authorName":"Prat011","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":1761,"pricePerCall":0,"manifest":{"name":"slack-gif-creator","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like \"make me a GIF for Slack of X doing Y\".","permissions":[],"systemPrompt":"# Slack GIF Creator - Flexible Toolkit\n\nA toolkit for creating animated GIFs optimized for Slack. Provides validators for Slack's constraints, composable animation primitives, and optional helper utilities. **Apply these tools however needed to achieve the creative vision.**\n\n## Slack's Requirements\n\nSlack has specific requirements for GIFs based on their use:\n\n**Message GIFs:**\n- Max size: ~2MB\n- Optimal dimensions: 480x480\n- Typical FPS: 15-20\n- Color limit: 128-256\n- Duration: 2-5s\n\n**Emoji GIFs:**\n- Max size: 64KB (strict limit)\n- Optimal dimensions: 128x128\n- Typical FPS: 10-12\n- Color limit: 32-48\n- Duration: 1-2s\n\n**Emoji GIFs are challenging** - the 64KB limit is strict. Strategies that help:\n- Limit to 10-15 frames total\n- Use 32-48 colors maximum\n- Keep designs simple\n- Avoid gradients\n- Validate file size frequently\n\n## Toolkit Structure\n\nThis skill provides three types of tools:\n\n1. **Validators** - Check if a GIF meets Slack's requirements\n2. **Animation Primitives** - Composable building blocks for motion (shake, bounce, move, kaleidoscope)\n3. **Helper Utilities** - Optional functions for common needs (text, colors, effects)\n\n**Complete creative freedom is available in how these tools are applied.**\n\n## Core Validators\n\nTo ensure a GIF meets Slack's constraints, use these validators:\n\n```python\nfrom core.gif_builder import GIFBuilder\n\n# After creating your GIF, check if it meets requirements\nbuilder = GIFBuilder(width=128, height=128, fps=10)\n# ... add your frames however you want ...\n\n# Save and check size\ninfo = builder.save('emoji.gif', num_colors=48, optimize_for_emoji=True)\n\n# The save method automatically warns if file exceeds limits\n# info dict contains: size_kb, size_mb, frame_count, duration_seconds\n```\n\n**File size validator**:\n```python\nfrom core.validators import check_slack_size\n\n# Check if GIF meets size limits\npasses, info = check_slack_size('emoji.gif', is_emoji=True)\n# Returns: (True/False, dict with size details)\n```\n\n**Dimension validator**:\n```python\nfrom core.validators import validate_dimensions\n\n# Check dimensions\npasses, info = validate_dimensions(128, 128, is_emoji=True)\n# Returns: (True/False, dict with dimension details)\n```\n\n**Complete validation**:\n```python\nfrom core.validators import validate_gif, is_slack_ready\n\n# Run all validations\nall_pass, results = validate_gif('emoji.gif', is_emoji=True)\n\n# Or quick check\nif is_slack_ready('emoji.gif', is_emoji=True):\n print(\"Ready to upload!\")\n```\n\n## Animation Primitives\n\nThese are composable building blocks for motion. Apply these to any object in any combination:\n\n### Shake\n```python\nfrom templates.shake import create_shake_animation\n\n# Shake an emoji\nframes = create_shake_animation(\n object_type='emoji',\n object_data={'emoji': '😱', 'size': 80},\n num_frames=20,\n shake_intensity=15,\n direction='both' # or 'horizontal', 'vertical'\n)\n```\n\n### Bounce\n```python\nfrom templates.bounce import create_bounce_animation\n\n# Bounce a circle\nframes = create_bounce_animation(\n object_type='circle',\n object_data={'radius': 40, 'color': (255, 100, 100)},\n num_frames=30,\n bounce_height=150\n)\n```\n\n### Spin / Rotate\n```python\nfrom templates.spin import create_spin_animation, create_loading_spinner\n\n# Clockwise spin\nframes = create_spin_animation(\n object_type='emoji',\n object_data={'emoji': '🔄', 'size': 100},\n rotation_type='clockwise',\n full_rotations=2\n)\n\n# Wobble rotation\nframes = create_spin_animation(rotation_type='wobble', full_rotations=3)\n\n# Loading spinner\nframes = create_loading_spinner(spinner_type='dots')\n```\n\n### Pulse / Heartbeat\n```python\nfrom templates.pulse import create_pulse_animation, create_attention_pulse\n\n# Smooth pulse\nframes = create_pulse_animation(\n object_data={'emoji': '❤️', 'size': 100},\n pulse_type='smooth',\n scale_range=(0.8, 1.2)\n)\n\n# Heartbeat (double-pump)\nframes = create_pulse_animation(pulse_type='heartbeat')\n\n# Attention pulse for emoji GIFs\nframes = create_attention_pulse(emoji='⚠️', num_frames=20)\n```\n\n### Fade\n```python\nfrom templates.fade import create_fade_animation, create_crossfade\n\n# Fade in\nframes = create_fade_animation(fade_type='in')\n\n# Fade out\nframes = create_fade_animation(fade_type='out')\n\n# Crossfade between two emojis\nframes = create_crossfade(\n object1_data={'emoji': '😊', 'size': 100},\n object2_data={'emoji': '😂', 'size': 100}\n)\n```\n\n### Zoom\n```python\nfrom templates.zoom import create_zoom_animation, create_explosion_zoom\n\n# Zoom in dramatically\nframes = create_zoom_animation(\n zoom_type='in',\n scale_range=(0.1, 2.0),\n add_motion_blur=True\n)\n\n# Zoom out\nframes = create_zoom_animation(zoom_type='out')\n\n# Explosion zoom\nframes = create_explosion_zoom(emoji='💥')\n```\n\n### Explode / Shatter\n```python\nfrom templates.explode import create_explode_animation, create_particle_burst\n\n# Burst explosion\nframes = create_explode_animation(\n explode_type='burst',\n num_pieces=25\n)\n\n# Shatter effect\nframes = create_explode_animation(explode_type='shatter')\n\n# Dissolve into particles\nframes = create_explode_animation(explode_type='dissolve')\n\n# Particle burst\nframes = create_particle_burst(particle_count=30)\n```\n\n### Wiggle / Jiggle\n```python\nfrom templates.wiggle import create_wiggle_animation, create_excited_wiggle\n\n# Jello wobble\nframes = create_wiggle_animation(\n wiggle_type='jello',\n intensity=1.0,\n cycles=2\n)\n\n# Wave motion\nframes = create_wiggle_animation(wiggle_type='wave')\n\n# Excited wiggle for emoji GIFs\nframes = create_excited_wiggle(emoji='🎉')\n```\n\n### Slide\n```python\nfrom templates.slide import create_slide_animation, create_multi_slide\n\n# Slide in from left with overshoot\nframes = create_slide_animation(\n direction='left',\n slide_type='in',\n overshoot=True\n)\n\n# Slide across\nframes = create_slide_animation(direction='left', slide_type='across')\n\n# Multiple objects sliding in sequence\nobjects = [\n {'data': {'emoji': '🎯', 'size': 60}, 'direction': 'left', 'final_pos': (120, 240)},\n {'data': {'emoji': '🎪', 'size': 60}, 'direction': 'right', 'final_pos': (240, 240)}\n]\nframes = create_multi_slide(objects, stagger_delay=5)\n```\n\n### Flip\n```python\nfrom templates.flip import create_flip_animation, create_quick_flip\n\n# Horizontal flip between two emojis\nframes = create_flip_animation(\n object1_data={'emoji': '😊', 'size': 120},\n object2_data={'emoji': '😂', 'size': 120},\n flip_axis='horizontal'\n)\n\n# Vertical flip\nframes = create_flip_animation(flip_axis='vertical')\n\n# Quick flip for emoji GIFs\nframes = create_quick_flip('👍', '👎')\n```\n\n### Morph / Transform\n```python\nfrom templates.morph import create_morph_animation, create_reaction_morph\n\n# Crossfade morph\nframes = create_morph_animation(\n object1_data={'emoji': '😊', 'size': 100},\n object2_data={'emoji': '😂', 'size': 100},\n morph_type='crossfade'\n)\n\n# Scale morph (shrink while other grows)\nframes = create_morph_animation(morph_type='scale')\n\n# Spin morph (3D flip-like)\nframes = create_morph_animation(morph_type='spin_morph')\n```\n\n### Move Effect\n```python\nfrom templates.move import create_move_animation\n\n# Linear movement\nframes = create_move_animation(\n object_type='emoji',\n object_data={'emoji': '🚀', 'size': 60},\n start_pos=(50, 240),\n end_pos=(430, 240),\n motion_type='linear',\n easing='ease_out'\n)\n\n# Arc movement (parabolic trajectory)\nframes = create_move_animation(\n object_type='emoji',\n object_data={'emoji': '⚽', 'size': 60},\n start_pos=(50, 350),\n end_pos=(430, 350),\n motion_type='arc',\n motion_params={'arc_height': 150}\n)\n\n# Circular movement\nframes = create_move_animation(\n object_type='emoji',\n object_data={'emoji': '🌍', 'size': 50},\n motion_type='circle',\n motion_params={\n 'center': (240, 240),\n 'radius': 120,\n 'angle_range': 360 # full circle\n }\n)\n\n# Wave movement\nframes = create_move_animation(\n motion_type='wave',\n motion_params={\n 'wave_amplitude': 50,\n 'wave_frequency': 2\n }\n)\n\n# Or use low-level easing functions\nfrom core.easing import interpolate, calculate_arc_motion\n\nfor i in range(num_frames):\n t = i / (num_frames - 1)\n x = interpolate(start_x, end_x, t, easing='ease_out')\n # Or: x, y = calculate_arc_motion(start, end, height, t)\n```\n\n### Kaleidoscope Effect\n```python\nfrom templates.kaleidoscope import apply_kaleidoscope, create_kaleidoscope_animation\n\n# Apply to a single frame\nkaleido_frame = apply_kaleidoscope(frame, segments=8)\n\n# Or create animated kaleidoscope\nframes = create_kaleidoscope_animation(\n base_frame=my_frame, # or None for demo pattern\n num_frames=30,\n segments=8,\n rotation_speed=1.0\n)\n\n# Simple mirror effects (faster)\nfrom templates.kaleidoscope import apply_simple_mirror\n\nmirrored = apply_simple_mirror(frame, mode='quad') # 4-way mirror\n# modes: 'horizontal', 'vertical', 'quad', 'radial'\n```\n\n**To compose primitives freely, follow these patterns:**\n```python\n# Example: Bounce + shake for impact\nfor i in range(num_frames):\n frame = create_blank_frame(480, 480, bg_color)\n\n # Bounce motion\n t_bounce = i / (num_frames - 1)\n y = interpolate(start_y, ground_y, t_bounce, 'bounce_out')\n\n # Add shake on impact (when y reaches ground)\n if y >= ground_y - 5:\n shake_x = math.sin(i * 2) * 10\n x = center_x + shake_x\n else:\n x = center_x\n\n draw_emoji(frame, '⚽', (x, y), size=60)\n builder.add_frame(frame)\n```\n\n## Helper Utilities\n\nThese are optional helpers for common needs. **Use, modify, or replace these with custom implementations as needed.**\n\n### GIF Builder (Assembly & Optimization)\n\n```python\nfrom core.gif_builder import GIFBuilder\n\n# Create builder with your chosen settings\nbuilder = GIFBuilder(width=480, height=480, fps=20)\n\n# Add frames (however you created them)\nfor frame in my_frames:\n builder.add_frame(frame)\n\n# Save with optimization\nbuilder.save('output.gif',\n num_colors=128,\n optimize_for_emoji=False)\n```\n\nKey features:\n- Automatic color quantization\n- Duplicate frame removal\n- Size warnings for Slack limits\n- Emoji mode (aggressive optimization)\n\n### Text Rendering\n\nFor small GIFs like emojis, text readability is challenging. A common solution involves adding outlines:\n\n```python\nfrom core.typography import draw_text_with_outline, TYPOGRAPHY_SCALE\n\n# Text with outline (helps readability)\ndraw_text_with_outline(\n frame, \"BONK!\",\n position=(240, 100),\n font_size=TYPOGRAPHY_SCALE['h1'], # 60px\n text_color=(255, 68, 68),\n outline_color=(0, 0, 0),\n outline_width=4,\n centered=True\n)\n```\n\nTo implement custom text rendering, use PIL's `ImageDraw.text()` which works fine for larger GIFs.\n\n### Color Management\n\nProfessional-looking GIFs often use cohesive color palettes:\n\n```python\nfrom core.color_palettes import get_palette\n\n# Get a pre-made palette\npalette = get_palette('vibrant') # or 'pastel', 'dark', 'neon', 'professional'\n\nbg_color = palette['background']\ntext_color = palette['primary']\naccent_color = palette['accent']\n```\n\nTo work with colors directly, use RGB tuples - whatever works for the use case.\n\n### Visual Effects\n\nOptional effects for impact moments:\n\n```python\nfrom core.visual_effects import ParticleSystem, create_impact_flash, create_shockwave_rings\n\n# Particle system\nparticles = ParticleSystem()\nparticles.emit_sparkles(x=240, y=200, count=15)\nparticles.emit_confetti(x=240, y=200, count=20)\n\n# Update and render each frame\nparticles.update()\nparticles.render(frame)\n\n# Flash effect\nframe = create_impact_flash(frame, position=(240, 200), radius=100)\n\n# Shockwave rings\nframe = create_shockwave_rings(frame, position=(240, 200), radii=[30, 60, 90])\n```\n\n### Easing Functions\n\nSmooth motion uses easing instead of linear interpolation:\n\n```python\nfrom core.easing import interpolate\n\n# Object falling (accelerates)\ny = interpolate(start=0, end=400, t=progress, easing='ease_in')\n\n# Object landing (decelerates)\ny = interpolate(start=0, end=400, t=progress, easing='ease_out')\n\n# Bouncing\ny = interpolate(start=0, end=400, t=progress, easing='bounce_out')\n\n# Overshoot (elastic)\nscale = interpolate(start=0.5, end=1.0, t=progress, easing='elastic_out')\n```\n\nAvailable easings: `linear`, `ease_in`, `ease_out`, `ease_in_out`, `bounce_out`, `elastic_out`, `back_out` (overshoot), and more in `core/easing.py`.\n\n### Frame Composition\n\nBasic drawing utilities if you need them:\n\n```python\nfrom core.frame_composer import (\n create_gradient_background, # Gradient backgrounds\n draw_emoji_enhanced, # Emoji with optional shadow\n draw_circle_with_shadow, # Shapes with depth\n draw_star # 5-pointed stars\n)\n\n# Gradient background\nframe = create_gradient_background(480, 480, top_color, bottom_color)\n\n# Emoji with shadow\ndraw_emoji_enhanced(frame, '🎉', position=(200, 200), size=80, shadow=True)\n```\n\n## Optimization Strategies\n\nWhen your GIF is too large:\n\n**For Message GIFs (>2MB):**\n1. Reduce frames (lower FPS or shorter duration)\n2. Reduce colors (128 → 64 colors)\n3. Reduce dimensions (480x480 → 320x320)\n4. Enable duplicate frame removal\n\n**For Emoji GIFs (>64KB) - be aggressive:**\n1. Limit to 10-12 frames total\n2. Use 32-40 colors maximum\n3. Avoid gradients (solid colors compress better)\n4. Simplify design (fewer elements)\n5. Use `optimize_for_emoji=True` in save method\n\n## Example Composition Patterns\n\n### Simple Reaction (Pulsing)\n```python\nbuilder = GIFBuilder(128, 128, 10)\n\nfor i in range(12):\n frame = Image.new('RGB', (128, 128), (240, 248, 255))\n\n # Pulsing scale\n scale = 1.0 + math.sin(i * 0.5) * 0.15\n size = int(60 * scale)\n\n draw_emoji_enhanced(frame, '😱', position=(64-size//2, 64-size//2),\n size=size, shadow=False)\n builder.add_frame(frame)\n\nbuilder.save('reaction.gif', num_colors=40, optimize_for_emoji=True)\n\n# Validate\nfrom core.validators import check_slack_size\ncheck_slack_size('reaction.gif', is_emoji=True)\n```\n\n### Action with Impact (Bounce + Flash)\n```python\nbuilder = GIFBuilder(480, 480, 20)\n\n# Phase 1: Object falls\nfor i in range(15):\n frame = create_gradient_background(480, 480, (240, 248, 255), (200, 230, 255))\n t = i / 14\n y = interpolate(0, 350, t, 'ease_in')\n draw_emoji_enhanced(frame, '⚽', position=(220, int(y)), size=80)\n builder.add_frame(frame)\n\n# Phase 2: Impact + flash\nfor i in range(8):\n frame = create_gradient_background(480, 480, (240, 248, 255), (200, 230, 255))\n\n # Flash on first frames\n if i < 3:\n frame = create_impact_flash(frame, (240, 350), radius=120, intensity=0.6)\n\n draw_emoji_enhanced(frame, '⚽', position=(220, 350), size=80)\n\n # Text appears\n if i > 2:\n draw_text_with_outline(frame, \"GOAL!\", position=(240, 150),\n font_size=60, text_color=(255, 68, 68),\n outline_color=(0, 0, 0), outline_width=4, centered=True)\n\n builder.add_frame(frame)\n\nbuilder.save('goal.gif', num_colors=128)\n```\n\n### Combining Primitives (Move + Shake)\n```python\nfrom templates.shake import create_shake_animation\n\n# Create shake animation\nshake_frames = create_shake_animation(\n object_type='emoji',\n object_data={'emoji': '😰', 'size': 70},\n num_frames=20,\n shake_intensity=12\n)\n\n# Create moving element that triggers the shake\nbuilder = GIFBuilder(480, 480, 20)\nfor i in range(40):\n t = i / 39\n\n if i < 20:\n # Before trigger - use blank frame with moving object\n frame = create_blank_frame(480, 480, (255, 255, 255))\n x = interpolate(50, 300, t * 2, 'linear')\n draw_emoji_enhanced(frame, '🚗', position=(int(x), 300), size=60)\n draw_emoji_enhanced(frame, '😰', position=(350, 200), size=70)\n else:\n # After trigger - use shake frame\n frame = shake_frames[i - 20]\n # Add the car in final position\n draw_emoji_enhanced(frame, '🚗', position=(300, 300), size=60)\n\n builder.add_frame(frame)\n\nbuilder.save('scare.gif')\n```\n\n## Philosophy\n\nThis toolkit provides building blocks, not rigid recipes. To work with a GIF request:\n\n1. **Understand the creative vision** - What should happen? What's the mood?\n2. **Design the animation** - Break it into phases (anticipation, action, reaction)\n3. **Apply primitives as needed** - Shake, bounce, move, effects - mix freely\n4. **Validate constraints** - Check file size, especially for emoji GIFs\n5. **Iterate if needed** - Reduce frames/colors if over size limits\n\n**The goal is creative freedom within Slack's technical constraints.**\n\n## Dependencies\n\nTo use this toolkit, install these dependencies only if they aren't already present:\n\n```bash\npip install pillow imageio numpy\n```","schemaVersion":1},"repoUrl":"https://github.com/Prat011/awesome-llm-skills/tree/master/slack-gif-creator","tags":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"awesome-llm-skills","audit":{"files":["slack-gif-creator/requirements.txt"],"binaries":[],"findings":[{"kind":"dependency","rule":"DP-04","message":"Python dependencies are not pinned and there is no lock file.","surface":"slack-gif-creator/requirements.txt","evidence":"pillow>=10.0.0, imageio>=2.31.0, imageio-ffmpeg>=0.4.9, numpy>=1.24.0","severity":"medium"}],"packages":4,"auditedAt":"2026-09-25T11:52:30.068Z","lockfiles":[]},"forks":313,"owner":"Prat011","stars":1761,"topics":["anthropic","awesome-list","awesome-lists","claude-code","claude-skills","claude-skills-creator","codex","codex-cli","gemini","gemini-cli","llama","llms","openai","opencode","qwen","qwen-coder","skills"],"license":"Complete terms in LICENSE.txt","fullName":"Prat011/awesome-llm-skills","homepage":null,"language":"Python","pushedAt":"2026-07-14T09:53:56Z","avatarUrl":"https://avatars.githubusercontent.com/u/67639393?v=4","crawledAt":"2026-09-25T11:52:22.319Z","openIssues":170,"manifestFile":"SKILL.md","manifestPath":"slack-gif-creator/SKILL.md","defaultBranch":"master"},"readme":"# Slack GIF Creator - Flexible Toolkit\n\nA toolkit for creating animated GIFs optimized for Slack. Provides validators for Slack's constraints, composable animation primitives, and optional helper utilities. **Apply these tools however needed to achieve the creative vision.**\n\n## Slack's Requirements\n\nSlack has specific requirements for GIFs based on their use:\n\n**Message GIFs:**\n- Max size: ~2MB\n- Optimal dimensions: 480x480\n- Typical FPS: 15-20\n- Color limit: 128-256\n- Duration: 2-5s\n\n**Emoji GIFs:**\n- Max size: 64KB (strict limit)\n- Optimal dimensions: 128x128\n- Typical FPS: 10-12\n- Color limit: 32-48\n- Duration: 1-2s\n\n**Emoji GIFs are challenging** - the 64KB limit is strict. Strategies that help:\n- Limit to 10-15 frames total\n- Use 32-48 colors maximum\n- Keep designs simple\n- Avoid gradients\n- Validate file size frequently\n\n## Toolkit Structure\n\nThis skill provides three types of tools:\n\n1. **Validators** - Check if a GIF meets Slack's requirements\n2. **Animation Primitives** - Composable building blocks for motion (shake, bounce, move, kaleidoscope)\n3. **Helper Utilities** - Optional functions for common needs (text, colors, effects)\n\n**Complete creative freedom is available in how these tools are applied.**\n\n## Core Validators\n\nTo ensure a GIF meets Slack's constraints, use these validators:\n\n```python\nfrom core.gif_builder import GIFBuilder\n\n# After creating your GIF, check if it meets requirements\nbuilder = GIFBuilder(width=128, height=128, fps=10)\n# ... add your frames however you want ...\n\n# Save and check size\ninfo = builder.save('emoji.gif', num_colors=48, optimize_for_emoji=True)\n\n# The save method automatically warns if file exceeds limits\n# info dict contains: size_kb, size_mb, frame_count, duration_seconds\n```\n\n**File size validator**:\n```python\nfrom core.validators import check_slack_size\n\n# Check if GIF meets size limits\npasses, info = check_slack_size('emoji.gif', is_emoji=True)\n# Returns: (True/False, dict with size details)\n```\n\n**Dimension validator**:\n```python\nfrom core.validators import validate_dimensions\n\n# Check dimensions\npasses, info = validate_dimensions(128, 128, is_emoji=True)\n# Returns: (True/False, dict with dimension details)\n```\n\n**Complete validation**:\n```python\nfrom core.validators import validate_gif, is_slack_ready\n\n# Run all validations\nall_pass, results = validate_gif('emoji.gif', is_emoji=True)\n\n# Or quick check\nif is_slack_ready('emoji.gif', is_emoji=True):\n print(\"Ready to upload!\")\n```\n\n## Animation Primitives\n\nThese are composable building blocks for motion. Apply these to any object in any combination:\n\n### Shake\n```python\nfrom templates.shake import create_shake_animation\n\n# Shake an emoji\nframes = create_shake_animation(\n object_type='emoji',\n object_data={'emoji': '😱', 'size': 80},\n num_frames=20,\n shake_intensity=15,\n direction='both' # or 'horizontal', 'vertical'\n)\n```\n\n### Bounce\n```python\nfrom templates.bounce import create_bounce_animation\n\n# Bounce a circle\nframes = create_bounce_animation(\n object_type='circle',\n object_data={'radius': 40, 'color': (255, 100, 100)},\n num_frames=30,\n bounce_height=150\n)\n```\n\n### Spin / Rotate\n```python\nfrom templates.spin import create_spin_animation, create_loading_spinner\n\n# Clockwise spin\nframes = create_spin_animation(\n object_type='emoji',\n object_data={'emoji': '🔄', 'size': 100},\n rotation_type='clockwise',\n full_rotations=2\n)\n\n# Wobble rotation\nframes = create_spin_animation(rotation_type='wobble', full_rotations=3)\n\n# Loading spinner\nframes = create_loading_spinner(spinner_type='dots')\n```\n\n### Pulse / Heartbeat\n```python\nfrom templates.pulse import create_pulse_animation, create_attention_pulse\n\n# Smooth pulse\nframes = create_pulse_animation(\n object_data={'emoji': '❤️', 'size': 100},\n pulse_type='smooth',\n scale_range=(0.8, 1.2)\n)\n\n# Heartbeat (double-pump)\nframes = create_pulse_animation(pulse_type='heartbeat')\n\n# Attention pulse for emoji GIFs\nframes = create_attention_p","createdAt":"2026-09-25T11:52:30.396Z","updatedAt":"2026-09-25T11:52:30.396Z"}],"total":517,"limit":24,"offset":0} ![\"Awesome](\"assets/banner.svg\")
\n![\"Dancing](\"assets/mascot-dance.svg\")
\n![\"Awesome\"](\"https://awesome.re/badge-flat2.svg\"){kind=icon}
\n ![\"Stars\"](\"https://img.shields.io/github/stars/rohitg00/awesome-claude-design?style=flat-square&logo=github&color=c96442\")
![\"Forks\"](\"https://img.shields.io/github/forks/rohitg00/awesome-claude-design?style=flat-square&logo=github&color=c96442\")
![\"Last](\"https://img.shields.io/github/last-commit/rohitg00/awesome-claude-design?style=flat-square&color=191817\")
![\"Launched\"](\"https://img.shields.io/badge/Launched-April%2017%2C%202026-0f0f0f?style=flat-square\"){kind=icon}
![\"Opus](\"https://img.shields.io/badge/Opus-4.7-6f4e37?style=flat-square\"){kind=icon}
![\"License\"](\"https://img.shields.io/github/license/rohitg00/awesome-claude-design?style=flat-square&color=blue\")
![\"editorial](\"assets/tags/family-editorial.svg\")
\n ![\"terminal-core\"](\"assets/tags/family-terminal.svg\")
\n ![\"warm](\"assets/tags/family-warm.svg\")
\n ![\"data-dense](\"assets/tags/family-data-dense.svg\")
\n ![\"cinematic](\"assets/tags/family-cinematic.svg\")
\n ![\"playful](\"assets/tags/family-playful.svg\")
\n ![\"glass](\"assets/tags/family-glass.svg\")
\n ![\"neon](\"assets/tags/family-brutalist.svg\")
\n ![\"cult](\"assets/tags/family-indie.svg\")
\n![\"Linear](\"assets/previews/linear.jpg\")
![\"Ollama](\"assets/previews/ollama.jpg\")
![](\"https://awesome.re/badge.svg\"/){kind=icon}
\n ![\"Stars\"](\"https://img.shields.io/github/stars/ikaijua/Awesome-AITools?style=social\")
\n ![\"Forks\"](\"https://img.shields.io/github/forks/ikaijua/Awesome-AITools?style=social\")
\n ![\"Last](\"https://img.shields.io/github/last-commit/ikaijua/Awesome-AITools\")
\n![\"Buy](\"https://cdn.buymeacoffee.com/buttons/default-orange.png\")
\n\n- [AI News](https://github.com/ikaijua/Awesome-AITools/discussions?discussions_q=is%3Aopen+label%3A%22ai%E2%80%91news%E2%80%91en%22)\n- [Become Sponsors](#become-sponsors)\n\n## 💎 Sponsor\n\n![\"TestMu](\"https://cdn.voltagent.dev/awesome-repo/testmui/testmuai-white.png\")
![\"Crawlbase\"](\"https://cdn.voltagent.dev/awesome-repo/crawlbase-new/crawlbase-logo-dark-mode.svg\"){kind=logo}
![\"SerpApi\"](\"https://cdn.voltagent.dev/awesome-repo/serpapi/serpapi-logo.png\"){kind=logo}
| [SerpApi](https://serpapi.com/awesome-agent-skills) is a Web Search API for your AI apps. Available in Markdown and JSON for any integration. |\n\n![\"Become](\"https://img.shields.io/badge/📩_Become_a_Sponsor-Contact_Us-blue?style=for-the-badge&logoColor=white\"){kind=icon}
\n\n\n## Table of Contents\n\n### Official Skills by\n\n| | | | | \n|---|---|---|---|\n| [Claude](#official-claude-skills) | [VoltAgent](#skills-by-voltagent) | [SerpApi](#skills-by-serpapi) | [Crawlbase](#skills-by-crawlbase) |\n| [TestMu AI](#skills-by-testmu-ai) | [Modem Dev](#skills-by-modem-dev) | [Angular](#skills-by-angular) | [Composio](#skills-by-composio-team) |\n| [Supabase](#skills-by-supabase-team) | [Google Gemini](#skills-by-google-gemini) | [Stripe](#skills-by-stripe-team) | [Courier](#skills-by-courier) |\n| [CallStack](#skills-by-callstack) | [Expo](#skills-by-expo-team) | [Better Auth](#skills-by-better-auth-team) | [Tinybird](#skills-by-tinybird-team) |\n| [HashiCorp](#skills-by-hashicorp-team-for-terraform) | [Sanity]","createdAt":"2026-09-25T10:51:52.625Z","updatedAt":"2026-09-25T10:51:52.625Z"},{"id":"cmuh0rxr803laqu06iqr0r7xr","slug":"llmquant-awesome-trading-agents","name":"awesome-trading-agents","description":"Curated list of LLM-driven trading agents, MCP servers, and agent skills for market research, strategy, and execution.","authorId":"gh:llmquant","authorName":"LLMQuant","version":"0.1.0","category":"MCP","securityLevel":"Community","downloadsCount":0,"githubStars":851,"pricePerCall":0,"manifest":{"name":"awesome-trading-agents","tools":[],"category":"MCP","entrypoint":{"args":["-y","github:LLMQuant/awesome-trading-agents"],"type":"mcp-stdio","command":"npx"},"description":"Curated list of LLM-driven trading agents, MCP servers, and agent skills for market research, strategy, and execution.","permissions":["shell","network"],"schemaVersion":1},"repoUrl":"https://github.com/LLMQuant/awesome-trading-agents","tags":["agent-skills","agentic-ai","ai-trading","awesome","awesome-list","claude-skills","financial-ai","fintech","llm-agents","mcp","mcp-servers","prediction-markets"],"stats":{"installVelocity7d":0,"retentionRate":0,"executions":0,"rating":null},"origin":"github","source":{"repo":"awesome-trading-agents","audit":{"files":[],"binaries":[],"findings":[],"packages":0,"auditedAt":"2026-09-25T13:51:48.611Z","lockfiles":[]},"forks":136,"owner":"LLMQuant","stars":851,"topics":["agent-skills","agentic-ai","ai-trading","awesome","awesome-list","claude-skills","financial-ai","fintech","llm-agents","mcp","mcp-servers","prediction-markets","trading-agents"],"license":"CC0-1.0","fullName":"LLMQuant/awesome-trading-agents","homepage":null,"language":null,"pushedAt":"2026-08-13T03:30:06Z","avatarUrl":"https://avatars.githubusercontent.com/u/67217001?v=4","crawledAt":"2026-09-25T13:51:48.400Z","openIssues":18,"manifestFile":"README.md","manifestPath":"README.md","defaultBranch":"master"},"readme":"\n\n\n\nAwesome Trading Agents collects open-source projects where LLMs help research markets, make trading decisions, or connect agents to market data and execution tools. The list focuses on three building blocks: Agents, MCPs, and Skills. It does not try to cover classic quant libraries, time-series models, or reinforcement-learning trading bots; those are better served by [`georgezouq/awesome-ai-in-finance`](https://github.com/georgezouq/awesome-ai-in-finance) and [`wilsonfreitas/awesome-quant`](https://github.com/wilsonfreitas/awesome-quant). Entries are selected for public code or artifacts, clear LLM-driven behavior, recent activity, useful documentation, a distinct role, and visible adoption. Stewarded by the [LLMQuant](https://llmquant.com) community.\n\n> [!TIP]\n> **If you only read three:**\n>\n> - **Agents** — [TauricResearch/TradingAgents](#agents-tradingagents) · [virattt/ai-hedge-fund](#agents-ai-hedge-fund) · [HKUDS/AI-Trader](#agents-ai-trader)\n> - **MCPs** — [alpacahq/alpaca-mcp-server](#mcps-alpaca) · [krakenfx/kraken-cli](#mcps-kraken-cli) · [financial-datasets/mcp-server](#mcps-financial-datasets)\n> - **Skills** — [tradermonty/claude-trading-skills](#skills-claude-trading-skills) · [himself65/finance-skills](#skills-finance-skills) · [RKiding/Awesome-finance-skills](#skills-alphaear)\n\n> [!NOTE]\n> Dates are not shown after every item. We still check recent activity before adding or updating a project; the README only keeps details that help readers choose a project, such as official status, forks, or useful pairings.\n\n\n## Contents\n\n- [**Agents**](#agents)\n - [Multi-agent trading systems](#agents-multi-agent)\n - [Single-agent end-to-end traders](#agents-single-agent)\n - [Research / equity-research copilots](#agents-research-copilots)\n - [Real-money / competition experiments](#agents-real-money)\n - [Prediction-market specialists](#agents-prediction-market)\n - [Benchmarks & evaluations](#agents-benchmarks)\n - [Strategy coding / self-improving agents](#agents-strategy-coding)\n- [**MCPs**](#mcps)\n - [Market data / data providers](#mcps-market-data)\n - [Brokerage / exchange trading](#mcps-brokerage)\n - [Research tools / analysis](#mcps-research-tools)\n - [TradingView bridge](#mcps-tradingview)\n - [Prediction markets](#mcps-prediction-market)\n - [Strategy / backtesting platforms](#mcps-backtesting)\n- [**Skills**](#skills)\n - [Equity research](#skills-equity-research)\n - [Crypto / DeFi / on-chain](#skills-crypto)\n - [Strategy coding & backtesting](#skills-strategy-coding)\n - [Brokerage execution & portfolio](#skills-brokerage)\n- [**Resources**](#resources)\n - [Papers](#resources-papers)\n - [Learn](#resources-learn)\n- [Related awesome lists](#related-awesome-lists)\n\n\n\n\n## Agents\n\n![\"Xuanshu](\"assets/sponsors/xuanshuapi-en.jpg\")
\n ![\"Visit](\"https://img.shields.io/badge/Visit%20Site-blue?style=flat-square\"){kind=icon}
\n ![\"Awesome](\"assets/header-generated-v2.png\")
\n\n![\"Awesome\"](\"https://awesome.re/badge.svg\"){kind=icon}
![\"GitHub](\"https://img.shields.io/github/stars/LLMQuant/awesome-trading-agents?style=flat\")
![\"License:](\"https://img.shields.io/badge/License-CC0%201.0-lightgrey.svg\"){kind=icon}
![\"Topics\"](\"https://img.shields.io/badge/topics-trading--agents%20%C2%B7%20mcp--servers%20%C2%B7%20agent--skills-blue\"){kind=icon}
![\"Last](\"https://img.shields.io/github/last-commit/LLMQuant/awesome-trading-agents\")
![\"Bilingual\"](\"https://img.shields.io/badge/bilingual-zh%20%C2%B7%20en-708090\"){kind=icon}