.claude/skills/code-server-remote-ide-wsl2/SKILL.md
Setup secure VS Code IDE in browser with code-server on WSL2, accessible from mobile/tablet via ngrok/Cloudflare/Tailscale. Full IDE features with extension support, resource management, and performance optimization. Use when you need remote IDE access, VS Code in browser, remote development, or full coding environment on mobile/tablet.
npx skillsauth add adaptationio/skrillz code-server-remote-ide-wsl2Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Access full VS Code IDE from any device (phone, tablet, remote computer) via secure web-based code-server with ngrok, Cloudflare Tunnel, or Tailscale.
What This Skill Does:
When to Use This Skill:
When NOT to Use This Skill:
What You'll Get:
System Requirements:
User Requirements:
Not Required:
Get remote VS Code IDE access in <15 minutes:
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./install.sh
Follow prompts to:
./configure-auth.sh
This generates a strong hashed password and configures secure access.
./configure-resources.sh
This sets WSL2 memory/CPU limits to prevent resource exhaustion.
./code-server-start.sh
This will:
Copy the URL and open in any browser (tablet, phone, computer)
Open the displayed URL in browser → Enter password → You now have full VS Code IDE!
./code-server-stop.sh
Done! You now have working remote IDE access.
For detailed setup, extension management, and optimization, see the full workflow below.
This step installs code-server and your chosen tunnel service. You only need to do this once.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./install.sh
The installer will:
ngrok - Best for beginners:
Cloudflare Tunnel - Best for production:
Tailscale - Best for private access:
Recommendation: Start with Cloudflare Tunnel (unlimited bandwidth important for IDE).
After choosing tunnel service, you'll need to create free account and get auth token:
For ngrok:
ngrok config add-authtoken YOUR_TOKEN_HEREFor Cloudflare Tunnel:
cloudflared tunnel login)For Tailscale:
sudo tailscale up# Check code-server installed
code-server --version
# Check tunnel tool installed
ngrok version # or: cloudflared --version # or: tailscale version
# Run health check
./health-check.sh
Troubleshooting Installation:
Configure secure access with hashed password. You only need to do this once.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./configure-auth.sh
This will:
The script will display:
==================================================
code-server Remote IDE Credentials
==================================================
Password: aB3$xK9#mL2@pQ7!
Save this password securely!
You'll need it to login to VS Code in browser.
Configuration saved to:
~/.config/code-server/config.yaml
==================================================
Save this password - you'll need it to login from browser.
Security Notes:
~/.config/code-server/config.yaml with 600 permissions~/.code-server/.env (for scripts only)./configure-auth.shTroubleshooting Authentication:
./configure-auth.sh to generate new one./configure-auth.sh --custom-passwordConfigure WSL2 resource limits to prevent code-server from consuming all memory.
code-server resource usage:
Without limits: code-server can consume all available RAM, slowing down Windows.
With limits: WSL2 restricted to safe amount, system stays responsive.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./configure-resources.sh
This will:
| System RAM | WSL2 Memory Limit | Processors | code-server Usage | |------------|-------------------|------------|-------------------| | 8 GB | 4 GB | 2 | Light use OK | | 16 GB | 8 GB | 4 | Moderate use OK | | 32 GB+ | 12-16 GB | 6-8 | Heavy use OK |
Example .wslconfig:
[wsl2]
memory=8GB
processors=4
swap=2GB
Restart WSL2 (PowerShell as Admin):
wsl --shutdown
Wait 8 seconds, then start WSL2:
wsl
Verify new limits (in WSL2):
# Check memory
free -h
# Check CPUs
nproc
Troubleshooting Resources:
Start code-server and tunnel, get connection URL. Do this each time you want remote access.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./code-server-start.sh
The script will:
You'll see output like this:
==================================================
code-server Remote IDE - CONNECTION READY
==================================================
🌐 Connection URL:
https://abc123.ngrok-free.app
🔐 Login Password:
aB3$xK9#mL2@pQ7!
💻 To connect from tablet/phone/browser:
1. Open the URL above in any browser
2. Enter the password above
3. You'll see full VS Code IDE
📊 Resource Usage (baseline):
code-server: 245 MB
Tunnel: 24 MB
Total: 269 MB
⚠️ Security Warnings:
- Only share URL with trusted people
- URL is HTTPS encrypted
- Session is active until you stop it
- Remember to stop when done (saves resources)
==================================================
Session running. Press Ctrl+C to stop (or use ./code-server-stop.sh)
Option 1: Keep terminal open (simplest)
Option 2: Run in background (advanced)
./code-server-start.sh &
disown
Now you can close terminal and code-server keeps running.
Troubleshooting Start:
lsof -i :8080Use the connection URL from any device with browser.
On your tablet, phone, or remote computer:
You'll see code-server password prompt:
You now see full VS Code interface in browser!
What You Can Do:
First Time Setup:
Tablet (iPad/Android with keyboard):
Phone:
Tips:
To disconnect (without stopping code-server):
To fully stop (free up resources):
Manage VS Code extensions and monitor resource usage.
Method 1: Via UI (easiest)
Method 2: Via CLI
# Use our helper script
./manage-extensions.sh
# Or manually:
code-server --install-extension EXTENSION_ID
Popular Extensions:
ms-python.pythondbaeumer.vscode-eslintesbenp.prettier-vscodeeamonn.gitlensms-azuretools.vscode-dockerExample:
# Install Python extension
code-server --install-extension ms-python.python
Most extensions work, but some don't:
✅ Work Well:
⚠️ May Not Work:
Check compatibility: See extension's marketplace page for web/remote support.
# Check current status
./code-server-status.sh
This shows:
If resource usage high:
./manage-extensions.sh
Interactive menu:
Example:
$ ./manage-extensions.sh
1) List installed
2) Install extension
3) Remove extension
Enter choice: 1
Installed Extensions:
- ms-python.python (Python)
- dbaeumer.vscode-eslint (ESLint)
- esbenp.prettier-vscode (Prettier)
For detailed extension management, see Extension Management Guide.
Stop code-server and tunnel when you're done. This frees up resources.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./code-server-stop.sh
This will:
The script will show:
Stopping code-server remote IDE session...
✓ Tunnel stopped
✓ code-server stopped
Final resource usage:
code-server: 1.2 GB (peak)
Session duration: 2 hours 15 minutes
Session ended successfully.
Verify Nothing Running:
./code-server-status.sh
Should show: code-server is not running
Troubleshooting Stop:
ps aux | grep code-serverpkill -9 code-server && pkill -9 ngrokCheck if code-server session is running and get connection info.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./code-server-status.sh
If Running, you'll see:
==================================================
code-server Remote IDE - STATUS
==================================================
Status: RUNNING ✓
🌐 Connection URL:
https://abc123.ngrok-free.app
🔐 Login Password:
aB3$xK9#mL2@pQ7!
⏱️ Session Duration: 1 hour 23 minutes
📊 Resource Usage:
code-server: 856 MB
Tunnel: 24 MB
Total: 880 MB
💻 System Resources:
WSL2 Memory Limit: 8 GB
Currently Used: 2.1 GB (26%)
Available: 5.9 GB
📦 Extensions Loaded: 8
To stop session: ./code-server-stop.sh
==================================================
If Stopped, you'll see:
==================================================
code-server Remote IDE - STATUS
==================================================
Status: NOT RUNNING
To start session: ./code-server-start.sh
==================================================
Check before starting: Avoid starting duplicate sessions
./code-server-status.sh && ./code-server-start.sh
Get URL when you forgot it: Status shows current URL
./code-server-status.sh # Copy URL from output
Monitor resource usage: See if memory is getting high
./code-server-status.sh # Check memory usage
Check if forgotten session running: See if you left it running
./code-server-status.sh # If running, consider stopping
Security-First Design: This skill implements defense-in-depth security to protect your WSL2 development environment.
✅ Authentication Required
✅ HTTPS Encryption
✅ Localhost Binding
✅ Secure Credential Storage
✅ WebSocket Origin Validation
Do:
./code-server-status.sh)Don't:
Protected Against:
Not Protected Against (out of scope):
⚠️ code-server Has Full Access:
⚠️ Extensions Can Execute Code:
⚠️ ngrok Free Tier Warning: ngrok free tier URLs are public. However:
For enhanced security, see Security Guide:
1. Choose Fast Tunnel:
2. Limit Extensions:
3. Close Unused Tabs:
4. Optimize Settings:
{
"files.watcherExclude": {
"**/node_modules/**": true,
"**/.git/objects/**": true
},
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true
}
}
5. Use Search Wisely:
# Check resource usage
./code-server-status.sh
# If high:
# - Remove extensions
# - Close tabs
# - Restart session
For detailed optimization, see Performance Optimization Guide.
Error: code-server: command not found
Fix:
# Reinstall code-server
./install.sh
Error: Address already in use (port 8080)
Fix:
# Find what's using port
lsof -i :8080
# Kill the process
kill <PID>
# Or use different port
CODE_SERVER_PORT=8081 ./code-server-start.sh
Error: "Incorrect password" or password doesn't work
Fix:
# Reset password
./configure-auth.sh
# Get new password
./code-server-status.sh
Error in browser console: WebSocket connection failed
Fix:
./code-server-status.sh./code-server-stop.sh && ./code-server-start.shIssue: code-server using >2GB memory
Fix:
./configure-resources.shIssue: Installed extension doesn't appear
Fix:
Issue: IDE feels sluggish, typing delayed
Fix:
ping 8.8.8.8 (should be <100ms)htopFor more issues, see Troubleshooting Guide.
Comprehensive guides for deeper understanding:
All automation scripts are in scripts/ directory:
./install.sh # Interactive installer for code-server + tunnel
./install.sh --ngrok # Non-interactive: install with ngrok
./install.sh --cloudflare # Non-interactive: install with Cloudflare
./install.sh --tailscale # Non-interactive: install with Tailscale
./configure-auth.sh # Interactive: generate hashed password
./configure-auth.sh --custom-password # Interactive: use your password
./configure-resources.sh # Interactive: configure WSL2 limits
./code-server-start.sh # Start code-server + tunnel, display URL
./code-server-stop.sh # Stop both gracefully
./code-server-status.sh # Check status, show URL + resources
./manage-extensions.sh # Interactive extension manager
./health-check.sh # Verify installation and configuration
Configuration templates for advanced users:
File: templates/config.yaml.template
Example config.yaml (created automatically by configure-auth.sh):
bind-addr: 127.0.0.1:8080
auth: password
password: HASHED_PASSWORD_HERE
cert: false
File: templates/.wslconfig.template
Example .wslconfig for Windows (created by configure-resources.sh):
[wsl2]
memory=8GB
processors=4
swap=2GB
File: templates/code-server.service
For auto-start on WSL2 boot (requires systemd support):
# Copy template
cp templates/code-server.service ~/.config/systemd/user/
# Enable auto-start
systemctl --user enable code-server
systemctl --user start code-server
File: templates/.env.template
Example .env configuration (created by configure-auth.sh):
CODE_SERVER_PASSWORD=strongpassword
TUNNEL_TYPE=cloudflare
CLOUDFLARE_TUNNEL_TOKEN=your_token_here
When to use code-server (this skill):
When to use ttyd:
Can use both: Install both skills, use ttyd for quick tasks, code-server for serious coding.
After Setup:
Advanced Setup:
Explore More:
You've successfully setup remote IDE access when:
./code-server-start.sh)./code-server-stop.sh)./code-server-status.sh)Congratulations! You now have secure remote VS Code IDE access from any device.
code-server-remote-ide-wsl2 - Full VS Code IDE, anywhere you go.
development
Setup secure web-based terminal access to WSL2 from mobile/tablet via ttyd + ngrok/Cloudflare/Tailscale. One-command install, start, stop, status. Use when you need remote terminal access, web terminal, browser-based shell, or mobile access to WSL2 environment.
development
Complete development workflows where Claude writes the code while Gemini and Codex provide research, planning, reviews, and different perspectives. Claude remains the main developer. Use for complex projects requiring expert planning and multi-perspective reviews.
development
Systematic progress tracking for skill development. Manages task states (pending/in_progress/completed), updates in real-time, reports progress, identifies blockers, and maintains momentum. Use when tracking skill development, coordinating work, or reporting progress.
testing
Comprehensive testing workflow orchestrating functional testing, example validation, integration testing, and usability assessment. Sequential workflow for complete skill testing from examples through scenarios to integration validation. Use when conducting thorough testing, pre-deployment validation, ensuring skill functionality, or comprehensive quality checks.