web-artifacts-builder
Web Artifacts Builder
To build powerful frontend claude.ai artifacts, follow these steps:
- Initialize the frontend repo using
scripts/init-artifact.sh - Develop your artifact by editing the generated code
- Bundle all code into a single HTML file using
scripts/bundle-artifact.sh - Display artifact to user
- (Optional) Test the artifact
Stack: React 19 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
Design & Style Guidelines
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
Quick Start
Step 1: Initialize Project
More from zhuxining/skills
股票分析
提供获取用户自选分组(LongPort)、股票市场数据(LongPort + AkShare)、技术指标计算（ta-lib）的技能。分析数并与用户研究交易策略，形成买卖点建议，并可做回测、寻优与报告输出。
16obsidian-knowledge
指导 Agent 助理如何在共享的 MyObsidian vault 中进行知识管理。当需要创建、整理、检索笔记，维护每日笔记，管理 _AgentSpace 知识库，或将已提取的网页内容保存到知识库时使用。触发关键词：记录、笔记、整理、归档、每日、任务、保存到知识库、知识、术语、记下来、记住、审计知识库。
12search-and-fetch
通用网页搜索与内容提取技能。多源并行搜索（WebSearch、MCP 搜索工具、ctx7、agent-browser）、网页正文提取（crwl）与结构化文章分析。当用户需要搜索信息、研究主题、查找资料、获取网页内容、阅读文章、分析网页时使用。触发场景包括：搜索、研究、调研、fetch、查一下、帮我找、读这个链接、分析这篇文章。即使用户没有明确说"搜索"，只要涉及信息获取和网页内容处理都应触发此技能。
5pdf
Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.
4canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
4pptx
Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks
3