SuperAPI AI 工具集

Skill 广场

找到适合任务的 Agent Skill,阅读介绍并复制安装命令。

更新于 10-29 00:09

前端与建站

11,266 个结果

frontend-design

该技能用于指导创建独特、达到生产级水准的前端界面,避免常见的“AI 味”审美。用户提供前端需求(组件、页面、应用或界面)及其用途、受众或技术约束后,技能先引导进行设计思考:明确要解决的问题与使用者、选定鲜明甚至极端的美学基调(如极简、复古未来、奢华、编辑杂志风、粗野主义、工业实用等)、梳理框架与性能无障碍等技术约束,并确定让作品令人难忘的差异化点。随后实现可运行的代码(HTML/CSS/JS、React、Vue 等),要求功能可用、视觉醒目、风格统一且细节讲究。美学指南涵盖:排版选用独特字体并搭配展示字体与正文字体、避免 Arial/Inter 等通用字体;用 CSS 变量统一色彩主题,主色配锐利点缀;用动画与微交互营造效果,HTML 优先纯 CSS,React 可用 Motion,重视页面加载的编排式揭示;空间构成上采用非对称、重叠、斜向、打破网格的布局;背景与视觉细节使用渐变网格、噪点纹理、几何图案、层叠透明、戏剧化阴影、装饰边框、自定义光标等营造氛围。要求避免通用 AI 审美(如常见字体、紫渐变白底、可预测布局),根据语境做多元变化,并让实现复杂度与美学愿景匹配。

前端与建站4 次安装

vercel-composition-patterns

vercel-composition-patterns 是一套面向 React 组件设计的组合模式(Composition Patterns)指南,目标是帮助开发者构建灵活、易维护的 React 组件。它的核心主张是:不要通过不断添加 boolean 类型的 prop 来定制组件行为,而应改用组合式的手段,例如复合组件(compound components)、状态提升(lifting state)以及内部结构组合(composing internals)。这些模式在代码规模增长时,能让人和 AI 代理都更容易理解和修改代码库。该技能适用于多种场景:重构带有大量 boolean prop 的组件、构建可复用的组件库、设计灵活的组件 API、审查组件架构,以及处理复合组件或 context provider 相关的工作。规则按优先级分为四个类别:组件架构(HIGH)、状态管理(MEDIUM)、实现模式(MEDIUM)和 React 19 API(MEDIUM)。每条规则都有独立文件,包含规则重要性的简要说明、错误代码示例与解释、正确代码示例与解释,以及额外背景和参考。React 19 部分仅适用于 React 19 及以上版本,若使用 React 18 或更早版本可跳过。完整编译文档见 AGENTS.md。

前端与建站4 次安装

implementing-a11y

该技能是编写 UI 组件和页面时的无障碍实现入口,自身只提供流程,不承载无障碍知识。使用时会依据 a11y-knowledge 中按组件或按准则索引找到适用的成功准则,阅读其中的「Judgment lines」与「When building」,再动手实现,并在完成后进行自检、记录需要目视验证的项目。它适合在开发对话、弹窗、按钮等界面元素时使用;如需对已写代码报告问题应使用 reviewing-a11y,如需逐条准则的 Pass/Fail 正式审计应使用 auditing-wcag。知识库通过相对路径 ../a11y-knowledge/ 引用,作为插件安装时可解析,若以符号链接方式单独安装各技能目录,也需一并链接 a11y-knowledge。

前端与建站4 次安装

material-ui-nextjs

该技能用于把 Material UI 与 Next.js 的 App Router 和 Pages Router 正确集成,基于 @mui/material-nextjs。内容涵盖服务端渲染与流式渲染下的缓存 Provider 配置、Emotion 缓存、next/font 字体接入,以及与 Tailwind 或 CSS Modules 共用的 CSS layers(enableCssLayer)。还涉及样式丢失或顺序错误、样式被注入到 body 而非 head 的排查,Button 与 Link 结合组件的用法,以及 useSearchParams 驱动的 URL 状态与 Suspense 边界处理。SKILL.md 为入口,AGENTS.md 为完整指南,reference.md 列出导入路径与 Provider 形态。

前端与建站4 次安装