Content
<div align="center">
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:FF1744,33:FFEA00,66:00E676,100:00E5FF&height=220§ion=header&text=%F0%9F%9A%80%20Better%20Than%20Claude%20Skills&fontSize=45&fontColor=FFFFFF&fontAlignY=35&desc=The%20Ultimate%20Skill%20Arsenal%20for%20LLMs%20and%20AI%20Agents&descSize=18&descAlignY=55" width="100%" />
<br>
<a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-FF1744.svg?style=for-the-badge&logo=github" /></a>
<a href="#-license"><img src="https://img.shields.io/badge/License-MIT-FFEA00.svg?style=for-the-badge" /></a>
<a href="#"><img src="https://img.shields.io/badge/Skills-16+-00E676.svg?style=for-the-badge&logo=rocket" /></a>
<a href="#"><img src="https://img.shields.io/badge/Built_with-❤️-00E5FF.svg?style=for-the-badge" /></a>
<br><br>
<h3><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Fire.png" width="35" valign="middle"> Supercharge your AI assistants with <b>16+ highly-optimized, production-ready skills</b></h3>
<p><i>Transform Claude, Gemini, and other LLMs into autonomous agents capable of generating<br>algorithmic art, managing spreadsheets, co-authoring docs, and building complex web artifacts.</i></p>
<br>
<table>
<tr>
<td align="center"><img width="100%" alt="Showcase 1" src="https://github.com/user-attachments/assets/53b6ddae-5004-43b6-87df-a0169067cfa0" /></td>
<td align="center"><img width="100%" alt="Showcase 2" src="https://github.com/user-attachments/assets/eceefd01-75fd-4924-8287-7a154e76dda0" /></td>
</tr>
<tr>
<td align="center"><img width="100%" alt="Showcase 3" src="https://github.com/user-attachments/assets/676edd16-1549-4084-889e-e61cd96c2de0" /></td>
<td align="center"><img width="100%" alt="Showcase 4" src="https://github.com/user-attachments/assets/ee6be33e-e9f8-45be-ad88-355767f6fc8e" /></td>
</tr>
</table>
</div>
<br>
<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%" />
<br>
## 📖 Table of Contents
- 🌟 [Why Use This Repository?](#-why-use-this-repository)
- 📦 [Quick Start Installation](#-quick-start-installation)
- [Drag & Drop (No-Code)](#-option-1--drag--drop-no-code)
- [Build from Source](#-option-2--build-from-source)
- 🧰 [The Skill Arsenal (16+ Skills)](#-the-skill-arsenal)
- [📄 Document & Data Mastery](#-document--data-mastery)
- [🎨 Design & Visual Arts](#-design--visual-arts)
- [💻 Development & Engineering](#-development--engineering)
- [🛠️ Utilities & Meta-Skills](#%EF%B8%8F-utilities--meta-skills)
- 🏗️ [Progressive Disclosure Architecture](#%EF%B8%8F-progressive-disclosure-architecture)
- 🛠️ [Build Your Own Skills (Skill-Creator)](#%EF%B8%8F-build-your-own-skills-skill-creator)
- 📊 [Evaluation & Benchmarking](#-evaluation--benchmarking)
- 🤝 [Contributing](#-contributing)
- 📜 [License](#-license)
<br>
<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%" />
<br>
## 🌟 Why Use This Repository?
<div align="center">
<h4>Modern LLMs are incredibly smart — but they lack the strict, domain-specific context<br>needed to execute complex, multi-step workflows <i>flawlessly</i>.</h4>
<p><b>Better Than Claude Skills</b> bridges that gap.</p>
</div>
<br>
<table>
<tr>
<td width="25%" align="center">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Activities/Bullseye.png" width="50" />
### Pinpoint Accuracy
Skills use **"Progressive Disclosure"** — your AI gets only the context it needs, *when* it needs it. Zero bloat. Zero hallucination.
</td>
<td width="25%" align="center">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png" width="50" />
### Zero-Friction Setup
Pre-packaged `.skill` files are ready for **instant drag-and-drop** deployment into any AI interface.
</td>
<td width="25%" align="center">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Robot.png" width="50" />
### Self-Improving
Built-in `skill-creator` lets your AI **autonomously write, benchmark, and optimize** new skills for you.
</td>
<td width="25%" align="center">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Activities/Artist%20Palette.png" width="50" />
### Production-Grade
Generate **stunning UI designs**, beautiful generative art, and perfectly formatted corporate documents.
</td>
</tr>
</table>
<br>
<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%" />
<br>
## 📦 Quick Start Installation
<div align="center">
<h4>Getting started takes less than <b>60 seconds</b>. Choose your path:</h4>
</div>
<br>
### 🟢 Option 1 — Drag & Drop (No-Code)
> **The fastest way to enhance your AI.** No terminal. No setup. Just drag.
| Step | Action |
|:----:|--------|
| **1** | 📥 **Download** — Clone or download the ZIP of this repository |
| **2** | 📂 **Navigate** — Open `_claude (skill-zip) to upload directly/skill form/` |
| **3** | 🔍 **Select** — Find your desired `.skill` file (e.g., `frontend-design.skill`) |
| **4** | 📤 **Deploy** — **Drag and drop** the file into [claude.ai/customize/skills](https://claude.ai/customize/skills) |
| **5** | 💬 **Activate** — Ask your AI: *"Use the frontend-design skill to create a landing page"* |
<br>
### 🔵 Option 2 — Build from Source
> **For developers** who want to modify, inspect, or create custom skills.
```bash
# 1. Clone the repository
git clone https://github.com/Shivam990q/better-than-claude-skills.git
cd better-than-claude-skills
# 2. Navigate to the target skill directory
cd frontend-design/
# 3. Make your edits to SKILL.md, scripts/, or references/
# Customize the skill to your exact needs
# 4. Package your custom skill using the built-in bundler
python -m scripts.package_skill path/to/skill-folder
# 5. Your new .skill file is ready for deployment! 🚀
```
<br>
<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%" />
<br>
## 🧰 The Skill Arsenal
<div align="center">
<h4>16+ highly-optimized skills organized into 4 categories.<br>Each skill is a <i>focused expert</i> in its domain.</h4>
</div>
<br>
---
### 📄 Document & Data Mastery
> *Supercharge your AI's ability to read, write, and manipulate complex file formats.*
<table>
<tr>
<td width="15%" align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Notebook.png" width="50" /></td>
<td>
**`docx`** — Word Processing\
Ultimate control over `.docx` files. Create, read, and manipulate Word documents with tables of contents, tracked changes, headers/footers, and flawless formatting using low-level XML manipulation and JavaScript libraries.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Bar%20Chart.png" width="50" /></td>
<td>
**`xlsx`** — Spreadsheet Processing\
Advanced spreadsheet manipulation. Read, fix, format, and generate `.xlsx`, `.xlsm`, `.csv`, or `.tsv` files. Uses `pandas` for analysis and `openpyxl` for formatting. Includes mandatory formula recalculation workflows.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Books.png" width="50" /></td>
<td>
**`pdf`** — Document Processing\
Comprehensive PDF operations using `pypdf`, `pdfplumber`, and `reportlab`. Extract text/tables, merge, split, watermark, encrypt, fill forms, and run OCR. Handles Unicode superscript/subscript rendering pitfalls.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Clapper%20Board.png" width="50" /></td>
<td>
**`pptx`** — Presentation Processing\
Create, edit, and extract content from professional `.pptx` slides. Includes curated color palettes, font pairing guides, layout strategies, and automated visual QA with subagent-driven inspection.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Handshake.png" width="50" /></td>
<td>
**`doc-coauthoring`** — Collaborative Writing\
A structured, 3-stage workflow for co-authoring technical docs, proposals, and specs: **Context Gathering** → **Refinement & Structure** → **Reader Testing** with a fresh AI to catch blind spots.
</td>
</tr>
</table>
---
### 🎨 Design & Visual Arts
> *Elevate AI generation from generic "AI slop" to museum-quality aesthetics.*
<table>
<tr>
<td width="15%" align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Desktop%20Computer.png" width="50" /></td>
<td>
**`frontend-design`** — Production UI\
Generate distinctive, production-grade frontend interfaces. Prioritizes bold aesthetics, strong typography, and precise spatial composition — never generic or "AI-looking."
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Cyclone.png" width="50" /></td>
<td>
**`algorithmic-art`** — Generative Art\
Create stunning generative art using `p5.js` with seeded randomness and interactive parameters. Two-phase workflow: (1) Philosophical manifesto creation, (2) Programmatic visual expression.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Activities/Performing%20Arts.png" width="50" /></td>
<td>
**`canvas-design`** — Static Visual Art\
Produce museum-quality visual art and posters as `.png` or `.pdf`. Enforces design philosophies like "Concrete Poetry," "Chromatic Language," and "Geometric Silence." Mandates expert craftsmanship.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Activities/Artist%20Palette.png" width="50" /></td>
<td>
**`theme-factory`** — Visual Theming\
Apply consistent visual themes across slides, docs, and HTML pages. Choose from **10 curated themes** (Ocean Depths, Midnight Galaxy, Desert Rose, etc.) or generate custom themes on the fly.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Office%20Building.png" width="50" /></td>
<td>
**`brand-guidelines`** — Brand Enforcement\
Strictly enforce official brand colors and typography (e.g., Anthropic's `#d97757` orange, Poppins/Lora fonts) on all AI-generated artifacts. Auto-fallback for missing fonts.
</td>
</tr>
</table>
---
### 💻 Development & Engineering
> *Empower your AI to build complex applications and robust server architectures.*
<table>
<tr>
<td width="15%" align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Rocket.png" width="50" /></td>
<td>
**`web-artifacts-builder`** — Complex Web Apps\
Build multi-component React/Vite/Tailwind web artifacts with state management and routing using `shadcn/ui`. Includes mandatory standalone HTML bundling workflow.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Test%20Tube.png" width="50" /></td>
<td>
**`webapp-testing`** — Automated Testing\
Test local web apps using Playwright. Verify frontend functionality, debug UI, and capture screenshots. Uses "Reconnaissance-Then-Action" pattern with server lifecycle management.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Electric%20Plug.png" width="50" /></td>
<td>
**`claude-api`** — LLM API Integration\
Build, debug, and optimize Claude API & Anthropic SDK integrations. Includes prompt caching, adaptive thinking strategies, model migration guides, and strict SDK vs. raw HTTP hierarchies.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Wrench.png" width="50" /></td>
<td>
**`mcp-builder`** — MCP Server Development\
Authoritative guide for creating robust Model Context Protocol (MCP) servers in FastMCP (Python) or Node/TypeScript. Four-phase lifecycle: Planning → Implementation → Review/Testing → Evaluation.
</td>
</tr>
</table>
---
### 🛠️ Utilities & Meta-Skills
> *Tools that help you communicate better and build even more skills.*
<table>
<tr>
<td width="15%" align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Crown.png" width="50" /></td>
<td>
**`skill-creator`** — **The Crown Jewel**\
A meta-skill that lets the AI **create new skills from scratch**, modify existing ones, run evaluations, benchmark performance with variance analysis, and optimize YAML triggers for maximum accuracy.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Clapper%20Board.png" width="50" /></td>
<td>
**`slack-gif-creator`** — Animated GIFs\
Generate high-quality animated GIFs optimized for Slack constraints (128×128 emoji, 480×480 message). Includes easing functions, physics simulations (bounce, shake, pulse), and PIL-based drawing.
</td>
</tr>
<tr>
<td align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Megaphone.png" width="50" /></td>
<td>
**`internal-comms`** — Corporate Communications\
Generate properly formatted corporate communications: 3P updates (Progress/Plans/Problems), company newsletters, FAQ responses, incident reports, and leadership updates.
</td>
</tr>
</table>
<br>
<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%" />
<br>
## 🏗️ Progressive Disclosure Architecture
<div align="center">
<h4>How do these skills work so flawlessly without<br>overwhelming the AI's context window?</h4>
</div>
<br>
Every skill is built on a **3-layer Progressive Disclosure Architecture**. The AI reads what it needs, *when* it needs it — nothing more.
```text
skill-name/
├── SKILL.md # 📍 The core logic (< 500 lines)
│ ├── YAML frontmatter # 🧠 Trigger definition (always loaded)
│ └── Markdown body # ⚙️ High-level workflow instructions
└── Bundled Resources # 📦 Loaded strictly ON-DEMAND
├── scripts/ # 💻 Executable Python/JS tools
├── references/ # 📚 Deep-dive documentation
└── assets/ # 🖼️ Templates, icons, fonts
```
<table>
<tr>
<td align="center" width="33%">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Brain.png" width="45" />
### Layer 1
**Metadata**\
*(Always Present)*
YAML frontmatter acts as a "pushy" trigger — tells the AI *when* to activate the skill.
</td>
<td align="center" width="33%">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Gear.png" width="45" />
### Layer 2
**Body Instructions**\
*(Loaded on Activation)*
`SKILL.md` body acts as a lightweight orchestrator — tells the AI *how* to work.
</td>
<td align="center" width="33%">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Package.png" width="45" />
### Layer 3
**Bundled Resources**\
*(Loaded on Demand)*
`scripts/` and `references/` are pulled into context only when explicitly needed.
</td>
</tr>
</table>
<br>
<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%" />
<br>
## 🛠️ Build Your Own Skills (Skill-Creator)
<div align="center">
<h4>Don't see what you need? <b>Build it!</b><br>The <code>skill-creator</code> walks you through a rigorous creation loop.</h4>
</div>
<br>
<div align="center">
<table>
<tr>
<td width="50%" align="center">
### <img src="https://img.shields.io/badge/1_GENERATION-00E5FF?style=for-the-badge" />
<br>
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Speech%20Balloon.png" width="55" height="55" />
<br><b>INTERVIEW</b><br>Extract user intent & edge cases
<br><br><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Backhand%20Index%20Pointing%20Down.png" width="35" height="35" /><br><br>
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Notebook.png" width="55" height="55" />
<br><b>DRAFT</b><br>Generate `SKILL.md` & executable scripts
<br><br><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Backhand%20Index%20Pointing%20Down.png" width="35" height="35" /><br><br>
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Microscope.png" width="55" height="55" />
<br><b>TEST</b><br>Create rigorous edge-case prompts
<br>
</td>
<td width="50%" align="center">
### <img src="https://img.shields.io/badge/2_REFINEMENT_LOOP-FFEA00?style=for-the-badge" />
<br>
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Rocket.png" width="55" height="55" />
<br><b>EXECUTE</b><br>Run test prompts with the new skill
<br><br><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Backhand%20Index%20Pointing%20Down.png" width="35" height="35" /><br><br>
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Straight%20Ruler.png" width="55" height="55" />
<br><b>EVALUATE</b><br>Measure qualitative/quantitative baselines
<br><br><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Backhand%20Index%20Pointing%20Down.png" width="35" height="35" /><br><br>
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Gear.png" width="55" height="55" />
<br><b>OPTIMIZE</b><br>Refine YAML triggers & repeat loop
<br>
</td>
</tr>
</table>
</div>
<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%" />
<br>
## 📊 Evaluation & Benchmarking
<div align="center">
<h4>We don't <i>guess</i> if a skill works — we <b>measure</b> it.</h4>
</div>
<br>
<table>
<tr>
<td align="center" width="25%">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Microscope.png" width="45" />
**A/B Testing**\
Run test cases *with* the skill vs. *without* (or against older versions) simultaneously.
</td>
<td align="center" width="25%">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Straight%20Ruler.png" width="45" />
**Quantitative Assertions**\
Grade outputs against verifiable hard metrics: *"Did it use the correct font?"*, *"Is the formula valid?"*
</td>
<td align="center" width="25%">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Stopwatch.png" width="45" />
**Efficiency Tracking**\
Capture `total_tokens` and `duration_ms` for every run to monitor cost and speed.
</td>
<td align="center" width="25%">
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Eyes.png" width="45" />
**Visual Eval Viewer**\
Built-in HTML viewer (`generate_review.py`) for side-by-side visual comparison and grading.
</td>
</tr>
</table>
<br>
<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%" />
<br>
## 🤝 Contributing
<div align="center">
<h4>We welcome contributions to make LLMs even more capable!</h4>
</div>
```bash
# 1. Fork the repository
# 2. Create your feature branch
git checkout -b feature/AmazingSkill
# 3. Commit your changes
git commit -m 'Add some AmazingSkill'
# 4. Push to the branch
git push origin feature/AmazingSkill
# 5. Open a Pull Request 🎉
```
<br>
## 📜 License
This project is licensed under the terms specified in `LICENSE.txt`. Some skills may contain proprietary instructions — please review individual skill licenses where applicable.
<br>
<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%" />
<div align="center">
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:FF1744,33:FFEA00,66:00E676,100:00E5FF&height=120§ion=footer" width="100%" />
<br>
*Built for the future of agentic coding and AI-assisted workflows.*
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png" width="30" /> **Star this repo if you find it useful!** <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png" width="30" />
**Happy Building!** <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Rocket.png" width="30" />
</div>
