devjar
Devjar 是一个面向 React 的浏览器端迷你站点构建工具，支持实时预览与静态导出，也可嵌入到现有 React 应用中提供可编辑的实时 iframe 预览。适合落地页、小型多页网站和交互式页面。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 11-01 00:15
前端与建站
11,341 个结果
swiftui-sheet-keyboard-choreography
用于 SwiftUI 中让 sheet 与键盘同步升起的技能：通过 UIKit 预热输入框、延迟交接焦点、强制 .large 高度和冻结底部附件，实现类似 iMessage 撰写框的一体化动画，并让关闭时焦点与 sheet 同时收起。
improve-codebase-architecture
扫描代码库以发现“深化”机会（把浅模块重构为深模块），生成可视化 HTML 报告，再针对所选候选方案进行追问式设计讨论。
scaffold-worker
scaffold-worker 是一个用于从零初始化 Tauri 2 项目的技能，配合 React、TailwindCSS、shadcn/ui 与 i18n 搭建项目骨架，并包含配置、验证与基线测试流程。
iblai-access-tab
用于在 Next.js 应用中添加智能体 Access 访问权限标签页，提供 editor 与 chat 角色的基于角色的访问控制，支持按角色增删用户和用户组并查看现有访问策略。
iblai-api-tab
iblai-api-tab 是 iblai/vibe 提供的技能，用于在 Next.js 应用中添加智能体 API 标签页，管理用于程序化访问智能体的 API 密钥，支持在表格中查看已有密钥（名称、创建时间、过期时间）并执行创建和删除操作。
iblai-datasets-tab
为 Next.js 应用添加智能体 Datasets 标签页的 ibl.ai 技能，提供可搜索、分页的数据集表格，含名称、类型、tokens、间隔、可见性与状态列，并支持上传与删除。
iblai-disclaimers-tab
为 Next.js 应用添加智能体免责声明标签页（Disclaimers tab），包含用户协议卡片与咨询/建议区块，属于智能体设置标签页家族，共用 AgentSettingsProvider。
iblai-embed-tab
iblai-embed-tab 是一个面向 Next.js 应用的功能扩展，用于在智能体设置中新增 Embed（嵌入）标签页，提供嵌入代码、自定义样式与可分享链接的配置界面。
iblai-memory-tab
iblai-memory-tab 是 iblai/vibe 提供的技能，用于在 Next.js 应用中添加智能体 Memory 标签页，包含启用/禁用记忆的开关，以及可新增、编辑、批量删除和单条删除的记忆管理区域。
iblai-safety-tab
iblai-safety-tab 是 ibl.ai 提供的技能，用于在 Next.js 应用中添加智能体 Safety 标签页，包含可编辑的安全与审核提示词卡片（带开关）以及可选的已标记提示词弹窗，属于 agent-settings 系列中的一个标签页。
iblai-settings-tab
iblai-settings-tab 是 ibl.ai 提供的 Next.js 技能，用于在应用中添加智能体 Settings 标签页，包含名称、描述、头像、可见性、分类等编辑表单，以及复制到租户和删除操作。
vibe-add-auth
vibe-add-auth 是 iblai/vibe 提供的技能，用于给原生 Next.js 应用添加 ibl.ai SSO 认证。完成后未登录用户会被重定向到 login.iblai.app，登录后带着会话返回，无需管理 API 令牌。
igniteui-wc-choose-components
这是一个用于挑选 Ignite UI Web Components 的技能，供 AI 智能体和开发者根据具体的 UI 需求，定位合适的 Ignite UI 组件（包括通用 UI 组件、网格、图表、Dock Manager 和 React 封装），并给出官方文档、使用示例与 API 参考的链接。该技能依赖 Ignite UI CLI MCP 服务器（igniteui-cli）作为工具提供方，通过 list_components、get_doc、get_api_reference 等工具查询组件目录与文档。它覆盖表单输入、按钮操作、日期选择、通知反馈、进度指示、布局容器、导航、列表与数据展示、图表可视化以及对话式 AI 等常见 UI 模式，并说明各组件的包归属与许可类型（MIT 或商业）。使用前需确认 MCP 服务器可用，若不可用则按 reference/mcp-setup.md 配置并提示可重载编辑器。
igniteui-wc-customize-component-theme
这是一个面向 AI 编程助手（AI agent）的技能文档，讲解如何为 Ignite UI Web Components（以及通过 igniteui-react 使用的 React 应用）定制主题与样式。主题支持两种方式：一是使用 CSS 自定义属性，无需额外构建工具，适合任何项目；二是使用 Sass，可用完整的调色板、排版与阴影 API。内容覆盖预置主题导入、调色板与语义色令牌、组件级主题覆盖、间距、尺寸与圆角等布局控制，以及 Ignite UI Theming MCP 服务器的配置与工具调用流程。适用于需要让 AI 助手按规范生成可切换明暗、可维护主题代码的场景。
igniteui-wc-grids
Ignite UI for Web Components 数据表格配置技能，用于为 Web Components 应用选择并配置合适的表格类型。技能涵盖表格选型（Grid Lite、Grid、Tree Grid、Hierarchical Grid、Pivot Grid）、单一设计系统主题（material/bootstrap/fluent/indigo 与 light/dark 变体）、Shadow DOM 主题注入、按需注册组件、流体布局以及列排序与过滤。提供已验证的导入路径、组件注册方式和 Lit 组件中注入主题的示例代码，并给出清洁运行验证清单与关键规则。
igniteui-wc-integrate-with-framework
该技能用于将 Ignite UI Web Components 集成到 React、Angular、Vue 3、LitElement 或原生 JS/HTML 应用中。它会先识别项目框架，再加载对应框架的分步集成参考，涵盖依赖安装、主题引入、组件注册、使用示例、TypeScript 支持及常见问题。技能还提供包路由：通用 UI 组件对应 igniteui-webcomponents，高级表格对应 igniteui-webcomponents-grids（试用）或 @infragistics/igniteui-webcomponents-grids（授权），Grid Lite 对应 igniteui-grid-lite，Dock Manager 与图表各有试用版和授权版包。若无法判断框架，会向用户确认后再加载对应参考。
igniteui-wc-migrate-grid-lite-to-premium
本技能用于将项目从 Grid Lite（igniteui-grid-lite，MIT 许可，<igc-grid-lite>）逐步迁移到 Premium Data Grid（igniteui-webcomponents-grids，商业许可，<igc-grid>）。Grid Lite 只具备只读能力，当项目需要编辑、选择、分页、分组、汇总、Excel 导出、状态持久化等企业级功能时使用。技能涵盖以下步骤：安装或验证 Premium 包；更新导入与注册（含 Shadow root 主题注入）；替换 HTML 标签与属性写法；更新 TypeScript 类型引用；迁移列属性（含自定义排序策略的改写）；迁移单元格与表头模板；迁移远程数据操作；迁移排序与过滤事件；迁移编程式排序与过滤 API。迁移后还介绍如何启用行编辑、行选择、分页、GroupBy、列固定、汇总、工具栏、高级过滤、Excel 风格过滤和批量编辑等企业功能。
igniteui-wc-optimize-bundle-size
这是一个面向使用 Ignite UI Web Components 的应用的打包体积优化技能，核心目标是减少产物体积、加快加载速度。主要做法包括：用 defineComponents() 按需注册具体组件，而不是用 defineAllComponents() 一次性导入全部组件；使用具名导入，让 tree-shaking 生效；定期审计代码中实际用到的组件并移除未使用的导入；对对话框等低频组件使用动态 import 懒加载或按路由拆分；在打包工具中设置 igc-theme-<name> 条件，只打包单一主题（压缩后约减小 15%–17%）；并用 bundle 分析工具对比优化前后效果。该技能提供 Vite、Webpack、esbuild、Rollup、Node.js SSR 的配置示例，以及原生 JS、React、Vue 3、Angular 的懒加载写法，还列出了常见问题与排查方法，并建议在 CI 中设置体积上限监控。
update-component-styles
Ignite UI Web Components 的样式更新技能，指导按 SCSS 到 Lit CSS 的工作流修改组件样式，并支持多主题与明暗模式。
artifacts-builder
Artifacts Builder 是一套用于创建复杂、多组件 claude.ai HTML 工件的工具集，基于现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）。它通过初始化脚本生成配置完整的 React + TypeScript 项目，开发完成后可将全部代码打包为单个自包含 HTML 文件，直接在 Claude 对话中作为工件展示。
threejs-webgl
面向 Three.js 3D 网页开发的综合技能，讲解 WebGL/WebGPU 场景构建、相机、渲染器、几何体、材质、灯光、纹理与动画，覆盖模型加载、阴影、射线交互、后处理与性能优化。适用于交互式 3D 场景、产品配置器、可视化及渲染问题排查，含代码示例与配套参考、脚本和起始场景资源。
claude-api-in-prototypes
该技能用于在交互式 Web 原型中通过内置助手直接调用 Claude API，无需 SDK 或 API 密钥。在 HTML 制品中调用 window.claude.complete() 即可传入纯文本或 messages 数组，获得模型返回文本。默认使用 claude-haiku-4-5，输出上限 1024 token；请求体可设置 model（仅 haiku/sonnet 系列）、max_tokens（最高 32000）、system、tool_choice 及客户端工具。工具需带 run: async (input) => string，助手会在页面内执行工具调用并循环，最多 8 次模型调用，最终返回文本；处理函数抛出的错误会转为 is_error 工具结果。服务端工具（如网页搜索）会被拒绝，不支持流式输出，每用户限流 15 次/分钟（含循环迭代），共享制品使用查看者的配额。
frontend-design
该技能用于在不受既有品牌或设计系统约束时实现响应式、美学丰富的前端用户界面与 CSS 布局。它强调先做设计思考，确定用途、语调与差异化，再以大胆而明确的美学方向编写 HTML。内容涵盖字体、配色、动效、空间构图与背景细节等指导，并建议根据美学愿景匹配实现复杂度，在不同生成之间避免重复同一套选择。