Add 260+ Claude Code skills from skills.sh

Complete collection of AI agent skills including:
- Frontend Development (Vue, React, Next.js, Three.js)
- Backend Development (NestJS, FastAPI, Node.js)
- Mobile Development (React Native, Expo)
- Testing (E2E, frontend, webapp)
- DevOps (GitHub Actions, CI/CD)
- Marketing (SEO, copywriting, analytics)
- Security (binary analysis, vulnerability scanning)
- And many more...

Synchronized from: https://skills.sh/

Co-Authored-By: Claude <noreply@anthropic.com>

dev-browser/extension/entrypoints/background.ts

@@ -0,0 +1,174 @@
+/**
+ * dev-browser Chrome Extension Background Script
+ *
+ * This extension connects to the dev-browser relay server and allows
+ * Playwright automation of the user's existing browser tabs.
+ */
+
+import { createLogger } from "../utils/logger";
+import { TabManager } from "../services/TabManager";
+import { ConnectionManager } from "../services/ConnectionManager";
+import { CDPRouter } from "../services/CDPRouter";
+import { StateManager } from "../services/StateManager";
+import type { PopupMessage, StateResponse } from "../utils/types";
+
+export default defineBackground(() => {
+  // Create connection manager first (needed for sendMessage)
+  let connectionManager: ConnectionManager;
+
+  // Create logger with sendMessage function
+  const logger = createLogger((msg) => connectionManager?.send(msg));
+
+  // Create state manager for persistence
+  const stateManager = new StateManager();
+
+  // Create tab manager
+  const tabManager = new TabManager({
+    logger,
+    sendMessage: (msg) => connectionManager.send(msg),
+  });
+
+  // Create CDP router
+  const cdpRouter = new CDPRouter({
+    logger,
+    tabManager,
+  });
+
+  // Create connection manager
+  connectionManager = new ConnectionManager({
+    logger,
+    onMessage: (msg) => cdpRouter.handleCommand(msg),
+    onDisconnect: () => tabManager.detachAll(),
+  });
+
+  // Keep-alive alarm name for Chrome Alarms API
+  const KEEPALIVE_ALARM = "keepAlive";
+
+  // Update badge to show active/inactive state
+  function updateBadge(isActive: boolean): void {
+    chrome.action.setBadgeText({ text: isActive ? "ON" : "" });
+    chrome.action.setBadgeBackgroundColor({ color: "#4CAF50" });
+  }
+
+  // Handle state changes
+  async function handleStateChange(isActive: boolean): Promise<void> {
+    await stateManager.setState({ isActive });
+    if (isActive) {
+      chrome.alarms.create(KEEPALIVE_ALARM, { periodInMinutes: 0.5 });
+      connectionManager.startMaintaining();
+    } else {
+      chrome.alarms.clear(KEEPALIVE_ALARM);
+      connectionManager.disconnect();
+    }
+    updateBadge(isActive);
+  }
+
+  // Handle debugger events
+  function onDebuggerEvent(
+    source: chrome.debugger.DebuggerSession,
+    method: string,
+    params: unknown
+  ): void {
+    cdpRouter.handleDebuggerEvent(source, method, params, (msg) => connectionManager.send(msg));
+  }
+
+  function onDebuggerDetach(
+    source: chrome.debugger.Debuggee,
+    reason: `${chrome.debugger.DetachReason}`
+  ): void {
+    const tabId = source.tabId;
+    if (!tabId) return;
+
+    logger.debug(`Debugger detached for tab ${tabId}: ${reason}`);
+    tabManager.handleDebuggerDetach(tabId);
+  }
+
+  // Handle messages from popup
+  chrome.runtime.onMessage.addListener(
+    (
+      message: PopupMessage,
+      _sender: chrome.runtime.MessageSender,
+      sendResponse: (response: StateResponse) => void
+    ) => {
+      if (message.type === "getState") {
+        (async () => {
+          const state = await stateManager.getState();
+          const isConnected = await connectionManager.checkConnection();
+          sendResponse({
+            isActive: state.isActive,
+            isConnected,
+          });
+        })();
+        return true; // Async response
+      }
+
+      if (message.type === "setState") {
+        (async () => {
+          await handleStateChange(message.isActive);
+          const state = await stateManager.getState();
+          const isConnected = await connectionManager.checkConnection();
+          sendResponse({
+            isActive: state.isActive,
+            isConnected,
+          });
+        })();
+        return true; // Async response
+      }
+
+      return false;
+    }
+  );
+
+  // Set up event listeners
+
+  chrome.tabs.onRemoved.addListener((tabId) => {
+    if (tabManager.has(tabId)) {
+      logger.debug("Tab closed:", tabId);
+      tabManager.detach(tabId, false);
+    }
+  });
+
+  // Register debugger event listeners
+  chrome.debugger.onEvent.addListener(onDebuggerEvent);
+  chrome.debugger.onDetach.addListener(onDebuggerDetach);
+
+  // Reset any stale debugger connections on startup
+  chrome.debugger.getTargets().then((targets) => {
+    const attached = targets.filter((t) => t.tabId && t.attached);
+    if (attached.length > 0) {
+      logger.log(`Detaching ${attached.length} stale debugger connections`);
+      for (const target of attached) {
+        chrome.debugger.detach({ tabId: target.tabId }).catch(() => {});
+      }
+    }
+  });
+
+  logger.log("Extension initialized");
+
+  // Initialize from stored state
+  stateManager.getState().then((state) => {
+    updateBadge(state.isActive);
+    if (state.isActive) {
+      // Create keep-alive alarm only when extension is active
+      chrome.alarms.create(KEEPALIVE_ALARM, { periodInMinutes: 0.5 });
+      connectionManager.startMaintaining();
+    }
+  });
+
+  // Set up Chrome Alarms keep-alive listener
+  // This ensures the connection is maintained even after service worker unloads
+  chrome.alarms.onAlarm.addListener(async (alarm) => {
+    if (alarm.name === KEEPALIVE_ALARM) {
+      const state = await stateManager.getState();
+
+      if (state.isActive) {
+        const isConnected = connectionManager.isConnected();
+
+        if (!isConnected) {
+          logger.debug("Keep-alive: Connection lost, restarting...");
+          connectionManager.startMaintaining();
+        }
+      }
+    }
+  });
+});

