技能库 / 开发工具 / 前端组件生成 R18
全部分类 开发工具 通用 语言翻译 文档生成 创意设计 商业管理 学习教育 效率提升 数据分析 技术运维 写作办公 研究检索 自动化集成

前端组件生成 R18

根据设计稿生成可复用前端组件，含状态、样式与可访问性。

v1.0.0 开心鸟 已认证
作者 / 来源

local

AI Agent MCP 工程化
登录后收藏 登录后加入合集

安装方式

CLI 安装（推荐）

claw install custom-r9-frontend-component-gen-R18

需要安装 CLAW CLI

手动下载安装

下载 ZIP 后解压到技能目录即可安装。若在桌面客户端 WebView中直接下载出现异常，本站会改为提示页 + 原始链接，请按页内说明操作。

下载 ZIP (custom-r9-frontend-component-gen-R18-v1.0.0.zip)

触发指令

/frontend-component-gen

跨平台安装指引

该技能声明兼容以下 3 个平台，将 ZIP 解压到对应目录即可被识别。

支持矩阵
Claude Code Coding Agent
macOS / Linux：~/.claude/skills/
Windows：%USERPROFILE%\.claude\skills\
unzip custom-r9-frontend-component-gen-R18-v1.0.0.zip -d ~/.claude/skills/
Cursor Coding Agent
macOS / Linux：~/.cursor/skills/
Windows：%USERPROFILE%\.cursor\skills\
unzip custom-r9-frontend-component-gen-R18-v1.0.0.zip -d ~/.cursor/skills/
GitHub Copilot Coding Agent
macOS / Linux：~/.copilot/skills/
Windows：%USERPROFILE%\.copilot\skills\
unzip custom-r9-frontend-component-gen-R18-v1.0.0.zip -d ~/.copilot/skills/
目录不存在时请先 mkdir -p 创建；启用 Skill 后请重启对应 Agent 让配置生效。

使用指南

前端组件生成

概述

根据设计稿生成可复用前端组件，含状态、样式与可访问性。

使用方法

运行命令 /frontend-component-gen 即可启动该技能。

功能特点

  • 结构化输出，可直接落地
  • 自动检查关键约束
  • 支持迭代与回滚