MCP HubMCP Hub
Zurück zu Fähigkeiten

web-cli-teleport

DNYoussef
Aktualisiert Yesterday
734 Ansichten
3
3
Auf GitHub ansehen
Designworkflowteleportsession-managementwebcli

Über

Diese Fähigkeit unterstützt Entwickler bei der Wahl zwischen Claude Code Web- und CLI-Schnittstellen basierend auf Aufgabenanalysen und ermöglicht nahtloses Session-Teleporting zwischen diesen Umgebungen. Sie optimiert den Workflow, indem sie den Sitzungsstatus und Kontext beim Wechsel zwischen Web, CLI oder Mobilgeräten verwaltet. Nutzen Sie sie für komplexe Projekte, die in verschiedenen Phasen unterschiedliche Werkzeuge erfordern.

Schnellinstallation

Claude Code

Empfohlen
Primär
npx skills add DNYoussef/ai-chrome-extension
Plugin-BefehlAlternativ
/plugin add https://github.com/DNYoussef/ai-chrome-extension
Git CloneAlternativ
git clone https://github.com/DNYoussef/ai-chrome-extension.git ~/.claude/skills/web-cli-teleport

Kopieren Sie diesen Befehl und fügen Sie ihn in Claude Code ein, um diese Fähigkeit zu installieren

Dokumentation

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

GitHub Repository

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

Verwandte Skills

n8n-workflow-testing-fundamentals

Andere

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.

Skill ansehen

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

Andere

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.

Skill ansehen

stream-chain

Andere

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.

Skill ansehen

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

Andere

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.

Skill ansehen