@infomaker/create-writer-plugin

CLI tool to create new Naviga Writer plugins with best practices, complete tooling, and comprehensive documentation.

🎬 Demo

To update the demo: install VHS and run npm run demo

🚀 Quick Start

npx @infomaker/create-writer-plugin

That's it! The CLI will guide you through creating your plugin.

📋 What You Get

Running npx @infomaker/create-writer-plugin creates a complete, production-ready plugin:

dw-plugin-your-name/
├── .claude-skill.md              # AI assistant guide (auto-detected by Claude)
├── DEVELOPMENT.md                # Plugin-specific development guide
├── PUBLISHING.md                 # Complete publishing and release guide
├── README.md                     # Plugin documentation
├── manifest.json                 # Plugin metadata
├── package.json                  # Dependencies and scripts
├── src/
│   ├── index.js                  # Entry point with debug logging
│   ├── PluginPackage.ts          # Plugin configuration (JSDoc documented)
│   ├── scss/index.scss           # Styles
│   └── components/
│       └── MainComponent.ts      # Main UI component (inline docs)
├── __tooling__/
│   ├── webpack/                  # Build configurations
│   └── create-local-cert.sh      # SSL certificate script
├── __tests__/                    # Unit tests (optional)
├── .eslintrc.js                  # Linting configuration
├── babel.config.js               # Babel configuration
├── tsconfig.json                 # TypeScript configuration
└── bitbucket-pipelines.yml       # CI/CD pipeline

✨ Features

Automatic Name Generation

Enter only the base name (e.g., naviga-agent), and all variants are generated automatically:

• Directory: dw-plugin-naviga-agent
• Package name: dw-plugin-naviga-agent
• Manifest name: im-naviga-agent
• Plugin ID: io.infomaker.naviga-agent

Complete Tooling

• ✅ Webpack dev server with hot reload
• ✅ TypeScript support
• ✅ Babel transpilation
• ✅ ESLint configuration
• ✅ SSL certificate script
• ✅ Bitbucket Pipelines CI/CD

Rich Documentation

Every plugin includes:

• DEVELOPMENT.md - Plugin-specific quick reference with examples
• PUBLISHING.md - Complete guide for releasing and deploying plugins
• .claude-skill.md - AI assistant guide (auto-detected by Claude)
• JSDoc comments - Throughout generated code
• Inline examples - In component templates

Production-Ready Pattern

Based on working Infomaker plugins:

• Correct naming convention
• Debug logging throughout
• Proper error handling
• Clean code structure

📖 Usage

# Create a new plugin
npx @infomaker/create-writer-plugin

# Follow the prompts:
? Name of plugin: naviga-agent
? Name of organisation: Naviga
? Plugin label: Naviga Agent
? Plugin description: AI-powered content assistance
? Include schema.json? Yes
? Include unit tests? Yes

The tool will:

1. ✅ Create project directory
2. ✅ Generate all files
3. ✅ Install dependencies
4. ✅ Show next steps

🎯 After Creation

# Navigate to your plugin
cd dw-plugin-naviga-agent

# Start development
npm start

# Opens at: https://local.plugins.writer.infomaker.io:3000/index.js

Register in Writer

Use these values in Writer plugin configuration:

Id:   io.infomaker.naviga-agent
Name: im-naviga-agent
URL:  https://local.plugins.writer.infomaker.io:3000/index.js

🤖 AI-Friendly

Each plugin includes .claude-skill.md which is automatically detected by Claude and other AI assistants. This enables:

• ✅ Context-aware code suggestions
• ✅ Accurate API usage examples
• ✅ Plugin-specific guidance
• ✅ Best practices recommendations

📚 Documentation

Created plugins include links to:

• Plugin Development Guide
• API Reference
• Troubleshooting
• Official Writer Documentation

🛠️ Requirements

• Node.js >= 14.0.0
• npm >= 6.0.0

🔗 Related Packages

• @infomaker/writer-plugin-utils - Build tools and webpack configs used by plugins

📄 License

MIT

🤝 Contributing

This is an internal Infomaker tool. For issues or suggestions, contact the Writer team.