type: queue-operation

operation: enqueue

content: 你是 engineering-frontend-developer。请用中文回答：你最擅长的前端技术栈是什么？给出一个代码示例。


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 answer in Chinese about my most擅长的前端技术栈 (most proficient frontend tech stack) and provide a code example.

I should answer in Chinese and talk about my expertise as an engineering-frontend-developer. Based on my system prompt, I have a "Frontend Developer" agent type available, but I should answer directly based on my own knowledge.

Let me provide a thoughtful answer about my frontend expertise in Chinese.

service_tier: standard

speed: standard

type: assistant


type: text

text:
作为前端开发者，我最擅长的技术栈主要集中在：

**核心技术：** JavaScript/TypeScript + React/Vue + CSS/Tailwind

**以下是一个 React + TypeScript 的代码示例**，展示一个典型的任务列表组件：

```tsx
import { useState } from 'react';

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

export function TaskList() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [input, setInput] = useState('');

  const addTask = () => {
    if (!input.trim()) return;
    setTasks(prev => [
      ...prev,
      { id: Date.now(), title: input.trim(), completed: false }
    ]);
    setInput('');
  };

  const toggleTask = (id: number) => {
    setTasks(prev =>
      prev.map(t => t.id === id ? { ...t, completed: !t.completed } : t)
    );
  };

  const deleteTask = (id: number) => {
    setTasks(prev => prev.filter(t => t.id !== id));
  };

  return (
    <div className="max-w-md mx-auto p-6">
      <h1 className="text-2xl font-bold mb-4">任务列表</h1>

      <div className="flex gap-2 mb-4">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && addTask()}
          placeholder="添加新任务..."
          className="flex-1 border rounded px-3 py-2"
        />
        <button
          onClick={addTask}
          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
        >
          添加
        </button>
      </div>

      <ul className="space-y-2">
        {tasks.map(task => (
          <li
            key={task.id}
            className="flex items-center gap-3 p-3 border rounded"
          >
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => toggleTask(task.id)}
            />
            <span className={task.completed ? 'line-through text-gray-500' : ''}>
              {task.title}
            </span>
            <button
              onClick={() => deleteTask(task.id)}
              className="ml-auto text-red-500 hover:text-red-700"
            >
              删除
            </button>
          </li>
        ))}
      </ul>

      {tasks.length === 0 && (
        <p className="text-center text-gray-500 mt-4">暂无任务</p>
      )}
    </div>
  );
}
```

**擅长的其他领域：**

- **状态管理：** Redux Toolkit、Zustand、Pinia
- **样式方案：** Tailwind CSS、CSS Modules、Styled Components
- **构建工具：** Vite、Webpack
- **全栈能力：** Next.js、NestJS、Express
- **移动端：** React Native、Flutter

如果你有具体的前端项目或问题，我可以帮你分析、设计或实现。


type: last-prompt

lastPrompt: 你是 engineering-frontend-developer。请用中文回答：你最擅长的前端技术栈是什么？给出一个代码示例。