Claude 官方技能文档：前端构建、Git 工作树、iOS 模拟与自动化 | 极客日志

JavaScriptNode.jsAI大前端

Claude 官方技能文档：前端构建、Git 工作树、iOS 模拟与自动化

Claude 官方技能文档集合涵盖前端构建、Git 工作树、iOS 模拟、浏览器自动化、软件架构、迭代学习与简历生成七大模块。内容包含 Web Artifacts Builder 使用 React 创建复杂工件，Using Git Worktrees 实现隔离开发环境，iOS Simulator 脚本进行应用测试，Playwright 自动化验证网页，软件架构遵循清洁架构原则，Ship-Learn-Next 框架转化学习为行动，以及 Tailored Resume Generator 优化求职简历。旨在提升开发效率与职业竞争力。

链路追踪发布于 2026/3/21更新于 2026/4/244 浏览

Skills 技能文档集合

artifacts-builder

一套利用现代前端网页技术（React、Tailwind CSS、shadcn/ui）创建复杂多组件 claude.ai HTML 工件的工具套件

using-git-worktrees

创建独立的 git 工作树，支持智能目录选择和安全验证

iOS Simulator

使 Claude 能够与 iOS Simulator 交互，用于测试和调试 iOS 应用

Playwright 浏览器自动化

基于模型调用的 Playwright 自动化，用于测试和验证网页应用

software-architecture

软件架构 ——实施包括清洁架构、SOLID 原则和全面软件设计最佳实践在内的设计模式

ship-learn-next

基于反馈循环，帮助反复迭代下一步要建造或学习什么的技能

Tailored Resume Generator

定制简历生成器 ——分析职位描述，生成突出相关经验、技能和成就的定制简历，最大化面试机会

1. Web Artifacts Builder 前端工件构建器

--- name: web-artifacts-builder description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. license: Complete terms

scripts/init-artifact.sh <project-name>
cd <project-name>

scripts/bundle-artifact.sh

--- name: using-git-worktrees description: Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification ---

ls -d .worktrees 2>/dev/null # Preferred (hidden)
ls -d worktrees 2>/dev/null # Alternative

grep -i "worktree.*director" CLAUDE.md 2>/dev/null

git check-ignore -q .worktrees 2>/dev/null || git check-ignore -q worktrees 2>/dev/null

project=$(basename "$(git rev-parse --show-toplevel)")

