Merge PR #205 and regenerate catalog files
This commit is contained in:
sck_0
10
CATALOG.md
10
CATALOG.md
@@ -2,7 +2,7 @@
|
||||
|
||||
Generated at: 2026-02-08T00:00:00.000Z
|
||||
|
||||
Total skills: 1007
|
||||
Total skills: 1011
|
||||
|
||||
## architecture (69)
|
||||
|
||||
@@ -481,7 +481,7 @@ applications. | php | php, pro, write, idiomatic, code, generators, iterators, s
|
||||
| `zod-validation-expert` | Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js... | zod, validation | zod, validation, typescript, first, schema, covers, parsing, custom, errors, refinements, type, inference |
|
||||
| `zustand-store-ts` | Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creati... | zustand, store, ts | zustand, store, ts, stores, typescript, subscribewithselector, middleware, proper, state, action, separation, building |
|
||||
|
||||
## general (200)
|
||||
## general (202)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -508,6 +508,7 @@ applications. | php | php, pro, write, idiomatic, code, generators, iterators, s
|
||||
| `blockchain-developer` | Build production-ready Web3 applications, smart contracts, and decentralized systems. Implements DeFi protocols, NFT platforms, DAOs, and enterprise blockcha... | blockchain | blockchain, developer, web3, applications, smart, contracts, decentralized, implements, defi, protocols, nft, platforms |
|
||||
| `brand-guidelines-anthropic` | Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand co... | brand, guidelines, anthropic | brand, guidelines, anthropic, applies, official, colors, typography, any, sort, artifact, may, benefit |
|
||||
| `brand-guidelines-community` | Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand co... | brand, guidelines, community | brand, guidelines, community, applies, anthropic, official, colors, typography, any, sort, artifact, may |
|
||||
| `bug-hunter` | Systematically finds and fixes bugs using proven debugging techniques. Traces from symptoms to root cause, implements fixes, and prevents regression. | bug, hunter | bug, hunter, systematically, finds, fixes, bugs, proven, debugging, techniques, traces, symptoms, root |
|
||||
| `busybox-on-windows` | How to use a Win32 build of BusyBox to run many of the standard UNIX command line tools on Windows. | busybox, on, windows | busybox, on, windows, how, win32, run, many, standard, unix, command, line |
|
||||
| `c-pro` | Write efficient C code with proper memory management, pointer | c | c, pro, write, efficient, code, proper, memory, pointer |
|
||||
| `canvas-design` | 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... | canvas | canvas, beautiful, visual, art, png, pdf, documents, philosophy, should, skill, user, asks |
|
||||
@@ -630,6 +631,7 @@ applications. | php | php, pro, write, idiomatic, code, generators, iterators, s
|
||||
| `paywall-upgrade-cro` | When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgr... | paywall, upgrade, cro | paywall, upgrade, cro, user, wants, optimize, app, paywalls, screens, upsell, modals, feature |
|
||||
| `pdf-official` | Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs ... | pdf, official | pdf, official, manipulation, toolkit, extracting, text, tables, creating, new, pdfs, merging, splitting |
|
||||
| `pentest-commands` | This skill should be used when the user asks to "run pentest commands", "scan with nmap", "use metasploit exploits", "crack passwords with hydra or john", "s... | pentest, commands | pentest, commands, skill, should, used, user, asks, run, scan, nmap, metasploit, exploits |
|
||||
| `performance-optimizer` | Identifies and fixes performance bottlenecks in code, databases, and APIs. Measures before and after to prove improvements. | performance, optimizer | performance, optimizer, identifies, fixes, bottlenecks, code, databases, apis, measures, before, after, prove |
|
||||
| `performance-profiling` | Performance profiling principles. Measurement, analysis, and optimization techniques. | performance, profiling | performance, profiling, principles, measurement, analysis, optimization, techniques |
|
||||
| `personal-tool-builder` | Expert in building custom tools that solve your own problems first. The best products often start as personal tools - scratch your own itch, build for yourse... | personal, builder | personal, builder, building, custom, solve, own, problems, first, products, often, start, scratch |
|
||||
| `plan-writing` | Structured task planning with clear breakdowns, dependencies, and verification criteria. Use when implementing features, refactoring, or any multi-step work. | plan, writing | plan, writing, structured, task, planning, clear, breakdowns, dependencies, verification, criteria, implementing, features |
|
||||
@@ -812,7 +814,7 @@ scripts. | bash | bash, pro, defensive, scripting, automation, ci, cd, pipelines
|
||||
| `workflow-automation` | Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost... | | automation, infrastructure, makes, ai, agents, reliable, without, durable, execution, network, hiccup, during |
|
||||
| `x-twitter-scraper` | X (Twitter) data platform skill — tweet search, user lookup, follower extraction, engagement metrics, giveaway draws, monitoring, webhooks, 19 extraction too... | [twitter, x-api, scraping, mcp, social-media, data-extraction, giveaway, monitoring, webhooks] | [twitter, x-api, scraping, mcp, social-media, data-extraction, giveaway, monitoring, webhooks], twitter, scraper, data |
|
||||
|
||||
## security (121)
|
||||
## security (123)
|
||||
|
||||
| Skill | Description | Tags | Triggers |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -820,6 +822,7 @@ scripts. | bash | bash, pro, defensive, scripting, automation, ci, cd, pipelines
|
||||
| `active-directory-attacks` | This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration"... | active, directory, attacks | active, directory, attacks, skill, should, used, user, asks, attack, exploit, ad, kerberoasting |
|
||||
| `agent-memory-systems` | Memory is the cornerstone of intelligent agents. Without it, every interaction starts from zero. This skill covers the architecture of agent memory: short-te... | agent, memory | agent, memory, cornerstone, intelligent, agents, without, every, interaction, starts, zero, skill, covers |
|
||||
| `antigravity-workflows` | Orchestrate multiple Antigravity skills through guided workflows for SaaS MVP delivery, security audits, AI agent builds, and browser QA. | antigravity | antigravity, orchestrate, multiple, skills, through, guided, saas, mvp, delivery, security, audits, ai |
|
||||
| `api-endpoint-builder` | Builds production-ready REST API endpoints with validation, error handling, authentication, and documentation. Follows best practices for security and scalab... | api, endpoint, builder | api, endpoint, builder, rest, endpoints, validation, error, handling, authentication, documentation, follows, security |
|
||||
| `api-fuzzing-bug-bounty` | This skill should be used when the user asks to "test API security", "fuzz APIs", "find IDOR vulnerabilities", "test REST API", "test GraphQL", "API penetrat... | api, fuzzing, bug, bounty | api, fuzzing, bug, bounty, skill, should, used, user, asks, test, security, fuzz |
|
||||
| `api-security-best-practices` | Implement secure API design patterns including authentication, authorization, input validation, rate limiting, and protection against common API vulnerabilities | api, security, best, practices | api, security, best, practices, secure, including, authentication, authorization, input, validation, rate, limiting |
|
||||
| `api-security-testing` | API security testing workflow for REST and GraphQL APIs covering authentication, authorization, rate limiting, input validation, and security best practices. | api, security | api, security, testing, rest, graphql, apis, covering, authentication, authorization, rate, limiting, input |
|
||||
@@ -897,6 +900,7 @@ scripts. | bash | bash, pro, defensive, scripting, automation, ci, cd, pipelines
|
||||
| `plaid-fintech` | Expert patterns for Plaid API integration including Link token flows, transactions sync, identity verification, Auth for ACH, balance checks, webhook handlin... | plaid, fintech | plaid, fintech, api, integration, including, link, token, flows, transactions, sync, identity, verification |
|
||||
| `popup-cro` | Create and optimize popups, modals, overlays, slide-ins, and banners to increase conversions without harming user experience or brand trust. | popup, cro | popup, cro, optimize, popups, modals, overlays, slide, ins, banners, increase, conversions, without |
|
||||
| `postmortem-writing` | Write effective blameless postmortems with root cause analysis, timelines, and action items. Use when conducting incident reviews, writing postmortem documen... | postmortem, writing | postmortem, writing, write, effective, blameless, postmortems, root, cause, analysis, timelines, action, items |
|
||||
| `product-manager` | Senior PM agent with 6 knowledge domains, 30+ frameworks, 12 templates, and 32 SaaS metrics with formulas. Pure Markdown, zero scripts. | product-management, saas, frameworks, metrics, strategy | product-management, saas, frameworks, metrics, strategy, product, manager, senior, pm, agent, knowledge, domains |
|
||||
| `quant-analyst` | Build financial models, backtest trading strategies, and analyze market data. Implements risk metrics, portfolio optimization, and statistical arbitrage. | quant, analyst | quant, analyst, financial, models, backtest, trading, analyze, market, data, implements, risk, metrics |
|
||||
| `red-team-tactics` | Red team tactics principles based on MITRE ATT&CK. Attack phases, detection evasion, reporting. | red, team, tactics | red, team, tactics, principles, mitre, att, ck, attack, phases, detection, evasion, reporting |
|
||||
| `research-engineer` | An uncompromising Academic Research Engineer. Operates with absolute scientific rigor, objective criticism, and zero flair. Focuses on theoretical correctnes... | research | research, engineer, uncompromising, academic, operates, absolute, scientific, rigor, objective, criticism, zero, flair |
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 🌌 Antigravity Awesome Skills: 1007+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
||||
# 🌌 Antigravity Awesome Skills: 1011+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
||||
|
||||
> **The Ultimate Collection of 1007+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL**
|
||||
> **The Ultimate Collection of 1011+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL**
|
||||
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://claude.ai)
|
||||
@@ -42,7 +42,7 @@ This repository provides essential skills to transform your AI assistant into a
|
||||
- [🎁 Curated Collections (Bundles)](#curated-collections)
|
||||
- [🧭 Antigravity Workflows](#antigravity-workflows)
|
||||
- [📦 Features & Categories](#features--categories)
|
||||
- [📚 Browse 1007+ Skills](#browse-1007-skills)
|
||||
- [📚 Browse 1011+ Skills](#browse-1011-skills)
|
||||
- [🤝 How to Contribute](#how-to-contribute)
|
||||
- [💬 Community](#community)
|
||||
- [☕ Support the Project](#support-the-project)
|
||||
@@ -341,7 +341,7 @@ The repository is organized into specialized domains to transform your AI into a
|
||||
|
||||
Counts change as new skills are added. For the current full registry, see [CATALOG.md](CATALOG.md).
|
||||
|
||||
## Browse 1007+ Skills
|
||||
## Browse 1011+ Skills
|
||||
|
||||
We have moved the full skill registry to a dedicated catalog to keep this README clean, and we've also introduced an interactive **Web App**!
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"api-documentation",
|
||||
"api-documentation-generator",
|
||||
"api-documenter",
|
||||
"api-endpoint-builder",
|
||||
"api-fuzzing-bug-bounty",
|
||||
"api-patterns",
|
||||
"api-security-best-practices",
|
||||
@@ -260,6 +261,7 @@
|
||||
"skills": [
|
||||
"accessibility-compliance-accessibility-audit",
|
||||
"antigravity-workflows",
|
||||
"api-endpoint-builder",
|
||||
"api-fuzzing-bug-bounty",
|
||||
"api-security-best-practices",
|
||||
"api-security-testing",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"generatedAt": "2026-02-08T00:00:00.000Z",
|
||||
"total": 1007,
|
||||
"total": 1011,
|
||||
"skills": [
|
||||
{
|
||||
"id": "00-andruia-consultant",
|
||||
@@ -1118,6 +1118,32 @@
|
||||
],
|
||||
"path": "skills/api-documenter/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "api-endpoint-builder",
|
||||
"name": "api-endpoint-builder",
|
||||
"description": "Builds production-ready REST API endpoints with validation, error handling, authentication, and documentation. Follows best practices for security and scalability.",
|
||||
"category": "security",
|
||||
"tags": [
|
||||
"api",
|
||||
"endpoint",
|
||||
"builder"
|
||||
],
|
||||
"triggers": [
|
||||
"api",
|
||||
"endpoint",
|
||||
"builder",
|
||||
"rest",
|
||||
"endpoints",
|
||||
"validation",
|
||||
"error",
|
||||
"handling",
|
||||
"authentication",
|
||||
"documentation",
|
||||
"follows",
|
||||
"security"
|
||||
],
|
||||
"path": "skills/api-endpoint-builder/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "api-fuzzing-bug-bounty",
|
||||
"name": "api-fuzzing-bug-bounty",
|
||||
@@ -5984,6 +6010,31 @@
|
||||
],
|
||||
"path": "skills/browser-extension-builder/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "bug-hunter",
|
||||
"name": "bug-hunter",
|
||||
"description": "Systematically finds and fixes bugs using proven debugging techniques. Traces from symptoms to root cause, implements fixes, and prevents regression.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"bug",
|
||||
"hunter"
|
||||
],
|
||||
"triggers": [
|
||||
"bug",
|
||||
"hunter",
|
||||
"systematically",
|
||||
"finds",
|
||||
"fixes",
|
||||
"bugs",
|
||||
"proven",
|
||||
"debugging",
|
||||
"techniques",
|
||||
"traces",
|
||||
"symptoms",
|
||||
"root"
|
||||
],
|
||||
"path": "skills/bug-hunter/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "bullmq-specialist",
|
||||
"name": "bullmq-specialist",
|
||||
@@ -17724,6 +17775,31 @@
|
||||
],
|
||||
"path": "skills/performance-engineer/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "performance-optimizer",
|
||||
"name": "performance-optimizer",
|
||||
"description": "Identifies and fixes performance bottlenecks in code, databases, and APIs. Measures before and after to prove improvements.",
|
||||
"category": "general",
|
||||
"tags": [
|
||||
"performance",
|
||||
"optimizer"
|
||||
],
|
||||
"triggers": [
|
||||
"performance",
|
||||
"optimizer",
|
||||
"identifies",
|
||||
"fixes",
|
||||
"bottlenecks",
|
||||
"code",
|
||||
"databases",
|
||||
"apis",
|
||||
"measures",
|
||||
"before",
|
||||
"after",
|
||||
"prove"
|
||||
],
|
||||
"path": "skills/performance-optimizer/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "performance-profiling",
|
||||
"name": "performance-profiling",
|
||||
@@ -18297,6 +18373,34 @@
|
||||
],
|
||||
"path": "skills/privilege-escalation-methods/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "product-manager",
|
||||
"name": "product-manager",
|
||||
"description": "Senior PM agent with 6 knowledge domains, 30+ frameworks, 12 templates, and 32 SaaS metrics with formulas. Pure Markdown, zero scripts.",
|
||||
"category": "security",
|
||||
"tags": [
|
||||
"product-management",
|
||||
"saas",
|
||||
"frameworks",
|
||||
"metrics",
|
||||
"strategy"
|
||||
],
|
||||
"triggers": [
|
||||
"product-management",
|
||||
"saas",
|
||||
"frameworks",
|
||||
"metrics",
|
||||
"strategy",
|
||||
"product",
|
||||
"manager",
|
||||
"senior",
|
||||
"pm",
|
||||
"agent",
|
||||
"knowledge",
|
||||
"domains"
|
||||
],
|
||||
"path": "skills/product-manager/SKILL.md"
|
||||
},
|
||||
{
|
||||
"id": "product-manager-toolkit",
|
||||
"name": "product-manager-toolkit",
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "antigravity-awesome-skills",
|
||||
"version": "6.6.0",
|
||||
"version": "6.11.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "antigravity-awesome-skills",
|
||||
"version": "6.6.0",
|
||||
"version": "6.11.0",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"antigravity-awesome-skills": "bin/install.js"
|
||||
|
||||
15
skills/api-endpoint-builder/README.md
Normal file
15
skills/api-endpoint-builder/README.md
Normal file
@@ -0,0 +1,15 @@
|
||||
# API Endpoint Builder
|
||||
|
||||
Creates a complete and production-ready REST API endpoint with validation, error handling, authentication, and documentation.
|
||||
|
||||
## What It Does
|
||||
|
||||
This skill creates a complete and production-ready REST API endpoint that includes all the necessary components, such as a route handler with the correct HTTP methods, validation, authentication, error handling, response formatting, and documentation.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
Use @api-endpoint-builder to create a user registration endpoint
|
||||
```
|
||||
|
||||
This skill creates a complete and production-ready REST API endpoint that includes all the necessary components, such as a route handler with the correct HTTP methods, validation, authentication, error handling, response formatting, and documentation.
|
||||
324
skills/api-endpoint-builder/SKILL.md
Normal file
324
skills/api-endpoint-builder/SKILL.md
Normal file
@@ -0,0 +1,324 @@
|
||||
---
|
||||
name: api-endpoint-builder
|
||||
description: "Builds production-ready REST API endpoints with validation, error handling, authentication, and documentation. Follows best practices for security and scalability."
|
||||
category: development
|
||||
risk: safe
|
||||
source: community
|
||||
date_added: "2026-03-05"
|
||||
---
|
||||
|
||||
# API Endpoint Builder
|
||||
|
||||
Build complete, production-ready REST API endpoints with proper validation, error handling, authentication, and documentation.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- User asks to "create an API endpoint" or "build a REST API"
|
||||
- Building new backend features
|
||||
- Adding endpoints to existing APIs
|
||||
- User mentions "API", "endpoint", "route", or "REST"
|
||||
- Creating CRUD operations
|
||||
|
||||
## What You'll Build
|
||||
|
||||
For each endpoint, you create:
|
||||
- Route handler with proper HTTP method
|
||||
- Input validation (request body, params, query)
|
||||
- Authentication/authorization checks
|
||||
- Business logic
|
||||
- Error handling
|
||||
- Response formatting
|
||||
- API documentation
|
||||
- Tests (if requested)
|
||||
|
||||
## Endpoint Structure
|
||||
|
||||
### 1. Route Definition
|
||||
|
||||
```javascript
|
||||
// Express example
|
||||
router.post('/api/users', authenticate, validateUser, createUser);
|
||||
|
||||
// Fastify example
|
||||
fastify.post('/api/users', {
|
||||
preHandler: [authenticate],
|
||||
schema: userSchema
|
||||
}, createUser);
|
||||
```
|
||||
|
||||
### 2. Input Validation
|
||||
|
||||
Always validate before processing:
|
||||
|
||||
```javascript
|
||||
const validateUser = (req, res, next) => {
|
||||
const { email, name, password } = req.body;
|
||||
|
||||
if (!email || !email.includes('@')) {
|
||||
return res.status(400).json({ error: 'Valid email required' });
|
||||
}
|
||||
|
||||
if (!name || name.length < 2) {
|
||||
return res.status(400).json({ error: 'Name must be at least 2 characters' });
|
||||
}
|
||||
|
||||
if (!password || password.length < 8) {
|
||||
return res.status(400).json({ error: 'Password must be at least 8 characters' });
|
||||
}
|
||||
|
||||
next();
|
||||
};
|
||||
```
|
||||
|
||||
### 3. Handler Implementation
|
||||
|
||||
```javascript
|
||||
const createUser = async (req, res) => {
|
||||
try {
|
||||
const { email, name, password } = req.body;
|
||||
|
||||
// Check if user exists
|
||||
const existing = await db.users.findOne({ email });
|
||||
if (existing) {
|
||||
return res.status(409).json({ error: 'User already exists' });
|
||||
}
|
||||
|
||||
// Hash password
|
||||
const hashedPassword = await bcrypt.hash(password, 10);
|
||||
|
||||
// Create user
|
||||
const user = await db.users.create({
|
||||
email,
|
||||
name,
|
||||
password: hashedPassword,
|
||||
createdAt: new Date()
|
||||
});
|
||||
|
||||
// Don't return password
|
||||
const { password: _, ...userWithoutPassword } = user;
|
||||
|
||||
res.status(201).json({
|
||||
success: true,
|
||||
data: userWithoutPassword
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Create user error:', error);
|
||||
res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### HTTP Status Codes
|
||||
- `200` - Success (GET, PUT, PATCH)
|
||||
- `201` - Created (POST)
|
||||
- `204` - No Content (DELETE)
|
||||
- `400` - Bad Request (validation failed)
|
||||
- `401` - Unauthorized (not authenticated)
|
||||
- `403` - Forbidden (not authorized)
|
||||
- `404` - Not Found
|
||||
- `409` - Conflict (duplicate)
|
||||
- `500` - Internal Server Error
|
||||
|
||||
### Response Format
|
||||
|
||||
Consistent structure:
|
||||
|
||||
```javascript
|
||||
// Success
|
||||
{
|
||||
"success": true,
|
||||
"data": { ... }
|
||||
}
|
||||
|
||||
// Error
|
||||
{
|
||||
"error": "Error message",
|
||||
"details": { ... } // optional
|
||||
}
|
||||
|
||||
// List with pagination
|
||||
{
|
||||
"success": true,
|
||||
"data": [...],
|
||||
"pagination": {
|
||||
"page": 1,
|
||||
"limit": 20,
|
||||
"total": 100
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Security Checklist
|
||||
|
||||
- [ ] Authentication required for protected routes
|
||||
- [ ] Authorization checks (user owns resource)
|
||||
- [ ] Input validation on all fields
|
||||
- [ ] SQL injection prevention (use parameterized queries)
|
||||
- [ ] Rate limiting on public endpoints
|
||||
- [ ] No sensitive data in responses (passwords, tokens)
|
||||
- [ ] CORS configured properly
|
||||
- [ ] Request size limits set
|
||||
|
||||
### Error Handling
|
||||
|
||||
```javascript
|
||||
// Centralized error handler
|
||||
app.use((err, req, res, next) => {
|
||||
console.error(err.stack);
|
||||
|
||||
// Don't leak error details in production
|
||||
const message = process.env.NODE_ENV === 'production'
|
||||
? 'Internal server error'
|
||||
: err.message;
|
||||
|
||||
res.status(err.status || 500).json({ error: message });
|
||||
});
|
||||
```
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### CRUD Operations
|
||||
|
||||
```javascript
|
||||
// Create
|
||||
POST /api/resources
|
||||
Body: { name, description }
|
||||
|
||||
// Read (list)
|
||||
GET /api/resources?page=1&limit=20
|
||||
|
||||
// Read (single)
|
||||
GET /api/resources/:id
|
||||
|
||||
// Update
|
||||
PUT /api/resources/:id
|
||||
Body: { name, description }
|
||||
|
||||
// Delete
|
||||
DELETE /api/resources/:id
|
||||
```
|
||||
|
||||
### Pagination
|
||||
|
||||
```javascript
|
||||
const getResources = async (req, res) => {
|
||||
const page = parseInt(req.query.page) || 1;
|
||||
const limit = parseInt(req.query.limit) || 20;
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
const [resources, total] = await Promise.all([
|
||||
db.resources.find().skip(skip).limit(limit),
|
||||
db.resources.countDocuments()
|
||||
]);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: resources,
|
||||
pagination: {
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
pages: Math.ceil(total / limit)
|
||||
}
|
||||
});
|
||||
};
|
||||
```
|
||||
|
||||
### Filtering & Sorting
|
||||
|
||||
```javascript
|
||||
const getResources = async (req, res) => {
|
||||
const { status, sort = '-createdAt' } = req.query;
|
||||
|
||||
const filter = {};
|
||||
if (status) filter.status = status;
|
||||
|
||||
const resources = await db.resources
|
||||
.find(filter)
|
||||
.sort(sort)
|
||||
.limit(20);
|
||||
|
||||
res.json({ success: true, data: resources });
|
||||
};
|
||||
```
|
||||
|
||||
## Documentation Template
|
||||
|
||||
```javascript
|
||||
/**
|
||||
* @route POST /api/users
|
||||
* @desc Create a new user
|
||||
* @access Public
|
||||
*
|
||||
* @body {string} email - User email (required)
|
||||
* @body {string} name - User name (required)
|
||||
* @body {string} password - Password, min 8 chars (required)
|
||||
*
|
||||
* @returns {201} User created successfully
|
||||
* @returns {400} Validation error
|
||||
* @returns {409} User already exists
|
||||
* @returns {500} Server error
|
||||
*
|
||||
* @example
|
||||
* POST /api/users
|
||||
* {
|
||||
* "email": "user@example.com",
|
||||
* "name": "John Doe",
|
||||
* "password": "securepass123"
|
||||
* }
|
||||
*/
|
||||
```
|
||||
|
||||
## Testing Example
|
||||
|
||||
```javascript
|
||||
describe('POST /api/users', () => {
|
||||
it('should create a new user', async () => {
|
||||
const response = await request(app)
|
||||
.post('/api/users')
|
||||
.send({
|
||||
email: 'test@example.com',
|
||||
name: 'Test User',
|
||||
password: 'password123'
|
||||
});
|
||||
|
||||
expect(response.status).toBe(201);
|
||||
expect(response.body.success).toBe(true);
|
||||
expect(response.body.data.email).toBe('test@example.com');
|
||||
expect(response.body.data.password).toBeUndefined();
|
||||
});
|
||||
|
||||
it('should reject invalid email', async () => {
|
||||
const response = await request(app)
|
||||
.post('/api/users')
|
||||
.send({
|
||||
email: 'invalid',
|
||||
name: 'Test User',
|
||||
password: 'password123'
|
||||
});
|
||||
|
||||
expect(response.status).toBe(400);
|
||||
expect(response.body.error).toContain('email');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Key Principles
|
||||
|
||||
- Validate all inputs before processing
|
||||
- Use proper HTTP status codes
|
||||
- Handle errors gracefully
|
||||
- Never expose sensitive data
|
||||
- Keep responses consistent
|
||||
- Add authentication where needed
|
||||
- Document your endpoints
|
||||
- Write tests for critical paths
|
||||
|
||||
## Related Skills
|
||||
|
||||
- `@security-auditor` - Security review
|
||||
- `@test-driven-development` - Testing
|
||||
- `@database-design` - Data modeling
|
||||
20
skills/bug-hunter/README.md
Normal file
20
skills/bug-hunter/README.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# Bug Hunter
|
||||
|
||||
Systematically debugs and fixes a bug using standard debugging techniques.
|
||||
|
||||
## What It Does
|
||||
|
||||
- Reproduces the bug
|
||||
- Traces execution flow
|
||||
- Identifies the root cause
|
||||
- Fixes the bug
|
||||
- Adds tests to prevent regression
|
||||
- Documents the bug
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
Use @bug-hunter to fix the login timeout issue
|
||||
```
|
||||
|
||||
The skill will systematically debug and fix the problem.
|
||||
379
skills/bug-hunter/SKILL.md
Normal file
379
skills/bug-hunter/SKILL.md
Normal file
@@ -0,0 +1,379 @@
|
||||
---
|
||||
name: bug-hunter
|
||||
description: "Systematically finds and fixes bugs using proven debugging techniques. Traces from symptoms to root cause, implements fixes, and prevents regression."
|
||||
category: development
|
||||
risk: safe
|
||||
source: community
|
||||
date_added: "2026-03-05"
|
||||
---
|
||||
|
||||
# Bug Hunter
|
||||
|
||||
Systematically hunt down and fix bugs using proven debugging techniques. No guessing—follow the evidence.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- User reports a bug or error
|
||||
- Something isn't working as expected
|
||||
- User says "fix the bug" or "debug this"
|
||||
- Intermittent failures or weird behavior
|
||||
- Production issues need investigation
|
||||
|
||||
## The Debugging Process
|
||||
|
||||
### 1. Reproduce the Bug
|
||||
|
||||
First, make it happen consistently:
|
||||
|
||||
```
|
||||
1. Get exact steps to reproduce
|
||||
2. Try to reproduce locally
|
||||
3. Note what triggers it
|
||||
4. Document the error message/behavior
|
||||
5. Check if it happens every time or randomly
|
||||
```
|
||||
|
||||
If you can't reproduce it, gather more info:
|
||||
- What environment? (dev, staging, prod)
|
||||
- What browser/device?
|
||||
- What user actions preceded it?
|
||||
- Any error logs?
|
||||
|
||||
### 2. Gather Evidence
|
||||
|
||||
Collect all available information:
|
||||
|
||||
**Check logs:**
|
||||
```bash
|
||||
# Application logs
|
||||
tail -f logs/app.log
|
||||
|
||||
# System logs
|
||||
journalctl -u myapp -f
|
||||
|
||||
# Browser console
|
||||
# Open DevTools → Console tab
|
||||
```
|
||||
|
||||
**Check error messages:**
|
||||
- Full stack trace
|
||||
- Error type and message
|
||||
- Line numbers
|
||||
- Timestamp
|
||||
|
||||
**Check state:**
|
||||
- What data was being processed?
|
||||
- What was the user trying to do?
|
||||
- What's in the database?
|
||||
- What's in local storage/cookies?
|
||||
|
||||
### 3. Form a Hypothesis
|
||||
|
||||
Based on evidence, guess what's wrong:
|
||||
|
||||
```
|
||||
"The login times out because the session cookie
|
||||
expires before the auth check completes"
|
||||
|
||||
"The form fails because email validation regex
|
||||
doesn't handle plus signs"
|
||||
|
||||
"The API returns 500 because the database query
|
||||
has a syntax error with special characters"
|
||||
```
|
||||
|
||||
### 4. Test the Hypothesis
|
||||
|
||||
Prove or disprove your guess:
|
||||
|
||||
**Add logging:**
|
||||
```javascript
|
||||
console.log('Before API call:', userData);
|
||||
const response = await api.login(userData);
|
||||
console.log('After API call:', response);
|
||||
```
|
||||
|
||||
**Use debugger:**
|
||||
```javascript
|
||||
debugger; // Execution pauses here
|
||||
const result = processData(input);
|
||||
```
|
||||
|
||||
**Isolate the problem:**
|
||||
```javascript
|
||||
// Comment out code to narrow down
|
||||
// const result = complexFunction();
|
||||
const result = { mock: 'data' }; // Use mock data
|
||||
```
|
||||
|
||||
### 5. Find Root Cause
|
||||
|
||||
Trace back to the actual problem:
|
||||
|
||||
**Common root causes:**
|
||||
- Null/undefined values
|
||||
- Wrong data types
|
||||
- Race conditions
|
||||
- Missing error handling
|
||||
- Incorrect logic
|
||||
- Off-by-one errors
|
||||
- Async/await issues
|
||||
- Missing validation
|
||||
|
||||
**Example trace:**
|
||||
```
|
||||
Symptom: "Cannot read property 'name' of undefined"
|
||||
↓
|
||||
Where: user.profile.name
|
||||
↓
|
||||
Why: user.profile is undefined
|
||||
↓
|
||||
Why: API didn't return profile
|
||||
↓
|
||||
Why: User ID was null
|
||||
↓
|
||||
Root cause: Login didn't set user ID in session
|
||||
```
|
||||
|
||||
### 6. Implement Fix
|
||||
|
||||
Fix the root cause, not the symptom:
|
||||
|
||||
**Bad fix (symptom):**
|
||||
```javascript
|
||||
// Just hide the error
|
||||
const name = user?.profile?.name || 'Unknown';
|
||||
```
|
||||
|
||||
**Good fix (root cause):**
|
||||
```javascript
|
||||
// Ensure user ID is set on login
|
||||
const login = async (credentials) => {
|
||||
const user = await authenticate(credentials);
|
||||
if (user) {
|
||||
session.userId = user.id; // Fix: Set user ID
|
||||
return user;
|
||||
}
|
||||
throw new Error('Invalid credentials');
|
||||
};
|
||||
```
|
||||
|
||||
### 7. Test the Fix
|
||||
|
||||
Verify it actually works:
|
||||
|
||||
```
|
||||
1. Reproduce the original bug
|
||||
2. Apply the fix
|
||||
3. Try to reproduce again (should fail)
|
||||
4. Test edge cases
|
||||
5. Test related functionality
|
||||
6. Run existing tests
|
||||
```
|
||||
|
||||
### 8. Prevent Regression
|
||||
|
||||
Add a test so it doesn't come back:
|
||||
|
||||
```javascript
|
||||
test('login sets user ID in session', async () => {
|
||||
const user = await login({ email: 'test@example.com', password: 'pass' });
|
||||
|
||||
expect(session.userId).toBe(user.id);
|
||||
expect(session.userId).not.toBeNull();
|
||||
});
|
||||
```
|
||||
|
||||
## Debugging Techniques
|
||||
|
||||
### Binary Search
|
||||
|
||||
Cut the problem space in half repeatedly:
|
||||
|
||||
```javascript
|
||||
// Does the bug happen before or after this line?
|
||||
console.log('CHECKPOINT 1');
|
||||
// ... code ...
|
||||
console.log('CHECKPOINT 2');
|
||||
// ... code ...
|
||||
console.log('CHECKPOINT 3');
|
||||
```
|
||||
|
||||
### Rubber Duck Debugging
|
||||
|
||||
Explain the code line by line out loud. Often you'll spot the issue while explaining.
|
||||
|
||||
### Print Debugging
|
||||
|
||||
Strategic console.logs:
|
||||
|
||||
```javascript
|
||||
console.log('Input:', input);
|
||||
console.log('After transform:', transformed);
|
||||
console.log('Before save:', data);
|
||||
console.log('Result:', result);
|
||||
```
|
||||
|
||||
### Diff Debugging
|
||||
|
||||
Compare working vs broken:
|
||||
- What changed recently?
|
||||
- What's different between environments?
|
||||
- What's different in the data?
|
||||
|
||||
### Time Travel Debugging
|
||||
|
||||
Use git to find when it broke:
|
||||
|
||||
```bash
|
||||
git bisect start
|
||||
git bisect bad # Current commit is broken
|
||||
git bisect good abc123 # This old commit worked
|
||||
# Git will check out commits for you to test
|
||||
```
|
||||
|
||||
## Common Bug Patterns
|
||||
|
||||
### Null/Undefined
|
||||
|
||||
```javascript
|
||||
// Bug
|
||||
const name = user.profile.name;
|
||||
|
||||
// Fix
|
||||
const name = user?.profile?.name || 'Unknown';
|
||||
|
||||
// Better fix
|
||||
if (!user || !user.profile) {
|
||||
throw new Error('User profile required');
|
||||
}
|
||||
const name = user.profile.name;
|
||||
```
|
||||
|
||||
### Race Condition
|
||||
|
||||
```javascript
|
||||
// Bug
|
||||
let data = null;
|
||||
fetchData().then(result => data = result);
|
||||
console.log(data); // null - not loaded yet
|
||||
|
||||
// Fix
|
||||
const data = await fetchData();
|
||||
console.log(data); // correct value
|
||||
```
|
||||
|
||||
### Off-by-One
|
||||
|
||||
```javascript
|
||||
// Bug
|
||||
for (let i = 0; i <= array.length; i++) {
|
||||
console.log(array[i]); // undefined on last iteration
|
||||
}
|
||||
|
||||
// Fix
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
console.log(array[i]);
|
||||
}
|
||||
```
|
||||
|
||||
### Type Coercion
|
||||
|
||||
```javascript
|
||||
// Bug
|
||||
if (count == 0) { // true for "", [], null
|
||||
|
||||
// Fix
|
||||
if (count === 0) { // only true for 0
|
||||
```
|
||||
|
||||
### Async Without Await
|
||||
|
||||
```javascript
|
||||
// Bug
|
||||
const result = asyncFunction(); // Returns Promise
|
||||
console.log(result.data); // undefined
|
||||
|
||||
// Fix
|
||||
const result = await asyncFunction();
|
||||
console.log(result.data); // correct value
|
||||
```
|
||||
|
||||
## Debugging Tools
|
||||
|
||||
### Browser DevTools
|
||||
|
||||
```
|
||||
Console: View logs and errors
|
||||
Sources: Set breakpoints, step through code
|
||||
Network: Check API calls and responses
|
||||
Application: View cookies, storage, cache
|
||||
Performance: Find slow operations
|
||||
```
|
||||
|
||||
### Node.js Debugging
|
||||
|
||||
```javascript
|
||||
// Built-in debugger
|
||||
node --inspect app.js
|
||||
|
||||
// Then open chrome://inspect in Chrome
|
||||
```
|
||||
|
||||
### VS Code Debugging
|
||||
|
||||
```json
|
||||
// .vscode/launch.json
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "Debug App",
|
||||
"program": "${workspaceFolder}/app.js"
|
||||
}
|
||||
```
|
||||
|
||||
## When You're Stuck
|
||||
|
||||
1. Take a break (seriously, walk away for 10 minutes)
|
||||
2. Explain it to someone else (or a rubber duck)
|
||||
3. Search for the exact error message
|
||||
4. Check if it's a known issue (GitHub issues, Stack Overflow)
|
||||
5. Simplify: Create minimal reproduction
|
||||
6. Start over: Delete and rewrite the problematic code
|
||||
7. Ask for help (provide context, what you've tried)
|
||||
|
||||
## Documentation Template
|
||||
|
||||
After fixing, document it:
|
||||
|
||||
```markdown
|
||||
## Bug: Login timeout after 30 seconds
|
||||
|
||||
**Symptom:** Users get logged out immediately after login
|
||||
|
||||
**Root Cause:** Session cookie expires before auth check completes
|
||||
|
||||
**Fix:** Increased session timeout from 30s to 3600s in config
|
||||
|
||||
**Files Changed:**
|
||||
- config/session.js (line 12)
|
||||
|
||||
**Testing:** Verified login persists for 1 hour
|
||||
|
||||
**Prevention:** Added test for session persistence
|
||||
```
|
||||
|
||||
## Key Principles
|
||||
|
||||
- Reproduce first, fix second
|
||||
- Follow the evidence, don't guess
|
||||
- Fix root cause, not symptoms
|
||||
- Test the fix thoroughly
|
||||
- Add tests to prevent regression
|
||||
- Document what you learned
|
||||
|
||||
## Related Skills
|
||||
|
||||
- `@systematic-debugging` - Advanced debugging
|
||||
- `@test-driven-development` - Testing
|
||||
- `@codebase-audit-pre-push` - Code review
|
||||
20
skills/performance-optimizer/README.md
Normal file
20
skills/performance-optimizer/README.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# Performance Optimizer
|
||||
|
||||
Fixes performance bottlenecks. Tracks performance before and after to quantify improvement.
|
||||
|
||||
## What It Does
|
||||
|
||||
- Profiles code to identify performance bottlenecks
|
||||
- Optimizes database queries
|
||||
- Reduces response times for APIs
|
||||
- Improves frontend performance
|
||||
- Fixes memory leaks
|
||||
- Tracks performance impact
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
Use @performance-optimizer to speed up the user dashboard
|
||||
```
|
||||
|
||||
The skill will track, optimize, and verify performance.
|
||||
389
skills/performance-optimizer/SKILL.md
Normal file
389
skills/performance-optimizer/SKILL.md
Normal file
@@ -0,0 +1,389 @@
|
||||
---
|
||||
name: performance-optimizer
|
||||
description: "Identifies and fixes performance bottlenecks in code, databases, and APIs. Measures before and after to prove improvements."
|
||||
category: development
|
||||
risk: safe
|
||||
source: community
|
||||
date_added: "2026-03-05"
|
||||
---
|
||||
|
||||
# Performance Optimizer
|
||||
|
||||
Find and fix performance bottlenecks. Measure, optimize, verify. Make it fast.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- App is slow or laggy
|
||||
- User complains about performance
|
||||
- Page load times are high
|
||||
- API responses are slow
|
||||
- Database queries take too long
|
||||
- User mentions "slow", "lag", "performance", or "optimize"
|
||||
|
||||
## The Optimization Process
|
||||
|
||||
### 1. Measure First
|
||||
|
||||
Never optimize without measuring:
|
||||
|
||||
```javascript
|
||||
// Measure execution time
|
||||
console.time('operation');
|
||||
await slowOperation();
|
||||
console.timeEnd('operation'); // operation: 2341ms
|
||||
```
|
||||
|
||||
**What to measure:**
|
||||
- Page load time
|
||||
- API response time
|
||||
- Database query time
|
||||
- Function execution time
|
||||
- Memory usage
|
||||
- Network requests
|
||||
|
||||
### 2. Find the Bottleneck
|
||||
|
||||
Use profiling tools to find the slow parts:
|
||||
|
||||
**Browser:**
|
||||
```
|
||||
DevTools → Performance tab → Record → Stop
|
||||
Look for long tasks (red bars)
|
||||
```
|
||||
|
||||
**Node.js:**
|
||||
```bash
|
||||
node --prof app.js
|
||||
node --prof-process isolate-*.log > profile.txt
|
||||
```
|
||||
|
||||
**Database:**
|
||||
```sql
|
||||
EXPLAIN ANALYZE SELECT * FROM users WHERE email = 'test@example.com';
|
||||
```
|
||||
|
||||
### 3. Optimize
|
||||
|
||||
Fix the slowest thing first (biggest impact).
|
||||
|
||||
## Common Optimizations
|
||||
|
||||
### Database Queries
|
||||
|
||||
**Problem: N+1 Queries**
|
||||
```javascript
|
||||
// Bad: N+1 queries
|
||||
const users = await db.users.find();
|
||||
for (const user of users) {
|
||||
user.posts = await db.posts.find({ userId: user.id }); // N queries
|
||||
}
|
||||
|
||||
// Good: Single query with JOIN
|
||||
const users = await db.users.find()
|
||||
.populate('posts'); // 1 query
|
||||
```
|
||||
|
||||
**Problem: Missing Index**
|
||||
```sql
|
||||
-- Check slow query
|
||||
EXPLAIN SELECT * FROM users WHERE email = 'test@example.com';
|
||||
-- Shows: Seq Scan (bad)
|
||||
|
||||
-- Add index
|
||||
CREATE INDEX idx_users_email ON users(email);
|
||||
|
||||
-- Check again
|
||||
EXPLAIN SELECT * FROM users WHERE email = 'test@example.com';
|
||||
-- Shows: Index Scan (good)
|
||||
```
|
||||
|
||||
**Problem: SELECT ***
|
||||
```javascript
|
||||
// Bad: Fetches all columns
|
||||
const users = await db.query('SELECT * FROM users');
|
||||
|
||||
// Good: Only needed columns
|
||||
const users = await db.query('SELECT id, name, email FROM users');
|
||||
```
|
||||
|
||||
**Problem: No Pagination**
|
||||
```javascript
|
||||
// Bad: Returns all records
|
||||
const users = await db.users.find();
|
||||
|
||||
// Good: Paginated
|
||||
const users = await db.users.find()
|
||||
.limit(20)
|
||||
.skip((page - 1) * 20);
|
||||
```
|
||||
|
||||
### API Performance
|
||||
|
||||
**Problem: No Caching**
|
||||
```javascript
|
||||
// Bad: Hits database every time
|
||||
app.get('/api/stats', async (req, res) => {
|
||||
const stats = await db.stats.calculate(); // Slow
|
||||
res.json(stats);
|
||||
});
|
||||
|
||||
// Good: Cache for 5 minutes
|
||||
const cache = new Map();
|
||||
app.get('/api/stats', async (req, res) => {
|
||||
const cached = cache.get('stats');
|
||||
if (cached && Date.now() - cached.time < 300000) {
|
||||
return res.json(cached.data);
|
||||
}
|
||||
|
||||
const stats = await db.stats.calculate();
|
||||
cache.set('stats', { data: stats, time: Date.now() });
|
||||
res.json(stats);
|
||||
});
|
||||
```
|
||||
|
||||
**Problem: Sequential Operations**
|
||||
```javascript
|
||||
// Bad: Sequential (slow)
|
||||
const user = await getUser(id);
|
||||
const posts = await getPosts(id);
|
||||
const comments = await getComments(id);
|
||||
// Total: 300ms + 200ms + 150ms = 650ms
|
||||
|
||||
// Good: Parallel (fast)
|
||||
const [user, posts, comments] = await Promise.all([
|
||||
getUser(id),
|
||||
getPosts(id),
|
||||
getComments(id)
|
||||
]);
|
||||
// Total: max(300ms, 200ms, 150ms) = 300ms
|
||||
```
|
||||
|
||||
**Problem: Large Payloads**
|
||||
```javascript
|
||||
// Bad: Returns everything
|
||||
res.json(users); // 5MB response
|
||||
|
||||
// Good: Only needed fields
|
||||
res.json(users.map(u => ({
|
||||
id: u.id,
|
||||
name: u.name,
|
||||
email: u.email
|
||||
}))); // 500KB response
|
||||
```
|
||||
|
||||
### Frontend Performance
|
||||
|
||||
**Problem: Unnecessary Re-renders**
|
||||
```javascript
|
||||
// Bad: Re-renders on every parent update
|
||||
function UserList({ users }) {
|
||||
return users.map(user => <UserCard user={user} />);
|
||||
}
|
||||
|
||||
// Good: Memoized
|
||||
const UserCard = React.memo(({ user }) => {
|
||||
return <div>{user.name}</div>;
|
||||
});
|
||||
```
|
||||
|
||||
**Problem: Large Bundle**
|
||||
```javascript
|
||||
// Bad: Imports entire library
|
||||
import _ from 'lodash'; // 70KB
|
||||
|
||||
// Good: Import only what you need
|
||||
import debounce from 'lodash/debounce'; // 2KB
|
||||
```
|
||||
|
||||
**Problem: No Code Splitting**
|
||||
```javascript
|
||||
// Bad: Everything in one bundle
|
||||
import HeavyComponent from './HeavyComponent';
|
||||
|
||||
// Good: Lazy load
|
||||
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
|
||||
```
|
||||
|
||||
**Problem: Unoptimized Images**
|
||||
```html
|
||||
<!-- Bad: Large image -->
|
||||
<img src="photo.jpg" /> <!-- 5MB -->
|
||||
|
||||
<!-- Good: Optimized and responsive -->
|
||||
<img
|
||||
src="photo-small.webp"
|
||||
srcset="photo-small.webp 400w, photo-large.webp 800w"
|
||||
loading="lazy"
|
||||
width="400"
|
||||
height="300"
|
||||
/> <!-- 50KB -->
|
||||
```
|
||||
|
||||
### Algorithm Optimization
|
||||
|
||||
**Problem: Inefficient Algorithm**
|
||||
```javascript
|
||||
// Bad: O(n²) - nested loops
|
||||
function findDuplicates(arr) {
|
||||
const duplicates = [];
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
for (let j = i + 1; j < arr.length; j++) {
|
||||
if (arr[i] === arr[j]) duplicates.push(arr[i]);
|
||||
}
|
||||
}
|
||||
return duplicates;
|
||||
}
|
||||
|
||||
// Good: O(n) - single pass with Set
|
||||
function findDuplicates(arr) {
|
||||
const seen = new Set();
|
||||
const duplicates = new Set();
|
||||
for (const item of arr) {
|
||||
if (seen.has(item)) duplicates.add(item);
|
||||
seen.add(item);
|
||||
}
|
||||
return Array.from(duplicates);
|
||||
}
|
||||
```
|
||||
|
||||
**Problem: Repeated Calculations**
|
||||
```javascript
|
||||
// Bad: Calculates every time
|
||||
function getTotal(items) {
|
||||
return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
||||
}
|
||||
// Called 100 times in render
|
||||
|
||||
// Good: Memoized
|
||||
const getTotal = useMemo(() => {
|
||||
return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
||||
}, [items]);
|
||||
```
|
||||
|
||||
### Memory Optimization
|
||||
|
||||
**Problem: Memory Leak**
|
||||
```javascript
|
||||
// Bad: Event listener not cleaned up
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
// Memory leak!
|
||||
}, []);
|
||||
|
||||
// Good: Cleanup
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
```
|
||||
|
||||
**Problem: Large Data in Memory**
|
||||
```javascript
|
||||
// Bad: Loads entire file into memory
|
||||
const data = fs.readFileSync('huge-file.txt'); // 1GB
|
||||
|
||||
// Good: Stream it
|
||||
const stream = fs.createReadStream('huge-file.txt');
|
||||
stream.on('data', chunk => process(chunk));
|
||||
```
|
||||
|
||||
## Measuring Impact
|
||||
|
||||
Always measure before and after:
|
||||
|
||||
```javascript
|
||||
// Before optimization
|
||||
console.time('query');
|
||||
const users = await db.users.find();
|
||||
console.timeEnd('query');
|
||||
// query: 2341ms
|
||||
|
||||
// After optimization (added index)
|
||||
console.time('query');
|
||||
const users = await db.users.find();
|
||||
console.timeEnd('query');
|
||||
// query: 23ms
|
||||
|
||||
// Improvement: 100x faster!
|
||||
```
|
||||
|
||||
## Performance Budgets
|
||||
|
||||
Set targets:
|
||||
|
||||
```
|
||||
Page Load: < 2 seconds
|
||||
API Response: < 200ms
|
||||
Database Query: < 50ms
|
||||
Bundle Size: < 200KB
|
||||
Time to Interactive: < 3 seconds
|
||||
```
|
||||
|
||||
## Tools
|
||||
|
||||
**Browser:**
|
||||
- Chrome DevTools Performance tab
|
||||
- Lighthouse (audit)
|
||||
- Network tab (waterfall)
|
||||
|
||||
**Node.js:**
|
||||
- `node --prof` (profiling)
|
||||
- `clinic` (diagnostics)
|
||||
- `autocannon` (load testing)
|
||||
|
||||
**Database:**
|
||||
- `EXPLAIN ANALYZE` (query plans)
|
||||
- Slow query log
|
||||
- Database profiler
|
||||
|
||||
**Monitoring:**
|
||||
- New Relic
|
||||
- Datadog
|
||||
- Sentry Performance
|
||||
|
||||
## Quick Wins
|
||||
|
||||
Easy optimizations with big impact:
|
||||
|
||||
1. **Add database indexes** on frequently queried columns
|
||||
2. **Enable gzip compression** on server
|
||||
3. **Add caching** for expensive operations
|
||||
4. **Lazy load** images and heavy components
|
||||
5. **Use CDN** for static assets
|
||||
6. **Minify and compress** JavaScript/CSS
|
||||
7. **Remove unused dependencies**
|
||||
8. **Use pagination** instead of loading all data
|
||||
9. **Optimize images** (WebP, proper sizing)
|
||||
10. **Enable HTTP/2** on server
|
||||
|
||||
## Optimization Checklist
|
||||
|
||||
- [ ] Measured current performance
|
||||
- [ ] Identified bottleneck
|
||||
- [ ] Applied optimization
|
||||
- [ ] Measured improvement
|
||||
- [ ] Verified functionality still works
|
||||
- [ ] No new bugs introduced
|
||||
- [ ] Documented the change
|
||||
|
||||
## When NOT to Optimize
|
||||
|
||||
- Premature optimization (optimize when it's actually slow)
|
||||
- Micro-optimizations (save 1ms when page takes 5 seconds)
|
||||
- Readable code is more important than tiny speed gains
|
||||
- If it's already fast enough
|
||||
|
||||
## Key Principles
|
||||
|
||||
- Measure before optimizing
|
||||
- Fix the biggest bottleneck first
|
||||
- Measure after to prove improvement
|
||||
- Don't sacrifice readability for tiny gains
|
||||
- Profile in production-like environment
|
||||
- Consider the 80/20 rule (20% of code causes 80% of slowness)
|
||||
|
||||
## Related Skills
|
||||
|
||||
- `@database-design` - Query optimization
|
||||
- `@codebase-audit-pre-push` - Code review
|
||||
- `@bug-hunter` - Debugging
|
||||
@@ -469,6 +469,16 @@
|
||||
"source": "community",
|
||||
"date_added": "2026-02-27"
|
||||
},
|
||||
{
|
||||
"id": "api-endpoint-builder",
|
||||
"path": "skills/api-endpoint-builder",
|
||||
"category": "development",
|
||||
"name": "api-endpoint-builder",
|
||||
"description": "Builds production-ready REST API endpoints with validation, error handling, authentication, and documentation. Follows best practices for security and scalability.",
|
||||
"risk": "safe",
|
||||
"source": "community",
|
||||
"date_added": "2026-03-05"
|
||||
},
|
||||
{
|
||||
"id": "api-fuzzing-bug-bounty",
|
||||
"path": "skills/api-fuzzing-bug-bounty",
|
||||
@@ -2399,6 +2409,16 @@
|
||||
"source": "vibeship-spawner-skills (Apache 2.0)",
|
||||
"date_added": "2026-02-27"
|
||||
},
|
||||
{
|
||||
"id": "bug-hunter",
|
||||
"path": "skills/bug-hunter",
|
||||
"category": "development",
|
||||
"name": "bug-hunter",
|
||||
"description": "Systematically finds and fixes bugs using proven debugging techniques. Traces from symptoms to root cause, implements fixes, and prevents regression.",
|
||||
"risk": "safe",
|
||||
"source": "community",
|
||||
"date_added": "2026-03-05"
|
||||
},
|
||||
{
|
||||
"id": "bullmq-specialist",
|
||||
"path": "skills/bullmq-specialist",
|
||||
@@ -7179,6 +7199,16 @@
|
||||
"source": "community",
|
||||
"date_added": "2026-02-27"
|
||||
},
|
||||
{
|
||||
"id": "performance-optimizer",
|
||||
"path": "skills/performance-optimizer",
|
||||
"category": "development",
|
||||
"name": "performance-optimizer",
|
||||
"description": "Identifies and fixes performance bottlenecks in code, databases, and APIs. Measures before and after to prove improvements.",
|
||||
"risk": "safe",
|
||||
"source": "community",
|
||||
"date_added": "2026-03-05"
|
||||
},
|
||||
{
|
||||
"id": "performance-profiling",
|
||||
"path": "skills/performance-profiling",
|
||||
@@ -7419,6 +7449,16 @@
|
||||
"source": "community",
|
||||
"date_added": "2026-02-27"
|
||||
},
|
||||
{
|
||||
"id": "product-manager",
|
||||
"path": "skills/product-manager",
|
||||
"category": "uncategorized",
|
||||
"name": "product-manager",
|
||||
"description": "Senior PM agent with 6 knowledge domains, 30+ frameworks, 12 templates, and 32 SaaS metrics with formulas. Pure Markdown, zero scripts.",
|
||||
"risk": "unknown",
|
||||
"source": "Digidai/product-manager-skills (MIT)",
|
||||
"date_added": "2026-03-06"
|
||||
},
|
||||
{
|
||||
"id": "product-manager-toolkit",
|
||||
"path": "skills/product-manager-toolkit",
|
||||
|
||||
Reference in New Issue
Block a user