dailytutorfor.you
Backend Development

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.

10 menit baca2026-03-18

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:

  1. Bertanya dulu apa yang sebenarnya ingin kamu bangun
  2. Membantu menyusun spesifikasi yang jelas
  3. Membuat rencana implementasi detail
  4. Mengeksekusi dengan metodologi TDD yang ketat
  5. 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:

  1. Test-Driven Development - Tests dulu, selalu
  2. Systematic over Ad-hoc - Proses, bukan tebakan
  3. Complexity Reduction - Kesederhanaan sebagai tujuan utama
  4. 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:

  1. Spawn subagent untuk Task 1
  2. Review hasilnya (spec compliance + code quality)
  3. Jika OK, lanjut ke Task 2
  4. 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

  1. Superpowers = Framework + Methodology - Bukan sekadar plugin, tapi cara kerja baru
  2. Skills Auto-Activate - Agent tahu kapan harus menggunakan skill apa
  3. TDD is Mandatory - Test dulu, selalu
  4. Human in the Loop - Checkpoint untuk approval di setiap tahap penting
  5. Works Everywhere - Claude Code, Cursor, Codex, Gemini

Next Steps

  1. Install Superpowers di coding agent favoritmu
  2. Try a small feature untuk merasakan workflow-nya
  3. Explore the skills library di GitHub repo
  4. Join the community di Discord
  5. Create your own skills untuk pattern yang sering kamu pakai

References


Superpowers is built by Jesse Vincent and the team at Prime Radiant.