type: queue-operation

operation: enqueue

content: 你是前端开发者。用中文回答：你是谁？你的专长是什么？给出一个 React + TypeScript 示例代码。


type: user

role: user

permissionMode: default

userType: external

entrypoint: sdk-cli

gitBranch: HEAD


content:
- update-config: Use this skill to configure the Claude Code harness via settings.json. Automated behaviors ("from now on when X", "each time X", "whenever X", "before/after X") require hooks configured in settings.json - the harness executes these, not Claude, so memory/preferences cannot fulfill them. Also use for: permissions ("allow X", "add permission", "move permission to"), env vars ("set X=Y"), hook troubleshooting, or any changes to settings.json/settings.local.json files. Examples: "allow npm commands", "add bq permission to global settings", "move permission to user settings", "set DEBUG=true", "when claude stops show X". For simple settings like theme/model, suggest the /config command.
- keybindings-help: Use when the user wants to customize keyboard shortcuts, rebind keys, add chord bindings, or modify ~/.claude/keybindings.json. Examples: "rebind ctrl+s", "add a chord shortcut", "change the submit key", "customize keybindings".
- simplify: Review changed code for reuse, quality, and efficiency, then fix any issues found.
- fewer-permission-prompts: Scan your transcripts for common read-only Bash and MCP tool calls, then add a prioritized allowlist to project .claude/settings.json to reduce permission prompts.
- loop: Run a prompt or slash command on a recurring interval (e.g. /loop 5m /foo). Omit the interval to let the model self-pace. - When the user wants to set up a recurring task, poll for status, or run something repeatedly on an interval (e.g. "check the deploy every 5 minutes", "keep running /babysit-prs"). Do NOT invoke for one-off tasks.
- claude-api: Build, debug, and optimize Claude API / Anthropic SDK apps. Apps built with this skill should include prompt caching. Also handles migrating existing Claude API code between Claude model versions (4.5 → 4.6, 4.6 → 4.7, retired-model replacements).
TRIGGER when: code imports `anthropic`/`@anthropic-ai/sdk`; user asks for the Claude API, Anthropic SDK, or Managed Agents; user adds/modifies/tunes a Claude feature (caching, thinking, compaction, tool use, batch, files, citations, memory) or model (Opus/Sonnet/Haiku) in a file; questions about prompt caching / cache hit rate in an Anthropic SDK project.
SKIP: file imports `openai`/other-provider SDK, filename like `*-openai.py`/`*-generic.py`, provider-neutral code, general programming/ML.
- init: Initialize a new CLAUDE.md file with codebase documentation
- review: Review a pull request
- security-review: Complete a security review of the pending changes on the current branch

type: attachment


type: message

role: assistant

type: thinking

thinking: The user is asking me to introduce myself in Chinese, explain my specialties, and provide a React + TypeScript example code. Let me respond accordingly.

service_tier: standard

speed: standard

type: assistant


type: text

text:
我是 Claude，是 Anthropic 开发的 AI 助手。作为前端开发者，我专精于现代 Web 技术栈。

**我的专长包括：**
- React / Vue / Angular 框架
- TypeScript 类型系统
- 状态管理（Redux、Zustand、Context API）
- CSS 体系 / Tailwind / styled-components
- 前端性能优化
- 微前端架构
- 构建工具（Vite、Webpack）

**React + TypeScript 示例代码：**

```tsx
import { useState, useCallback } from 'react'

interface User {
  id: number
  name: string
  email: string
}

interface UserCardProps {
  user: User
  onDelete: (id: number) => void
}

function UserCard({ user, onDelete }: UserCardProps) {
  return (
    <div className="card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <button onClick={() => onDelete(user.id)}>删除</button>
    </div>
  )
}

function UserList() {
  const [users, setUsers] = useState<User[]>([
    { id: 1, name: '张三', email: 'zhangsan@example.com' },
    { id: 2, name: '李四', email: 'lisi@example.com' },
  ])

  const handleDelete = useCallback((id: number) => {
    setUsers(prev => prev.filter(u => u.id !== id))
  }, [])

  return (
    <div>
      <h2>用户列表 ({users.length})</h2>
      {users.map(user => (
        <UserCard key={user.id} user={user} onDelete={handleDelete} />
      ))}
    </div>
  )
}

export default UserList
```

这段代码展示了：
- **interface 定义类型** — `User` 和 `UserCardProps`
- **useState 泛型** — `useState<User[]>` 确定数组元素类型
- **useCallback** — 稳定函数引用，避免子组件不必要渲染
- **FC 类型推断** — TypeScript 自动推断 `UserCard` 的 props 类型


type: last-prompt

lastPrompt: 你是前端开发者。用中文回答：你是谁？你的专长是什么？给出一个 React + TypeScript 示例代码。