A systematic methodology for building full-stack applications - opinionated Claude Code skills covering infrastructure, database, backend, and frontend development.
This plugin provides a comprehensive set of skills that guide Claude Code through a structured, step-by-step approach to building production-ready applications. Each skill follows established best practices and provides clear, opinionated guidance for common development tasks.
claude --plugin-dir /path/to/systematic-dev-kitgit clone https://github.com/dkoenawan/systematic-dev-kit.git
cd systematic-dev-kit
claude --plugin-dir .This plugin follows the Claude Code plugin architecture:
systematic-dev-kit/
├── .claude-plugin/
│ └── plugin.json # Plugin manifest
├── skills/ # Agent-based skills
│ ├── init/ # Project initialization (recommended)
│ │ └── SKILL.md
│ ├── brand-designer/ # Brand identity design through discovery
│ │ └── SKILL.md
│ ├── explore/ # Token-efficient codebase investigation
│ │ └── SKILL.md
│ ├── plan/ # Feature planning and spec generation
│ │ ├── SKILL.md
│ │ ├── template.md
│ │ └── examples/
│ │ └── user-management/
│ │ └── feature-spec.md
│ └── bootstrap-new-project/ # Full-stack project bootstrap (deprecated)
│ └── SKILL.md
├── commands/ # Quick command skills (future)
├── hooks/ # Development workflow hooks (future)
├── README.md # This file
└── CLAUDE.md # Guidance for Claude Code instances
Initialize a new full-stack project from a template repository with opt-out component selection.
Default Stack (Opinionated):
| Component | Technology |
|---|---|
| Frontend | React + Vite + TypeScript |
| Backend | Node.js + TypeScript + Prisma |
| Database | PostgreSQL |
| Infrastructure | Docker with docker-compose |
Usage:
/systematic-dev-kit:initHow it works:
- Clones the dev-kit-scaffolding template
- Asks which components to EXCLUDE (opt-out approach)
- Removes unwanted components and updates configs
- Optionally initializes git and installs dependencies
Interactive prompts:
- Project name (default: "my-project")
- Target directory (default: ./{project-name})
- Components to exclude (multi-select, default: none)
- Initialize git? (default: yes)
- Install dependencies? (default: no)
After init:
- Frontend: http://localhost:3000
- Backend: http://localhost:4000
- Database: PostgreSQL on localhost:5432
Design a distinctive brand identity through systematic emotional discovery — generates brand guidelines, CSS custom properties, and optional Tailwind config.
What it produces:
| File | Description |
|---|---|
brand/brand-guideline.md |
Comprehensive brand identity doc (colors, typography, spacing, component tokens, voice & tone) |
brand/brand-theme.css |
CSS custom properties in HSL format with intentionally designed dark mode |
brand/tailwind.brand.js |
Tailwind theme config (only if selected) |
Usage:
/systematic-dev-kit:brand-designerHow it works (6 phases):
- Brand Soul Discovery — Understand the brand's story, future vision, and personality archetype
- Emotional Mapping — Define the three core emotions, sensory environment, and anti-inspiration
- Visual Direction — Gather references, assess existing assets, confirm technical context
- Creative Direction Synthesis — AI presents a narrative creative brief for approval before generating anything
- File Generation — Produces brand guidelines, CSS theme, and optional Tailwind config
- Handoff Summary — Google Fonts snippet, import instructions, and next steps
Key principle: Colors are derived from emotions, not picked from palettes. The skill spends most of its time understanding the brand through discovery before generating any design artifacts.
Token-efficient codebase investigation — reads docs before code, stops when context is sufficient.
What it produces:
A structured Investigation Report covering tech stack, data models, backend structure, frontend structure, key architectural patterns, and relevance to the investigation focus.
Usage:
/systematic-dev-kit:exploreHow it works (3 tiers, stops early):
- Tier 1 — Docs First (always): README → docs/ → CLAUDE.md. Stops here if tech stack, structure, and focus context are clear.
- Tier 2 — Structure (only if needed): package.json → Prisma schema → directory listings. Stops here if focus is answered.
- Tier 3 — Targeted Code (only if needed): ≤5 files, no import chain following, no broad scanning.
Key principle: Thoroughness is not a virtue; precision is. The skill gathers exactly enough context to answer the investigation focus, then stops. Runs on Haiku to minimize token cost.
Invocation modes:
- Standalone: Invoke directly and provide an investigation focus (e.g., "auth system", "order management", "overall architecture")
- Via plan: Automatically invoked by the plan skill when a feature extends existing code — no manual invocation needed
Systematic feature planning through structured discovery — generates detailed specs (DB → Backend → Frontend) that eliminate re-scanning and token waste in future implementation prompts.
What it produces:
| File | Description |
|---|---|
specs/{feature-name}.md |
Complete feature spec with Prisma models, CQRS commands/queries, API shapes, routes, and implementation order |
Usage:
/systematic-dev-kit:planHow it works (5 phases):
- Feature Intent — Understand what the user wants to build, whether it's new or extends existing code, and assess complexity signals
- Layer-by-Layer Design — Walk through Database → Backend → Frontend with adaptive depth (simple features get fewer questions, complex features get the full set plus tradeoff surfacing)
- Spec Synthesis — Synthesize all answers into a complete spec with Prisma models, CQRS operations, TypeScript interfaces, routes, and component hierarchy
- Approval Gate — Present full spec for user approval with option to adjust or rethink
- File Generation & Handoff — Generate spec file and explain how to reference it for implementation
Key principle: Plan once, implement by referencing the spec. Each section of the generated spec is detailed enough to implement a full layer (DB, Backend, or Frontend) without re-scanning the codebase or re-explaining context.
Adaptive depth: The skill adjusts question count based on feature complexity — a simple CRUD feature gets 3 core questions per layer, while a feature with auth, real-time updates, and file uploads gets the full question set plus inline tradeoff surfacing.
Deprecated: Use
/systematic-dev-kit:initinstead. This skill generates files directly which is less token-efficient.
Bootstrap a complete full-stack project with systematic structure and best practices.
What it creates:
- Infrastructure: Docker setup with docker-compose.yml orchestration
- Backend: Node.js + TypeScript with Clean Architecture
- Domain, Usecases, Interface, Infrastructure layers
- CQRS pattern (commands and queries separated)
- Express.js server with health endpoint
- Swagger API documentation
- OpenAPI specification
- Frontend: React + TypeScript + Vite + Material-UI
- Atomic design structure (atoms, molecules, organisms, templates, pages)
- MUI theme configuration
- Landing page component
- Routing setup
- Database: Placeholder directory for future implementation
- Agent: Placeholder directory for agentic AI workflows
Usage:
/systematic-dev-kit:bootstrap-new-projectInteractive prompts:
- Project name
- Target directory
- Initialize git repository?
- Install dependencies?
After bootstrap:
- Frontend: http://localhost:3000
- Backend API: http://localhost:4000
- API Docs: http://localhost:4000/api-docs
- Health Check: http://localhost:4000/health
To develop this plugin locally:
- Clone the repository
- Make changes to skills, commands, or hooks
- Test using
claude --plugin-dir . - Submit pull requests for improvements
Contributions are welcome! Please feel free to submit pull requests or open issues for:
- New skills for systematic development workflows
- Improvements to existing skills
- Documentation enhancements
- Bug fixes
MIT License - see LICENSE file for details.
Daniel Koenawan