@rotifer/playground 0.5.0-alpha.2 → 0.7.1

package/genes/academic-writer/SKILL.md

@@ -0,0 +1,274 @@
+---
+name: academic-writer
+description: Write academic papers, research reports, and scholarly content. Follow academic conventions, citation styles, and formal writing standards. Use when writing thesis, dissertations, journal articles, or research documents.
+---
+
+# Academic Writer (学术写作师)
+
+**Goal**: 撰写符合学术规范的论文、研究报告和学术内容。
+
+---
+
+## 1. 论文结构
+
+### 标准学术论文结构
+
+```markdown
+1. 标题 (Title)
+   - 简洁、准确、信息丰富
+   - 包含关键词
+   - 避免缩写（首次使用）
+
+2. 摘要 (Abstract)
+   - 200-300 字（中文）/ 150-250 词（英文）
+   - 包含：背景、目的、方法、结果、结论
+   - 独立成段，不分小节
+
+3. 关键词 (Keywords)
+   - 3-5 个
+   - 涵盖研究主题
+
+4. 引言 (Introduction)
+   - 研究背景
+   - 文献回顾
+   - 研究问题/假设
+   - 研究目的
+
+5. 方法 (Methodology)
+   - 研究设计
+   - 样本/数据
+   - 分析方法
+   - 可重复性
+
+6. 结果 (Results)
+   - 客观呈现数据
+   - 图表辅助
+   - 统计显著性
+
+7. 讨论 (Discussion)
+   - 结果解释
+   - 与现有研究比较
+   - 局限性
+   - 未来研究方向
+
+8. 结论 (Conclusion)
+   - 主要发现总结
+   - 研究贡献
+   - 实践意义
+
+9. 参考文献 (References)
+   - 按引用格式排列
+```
+
+---
+
+## 2. 引用格式
+
+### APA 格式 (第7版)
+
+```markdown
+## 期刊文章
+Author, A. A., & Author, B. B. (Year). Title of article. Title of Periodical, volume(issue), page–page. https://doi.org/xxxxx
+
+## 书籍
+Author, A. A. (Year). Title of work: Capital letter also for subtitle. Publisher.
+
+## 网页
+Author, A. A. (Year, Month Day). Title of page. Site Name. URL
+
+## 文内引用
+- 单作者: (Smith, 2020)
+- 双作者: (Smith & Jones, 2020)
+- 三作者及以上: (Smith et al., 2020)
+```
+
+### MLA 格式 (第9版)
+
+```markdown
+## 期刊文章
+Last name, First name. "Title of Article." Journal Name, vol. #, no. #, Year, pp. #-#.
+
+## 书籍
+Last name, First name. Title of Book. Publisher, Year.
+
+## 文内引用
+- (Smith 45)
+- (Smith and Jones 45)
+```
+
+### GB/T 7714 格式
+
+```markdown
+## 期刊文章
+[序号] 作者. 题名[J]. 刊名, 年, 卷(期): 起止页码.
+
+## 书籍
+[序号] 作者. 书名[M]. 出版地: 出版社, 年份.
+
+## 示例
+[1] 张三, 李四. 人工智能研究进展[J]. 计算机学报, 2024, 47(3): 512-528.
+```
+
+---
+
+## 3. 学术语言规范
+
+### 应该使用
+
+| 场景 | 推荐表达 |
+|------|----------|
+| 陈述发现 | 研究表明、结果显示、数据揭示 |
+| 表达观点 | 可以认为、本研究认为 |
+| 推测 | 可能、或许、似乎表明 |
+| 比较 | 相比于、与...相比、区别于 |
+| 结论 | 综上所述、基于上述分析 |
+
+### 应该避免
+
+```markdown
+❌ 我觉得、我认为（主观）
+❌ 很多、非常（模糊）
+❌ 口语化表达
+❌ 绝对化表述（一定、肯定）
+❌ 感叹句、疑问句过多
+```
+
+### 学术常用句型
+
+```markdown
+## 引言
+- 近年来，...领域受到广泛关注
+- 然而，现有研究存在...局限性
+- 本研究旨在...
+
+## 方法
+- 本研究采用...方法
+- 数据来源于...
+- 研究对象包括...
+
+## 结果
+- 结果表明...
+- 如表/图X所示...
+- 数据显示...
+
+## 讨论
+- 这一发现与...一致/不一致
+- 可能的解释是...
+- 值得注意的是...
+
+## 结论
+- 综上所述，本研究发现...
+- 本研究的贡献在于...
+- 未来研究可以...
+```
+
+---
+
+## 4. 图表规范
+
+### 表格格式
+
+```markdown
+表 X. 表格标题（位于表格上方）
+
+| 变量 | 均值 | 标准差 | p值 |
+|------|------|--------|-----|
+| A | 3.45 | 0.82 | <.001 |
+| B | 2.89 | 0.91 | .023 |
+
+注：* p < .05, ** p < .01, *** p < .001
+```
+
+### 图片格式
+
+```markdown
+[图片]
+
+图 X. 图片标题（位于图片下方）
+注：数据来源于...；N = 样本量
+```
+
+---
+
+## 5. 摘要写作模板
+
+### 中文摘要
+
+```markdown
+[背景] 随着...的发展，...问题日益突出。
+[目的] 本研究旨在探讨/分析/验证...
+[方法] 采用...方法，对...进行研究。
+[结果] 研究发现：（1）...；（2）...；（3）...
+[结论] 研究表明...，对...具有重要意义。
+
+关键词：关键词1；关键词2；关键词3
+```
+
+### 英文摘要
+
+```markdown
+[Background] With the development of..., ... has become increasingly important.
+[Purpose] This study aims to investigate/examine/explore...
+[Methods] Using ... approach, we analyzed...
+[Results] The findings indicate that: (1)...; (2)...; (3)...
+[Conclusion] The study suggests that..., which has implications for...
+
+Keywords: keyword1; keyword2; keyword3
+```
+
+---
+
+## 6. 检查清单
+
+```markdown
+## Academic Writing Checklist
+
+### 结构
+- [ ] 标题准确反映内容
+- [ ] 摘要包含所有要素
+- [ ] 各章节结构完整
+- [ ] 逻辑流畅
+
+### 引用
+- [ ] 引用格式统一
+- [ ] 所有引用都有出处
+- [ ] 参考文献列表完整
+- [ ] 无格式错误
+
+### 语言
+- [ ] 学术语气
+- [ ] 客观表述
+- [ ] 无口语化
+- [ ] 术语准确
+
+### 规范
+- [ ] 图表编号正确
+- [ ] 图表标题完整
+- [ ] 数据来源标注
+- [ ] 页码格式正确
+```
+
+---
+
+## Quick Reference
+
+### 学术写作原则
+
+```markdown
+1. 客观性 - 避免主观判断
+2. 准确性 - 数据和引用准确
+3. 简洁性 - 避免冗余表达
+4. 逻辑性 - 论证严密
+5. 规范性 - 遵循格式要求
+```
+
+### 论文各部分字数参考（中文）
+
+| 部分 | 占比 | 万字论文 |
+|------|------|----------|
+| 摘要 | 2-3% | 200-300字 |
+| 引言 | 10-15% | 1000-1500字 |
+| 方法 | 15-20% | 1500-2000字 |
+| 结果 | 20-25% | 2000-2500字 |
+| 讨论 | 25-30% | 2500-3000字 |
+| 结论 | 5-10% | 500-1000字 |

