analyze-bundle
Convert Next.js bundle analyzer data to NDJSON and explore it
Works with
Agent Skills format with YAML frontmatter. Claude Code reads it as-is.
---
name: "analyze-bundle"
description: "Convert Next.js bundle analyzer data to NDJSON and explore it"
license: "MIT"
---
# analyze-to-ndjson
Converts Next.js bundle analyzer binary `.data` files into grep/jq-friendly NDJSON.
## Analyze artifacts
This workflow pre-generates analyzer artifacts in:
- `.next/diagnostics/analyze/ndjson/routes.ndjson`
- `.next/diagnostics/analyze/ndjson/sources.ndjson`
- `.next/diagnostics/analyze/ndjson/output_files.ndjson`
- `.next/diagnostics/analyze/ndjson/module_edges.ndjson`
- `.next/diagnostics/analyze/ndjson/modules.ndjson`
Focus on reading these files and using their evidence to prioritize changes.
## Output files
| File | What's in it |
|---|---|
| `modules.ndjson` | Global module registry (`id`, `ident`, `path`) |
| `module_edges.ndjson` | Module dependency graph (`from`, `to`, `kind`: sync/async) |
| `sources.ndjson` | Per-route source tree with sizes and environment flags |
| `chunk_parts.ndjson` | Granular size data: one line per (source, output_file) pair |
| `output_files.ndjson` | Per-route output files with aggregated sizes |
| `routes.ndjson` | Route-level summaries |
## Browsing the output
### Route overview
```bash
jq -s 'sort_by(-.total_compressed_size)' .next/diagnostics/analyze/ndjson/routes.ndjson
```
### Find large sources
```bash
jq -s '
group_by(.full_path)
| map(max_by(.compressed_size))
| sort_by(-.compressed_size)
| .[0:10]
| .[] | {full_path, compressed_size, size, route}
' .next/diagnostics/analyze/ndjson/sources.ndjson
```
### Client-side JS
```bash
grep '"client":true' .next/diagnostics/analyze/ndjson/sources.ndjson \
| grep '"js":true' \
| jq -s 'sort_by(-.compressed_size) | .[0:10] | .[] | {full_path, compressed_size}'
```
### Module dependencies
```bash
grep '"from":42,' .next/diagnostics/analyze/ndjson/module_edges.ndjson | jq .to
grep '"to":42,' .next/diagnostics/analyze/ndjson/module_edges.ndjson | jq .from
grep 'react-dom' .next/diagnostics/analyze/ndjson/modules.ndjson | jq '{id, path}'
```
### Output files for a route
```bash
grep '"route":"/"' .next/diagnostics/analyze/ndjson/output_files.ndjson \
| jq -s 'sort_by(-.total_compressed_size) | .[0:10] | .[] | {filename, total_compressed_size, num_parts}'
```
### Directory tree for a route
```bash
grep '"route":"/"' .next/diagnostics/analyze/ndjson/sources.ndjson \
| jq 'select(.parent_id == null)'
```More Frontend Frameworks skills
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
design-taste-frontend
leonxlnx/taste-skill
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

