Ring Tryon Complete Unminification Plan

A systematic approach to unminify and reorganize a large-scale minified JavaScript application containing WebGL/THREE.js 3D rendering, MediaPipe hand detection, and complex UI components into a clean, maintainable modular structure.

What This Skill Does

This skill guides you through the complete process of:

Detected Components in Target File

The minified file contains:

Step-by-Step Instructions

Phase 1: Initial Analysis and Backup

1. **Create safety backup**

```bash

cp index-minified-backup.js index-original-backup.js

```

2. **Analyze file structure** - Search for key patterns:

- Webpack module definitions: `__webpackgi_modules__`

- CSS injection: `_.push([d.id, 'CSS_CONTENT', ""])`

- DOM creation: `createElement`, `innerHTML`, `appendChild`

- Library usage: `THREE`, `MediaPipe`, `Tweakpane`

3. **Create directory structure**

```bash

mkdir -p src/{core,detection,ring,ui,camera,utils}

mkdir -p styles/{components,themes,ui}

mkdir -p templates

mkdir -p assets/{models,textures,shaders}

mkdir -p scripts

mkdir -p tests

```

Phase 2: CSS Extraction

1. **Create CSS extraction script** (`scripts/extract-css.js`):

```javascript

import fs from 'fs';

function extractCSSFromMinified(content) {

const cssPattern = /_\.push\(\[d\.id,\s*['"`](.*?)['"`],\s*['""]?\]\)/gs;

const cssBlocks = [];

let match;

while ((match = cssPattern.exec(content)) !== null) {

cssBlocks.push(match[1]);

}

return cssBlocks;

}

const minified = fs.readFileSync('index-minified-backup.js', 'utf8');

const cssBlocks = extractCSSFromMinified(minified);

// Categorize and save CSS by functionality

```

2. **Organize CSS into files**:

- `styles/components/tippy-tooltips.css`

- `styles/components/loading-screen.css`

- `styles/components/button-bar.css`

- `styles/components/modal-system.css`

- `styles/components/responsive.css`

- `styles/themes/blue-theme.css`

- `styles/themes/white-theme.css`

- `styles/themes/black-theme.css`

- `styles/ui/tweakpane.css`

- `styles/ui/controls.css`

- `styles/main.css` (imports all)

3. **Execute extraction**:

```bash

node scripts/extract-css.js

```

4. **Validate CSS output** - Compare rendered styles in browser dev tools

Phase 3: HTML/DOM Template Extraction

1. **Create HTML extraction script** (`scripts/extract-html.js`)

2. **Search for DOM creation patterns**:

- `document.createElement`

- `element.innerHTML = `

- `element.appendChild`

- Dynamic element generation

3. **Convert to static templates**:

- `templates/loading-screen.html`

- `templates/control-panel.html`

- `templates/modal-templates.html`

- `templates/canvas-container.html`

4. **Preserve all IDs and classes** exactly as they appear

Phase 4: JavaScript Module Extraction

1. **Create module extraction script** (`scripts/extract-js-modules.js`):

```javascript

function extractWebpackModules(content) {

const modulePattern = /(\d+):\s*function\(([^)]*)\)\s*\{([\s\S]*?)\}(?=,\s*\d+:|$)/g;

const modules = new Map();

let match;

while ((match = modulePattern.exec(content)) !== null) {

modules.set(match[1], {

id: match[1],

params: match[2],

content: match[3]

});

}

return modules;

}

```

2. **Categorize modules by functionality**:

- **WebGL/THREE.js** → `src/core/`

- **MediaPipe** → `src/detection/`

- **Ring system** → `src/ring/`

- **UI components** → `src/ui/`

- **Camera** → `src/camera/`

- **Utilities** → `src/utils/`

3. **Create organized module structure**:

```

src/

├── core/

│ ├── WebGLRenderer.js

│ ├── SceneManager.js

│ └── AssetManager.js

├── detection/

│ ├── MediaPipeHandler.js

│ ├── HandTracker.js

│ └── GestureRecognizer.js

├── ring/

│ ├── RingSystem.js

│ ├── RingMaterials.js

│ └── RingGeometry.js

├── ui/

