how-to-write-component 精选

Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data flow, effects, or interaction ownership. Do not use for review-only requests, test-only work, copy-only edits, or styling-only changes.

编码 Claude Code Codex CLI MCP 客户端许可未声明 16 万

在 GitHub 打开

安装方式

cp -r .agents/skills/how-to-write-component ~/.claude/skills/how-to-write-component

把该 skill 目录放进客户端 skills 目录。不同客户端的目录可能不同，Claude Code 默认是 ~/.claude/skills/

整仓一次性获取：git clone --depth 1 https://github.com/langgenius/dify.git

依赖与权限

无需 API Key
无需联网
无外部命令依赖
以上为按正文与 frontmatter 自动推断的信号，仅供参考；安装前建议先阅读原文。

触发场景

implementing

摘要与原文

本站未内联该 skill 的正文（许可不在允许再分发的白名单内，或作者未声明许可）。下面是本站撰写的摘要，完整内容请查看原文。

Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data flow, effects, or interaction ownership. Do not use for review-only requests, test-only work, copy-only edits, or styling-only changes.

查看原文（GitHub）

质量与来源

所属仓库: langgenius/dify
仓库星标: 16 万
最近更新: 今天
采集时间: 今天
commit: 0838e2511da0
内容指纹: sha256:ae2fd9a617cfc6a
文件路径: .agents/skills/how-to-write-component/SKILL.md

同仓库其它 Skill

查看全部 7 个

backend-code-review

Use only when the user explicitly requests a review or audit of backend code under `api/`. Supports pending-change, file-focused, and pasted-diff reviews. Do not use for implementation-only requests, diagnosis without review intent, frontend code, or backend code outside `api/`.

精选 langgenius/dify 16 万原文

Claude CodeCodex CLIMCP 客户端

e2e-cucumber-playwright

Use when writing, changing, or reviewing Cucumber and Playwright tests under `e2e/`, including feature files, step definitions, support code, scenario tags, locators, and assertions. Do not use for Vitest, React Testing Library, backend tests, or generic browser automation outside the E2E suite.

精选 langgenius/dify 16 万原文

Claude CodeCodex CLIMCP 客户端

frontend-code-review

Use only when the user explicitly requests a review or audit of frontend code under `web/` or `packages/dify-ui/`. Supports pending-change, file-focused, and pasted-diff reviews. Do not use for implementation-only requests, diagnosis without review intent, or backend-only code.

精选 langgenius/dify 16 万原文

Claude CodeCodex CLIMCP 客户端

frontend-testing

Use when writing or changing Vitest or React Testing Library tests under `web/` or `packages/dify-ui/`, or when the user explicitly requests frontend test strategy, including evaluation of an existing strategy. Do not use for frontend code-review-only requests, general testability discussion, Python tests, or Cucumber/Playwright E2E.

精选 langgenius/dify 16 万原文

Claude CodeCodex CLIMCP 客户端

e2e-summary-skill

Summarize user input for Agent Builder E2E coverage.

精选 langgenius/dify 16 万原文

Claude CodeCodex CLIMCP 客户端

Base skill for the difyctl CLI: find any command or Dify operation through help and run it as a command. Use when the task involves difyctl or a Dify server from the command line.

精选 langgenius/dify 16 万原文

Claude CodeCodex CLIMCP 客户端

相似 Skill

更多「编码」

Manage Discord channel access — approve pairings, edit allowlists, set DM/group policy. Use when the user asks to pair, approve someone, check who's allowed, or change policy for the Discord channel.

精选 anthropics/claude-plugins-official 3.8 万原文

Claude CodeMCP 客户端

Set up the Discord channel — save the bot token and review access policy. Use when the user pastes a Discord bot token, asks to configure Discord, asks "how do I set this up" or "who can reach me," or wants to check channel status.

精选 anthropics/claude-plugins-official 3.8 万原文

Claude CodeMCP 客户端

Manage iMessage channel access — approve pairings, edit allowlists, set DM/group policy. Use when the user asks to pair, approve someone, check who's allowed, or change policy for the iMessage channel.

精选 anthropics/claude-plugins-official 3.8 万原文

Claude CodeMCP 客户端

Check iMessage channel setup and review access policy. Use when the user asks to configure iMessage, asks "how do I set this up" or "who can reach me," or wants to know why texts aren't reaching the assistant.

精选 anthropics/claude-plugins-official 3.8 万原文

Claude CodeMCP 客户端

Manage Telegram channel access — approve pairings, edit allowlists, set DM/group policy. Use when the user asks to pair, approve someone, check who's allowed, or change policy for the Telegram channel.

精选 anthropics/claude-plugins-official 3.8 万原文

Claude CodeMCP 客户端

Set up the Telegram channel — save the bot token and review access policy. Use when the user pastes a Telegram bot token, asks to configure Telegram, asks "how do I set this up" or "who can reach me," or wants to check channel status.

精选 anthropics/claude-plugins-official 3.8 万原文

Claude CodeMCP 客户端