Initial commit

skills/ascii-diagram-creator/examples/before-after-diagram.md

@@ -0,0 +1,66 @@
+# Example: Before/After Diagram
+
+## Scenario
+
+A user asks: "Show the directory structure before and after our TypeScript migration."
+
+## Generated Diagram
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│               JAVASCRIPT TO TYPESCRIPT MIGRATION                         │
+└─────────────────────────────────────────────────────────────────────────┘
+
+BEFORE (JavaScript):                 AFTER (TypeScript):
+
+src/                                 src/
+├── components/                      ├── components/
+│   ├── Button.js        ──►        │   ├── Button.tsx ✓
+│   ├── Button.css       ──►        │   │   (CSS modules imported)
+│   ├── Form.js          ──►        │   ├── Form.tsx ✓
+│   ├── Form.css         ──►        │   │   (CSS modules imported)
+│   └── Modal.js         ──►        │   └── Modal.tsx ✓
+├── utils/                           ├── utils/
+│   ├── helpers.js       ──►        │   ├── helpers.ts ✓
+│   ├── constants.js     ──►        │   ├── constants.ts ✓
+│   └── api.js           ──►        │   └── api.ts ✓
+├── hooks/                           ├── hooks/
+│   ├── useAuth.js       ──►        │   ├── useAuth.ts ✓
+│   └── useForm.js       ──►        │   └── useForm.ts ✓
+├── types/               NEW         ├── types/
+│                                    │   ├── index.ts ✓
+│                                    │   ├── api.d.ts ✓
+│                                    │   └── components.d.ts ✓
+├── App.js               ──►        ├── App.tsx ✓
+├── index.js             ──►        ├── index.tsx ✓
+└── .eslintrc.js         ──►        ├── .eslintrc.js (updated)
+                                     └── tsconfig.json NEW
+
+Configuration Files:
+├── package.json         ──►        ├── package.json (updated deps)
+├── jest.config.js       ──►        ├── jest.config.js (ts-jest)
+└── .babelrc             ✗          └── (removed - using tsc)
+
+Legend:
+✓ = Conversion complete
+──► = Transformed/updated
+✗ = Removed
+NEW = New file/directory
+```
+
+## Explanation
+
+This before/after diagram shows the complete scope of a TypeScript migration:
+
+- **File transformations**: .js → .tsx/.ts conversions
+- **New additions**: types/ directory with type definitions
+- **Removed files**: Babel config (replaced by TypeScript compiler)
+- **Updated configs**: ESLint and Jest configurations
+
+The parallel columns make it easy to trace each file's transformation.
+
+## Usage Suggestions
+
+- Include in migration PR description
+- Add to project README as migration record
+- Reference in team communication about changes