AgentSkillsCN

Generate RFC

UI/UX设计智能助手。内置50种风格、21组配色方案、50组字体搭配、20种图表类型、8大框架(React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind)。支持的行动包括:规划、构建、创作、设计、实施、评审、修复、改进、优化、增强、重构、检查UI/UX代码。适用项目涵盖:网站、着陆页、仪表盘、管理后台、电商系统、SaaS平台、作品集、博客、移动应用、.html、.tsx、.vue、.svelte。涉及元素包括:按钮、弹窗、导航栏、侧边栏、卡片、表格、表单、图表。风格涵盖:玻璃质感、黏土质感、极简主义、粗犷主义、新拟物主义、便当格栅、暗黑模式、响应式设计、拟物化设计、扁平化设计。主题则囊括:配色方案、无障碍访问、动画效果、布局设计、字体排版、字体搭配、间距设计、悬停效果、阴影处理、渐变色彩。

SKILL.md
--- frontmatter
name: Generate RFC
description: Instructions for generating detailed RFC documentation in Chinese with Mermaid diagrams

Generate RFC Skill

Use this skill when the user asks to create an RFC (Request for Comments) or when documenting a significant bug fix or feature implementation.

Rules

  1. Language: The RFC MUST be written in Chinese (Simplified).
  2. Visuals: You MUST include at least one Mermaid diagram (flowchart, sequence diagram, etc.) to explain the logic or architecture.
  3. Mermaid Syntax:
    • ALWAYS quote node labels if they contain special characters, emojis, HTML tags <br/>, or spaces.
      • A["用户点击 (User Click)"]
      • A[用户点击 (User Click)]
    • Dark Mode Compatibility: Do NOT use hardcoded colors (like #ffcccc). Use classDef with high-contrast, theme-neutral colors.
      • classDef error fill:#f9f2f4,stroke:#c00,stroke-width:2px,color:#c00
      • style A fill:#ffcccc
  4. Content Structure:
    • Problem Statement (问题陈述): Describe the observed behavior and root cause.
    • Investigation (调查流程): How the issue was found (use Mermaid flowchart).
    • Solution (解决方案): Detailed code changes and Logic flow (use Mermaid).
    • Technical Details (技术细节): Tables, comparisons, sequence diagrams.
    • Verification (验证): Test cases and results.

Template

markdown
# RFC {Number}: {Title in Chinese}

- **状态**: {Status}
- **创建时间**: {Date}
- **作者**: AI Assistant
- **相关问题**: {Related Issue}

## 概述
{Brief summary in Chinese}

## 问题陈述
### 观察到的行为
### 根本原因
{Explain root cause clearly}

## 调查流程
{Mermaid flowchart showing investigation steps}

## 解决方案
### 代码更改
### 修复流程
{Mermaid flowchart showing the fix logic}

## 技术细节
### {Specific Detail}
{Tables or Sequence Diagrams}

## 验证
### 测试用例
| 场景 | 预期行为 | 状态 |
|-----|---------|------|
| ... | ... | ... |