package/genes/academic-writer/phenotype.json

@@ -0,0 +1,28 @@
+{
+  "domain": "content.academic",
+  "description": "Write academic papers, research reports, and scholarly content. Follow academic conventions, citation styles, and formal writing standards. Use when writing thesis, dissertations, journal articles, or research documents.",
+  "inputSchema": {
+    "type": "object",
+    "properties": {
+      "prompt": {
+        "type": "string"
+      }
+    },
+    "required": []
+  },
+  "outputSchema": {
+    "type": "object",
+    "properties": {
+      "result": {
+        "type": "string"
+      }
+    }
+  },
+  "dependencies": [],
+  "version": "0.1.0",
+  "author": "rotifer-team",
+  "createdAt": 1771939390540,
+  "fidelity": "Wrapped",
+  "transparency": "Open",
+  "source": "skill"
+}

package/genes/ai-components/.cloud-manifest.json

@@ -0,0 +1,6 @@
+{
+  "cloud_id": "4c9836a9-2244-4505-b221-b45d4b47319b",
+  "owner": "Rotifer Protocol",
+  "version": "0.1.0",
+  "published_at": "2026-03-17T14:11:46.608Z"
+}

package/genes/ai-components/.gene-manifest.json

@@ -0,0 +1,8 @@
+{
+  "geneId": "1c2b20e637c393486e300fcc73052ecc7dd16f0b09e2b2a42b06d5418ee8a785",
+  "name": "ai-components",
+  "domain": "ui.ai",
+  "fidelity": "Wrapped",
+  "wrappedAt": "2026-02-24T13:23:05.955Z",
+  "fromSkill": "../.cursor/skills/ai-components/SKILL.md"
+}

