MCP HubMCP Hub
Volver a habilidades

web-cli-teleport

DNYoussef
Actualizado Today
736 vistas
3
3
Ver en GitHub
Diseñoworkflowteleportsession-managementwebcli

Acerca de

Esta habilidad ayuda a los desarrolladores a elegir entre las interfaces web y CLI de Claude Code mediante el análisis de tareas, y luego permite la teletransportación fluida de sesiones entre estos entornos. Optimiza el flujo de trabajo gestionando el estado y el contexto de la sesión al cambiar entre web, CLI o móvil. Úsala para proyectos complejos que requieren diferentes herramientas en varias etapas.

Instalación rápida

Claude Code

Recomendado
Principal
npx skills add DNYoussef/ai-chrome-extension
Comando PluginAlternativo
/plugin add https://github.com/DNYoussef/ai-chrome-extension
Git CloneAlternativo
git clone https://github.com/DNYoussef/ai-chrome-extension.git ~/.claude/skills/web-cli-teleport

Copia y pega este comando en Claude Code para instalar esta habilidad

Documentación

Web-CLI Teleport Guide

Purpose

Help users choose the optimal Claude Code interface (Web vs CLI) and seamlessly teleport sessions between environments for maximum productivity.

Specialist Agent

I am a workflow optimization specialist with expertise in:

  • Claude Code Web and CLI capabilities and limitations
  • Session state management and teleportation
  • Task complexity analysis and interface selection
  • Context window optimization for different interfaces
  • Mobile and desktop workflow integration

Methodology (Program-of-Thought Pattern)

  1. Analyze Task Characteristics: Determine complexity, iteration needs, back-and-forth
  2. Recommend Interface: Choose Web, CLI, or hybrid approach
  3. Set Up Session: Initialize in optimal environment
  4. Monitor Progress: Track if interface switch needed
  5. Facilitate Teleport: Guide seamless session handoff when beneficial

Decision Matrix: Web vs CLI

Use Claude Code Web When:

  • ✅ Well-defined, one-off tasks (1-3 interactions expected)
  • ✅ Simple changes: translations, styling, config updates
  • ✅ Away from development machine (mobile, other computer)
  • ✅ Want to review/approve before applying locally
  • ✅ Collaborative review needed before merging
  • ✅ Quick fixes during meetings or on-the-go
  • ✅ Creating PRs without local checkout

Use Claude Code CLI When:

  • ✅ Complex, iterative development (5+ interactions)
  • ✅ Debugging requiring multiple attempts
  • ✅ Large refactoring across multiple files
  • ✅ Need inline diffs and VS Code integration
  • ✅ Local testing and running required
  • ✅ Working with local databases or services
  • ✅ Need full file tree visibility and exploration

Hybrid Approach (Start Web, Teleport to CLI):

  • ✅ Initial exploration and planning on mobile
  • ✅ Review progress on web, continue implementation locally
  • ✅ Quick start on web, complex debugging on CLI
  • ✅ Collaborative approval on web, local refinement on CLI

Web Capabilities

Strengths:

  • No local setup required
  • Works on iOS app (not Android yet)
  • GitHub integration for PRs
  • Notifications when tasks complete
  • Sandboxed cloud execution
  • Quick context switching between repositories

Limitations:

  • Cannot see inline diffs (only final PR diffs)
  • Less interactive file exploration
  • Limited terminal access
  • No local service integration
  • Fixed network isolation policies

CLI Capabilities

Strengths:

  • Full file system access and exploration
  • Inline diffs for every change
  • VS Code integration
  • Local testing and debugging
  • Custom sandbox configuration
  • Background task monitoring
  • Full terminal control

Limitations:

  • Requires local setup
  • Desktop/laptop only
  • More permission prompts without sandbox
  • Context switches cost more

Teleport Protocol

From Web to CLI:

  1. Complete task on web or reach handoff point
  2. Click "Open in CLI" button
  3. Copy teleport command: claude --teleport <session-id>
  4. Ensure clean git working directory locally
  5. Run teleport command in local terminal
  6. Full session history loaded (~50% context window)
  7. Continue work with full CLI capabilities

Benefits of Teleporting:

  • Preserves entire conversation history
  • Maintains context and decisions
  • No need to repeat requirements
  • Seamless continuation of work
  • Can switch back to web for final PR review

Best Practices:

  • Start small tasks on web for quick wins
  • Teleport when complexity increases
  • Use web for final PR review and approval
  • Clean git state before teleporting
  • Verify context loaded correctly (check context %)

Workflow Patterns

Pattern 1: Mobile Planning → Desktop Implementation:

[Mobile/Web] Define requirements and initial approach
[Mobile/Web] Let Claude Code explore and plan
[Teleport] Continue on desktop CLI
[CLI] Implement with full tooling
[CLI] Test and debug locally
[Web] Create PR and review

Pattern 2: Quick Fix Anywhere:

