前端界面设计技能。创建独特、有辨识度的生产级前端界面。 当用户要求设计网页、创建 UI 组件、进行前端开发时触发。 强调大胆的美学方向、独特的排版选择、精细的视觉细节和动效。
前端界面设计技能。创建独特、有辨识度的生产级前端界面。 当用户要求设计网页、创建 UI 组件、进行前端开发时触发。 强调大胆的美学方向、独特的排版选择、精细的视觉细节和动效。
npx skills add https://github.com/photonics-dhl/Scholar-s-tea --skill frontend-designこのコマンドをClaude Codeにコピー＆ペーストしてスキルをインストール
End-to-end academic paper writing skill covering proposal, structure, writing, formatting, and quality review. Targets Nature, Science, IEEE, NeurIPS, ICML, ICLR, AAAI, ACL, COLM. Emphasizes narrative-driven writing, citation discipline, and iterative refinement.
文档处理技能集。用于处理 Word (docx)、PDF、PowerPoint (pptx)、Excel (xlsx) 等办公文档。 当用户需要创建、编辑、分析文档时触发。
热门讨论聚合技能。研究任意话题在 Reddit、X、YouTube、HN、Polymarket、GitHub 等平台上的讨论， 并按真实互动数据（点赞、评论、Polymarket 赔率）合成摘要。 当用户询问"最近的趋势"、"热门讨论"、"某话题的舆论"时触发。
项目错误记录与经验积累技能。当遇到项目错误、需要修复问题、或进行配置修改时，自动记录错误原因和解决方案到项目专属记忆文件，而非根目录 memory。触发场景：项目报错、配置失败、部署问题、SDK集成问题、环境问题。
每次对话和任务开始前必须首先阅读此技能。融合 superpowers 工作流框架与 Karpathy 编码准则，确保在采取任何行动之前正确调用相关技能并遵循高质量编码原则。
Delegate coding tasks to Blackbox AI CLI agent. Multi-model agent with built-in judge that runs tasks through multiple LLMs and picks the best result. Requires the blackbox CLI and a Blackbox AI API key.
| name | frontend-design |
| description | 前端界面设计技能。创建独特、有辨识度的生产级前端界面。 当用户要求设计网页、创建 UI 组件、进行前端开发时触发。 强调大胆的美学方向、独特的排版选择、精细的视觉细节和动效。 |
| tags | ["frontend","ui","design","react","tailwind"] |
创建独特、生产级的前端界面。
不要泛泛的设计。选择一个明确的美学方向：
| 方向 | 特点 |
|---|---|
| Midnight Dark | 深色背景 + 高对比度强调色 |
| Glass Morphism | 毛玻璃效果 + 渐变 |
| Brutalist | 粗犷的排版 + 原始的色彩 |
| Ethereal Light | 柔和渐变 + 精致动效 |
避免 Generic Fonts。推荐：
标题字体:
正文字体:
/* 入场动画 */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 悬停效果 */
.hover-lift {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
<div className="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-white to-gray-100 p-6 transition-all duration-300 hover:shadow-2xl hover:shadow-black/5">
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
{/* Content */}
</div>
<button className="relative overflow-hidden rounded-full bg-black px-6 py-3 text-white transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-black/20 active:scale-95">
<span className="relative z-10">Click me</span>
</button>
| 指标 | 目标 |
|---|---|
| Lighthouse | ≥ 90 |
| FCP | < 1.5s |
| LCP | < 2.5s |
| TTI | < 3s |