package/genes/ai-components/SKILL.md

@@ -0,0 +1,381 @@
+---
+name: ai-components
+description: AI 界面专项组件库，包含 Streaming 文本、聊天气泡、思考指示器、推理展示、Token 用量等。专为 AI 对话应用设计。当用户提到"聊天""Streaming""AI 界面""对话""打字效果""思考中"时使用。
+---
+
+# AI Components (AI 界面组件库)
+
+**定位**: AI 对话应用的专项 UI 组件。
+
+**核心目标**: 打造流畅、专业的 AI 交互体验。
+
+**设计规范**: 遵循 [design-tokens](../design-tokens/SKILL.md) 和 [ux-patterns](../ux-patterns/SKILL.md)。
+
+---
+
+## Streaming Text (打字机效果)
+
+### 基础流式文本
+
+```tsx
+function StreamingText({ content }: { content: string }) {
+  return (
+    <p className="whitespace-pre-wrap">
+      {content}
+      <span className="inline-block w-2 h-4 ml-1 bg-current animate-pulse" />
+    </p>
+  )
+}
+```
+
+### 带 Markdown 渲染
+
+```tsx
+import ReactMarkdown from 'react-markdown'
+
+function AIMessage({ content, isStreaming }: Props) {
+  return (
+    <div className="prose prose-sm max-w-none">
+      <ReactMarkdown>{content}</ReactMarkdown>
+      {isStreaming && (
+        <span className="inline-block w-2 h-4 bg-gray-400 animate-pulse" />
+      )}
+    </div>
+  )
+}
+```
+
+---
+
+## Chat Bubble Layout (聊天气泡)
+
+```tsx
+function ChatMessage({ role, content, isStreaming }: Message) {
+  const isUser = role === 'user'
+  
+  return (
+    <div className={cn("flex gap-3 p-4", isUser && "flex-row-reverse")}>
+      {/* Avatar */}
+      <div className={cn(
+        "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
+        isUser ? "bg-primary-500" : "bg-gray-100"
+      )}>
+        {isUser ? <UserIcon /> : <BotIcon />}
+      </div>
+      
+      {/* Content */}
+      <div className={cn(
+        "max-w-[80%] rounded-2xl px-4 py-2",
+        isUser 
+          ? "bg-primary-500 text-white rounded-br-md" 
+          : "bg-gray-100 text-gray-900 rounded-bl-md"
+      )}>
+        <AIMessage content={content} isStreaming={isStreaming} />
+      </div>
+    </div>
+  )
+}
+```
+
+---
+
+## Thinking Indicator (思考指示器)
+
+### 三点跳动
+
+```tsx
+function ThinkingIndicator() {
+  return (
+    <div className="flex items-center gap-2 text-gray-500 text-sm">
+      <div className="flex gap-1">
+        <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce [animation-delay:-0.3s]" />
+        <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce [animation-delay:-0.15s]" />
+        <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" />
+      </div>
+      <span>思考中...</span>
+    </div>
+  )
+}
+```
+
+### 旋转加载
+
+```tsx
+function ThinkingSpinner() {
+  return (
+    <div className="flex items-center gap-2 text-gray-500 text-sm">
+      <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
+      <span>正在分析...</span>
+    </div>
+  )
+}
+```
+
+---
+
+## Reasoning Block (推理展示)
+
+```tsx
+function ReasoningBlock({ reasoning, isExpanded, onToggle }: Props) {
+  return (
+    <div className="border border-gray-200 rounded-xl overflow-hidden">
+      <button 
+        onClick={onToggle}
+        className="w-full flex items-center justify-between p-3 bg-gray-50 hover:bg-gray-100 transition-colors"
+      >
+        <span className="text-sm text-gray-600 flex items-center gap-2">
+          <BrainIcon className="w-4 h-4" />
+          推理过程
+        </span>
+        <ChevronIcon className={cn(
+          "w-4 h-4 transition-transform duration-200",
+          isExpanded && "rotate-180"
+        )} />
+      </button>
+      
+      <div className={cn(
+        "overflow-hidden transition-all duration-300",
+        isExpanded ? "max-h-96" : "max-h-0"
+      )}>
+        <pre className="p-3 text-xs text-gray-600 bg-gray-50 overflow-auto">
+          {reasoning}
+        </pre>
+      </div>
+    </div>
+  )
+}
+```
+
+---
+
+## Token Usage Display (Token 用量)
+
+```tsx
+function TokenUsage({ usage }: { usage: { total: number; limit: number } }) {
+  const percentage = (usage.total / usage.limit) * 100
+  
+  return (
+    <div className="text-xs text-gray-500 space-y-1">
+      <div className="flex justify-between">
+        <span>Token 用量</span>
+        <span>{usage.total.toLocaleString()} / {usage.limit.toLocaleString()}</span>
+      </div>
+      <div className="h-1.5 bg-gray-200 rounded-full overflow-hidden">
+        <div 
+          className={cn(
+            "h-full transition-all duration-300",
+            percentage > 90 ? "bg-error" : 
+            percentage > 70 ? "bg-warning" : "bg-success"
+          )}
+          style={{ width: `${Math.min(percentage, 100)}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+```
+
+---
+
+## AI Error Card (错误提示)
+
+### 错误消息配置
+
+```tsx
+const AI_ERROR_MESSAGES = {
+  RATE_LIMITED: { 
+    title: "请求过于频繁", 
+    description: "请稍后再试", 
+    action: "等待后重试" 
+  },
+  TOKEN_LIMIT: { 
+    title: "对话过长", 
+    description: "请开始新对话或清理历史记录", 
+    action: "开始新对话" 
+  },
+  TIMEOUT: { 
+    title: "响应超时", 
+    description: "AI 正在思考复杂问题，请重试", 
+    action: "重新发送" 
+  },
+  NETWORK: {
+    title: "网络连接失败",
+    description: "请检查网络后重试",
+    action: "重试"
+  }
+}
+```
+
+### 错误卡片组件
+
+```tsx
+function AIErrorCard({ error, onRetry }: Props) {
+  const msg = AI_ERROR_MESSAGES[error.code]
+  return (
+    <div className="rounded-xl border border-warning/30 bg-warning/10 p-4">
+      <h4 className="font-medium text-warning">{msg.title}</h4>
+      <p className="text-sm text-warning/80 mt-1">{msg.description}</p>
+      <button onClick={onRetry} className="mt-3 text-sm text-warning hover:underline">
+        {msg.action}
+      </button>
+    </div>
+  )
+}
+```
+
+---
+
+## Chat Input (聊天输入框)
+
+```tsx
+function ChatInput({ onSend, isLoading }: Props) {
+  const [message, setMessage] = useState('')
+  
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    if (message.trim() && !isLoading) {
+      onSend(message)
+      setMessage('')
+    }
+  }
+  
+  return (
+    <form onSubmit={handleSubmit} className="relative">
+      <textarea
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        placeholder="输入消息..."
+        className="w-full px-4 py-3 pr-12 bg-gray-50 border border-gray-200 rounded-2xl
+                   text-sm resize-none
+                   focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500
+                   transition-all duration-200"
+        rows={1}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault()
+            handleSubmit(e)
+          }
+        }}
+      />
+      <button
+        type="submit"
+        disabled={!message.trim() || isLoading}
+        className="absolute right-2 bottom-2 p-2 rounded-xl
+                   bg-primary-500 text-white
+                   hover:bg-primary-600
+                   disabled:opacity-50 disabled:cursor-not-allowed
+                   transition-all duration-200"
+      >
+        {isLoading ? (
+          <svg className="w-5 h-5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+        ) : (
+          <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
+          </svg>
+        )}
+      </button>
+    </form>
+  )
+}
+```
+
+---
+
+## Stop Generation Button (停止生成)
+
+```tsx
+function StopButton({ onStop }: { onStop: () => void }) {
+  return (
+    <button
+      onClick={onStop}
+      className="px-4 py-2 flex items-center gap-2
+                 bg-gray-100 text-gray-700 rounded-xl
+                 hover:bg-gray-200 transition-colors"
+    >
+      <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+        <rect x="6" y="6" width="12" height="12" rx="2" />
+      </svg>
+      <span className="text-sm font-medium">停止生成</span>
+    </button>
+  )
+}
+```
+
+---
+
+## AI 场景文案规范
+
+| 场景 | 文案 |
+|------|------|
+| AI 思考中 | "思考中..." / "正在分析..." |
+| 生成完成 | "回复已生成" |
+| Token 超限 | "对话过长，请开始新对话" |
+| Rate limit | "请求过于频繁，请稍后再试" |
+| 停止生成 | "停止生成" |
+| 重新生成 | "重新生成" |
+| 复制回复 | "复制" / "已复制" |
+| 点赞/踩 | "有帮助" / "没帮助" |
+
+---
+
+## 推荐库
+
+| 用途 | 推荐库 |
+|------|--------|
+| Markdown 渲染 | `react-markdown` |
+| AI SDK | `ai` (Vercel AI SDK) |
+| 代码高亮 | `react-syntax-highlighter` |
+| 动画 | `framer-motion` |
+| Toast | `sonner` |
+
+---
+
+## 完整聊天界面示例
+
+```tsx
+function ChatInterface() {
+  const { messages, isLoading, send, stop } = useChat()
+  
+  return (
+    <div className="flex flex-col h-screen">
+      {/* 消息列表 */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {messages.map((msg) => (
+          <ChatMessage 
+            key={msg.id} 
+            role={msg.role} 
+            content={msg.content}
+            isStreaming={msg.isStreaming}
+          />
+        ))}
+        
+        {isLoading && !messages[messages.length - 1]?.isStreaming && (
+          <ThinkingIndicator />
+        )}
+      </div>
+      
+      {/* 输入区 */}
+      <div className="p-4 border-t border-gray-100">
+        {isLoading ? (
+          <StopButton onStop={stop} />
+        ) : (
+          <ChatInput onSend={send} isLoading={isLoading} />
+        )}
+      </div>
+    </div>
+  )
+}
+```
+
+---
+
+## 相关技能
+
+- **design-tokens**: 设计令牌规范
+- **ux-patterns**: 交互模式和文案规范
+- **web3-components**: Web3 专项组件
+- **uiux-designer**: 统一调度入口