ReddRadar
Agent skill
ecosystem
JavaScript ecosystem including npm, build tools (Webpack, Vite), testing (Jest, Vitest), linting, and CI/CD integration.
Install this agent skill to your Project
npx add-skill https://github.com/pluginagentmarketplace/custom-plugin-javascript/tree/main/skills/ecosystem
SKILL.md
JavaScript Ecosystem Skill
Quick Reference Card
npm Commands
npm init -y # Initialize
npm install pkg # Add dependency
npm install -D pkg # Dev dependency
npm install -g pkg # Global
npm update # Update all
npm audit fix # Fix vulnerabilities
npm run script # Run script
package.json
{
"name": "project",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"test": "vitest",
"lint": "eslint src"
},
"dependencies": {},
"devDependencies": {}
}
Vite Config (Recommended)
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: { port: 3000 },
build: { sourcemap: true }
});
Vitest Testing
import { describe, it, expect, vi } from 'vitest';
describe('Calculator', () => {
it('adds numbers', () => {
expect(add(2, 3)).toBe(5);
});
it('mocks function', () => {
const mock = vi.fn().mockReturnValue(42);
expect(mock()).toBe(42);
});
});
ESLint Config
// .eslintrc.cjs
module.exports = {
env: { browser: true, es2022: true },
extends: ['eslint:recommended'],
rules: {
'no-console': 'warn',
'no-unused-vars': 'error'
}
};
Prettier Config
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
}
GitHub Actions CI
name: CI
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20' }
- run: npm ci
- run: npm test
- run: npm run build
Troubleshooting
Common Issues
| Problem | Symptom | Fix |
|---|---|---|
| Module not found | Import error | Check node_modules |
| Build fails | Compilation error | Check config |
| Test fails | Assertion error | Check test setup |
| Lint errors | Code warnings | Run --fix |
Debug Checklist
# 1. Clear caches
rm -rf node_modules package-lock.json
npm cache clean --force
npm install
# 2. Check versions
node --version
npm --version
npm ls <package>
# 3. Verbose output
npm run build --verbose
Production Patterns
Environment Variables
// .env
VITE_API_URL=https://api.example.com
// Usage
const url = import.meta.env.VITE_API_URL;
Code Splitting
// Dynamic import
const Component = React.lazy(() => import('./Component'));
// With Suspense
<Suspense fallback={<Loading />}>
<Component />
</Suspense>
Related
- Agent 07: JavaScript Ecosystem (detailed learning)
- Skill: testing: Test frameworks
- Skill: modern-javascript: ES modules
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
pluginagentmarketplace/custom-plugin-javascript
debugging
JavaScript debugging techniques using DevTools, Node.js debugger, and advanced troubleshooting.
pluginagentmarketplace/custom-plugin-javascript
patterns
JavaScript design patterns and architectural best practices.
pluginagentmarketplace/custom-plugin-javascript
asynchronous
Master asynchronous JavaScript patterns including callbacks, promises, async/await, event loop mechanics, and real-world async patterns.
pluginagentmarketplace/custom-plugin-javascript
dom-apis
DOM manipulation and browser APIs including element selection, events, storage, fetch, and modern Web APIs.
pluginagentmarketplace/custom-plugin-javascript
testing
JavaScript testing with Jest, Vitest, and Testing Library for comprehensive test coverage.
pluginagentmarketplace/custom-plugin-javascript
functions
Advanced function patterns including declaration styles, closures, scope chains, hoisting, and this binding. Master function composition and advanced techniques.
Didn't find tool you were looking for?