Systematic Dev Kit

A systematic methodology for building full-stack applications - opinionated Claude Code skills covering infrastructure, database, backend, and frontend development.

Overview

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.

Installation

Option 1: Load from Local Directory

claude --plugin-dir /path/to/systematic-dev-kit

Option 2: Clone and Configure

git clone https://github.com/dkoenawan/systematic-dev-kit.git
cd systematic-dev-kit
claude --plugin-dir .

Plugin Structure

This plugin follows the Claude Code plugin architecture:

systematic-dev-kit/
├── .claude-plugin/
│   └── plugin.json                    # Plugin manifest
├── skills/                            # Agent-based skills
│   └── bootstrap-new-project/         # Full-stack project bootstrap
│       └── SKILL.md
├── commands/                          # Quick command skills (future)
├── hooks/                             # Development workflow hooks (future)
├── README.md                          # This file
└── CLAUDE.md                          # Guidance for Claude Code instances

Skills Included

Project Bootstrap

/systematic-dev-kit:bootstrap-new-project

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-project

Interactive 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

Development

To develop this plugin locally:

1. Clone the repository
2. Make changes to skills, commands, or hooks
3. Test using claude --plugin-dir .
4. Submit pull requests for improvements

Contributing

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

License

MIT License - see LICENSE file for details.

Author

Daniel Koenawan

Resources

• Claude Code Plugin Documentation
• Skills Guide
• Plugin Reference