case $LOCATION in
  .worktrees|worktrees) path="$LOCATION/$BRANCH_NAME" ;;
  ~/.config/superpowers/worktrees/*) path="~/.config/superpowers/worktrees/$project/$BRANCH_NAME" ;;
esac

# Create worktree with new branch
git worktree add "$path" -b "$BRANCH_NAME"
cd "$path"

# Node.js
if [ -f package.json ]; then npm install; fi
# Rust
if [ -f Cargo.toml ]; then cargo build; fi
# Python
if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
if [ -f pyproject.toml ]; then poetry install; fi
# Go
if [ -f go.mod ]; then go mod download; fi

# Examples - use project-appropriate command
npm test
cargo test
pytest
go test ./...

Situation	Action
`.worktrees/` exists	Use it (verify ignored)
`worktrees/` exists	Use it (verify ignored)
Both exist	Use `.worktrees/`
Neither exists	Check CLAUDE.md → Ask user
Directory not ignored	Add to .gitignore + commit
Tests fail during baseline	Report failures + ask
No package.json/Cargo.toml	Skip dependency install

--- name: ios-simulator-skill version: 1.3.0 description: 21 production-ready scripts for iOS app testing, building, and automation. Provides semantic UI navigation, build automation, accessibility testing, and simulator lifecycle management. Optimized for AI agents with minimal token output. ---

# 1. Check environment
bash scripts/sim_health_check.sh
# 2. Launch app
python scripts/app_launcher.py --launch com.example.app
# 3. Map screen to see elements
python scripts/screen_mapper.py
# 4. Tap button
python scripts/navigator.py --find-text "Login" --tap
# 5. Enter text
python scripts/navigator.py --find-type TextField --enter-text "[email protected]"

--- name: playwright-skill description: Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing. ---

Auto-detect dev servers - For localhost testing, ALWAYS run server detection FIRST:
```
cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(servers => console.log(JSON.stringify(servers)))"
```
- If 1 server found: Use it automatically, inform user
- If multiple servers found: Ask user which one to test
- If no servers found: Ask for URL or offer to help start dev server
Write scripts to /tmp - NEVER write test files to skill directory; always use /tmp/playwright-test-*.js
Use visible browser by default - Always use headless: false unless user specifically requests headless mode
Parameterize URLs - Always make URLs configurable via environment variable or constant at top of script

cd $SKILL_DIR
npm run setup

cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(s => console.log(JSON.stringify(s)))"

// /tmp/playwright-test-page.js
const { chromium } = require('playwright');

// Parameterized URL (detected or user-provided)
const TARGET_URL = 'http://localhost:3001'; // <-- Auto-detected or from user

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto(TARGET_URL);
  console.log('Page loaded:', await page.title());
  await page.screenshot({ path: '/tmp/screenshot.png', fullPage: true });
  console.log('📸 Screenshot saved to /tmp/screenshot.png');
  await browser.close();
})();

cd $SKILL_DIR && node run.js /tmp/playwright-test-page.js

// /tmp/playwright-test-responsive.js
const { chromium } = require('playwright');
const TARGET_URL = 'http://localhost:3001'; // Auto-detected

(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 100 });
  const page = await browser.newPage();
  
  // Desktop test
  await page.setViewportSize({ width: 1920, height: 1080 });
  await page.goto(TARGET_URL);
  console.log('Desktop - Title:', await page.title());
  await page.screenshot({ path: '/tmp/desktop.png', fullPage: true });
  
  // Mobile test
  await page.setViewportSize({ width: 375, height: 667 });
  await page.screenshot({ path: '/tmp/mobile.png', fullPage: true });
  
  await browser.close();
})();

// /tmp/playwright-test-login.js
const { chromium } = require('playwright');
const TARGET_URL = 'http://localhost:3001'; // Auto-detected

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto(`${TARGET_URL}/login`);
  await page.fill('input[name="email"]', '[email protected]');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');
  
  // Wait for redirect
  await page.waitForURL('**/dashboard');
  console.log('✅ Login successful, redirected to dashboard');
  await browser.close();
})();

// /tmp/playwright-test-form.js
const { chromium } = require('playwright');
const TARGET_URL = 'http://localhost:3001'; // Auto-detected

(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 50 });
  const page = await browser.newPage();
  await page.goto(`${TARGET_URL}/contact`);
  await page.fill('input[name="name"]', 'John Doe');
  await page.fill('input[name="email"]', '[email protected]');
  await page.fill('textarea[name="message"]', 'Test message');
  await page.click('button[type="submit"]');
  
  // Verify submission
  await page.waitForSelector('.success-message');
  console.log('✅ Form submitted successfully');
  await browser.close();
})();

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('http://localhost:3000');
  const links = await page.locator('a[href^="http"]').all();
  const results = { working: 0, broken: [] };
  
  for (const link of links) {
    const href = await link.getAttribute('href');
    try {
      const response = await page.request.head(href);
      if (response.ok()) {
        results.working++;
      } else {
        results.broken.push({ url: href, status: response.status() });
      }
    } catch (e) {
      results.broken.push({ url: href, error: e.message });
    }
  }
  
  console.log(`✅ Working links: ${results.working}`);
  console.log(`❌ Broken links:`, results.broken);
  await browser.close();
})();

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  try {
    await page.goto('http://localhost:3000', { waitUntil: 'networkidle', timeout: 10000, });
    await page.screenshot({ path: '/tmp/screenshot.png', fullPage: true, });
    console.log('📸 Screenshot saved to /tmp/screenshot.png');
  } catch (error) {
    console.error('❌ Error:', error.message);
  } finally {
    await browser.close();
  }
})();

// /tmp/playwright-test-responsive-full.js
const { chromium } = require('playwright');
const TARGET_URL = 'http://localhost:3001'; // Auto-detected

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  const viewports = [
    { name: 'Desktop', width: 1920, height: 1080 },
    { name: 'Tablet', width: 768, height: 1024 },
    { name: 'Mobile', width: 375, height: 667 },
  ];
  
  for (const viewport of viewports) {
    console.log(
      `Testing ${viewport.name} (${viewport.width}x${viewport.height})`,
    );
    await page.setViewportSize({ width: viewport.width, height: viewport.height, });
    await page.goto(TARGET_URL);
    await page.waitForTimeout(1000);
    await page.screenshot({ path: `/tmp/${viewport.name.toLowerCase()}.png`, fullPage: true, });
  }
  
  console.log('✅ All viewports tested');
  await browser.close();
})();

