| name | description |
|---|---|
browser-debugger |
Control Chrome browser for debugging, testing, and automation using the browser-debugger-cli (bdg) tool. Use this skill when you need to interact with web pages, capture screenshots, inspect DOM elements, monitor network requests, or automate browser tasks. |
Use this skill to control Chrome browser sessions for debugging, testing, and web automation.
| import { Component, linkedSignal, signal } from '@angular/core'; | |
| interface ShippingMethod { | |
| id: number; | |
| name: string; | |
| } | |
| @Component({ | |
| selector: 'app-root', | |
| template: ` |
| import { Component, computed, signal } from '@angular/core'; | |
| @Component({ | |
| selector: 'app-root', | |
| template: ` | |
| <h3>Counter value {{ counter() }}</h3> | |
| <h3>Derived counter: {{ derivedCounter() }}</h3> | |
| <button (click)="increment()">Increment</button> |
| // Service Locator Pattern Example - Dynamic Service Resolution | |
| import { Injectable, Injector, Type } from '@angular/core'; | |
| /** | |
| * Service Locator Pattern | |
| * Note: This pattern is sometimes considered an anti-pattern because it creates | |
| * hidden dependencies. Use it sparingly and prefer Angular's DI when possible. | |
| * Good use cases: Plugin systems, dynamic service loading, runtime service selection | |
| */ |
| // Singleton Pattern Example - Configuration and Logger Services | |
| import { Injectable } from '@angular/core'; | |
| import { HttpClient } from '@angular/common/http'; | |
| import { APP_INITIALIZER } from '@angular/core'; | |
| // Configuration Model | |
| export interface AppConfig { | |
| apiUrl: string; | |
| version: string; | |
| features: { |
| // Complex subsystems | |
| import { Injectable } from '@angular/core'; | |
| import { HttpClient } from '@angular/common/http'; | |
| import { Observable, of, throwError, BehaviorSubject } from 'rxjs'; | |
| import { tap } from 'rxjs/operators'; | |
| // User Model | |
| export interface User { | |
| id: string; | |
| name: string; |
| #!/bin/bash | |
| # Make sure this file is executable: chmod +x ~/.claude/statusline-command.sh | |
| # Claude Code statusline script - optimized with colors and emojis | |
| # Reads JSON input from stdin and outputs a formatted status line to stdout | |
| # Add to your ~/.claude/settings.json | |
| # | |
| # "statusLine": { | |
| # "type": "command", | |
| # "command": "bash ~/.claude/statusline-command.sh" |
Model Context Protocol (MCP) is a standardized protocol for connecting AI agents to various external tools and data sources. Imagine it as a USB-C interface - but for AI applications.
Just like USB-C simplifies the way different devices connect to a computer, MCP simplifies the way AI models interact with data, tools, and services.
| ## Getting Started | |
| ### Open the configuration file | |
| ```console | |
| code ~/Library/Application\ Support/Claude/claude_desktop_config.json | |
| ``` | |
| ```console | |
| code %APPDATA%\Claude\claude_desktop_config.json | |
| ``` |
| export const products = [ | |
| { | |
| name: 'Phone XL', | |
| price: 799, | |
| description: 'A large phone with one of the best screens' | |
| }, | |
| { | |
| name: 'Phone Mini', | |
| price: 699, | |
| description: 'A great phone with one of the best cameras' |