[Web] Make simple change (translation, config, style)
[Web] Review diff in PR
[Web] Merge if good OR teleport if issues found

Pattern 3: Complex Feature with Reviews:

[CLI] Initial implementation and testing
[CLI] Create PR when ready
[Web/Mobile] Review PR on the go
[Teleport if needed] Make revisions on desktop
[Web] Final approval and merge

Input Contract

task_description: string
task_complexity: simple | moderate | complex
iteration_expected: low | medium | high
current_location: desktop | mobile | away
has_local_environment: boolean
needs_testing: boolean
needs_debugging: boolean

Output Contract

recommendation:
  interface: web | cli | hybrid
  reasoning: string
  workflow: array[steps]
  teleport_points: array[string] (when to switch interfaces)

setup_instructions:
  web_url: string (if web recommended)
  cli_commands: array[string] (if CLI recommended)
  teleport_command: string (if hybrid)

optimization_tips:
  time_savings: string
  context_preservation: string
  best_practices: array[string]

Integration Points

  • Cascades: Pre-step for task planning workflows
  • Commands: /web-or-cli, /teleport-session
  • Other Skills: Works with interactive-planner, task-orchestrator

Usage Examples

Quick Decision:

I need to translate the landing page to Japanese. Should I use web or CLI?

Complex Task Planning:

Use web-cli-teleport skill to plan approach for implementing new authentication system with OAuth2

Mid-Task Switch:

I started this on Claude Code Web but it's getting complex. Help me teleport to CLI and continue.

Common Scenarios

Scenario 1: On Mobile, Need Quick Fix:

  • Recommendation: Use Web
  • Create PR directly from web
  • Review and merge on mobile

Scenario 2: Complex Refactoring:

  • Recommendation: Use CLI
  • Need inline diffs and local testing
  • Multiple iterations expected

Scenario 3: Started Simple, Got Complex:

  • Started on Web for "simple" task
  • Discovered complexity during implementation
  • Teleport to CLI with full context
  • Complete complex parts locally
  • Return to web for PR review

Scenario 4: Team Collaboration:

  • Use Web for initial work
  • Create PR for team review
  • Teammates review on web
  • Teleport to CLI if changes needed
  • Push updates to PR

Failure Modes & Mitigations

  • Dirty git state blocks teleport: Stash or commit local changes first
  • Context too large to teleport: Start fresh, reference PR for context
  • Web limitations discovered mid-task: Teleport immediately, don't struggle
  • Mobile notifications not working: Enable in iOS app settings
  • PR diffs not showing: Refresh page or open PR directly on GitHub

Validation Checklist

  • Task complexity accurately assessed
  • Interface recommendation matches task needs
  • Teleport points clearly identified
  • User knows how to switch interfaces
  • Git state prepared for teleporting
  • Notifications configured if needed
  • Context preservation verified

Neural Training Integration

training:
  pattern: adaptive
  feedback_collection: true
  success_metrics:
    - task_completion_time
    - interface_switches_needed
    - user_satisfaction
    - context_preservation_quality

Quick Commands:

  • Web: Go to claude.ai/code
  • Teleport: claude --teleport <session-id>
  • Check context: Look for context % after teleporting

Pro Tips:

  • Use web for first pass, CLI for refinement
  • Mobile great for planning during commute
  • Always clean git state before teleporting
  • Context window shows how much history loaded

Repositorio GitHub

DNYoussef/ai-chrome-extension
Ruta: .claude/skills/web-cli-teleport

Habilidades relacionadas

n8n-workflow-testing-fundamentals

Otro

This Claude Skill provides comprehensive testing for n8n workflow automation, covering execution lifecycle, node connections, and data flow validation. It's designed for developers to validate workflow structure, test with realistic data, and verify error handling paths. Use it when building or maintaining n8n automation applications to ensure reliable workflow execution.

Ver habilidad

when-creating-slash-commands-use-slash-command-encoder

Otro

This Claude Skill helps developers create ergonomic slash commands (/command) for micro-skills with auto-discovery and parameter validation. It generates command handlers, validation logic, and documentation for fast CLI access to workflows. Use it when building command-line interfaces that need intelligent routing and command chaining capabilities.

Ver habilidad

stream-chain

Otro

Stream-Chain enables multi-agent workflows by connecting Claude instances in sequential pipelines where each agent's output streams into the next. It supports both custom prompt chains and predefined pipelines for data transformation and complex processing tasks. Use this skill when you need to orchestrate sophisticated multi-step workflows with streaming data flow between specialized agents.

Ver habilidad

when-bridging-web-cli-use-web-cli-teleport

Otro

This skill enables bidirectional integration between web interfaces and CLI tools, allowing web apps to trigger CLI commands and CLI tools to display web interfaces. It provides REST APIs, WebSocket communication, and handles authentication for seamless workflow bridging. Use it when you need to connect web-based systems with command-line workflows for advanced integration scenarios.

Ver habilidad