# Adding New Tools to the SMM Toolkit
This guide explains how to create new tools for the Sewing Machine Mall Management Toolkit.
## Quick Start
1. Create a new HTML file in `/tools/` directory
2. Use the shared CSS and JS
3. Add the tool to the dashboard
4. Test locally with Docker
## File Structure
```
tools/
├── your-new-tool.html
```
## Template for New Tools
```html
[Tool Name] - SMM Toolkit
[Emoji] [Tool Name]
[Brief description]
Settings
```
## Available CSS Classes
### Layout
- `.app-container` - Main app wrapper
- `.main-content` - Content area with max-width
- `.tool-layout` - Two-column layout (sidebar + main)
- `.tool-sidebar` - Left configuration panel
- `.tool-main` - Right preview/output panel
### Components
- `.card` - Basic card container
- `.btn`, `.btn-primary`, `.btn-secondary` - Buttons
- `.form-group`, `.form-label`, `.form-input` - Form elements
- `.tabs`, `.tab`, `.tab-content` - Tab system
- `.alert`, `.alert-success`, `.alert-error` - Alerts
### Utilities
- `.flex`, `.gap-2`, `.gap-4` - Flexbox
- `.mt-4`, `.mb-4` - Margins
- `.text-muted`, `.text-primary` - Text colors
## JavaScript Utilities
The `SMMToolkit` global object provides:
```javascript
// Utilities
SMMToolkit.utils.copyToClipboard(text) // Copy to clipboard
SMMToolkit.utils.escapeHtml(str) // Escape HTML entities
SMMToolkit.utils.generateId(prefix) // Generate unique ID
SMMToolkit.utils.formatPrice(price) // Format price display
SMMToolkit.utils.slugify(str) // Create URL-safe slugs
SMMToolkit.utils.debounce(fn, wait) // Debounce function
// Alerts
SMMToolkit.alerts.success(message)
SMMToolkit.alerts.error(message)
SMMToolkit.alerts.warning(message)
SMMToolkit.alerts.info(message)
// Data (products database)
await SMMToolkit.data.loadProducts()
SMMToolkit.data.products // All products
SMMToolkit.data.brands // Unique brands
SMMToolkit.data.categories // Unique categories
SMMToolkit.data.getProduct(id)
SMMToolkit.data.searchProducts(query)
// HTML Helpers (for generated output)
SMMToolkit.html.button(text, options)
SMMToolkit.html.sectionHeading(text, id)
SMMToolkit.html.divider()
// Brand Constants
SMMToolkit.brand.colors.primary // #2dafa3
SMMToolkit.brand.colors.primaryDark // #25988e
SMMToolkit.gradients.primary // CSS gradient string
```
## Adding to Dashboard
Edit `/index.html` and add a new tool card:
```html
```
## Best Practices
### Generated HTML
- Always use inline styles (RainPOS requirement)
- Include fallback fonts in font-family
- Use `onmouseover`/`onmouseout` for hover effects
- Escape user input with `SMMToolkit.utils.escapeHtml()`
- Add appropriate `alt` text for images
### Tool Design
- Keep the sidebar for configuration
- Use live preview that updates on input
- Always provide copy-to-clipboard
- Show success/error feedback with alerts
- Include sensible defaults
### Code Organization
- Tool-specific styles in `