web-artifacts-builder
Web Artifacts Builder
构建强大的前端 claude.ai 工件,遵循以下步骤:
- 使用
scripts/init-artifact.sh初始化前端仓库 - 通过编辑生成的代码开发工件
- 使用
scripts/bundle-artifact.sh将所有代码打包为单个 HTML 文件 - 向用户显示工件
- (可选)测试工件
技术栈:React 18 + TypeScript + Vite + Parcel(打包)+ Tailwind CSS + shadcn/ui
设计与样式指南
非常重要:为避免常被称为「AI 垃圾」的内容,避免使用过度居中布局、紫色渐变、统一圆角与 Inter 字体。
快速开始
步骤 1:初始化项目
More from kunhai-88/skills
marketing-ideas
需要营销创意、灵感或策略时使用。触发词:marketing ideas、growth ideas、how to market、marketing strategies、marketing tactics、ways to promote、ideas to grow。提供 140 个已验证的营销方法,按类别组织。
32marketing-psychology
将心理学原理、心智模型或行为科学应用于营销时使用。触发词:心理学、心智模型、认知偏差、说服、行为科学、人们为何购买、决策、消费者行为。提供 70+ 面向营销的心智模型。
16agent-browser
浏览器自动化工具,用于网页导航、交互、截图、录制等。当需要自动化浏览器操作、测试网页、抓取网页内容、填写表单、截图、录制视频,或提到「浏览器自动化」「网页测试」「agent-browser」「浏览器操作」时使用。
12supabase-postgres-best-practices
Supabase 出品的 Postgres 性能优化与最佳实践。在编写、评审或优化 Postgres 查询、表结构设计或数据库配置时使用。
10audit-website
使用 squirrelscan CLI(squirrel)对网站进行审计,覆盖 SEO、技术、内容、性能、安全等 140+ 规则。当需要分析网站健康、排查技术 SEO、检查死链、校验 meta 与结构化数据、生成站点审计报告、对比改版前后,或提到「网站审计」「audit website」「squirrel」「站点健康检查」时使用。
8better-auth-best-practices
集成 Better Auth(TypeScript 鉴权框架)时使用。支持邮箱密码、OAuth、魔法链接、Passkey 等,通过插件扩展。编写或配置 Better Auth 时触发。
8