Reduces JS/TS bundle size via unused deps, tree-shaking, code splitting with keep/discard
中文简介正在准备中。当前显示原文说明。
查看安装方法安装前可以查看交给 AI 代理的指令内容。
Paths: File paths (
shared/,references/,../ln-*) are relative to skills repo root. If not found at CWD, locate this SKILL.md directory and go up one level for repo root.
Type: L3 Worker Category: 8XX Optimization Parent: ln-830-code-modernization-coordinator
Reduces JavaScript/TypeScript bundle size. Metric: bundle size in bytes. Each optimization verified via build with keep/discard pattern. JS/TS projects only.
| Aspect | Details |
|---|---|
| Input | JS/TS project (auto-detect from package.json) |
| Output | Smaller bundle, optimization report |
| Scope | JS/TS only (skip for other stacks) |
Phases: Pre-flight → Baseline → Analyze → Optimize Loop → Report
| Check | Required | Action if Missing |
|---|---|---|
| package.json exists | Yes | Block (not a JS/TS project) |
| Build command available | Yes | Block (need build for size measurement) |
| dist/ or build/ output | Yes | Run build first to establish baseline |
| Git clean state | Yes | Block (need clean baseline for revert) |
MANDATORY READ: Load shared/references/ci_tool_detection.md — use Build section for build command detection.
MANDATORY READ: Load shared/references/git_worktree_fallback.md — use ln-832 row.
1. Run build: npm run build (or detected build command)
2. Measure: total size of dist/ or build/ directory
3. Record: baseline_bytes, baseline_files
| Metric | How |
|---|---|
| Total size | Sum of all files in output directory |
| Per-chunk sizes | Individual JS/CSS file sizes |
| Source map excluded | Do not count .map files |
| Check | Tool | What It Finds |
|---|---|---|
| Unused dependencies | npx depcheck | Packages in package.json not imported anywhere |
| Bundle composition | npx vite-bundle-visualizer or webpack-bundle-analyzer | Large dependencies, duplicates |
| Tree-shaking gaps | Manual scan | import * as instead of named imports |
| Code splitting | Route analysis | Large initial bundle, lazy-loadable routes |
| Category | Example | Typical Savings |
|---|---|---|
| Remove unused deps | lodash installed but not imported | 10-50KB per dep |
| Named imports | import { debounce } from 'lodash-es' vs import _ from 'lodash' | 50-200KB |
| Lighter alternatives | date-fns instead of moment | 50-300KB |
| Dynamic imports | React.lazy(() => import('./HeavyComponent')) | Reduce initial load |
| CSS optimization | Purge unused CSS, minify | 10-100KB |
FOR each optimization (O1..ON):
1. APPLY: Make change (remove dep, rewrite import, add lazy load)
2. BUILD: Run build command
IF build FAILS → DISCARD (revert) → next optimization
3. MEASURE: New bundle size
4. COMPARE:
IF new_bytes < baseline_bytes → KEEP (new baseline = new_bytes)
IF new_bytes >= baseline_bytes → DISCARD (revert, no improvement)
5. LOG: Record result
| Condition | Decision |
|---|---|
| Build fails | DISCARD |
| Bundle smaller | KEEP (update baseline) |
| Bundle same or larger | DISCARD |
| Order | Category | Reason |
|---|---|---|
| 1 | Remove unused deps | Safest, immediate savings |
| 2 | Named imports / tree-shaking | Medium risk, good savings |
| 3 | Lighter alternatives | Higher risk (API changes) |
| 4 | Dynamic imports / code splitting | Structural change, test carefully |
| 5 | CSS optimization | Lowest priority |
| Field | Description |
|---|---|
| project | Project path |
| baseline_bytes | Original bundle size |
| final_bytes | Final bundle size |
| reduction_bytes | Bytes saved |
| reduction_percent | Percentage reduction |
| optimizations_applied | Count of kept optimizations |
| optimizations_discarded | Count + reasons |
| details[] | Per-optimization: category, description, bytes saved |
| deps_removed[] | Unused dependencies removed |
Options:
# Build
build_command: "" # Auto-detect from ci_tool_detection.md
output_dir: "" # Auto-detect: dist/ or build/
# Analysis
run_depcheck: true
run_bundle_analyzer: false # Opens browser, skip in CI
# Optimization scope
remove_unused_deps: true
fix_tree_shaking: true
suggest_alternatives: true
add_code_splitting: false # Structural change, opt-in
# Verification
run_build: true
| Error | Cause | Solution |
|---|---|---|
| depcheck not available | Not installed | npx depcheck (runs without install) |
| Build fails after removal | Dep used in dynamic import / config | Revert, mark as false positive |
| No output directory | Non-standard build setup | Check package.json for output config |
| Not a JS/TS project | No package.json | Skip entirely with info message |
shared/references/ci_tool_detection.md (build detection)Version: 1.0.0 Last Updated: 2026-03-08
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards. Use this skill to generate semantic ARIA for Web and accessibility traits for Web and Native platforms (iOS/Android).
中文简介正在准备中。当前显示原文说明。
Whole site or product — a full web accessibility (a11y) audit against WCAG 2.2, following the WCAG-EM methodology. Defines scope, samples representative pages and flows, runs the automated tier (`accessibility-scan`) and the hands-on manual tier (`accessibility-inspect`), and produces one conformance report. Grades each finding by severity and evidence basis, and states per-criterion conformance as pass, fail, or undetermined (needs a human). Use it for 'audit my site for accessibility', 'is this product accessible', 'a11y audit', 'WCAG or Section 508 conformance report', or any multi-page assessment. Assesses; does not fix (use `accessibility-fix`) or diff (use `accessibility-diff`). For a single page use `accessibility-scan`; for hands-on keyboard and screen-reader checks use `accessibility-inspect`.
中文简介正在准备中。当前显示原文说明。
Regression check — diff a live page's web accessibility (a11y) violations against a baseline. By default it compares your uncommitted changes (stash-based); pass `--branch [<name>]` to compare against a branch. Reports the new WCAG violations introduced, the ones fixed, and the count of pre-existing ones. Use it for 'did my change break accessibility', 'what a11y issues did this PR add', or as a CI gate. For a full scan of one page use `accessibility-scan`; for a whole site use `accessibility-audit`.
中文简介正在准备中。当前显示原文说明。
Remediation only — repair web accessibility (a11y) violations against WCAG 2.2 with a baseline, edit, and verify loop. Takes a target (URL, files, directory) or a findings worklist from `accessibility-scan`/`accessibility-inspect`/`accessibility-audit`, applies mechanical fixes as given, leaves TODOs for visual or contextual judgment, and verifies by re-running the baseline check. It only fixes. To find issues use `accessibility-scan` (one page, automated), `accessibility-inspect` (one page, manual), or `accessibility-audit` (whole site, WCAG-EM); to check for regressions use `accessibility-diff`. Use it for 'fix the a11y issues in X', 'make this accessible', 'add missing alt text and labels', 'apply these accessibility fixes', 'remediate these violations'.
中文简介正在准备中。当前显示原文说明。
One page, hands-on manual tier — drive a live page through the web accessibility (a11y) checks a rule engine can't decide: keyboard operation and focus order, screen-reader names, roles and states from the accessibility tree, reflow and zoom, reduced motion, form errors, and target size. Grades each finding by evidence basis (verified / confirm-with-a-human / human-required) and severity, and closes every criterion in a ledger: verified, flagged, not exercised, or N/A. Locates and assesses; does not fix (use `accessibility-fix`). Use it for keyboard testing, focus-order checks, screen-reader or a11y-tree review, reflow and zoom at 200%, or 'is this operable, not just lint-clean'. The automated tier is `accessibility-scan`; `accessibility-audit` runs both across a sampled site.
中文简介正在准备中。当前显示原文说明。
One page, automated tier — run the web accessibility (a11y) rule engine against a live page and locate every violation it can detect mechanically. Pass a URL, a config target name (e.g. `accesslint:accessibility-scan dev`), or nothing to use the default target from `accesslint.config.json`. Ensures a debuggable Chrome, runs the @accesslint/core engine over CDP, and returns a worklist of live-DOM WCAG 2.2 violations, each grounded to its DOM selector and source `file:line`. Locates; doesn't edit. Use it for 'is this page accessible', 'check a11y on this URL', 'find contrast and alt-text issues', or to verify a UI change. For hands-on keyboard and screen-reader checks use `accessibility-inspect`; for a whole site or product use `accessibility-audit`; to diff against uncommitted changes or a branch use `accessibility-diff`.
中文简介正在准备中。当前显示原文说明。