Superpowers: Framework Agentic untuk Coding Agent yang Benar-Benar Bekerja
Pelajari cara menggunakan Superpowers, framework skills agentic yang mengubah coding agent seperti Claude Code, Cursor, dan Codex menjadi developer yang lebih sistematis, teruji, dan reliable.
Superpowers: Framework Agentic untuk Coding Agent yang Benar-Benar Bekerja
Introduction
Pernahkah kamu menggunakan AI coding assistant seperti Claude Code atau Cursor, tapi hasilnya acak-acakan? Kode yang ditulis tidak sesuai ekspektasi, testing diabaikan, atau malah makin bikin rumit proyekmu? Kamu tidak sendirian.
Superpowers hadir sebagai solusi. Ini bukan sekadar plugin biasa—melainkan sebuah framework agentic skills yang mengubah cara coding agent bekerja. Alih-alih langsung menulis kode saat diminta, agent yang memiliki Superpowers akan:
- Bertanya dulu apa yang sebenarnya ingin kamu bangun
- Membantu menyusun spesifikasi yang jelas
- Membuat rencana implementasi detail
- Mengeksekusi dengan metodologi TDD yang ketat
- Review kodenya sendiri sebelum diberikan ke kamu
Hasilnya? Coding agent yang bekerja seperti senior engineer yang disiplin, bukan junior yang keburu nge-run code.
Fun fact: Superpowers sudah di-star 93.9k+ di GitHub dan di-fork 7.4k+ kali. Ini bukan project kecil—ini adalah metodologi yang sudah terbukti!
Prerequisites
Sebelum mulai, pastikan kamu punya:
- Coding agent yang didukung:
- Claude Code (CLI dari Anthropic)
- Cursor (IDE dengan AI)
- OpenAI Codex
- OpenCode
- Gemini CLI
- Git terinstall di sistem
- Pemahaman dasar tentang TDD (Test-Driven Development)
- Project yang ingin kamu kerjakan
Core Concepts
Apa itu "Skills" dalam Superpowers?
Bayangkan skills sebagai "panduan kerja" yang otomatis diaktifkan ketika agent mendeteksi konteks tertentu. Mirip seperti checklist yang harus diikuti sebelum melanjutkan ke tahap berikutnya.
Contoh: Ketika kamu minta agent untuk "build a new feature", skill brainstorming akan otomatis aktif dan mulai bertanya-tanya tentang detail implementasi alih-alih langsung coding.
Workflow Utama Superpowers
[IDEA] → [BRAINSTORMING] → [DESIGN DOC] → [PLAN] → [IMPLEMENT] → [REVIEW] → [FINISH] ↓ ↓ ↓ ↓ ↓ ↓ Questions Validated Tasks TDD Quality Merge/PR & Options Document List Cycle Check Options
Filosofi Superpowers
Ada 4 prinsip utama:
- Test-Driven Development - Tests dulu, selalu
- Systematic over Ad-hoc - Proses, bukan tebakan
- Complexity Reduction - Kesederhanaan sebagai tujuan utama
- Evidence over Claims - Verifikasi sebelum menyatakan sukses
Architecture Overview
┌─────────────────────────────────────────────────────────────────┐ │ SUPERPOWERS FRAMEWORK │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ PLANNING │ │ CODING │ │ QUALITY │ │ │ │ SKILLS │ │ SKILLS │ │ SKILLS │ │ │ ├─────────────┤ ├─────────────┤ ├─────────────┤ │ │ │ brainstorming│ │ test-driven │ │ requesting- │ │ │ │ writing- │ │ development │ │ code-review │ │ │ │ plans │ │ executing- │ │ systematic- │ │ │ │ using-git- │ │ plans │ │ debugging │ │ │ │ worktrees │ │ subagent- │ │ verification│ │ │ └─────────────┘ │ driven-dev │ │ -before- │ │ │ └─────────────┘ │ completion │ │ │ └─────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ META SKILLS │ │ │ │ writing-skills | using-superpowers │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────┐ │ SUPPORTED PLATFORMS │ ├─────────────────────────────────────────┤ │ Claude Code │ Cursor │ Codex │ Gemini │ └─────────────────────────────────────────┘
Step-by-Step: Instalasi Superpowers
1. Claude Code (Official Marketplace)
Cara paling mudah untuk Claude Code:
/plugin install superpowers@claude-plugins-official
Atau via marketplace:
# Register marketplace dulu /plugin marketplace add obra/superpowers-marketplace # Install plugin /plugin install superpowers@superpowers-marketplace
2. Cursor IDE
Di Cursor Agent chat:
/add-plugin superpowers
Atau cari "superpowers" di plugin marketplace Cursor.
3. OpenAI Codex
Beritahu Codex:
Fetch and follow instructions from https://raw.githubusercontent.com/obra/superpowers/refs/heads/main/.codex/INSTALL.md
4. OpenCode
Sama seperti Codex:
Fetch and follow instructions from https://raw.githubusercontent.com/obra/superpowers/refs/heads/main/.opencode/INSTALL.md
5. Gemini CLI
gemini extensions install https://github.com/obra/superpowers
Untuk update:
gemini extensions update superpowers
Step-by-Step: Menggunakan Superpowers
Scenario: Membangun Fitur Baru
Mari kita lihat contoh konkret. Misalnya kamu ingin menambah fitur "user authentication" ke aplikasimu.
Step 1: Mulai dengan Request Biasa
User: Help me add user authentication to my Express.js app
Alih-alih langsung nulis kode, agent dengan Superpowers akan mengaktifkan skill brainstorming:
Agent: Before I start coding, I want to understand what you really need. 1. What authentication method do you prefer? (JWT, Session, OAuth?) 2. Do you need social login? (Google, GitHub, etc.) 3. Should users be able to reset passwords? 4. Any specific security requirements?
Ini adalah Socratic design refinement—agent membantu kamu memikirkan detail yang mungkin terlewat.
Step 2: Design Document
Setelah diskusi, agent akan membuat design document dan menyajikannya dalam chunk yang mudah dibaca:
## Authentication Design ### Chosen Approach - JWT-based authentication - Password hashing with bcrypt - Email verification flow ### API Endpoints - POST /auth/register - POST /auth/login - POST /auth/logout - POST /auth/refresh-token ### Security Measures - Rate limiting on login - Secure password storage - Token expiration (15 min access, 7 days refresh)
Step 3: Implementation Plan
Setelah kamu approve design, skill writing-plans aktif:
## Implementation Plan ### Task 1: Setup Dependencies - Install jsonwebtoken, bcryptjs - Add types for TypeScript - **Verification**: npm install succeeds, types resolve ### Task 2: Create User Model - File: src/models/User.ts - Fields: email, passwordHash, verified, createdAt - **Verification**: TypeScript compiles ### Task 3: Write Auth Service Tests - File: src/services/auth.test.ts - Test cases: register, login, token refresh - **Verification**: Tests FAIL (expected, TDD!) ### Task 4: Implement Auth Service - File: src/services/auth.ts - Implement all methods - **Verification**: Tests PASS [... dan seterusnya]
Perhatikan: setiap task punya verification step yang jelas.
Step 4: Subagent-Driven Development
Saat kamu bilang "go", skill subagent-driven-development aktif:
- Spawn subagent untuk Task 1
- Review hasilnya (spec compliance + code quality)
- Jika OK, lanjut ke Task 2
- Jika ada issue, perbaiki dulu
Agent bisa bekerja 2+ jam secara otonom tanpa deviasi dari plan!
Step 5: Code Review
Antar task, skill requesting-code-review otomatis aktif:
## Code Review Report ### Task 3: Auth Service Tests ✅ Spec Compliance: All test cases match design ✅ Code Quality: Good coverage (95%) ### Issues Found: - ⚠️ Minor: Missing edge case for empty email - ⚠️ Minor: Should test concurrent login attempts ### Verdict: PASS with minor fixes
Step 6: Finishing Branch
Setelah semua task selesai, skill finishing-a-development-branch aktif:
All tasks completed! Tests passing. Here are your options: 1. Merge to main 2. Create Pull Request 3. Keep branch for review 4. Discard changes What would you like to do?
Deep Dive: Key Skills
Test-Driven Development (TDD)
Superpowers meng-enforce RED-GREEN-REFACTOR cycle:
// Step 1: RED - Write failing test describe('AuthService', () => { it('should register new user', async () => { const result = await authService.register({ email: 'test@example.com', password: 'SecurePass123!' }); expect(result.user).toBeDefined(); expect(result.token).toBeDefined(); }); }); // Run test → FAIL (method doesn't exist yet) // Step 2: GREEN - Write minimal code to pass async register(userData) { const user = await this.userRepo.create(userData); const token = this.generateToken(user); return { user, token }; } // Run test → PASS // Step 3: REFACTOR - Improve code quality // Add validation, error handling, etc.
Anti-patterns yang dihindari:
- Menulis kode sebelum test
- Skip test "karena sudah yakin"
- Test yang tidak independen
Systematic Debugging
Ketika ada bug, skill systematic-debugging aktif dengan 4-phase process:
Phase 1: REPRODUCE - Document exact steps to trigger bug - Verify it's not environment-specific Phase 2: ISOLATE - Binary search the codebase - Create minimal reproduction case Phase 3: ROOT CAUSE - Trace the execution flow - Identify exact point of failure Phase 4: FIX & VERIFY - Implement fix - Add regression test - Verify fix works - Check no side effects
Git Worktrees untuk Parallel Development
Skill using-git-worktrees memungkinkan kamu bekerja di beberapa fitur sekaligus:
# Main repo: /project # Feature A: /project/.worktrees/feature-auth # Feature B: /project/.worktrees/feature-api # Masing-masing punya branch terpisah # Tidak ada conflict antar development
Best Practices
1. Biarkan Agent Bertanya
Jangan jawab dengan "just code it". Semakin detail brainstorming, semakin bagus hasilnya.
2. Review Design Document
Luangkan waktu membaca design doc. Lebih mudah koreksi di tahap ini daripada setelah kode ditulis.
3. Trust the Process
TDD mungkin terasa lambat di awal, tapi bug yang dicegah di tahap development lebih murah daripada bug di production.
4. Checkpoint Regular
Untuk project besar, gunakan executing-plans dengan checkpoint:
"Execute the plan with checkpoints after every 5 tasks"
5. Custom Skills
Kamu bisa membuat skill sendiri! Lihat skills/writing-skills/SKILL.md di repo Superpowers.
Common Mistakes
❌ Mistake 1: Skip Brainstorming
User: Just implement authentication, don't ask questions
Hasil: Kode yang tidak sesuai kebutuhan, perlu rewrite.
Solusi: Selalu ikuti brainstorming process.
❌ Mistake 2: Ignore Test Failures
Agent: Test failed. Should I fix it? User: Skip for now, I'll fix later
Hasil: Technical debt yang makin menumpuk.
Solusi: Selalu perbaiki test failure sebelum lanjut.
❌ Mistake 3: Tidak Membaca Plan
Agent: Here's the implementation plan [long document] User: Looks good, go ahead
Hasil: Kejutan ketika hasil tidak sesuai ekspektasi.
Solusi: Baca plan dengan detail. Request changes jika perlu.
❌ Mistake 4: Working on Main Branch
User: Let's implement this directly on main
Hasil: Tidak ada rollback path jika ada masalah.
Solusi: Gunakan worktrees atau minimal branch terpisah.
Advanced Tips
Parallel Agent Dispatch
Untuk task yang independen, gunakan skill dispatching-parallel-agents:
"Implement tasks 1-5 in parallel with separate subagents"
Ini memanfaatkan parallel processing untuk mempercepat development.
Custom Skill Creation
Buat skill untuk pattern yang sering kamu pakai:
# skills/my-custom-pattern/SKILL.md ## Trigger When user asks to implement a new API endpoint ## Steps 1. Check if route exists 2. Validate request schema 3. Write integration test 4. Implement handler 5. Add API documentation
Integration dengan CI/CD
Superpowers bisa diintegrasikan dengan CI pipeline:
# .github/workflows/superpowers-check.yml name: Superpowers Quality Check on: [pull_request] jobs: review: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Run Superpowers Review run: | # Agent akan melakukan code review otomatis # dengan standar Superpowers
Summary & Next Steps
Key Takeaways
- Superpowers = Framework + Methodology - Bukan sekadar plugin, tapi cara kerja baru
- Skills Auto-Activate - Agent tahu kapan harus menggunakan skill apa
- TDD is Mandatory - Test dulu, selalu
- Human in the Loop - Checkpoint untuk approval di setiap tahap penting
- Works Everywhere - Claude Code, Cursor, Codex, Gemini
Next Steps
- Install Superpowers di coding agent favoritmu
- Try a small feature untuk merasakan workflow-nya
- Explore the skills library di GitHub repo
- Join the community di Discord
- Create your own skills untuk pattern yang sering kamu pakai
References
- GitHub Repository: https://github.com/obra/superpowers
- Official Blog Post: https://blog.fsck.com/2025/10/09/superpowers/
- Discord Community: https://discord.gg/Jd8Vphy9jq
- Marketplace: https://github.com/obra/superpowers-marketplace
- License: MIT
Superpowers is built by Jesse Vincent and the team at Prime Radiant.