cd $SKILL_DIR && node run.js "
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
await page.goto('http://localhost:3001');
await page.screenshot({ path: '/tmp/quick-screenshot.png', fullPage: true });
console.log('Screenshot saved');
await browser.close();
"

const helpers = require('./lib/helpers');

// Detect running dev servers (CRITICAL - use this first!)
const servers = await helpers.detectDevServers();
console.log('Found servers:', servers);

// Safe click with retry
await helpers.safeClick(page, 'button.submit', { retries: 3 });

// Safe type with clear
await helpers.safeType(page, '#username', 'testuser');

// Take timestamped screenshot
await helpers.takeScreenshot(page, 'test-result');

// Handle cookie banners
await helpers.handleCookieBanner(page);

// Extract table data
const data = await helpers.extractTableData(page, 'table.results');

PW_HEADER_NAME=X-Automated-By
PW_HEADER_VALUE=playwright-skill \
cd $SKILL_DIR && node run.js /tmp/my-script.js

PW_EXTRA_HEADERS='{"X-Automated-By":"playwright-skill","X-Debug":"true"}' \
cd $SKILL_DIR && node run.js /tmp/my-script.js

const context = await helpers.createContext(browser);
const page = await context.newPage();
// All requests from this page include your custom headers

const context = await browser.newContext(
  getContextOptionsWithHeaders({ viewport: { width: 1920, height: 1080 } }),
);

cd $SKILL_DIR && npm run setup

--- name: software-architecture description: Guide for quality focused software architecture. This skill should be used when users want to write code, design architecture, analyze code, in any case that relates to software development. ---

--- name: ship-learn-next description: Transform learning content (like YouTube transcripts, articles, tutorials) into actionable implementation plans using the Ship-Learn-Next framework. Use when user wants to turn advice, lessons, or educational content into concrete action steps, reps, or a learning quest. allowed-tools: Read,Write ---

FILE_PATH="/path/to/content.txt"

--- name: tailored-resume-generator description: Analyzes job descriptions and generates tailored resumes that highlight relevant experience, skills, and achievements to maximize interview chances ---

Claude 官方技能文档：前端构建、Git 工作树、iOS 模拟与自动化

Skills 技能文档集合

artifacts-builder

using-git-worktrees

iOS Simulator

Playwright 浏览器自动化

software-architecture

ship-learn-next

Tailored Resume Generator

1. Web Artifacts Builder 前端工件构建器

Web Artifacts Builder

Design & Style Guidelines

Quick Start

Step 1: Initialize Project

Step 2: Develop Your Artifact

Step 3: Bundle to Single HTML File

Step 4: Share Artifact with User

Step 5: Testing/Visualizing the Artifact (Optional)

Reference

2. Using Git Worktrees Git 工作树管理

Using Git Worktrees

Overview

Directory Selection Process

1. Check Existing Directories

2. Check CLAUDE.md

3. Ask User

Safety Verification

For Project-Local Directories (.worktrees or worktrees)

For Global Directory (~/.config/superpowers/worktrees)

Creation Steps

1. Detect Project Name

2. Create Worktree

3. Run Project Setup

4. Verify Clean Baseline

5. Report Location

Quick Reference

Common Mistakes

Skipping ignore verification

Assuming directory location

Proceeding with failing tests

Hardcoding setup commands

Example Workflow

Red Flags

Integration

3. iOS Simulator Skill iOS 模拟器技能

iOS Simulator Skill

Quick Start

21 Production Scripts

Build & Development (2 scripts)

Navigation & Interaction (5 scripts)

Testing & Analysis (5 scripts)

Advanced Testing & Permissions (4 scripts)

Device Lifecycle Management (5 scripts)

Common Patterns

Typical Workflow

Requirements

Documentation

Key Design Principles

4. Playwright Browser Automation Playwright 浏览器自动化

Playwright Browser Automation

How It Works

Setup (First Time)

Execution Pattern

Common Patterns

Test a Page (Multiple Viewports)

Test Login Flow

Fill and Submit Form

Check for Broken Links

Take Screenshot with Error Handling

Test Responsive Design

Inline Execution (Simple Tasks)

Available Helpers

Custom HTTP Headers

Configuration

How It Works

Advanced Usage

Tips

Troubleshooting

Example Usage

Notes