ImaginerLabs/frontend-staged-bundle-review
skills/coding/frontend-staged-bundle-review/SKILL.md
Reviews staged git changes from a bundle size perspective. Analyzes change intent and provides optimization recommendations for React/Vue/Taro/Next.js projects. Should be used when the user is concerned about bundle size, code bloat, or package weight — before committing or evaluating new dependencies. Distinguished from frontend-code-review which focuses on code quality, this skill focuses specifically on bundle size impact analysis.
development
Updated Apr 22, 2026
$ install --global
skillsauthnpx skillsauth add ImaginerLabs/skill-manager frontend-staged-bundle-reviewInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 22, 2026, 5:14 AM134.2s1 file scanned
SKILL.md
- name:
- frontend-staged-bundle-review
- description:
- >-
- category:
- coding
- vs_frontend-code-review:
- frontend-code-review focuses on general code quality issues, this skill focuses specifically on bundle size impact
Frontend Staged Code Bundle Size Review
Core Capability
Before committing, read staged changes, analyze the change intent in project context, and review from a bundle size perspective — outputting high/medium/low priority optimization recommendations.
When to Use
- Worried about bundle size increase after feature iteration
- Pre-evaluation before introducing new dependencies
- Bundle size regression check after refactoring
- Performance optimization audit
- Mini-program main package size limit warning
- First-screen load performance optimization
- Taro mini-program, H5, React/Vue web, Next.js SSR projects
Skill Collaboration
| Skill | How | Use case | | ------------------------ | --------------------------------------------------------------------- | ------------------------------ | | staged-code-review | Code quality review first, then bundle review | Comprehensive pre-commit check | | frontend-code-review | Use alongside, covering both quality and size | Combined code review | | tech-stack-detection | Identify tech stack first, then targeted size analysis | New project bundle review | | context-learning | Understand context when size issues involve complex dependency chains | Complex refactoring |
Recommended workflow:
git add . → staged-code-review → frontend-staged-bundle-review → commit
Workflow
Step 1: Read Staged Diff
git diff --staged
Step 2: Analyze Change Intent
Understand the business context of this change:
- Read comments, variable names, function names in the diff to infer feature intent
- Check for new
importstatements to identify introduced dependencies - Check existing project code (e.g.,
package.json, shared utilities) for duplicate imports - Identify the change type: new feature / bug fix / refactoring / dependency upgrade
Step 3: Bundle Impact Analysis
Evaluate impact across these dimensions:
3.1 Dependency Imports
- Did new imports bring in large third-party libraries?
- Is tree-shaking friendly (on-demand import) being used?
- Can existing project utilities/components replace the new import?
- Are there duplicate-functionality libraries (e.g., both moment and dayjs)?
3.2 Code Redundancy
- Duplicate logic that could be extracted into shared functions?
- Large copy-pasted code blocks?
- Dead code that's deprecated but not removed?
- Debug code (console.log, debugger) not cleaned up?
3.3 Assets & Static Files
- Inline Base64 images or large SVGs?
- Hardcoded large JSON data that could be fetched dynamically?
- Fonts/icons loaded on demand?
- Images using appropriate formats (WebP/AVIF) and compression?
3.4 Dynamic Loading Opportunities
- New pages/modules suitable for route-level lazy loading (
React.lazy/ dynamicimport())? - Heavy components used infrequently that could be deferred?
- Large third-party libraries that could be dynamically imported (e.g., ECharts, Monaco Editor)?
- Next.js projects using
dynamic importfor first-screen optimization?
3.5 Taro/Mini-program Specifics
- Web API polyfills that only work on H5?
- Reasonable subpackage strategy, new pages in correct subpackages?
- Heavy UI library full imports beyond
@tarojs/components? - Main package approaching the 2MB limit?
3.6 Next.js/SSR Specifics
- Using
next/dynamicfor component lazy loading? - Reasonably setting
ssr: falsefor components that don't need SSR? - Using
next/imagefor image optimization? - Client-only libraries being bundled into the server bundle?
Step 4: Generate Prioritized Recommendations
| Level | Criteria | Typical scenario | | ------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------- | | 🔴 High | Significant size impact (est. > 10KB gzip), or avoidable large dependency | Full lodash/moment.js import; inline large images | | 🟡 Medium | Moderate impact (est. 2–10KB gzip), or clear optimization path | UI library not imported on-demand; new page not lazy-loaded | | 🟢 Low | Small impact (est. < 2KB gzip), best practice improvement | Small function replaceable by native; extractable duplicate utility |
Step 5: Output Optimization Report
Output Format
## 📦 Staged Code Bundle Size Review Report
### Change Overview
| Dimension | Info |
| ------------- | -------------------------------------------------------- |
| File count | X |
| Tech stack | [detected] |
| Change type | New feature / Bug fix / Refactoring / Dependency upgrade |
| Change intent | [Inferred from diff] |
---
### 🔴 High Priority (significant size impact, fix before commit)
| # | File | Issue | Suggestion | Est. savings | Scope |
| --- | ------------- | ------- | ------------ | ------------ | ----------------------- |
| 1 | `src/xxx.tsx` | [issue] | [suggestion] | ~XX KB | First-screen/subpackage |
**Details:**
- [Detailed analysis and optimization plan]
---
### 🟡 Medium Priority (clear optimization path, fix this or next iteration)
| # | File | Issue | Suggestion | Est. savings | Scope |
| --- | ------------- | ------- | ------------ | ------------ | ---------------- |
| 1 | `src/xxx.tsx` | [issue] | [suggestion] | ~XX KB | Non-first-screen |
**Details:**
- [Detailed analysis and optimization plan]
---
### 🟢 Low Priority (best practice, fix as needed)
| # | File | Issue | Suggestion | Est. savings |
| --- | ------------- | ------- | ------------ | ------------ |
| 1 | `src/xxx.tsx` | [issue] | [suggestion] | ~XX KB |
---
### 📊 Size Impact Estimate
| Category | Current | After optimization | Savings |
| --------------- | --------- | ------------------ | --------- |
| High priority | XX KB | XX KB | XX KB |
| Medium priority | XX KB | XX KB | XX KB |
| Low priority | XX KB | XX KB | XX KB |
| **Total** | **XX KB** | **XX KB** | **XX KB** |
---
### 📝 Summary
- High priority: X items (fix before commit)
- Medium priority: X items (fix in next iteration)
- Low priority: X items (best practice improvements)
- **Overall assessment**: 🟢 Size-friendly / 🟡 Room for optimization / 🔴 Fix before committing
---
### 🔄 Next Steps
- [ ] Fix high priority issues immediately
- [ ] Address medium priority in next iteration
- [ ] Monitor bundle size changes ongoing
- [ ] Consider configuring bundle size monitoring (e.g., bundlesize, webpack-bundle-analyzer)
Related Skills
ImaginerLabs/docx
development
VerifiedTrustedCommunity
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.
SKILL.mdUpdated Apr 22, 2026
ImaginerLabs/create-implementation-plan
devops
VerifiedTrustedCommunity
Create a new implementation plan file for new features, refactoring existing code or upgrading packages, design, architecture or infrastructure.
SKILL.mdUpdated Apr 22, 2026
ImaginerLabs/mcp-builder
tools
VerifiedTrustedCommunity
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
SKILL.mdUpdated Apr 22, 2026
ImaginerLabs/feature-port-doc-generator
documentation
VerifiedTrustedCommunity
Generates standardized porting documentation from completed feature changes. Analyzes commit diffs or file contents, extracts change intent, and outputs Markdown documentation for cross-team understanding. Should be used when the user needs to document a change for cross-team or cross-project consumption. Distinguished from cross-branch-fix-porter which actively re-implements fixes, this skill documents changes.
SKILL.mdUpdated Apr 22, 2026