SKILL.md
Architecture Diagram Generator
Quick Start: Create HTML structure with flexible layout (single/double/triple column) → Define CSS styles for layers and grids → Add content with categorized panels → Use semantic colors for different layers.
Critical Rules
Rule 1: Direct HTML Embedding
IMPORTANT: Write architecture diagrams as direct HTML in Markdown. NEVER use code blocks (```html). The HTML should be embedded directly in the document without any fencing.
Rule 2: No Empty Lines in HTML Structure
CRITICAL: Do NOT add any empty lines within the HTML architecture diagram structure. Keep the entire HTML block continuous to prevent parsing errors.
Rule 3: Incremental Creation Approach
RECOMMENDED: Create architecture diagrams in multiple steps:
- First: Create the overall framework (wrapper, sidebars, main structure) and define all CSS styles
- Second: Add layer containers with titles
- Third: Fill in components layer by layer
- Fourth: Add detailed content and refinements