│ ├── ControlPanel.js

│ ├── LoadingScreen.js

│ └── ModalSystem.js

├── camera/

│ ├── CameraManager.js

│ └── VideoCapture.js

├── utils/

│ ├── MathUtils.js

│ ├── DOMUtils.js

│ └── AssetLoader.js

└── main.js

```

4. **Resolve module dependencies** - Map imports/exports between modules

5. **Convert to ES6 module syntax** - Replace webpack patterns with `import`/`export`

Phase 5: File Organization

1. **Create organization script** (`scripts/organize-structure.js`):

```javascript

function organizeByFunctionality(modules) {

const categories = {

webgl: /three|webgl|scene|camera|renderer/i,

mediapipe: /mediapipe|hand|detection/i,

ring: /ring|jewelry|material/i,

ui: /button|modal|ui|interface/i,

utils: /util|helper|math/i

};

// Classify modules

// Generate organized files

}

```

2. **Execute organization**:

```bash

node scripts/organize-structure.js

```

3. **Update `index.html`** - Clean entry point that loads modular code

4. **Create `src/main.js`** - Main entry point that initializes all systems

Phase 6: Build Configuration

1. **Ensure Vite is configured** (already set up per project context)

2. **Update build settings** if needed for module resolution

3. **Configure dev server**:

```bash

npm run dev

```

Phase 7: Testing and Validation

1. **Create functional tests** (`tests/functional.test.js`):

```javascript

describe('Ring Tryon Functionality', () => {

test('Camera initialization', () => {});

test('Hand detection', () => {});

test('Ring rendering', () => {});

test('User interactions', () => {});

});

```

2. **Validation checklist**:

- ✅ CSS extraído renderiza igual ao original

- ✅ Elementos DOM criados na mesma ordem

- ✅ JavaScript modules carregam sem erro

- ✅ Funcionalidade de detecção de mão funciona

- ✅ Renderização 3D dos anéis funciona

- ✅ UI responde aos controles

- ✅ Performance mantida ou melhorada

3. **Performance benchmarks**:

- Load time: < 3s

- Memory usage: < 200MB

- Mobile compatibility maintained

- Hot reload functional

4. **Test build**:

```bash

npm run build

npm run preview

```

Phase 8: Documentation

1. **Document module APIs** - Add JSDoc comments to all public functions

2. **Create README.md** for each major directory explaining purpose

3. **Document architectural decisions** in `ARCHITECTURE.md`

4. **Add inline comments** where complex logic was preserved

Execution Sequence

Run these commands in order, validating output after each step:

```bash

1. Initial analysis

node scripts/extract-modules.js

2. Extract CSS

node scripts/extract-css.js

3. Extract HTML templates

node scripts/extract-html.js

4. Extract JavaScript modules

node scripts/extract-js-modules.js

5. Organize into final structure

node scripts/organize-structure.js

6. Test dev build

npm run dev

7. Test production build

npm run build

npm run preview

8. Run functional tests

npm test

```

Expected Final Structure

```

ring-tryon/

├── index.html (clean entry point)

├── src/

│ ├── main.js (application entry)

│ ├── core/ (WebGL, Scene management)

│ ├── detection/ (MediaPipe integration)

│ ├── ring/ (Ring system)

│ ├── ui/ (Interface components)

│ ├── camera/ (Video capture)

│ └── utils/ (Shared utilities)

├── styles/

│ ├── main.css

│ ├── components/

│ ├── themes/

│ └── ui/

├── templates/

│ └── *.html (DOM templates)

├── assets/

│ ├── models/

│ ├── textures/

│ └── shaders/

├── scripts/ (extraction tools)

├── tests/ (functional tests)

└── dist/ (build output)

```

Important Constraints

Success Criteria

Example Usage

**Initial request**: "I have a 142k line minified Ring Tryon application with WebGL, MediaPipe hand detection, and complex UI. I need to unminify and reorganize it into clean modular code while keeping exact functionality."

**Agent execution**:

1. Creates backup and directory structure

2. Runs extraction scripts in sequence

3. Validates output after each phase

4. Tests functionality continuously

5. Documents architectural decisions

6. Delivers clean, organized codebase