dev-browser/extension/entrypoints/popup/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dev Browser</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="popup">
+      <h1>Dev Browser</h1>
+      <div class="toggle-row">
+        <label class="toggle">
+          <input type="checkbox" id="active-toggle" />
+          <span class="slider"></span>
+        </label>
+        <span id="status-text">Inactive</span>
+      </div>
+      <p id="connection-status" class="connection-status"></p>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

dev-browser/extension/entrypoints/popup/main.ts

@@ -0,0 +1,52 @@
+import type { GetStateMessage, SetStateMessage, StateResponse } from "../../utils/types";
+
+const toggle = document.getElementById("active-toggle") as HTMLInputElement;
+const statusText = document.getElementById("status-text") as HTMLSpanElement;
+const connectionStatus = document.getElementById("connection-status") as HTMLParagraphElement;
+
+function updateUI(state: StateResponse): void {
+  toggle.checked = state.isActive;
+  statusText.textContent = state.isActive ? "Active" : "Inactive";
+
+  if (state.isActive) {
+    connectionStatus.textContent = state.isConnected ? "Connected to relay" : "Connecting...";
+    connectionStatus.className = state.isConnected
+      ? "connection-status connected"
+      : "connection-status connecting";
+  } else {
+    connectionStatus.textContent = "";
+    connectionStatus.className = "connection-status";
+  }
+}
+
+function refreshState(): void {
+  chrome.runtime.sendMessage<GetStateMessage, StateResponse>({ type: "getState" }, (response) => {
+    if (response) {
+      updateUI(response);
+    }
+  });
+}
+
+// Load initial state
+refreshState();
+
+// Poll for state updates while popup is open
+const pollInterval = setInterval(refreshState, 1000);
+
+// Clean up on popup close
+window.addEventListener("unload", () => {
+  clearInterval(pollInterval);
+});
+
+// Handle toggle changes
+toggle.addEventListener("change", () => {
+  const isActive = toggle.checked;
+  chrome.runtime.sendMessage<SetStateMessage, StateResponse>(
+    { type: "setState", isActive },
+    (response) => {
+      if (response) {
+        updateUI(response);
+      }
+    }
+  );
+});

dev-browser/extension/entrypoints/popup/style.css

@@ -0,0 +1,96 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+  background: #fff;
+}
+
+.popup {
+  width: 200px;
+  padding: 16px;
+}
+
+h1 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: #333;
+}
+
+.toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+#status-text {
+  font-weight: 500;
+  color: #555;
+}
+
+/* Toggle switch */
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+}
+
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.2s;
+  border-radius: 24px;
+}
+
+.slider::before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.2s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #4caf50;
+}
+
+input:checked + .slider::before {
+  transform: translateX(20px);
+}
+
+/* Connection status */
+.connection-status {
+  margin-top: 12px;
+  font-size: 12px;
+  color: #888;
+  min-height: 16px;
+}
+
+.connection-status.connected {
+  color: #4caf50;
+}
+
+.connection-status.connecting {
+  color: #ff9800;
+}