Web Artifacts Builder
Description
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using React 18, TypeScript, Vite, Parcel bundling, Tailwind CSS, and shadcn/ui. Includes initialization scripts and bundling into single HTML files.
Trigger
When building complex artifacts requiring state management, routing, or shadcn/ui components Installation
claude install-skill https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder Tools Used
README
**Note:** This repository contains Anthropic's implementation of skills for Claude. For information about the Agent Skills standard, see [agentskills.io](http://agentskills.io).
Skills
Skills are folders of instructions, scripts, and resources that Claude loads dynamically to improve performance on specialized tasks. Skills teach Claude how to complete specific tasks in a repeatable way, whether that's creating documents with your company's brand guidelines, analyzing data using your organization's specific workflows, or automating personal tasks.
For more information, check out:
- undefined
About This Repository
This repository contains skills that demonstrate what's possible with Claude's skills system. These skills range from creative applications (art, music, design) to technical tasks (testing web apps, MCP server generation) to enterprise workflows (communications, branding, etc.).
Each skill is self-contained in its own folder with a `SKILL.md` file containing the instructions and metadata that Claude uses. Browse through these skills to get inspiration for your own skills or to understand different patterns and approaches.
Many skills in this repo are open source (Apache 2.0). We've also included the document creation & editing skills that power [Claude's document capabilities](https://www.anthropic.com/news/create-files) under the hood in the [`skills/docx`](./skills/docx), [`skills/pdf`](./skills/pdf), [`skills/pptx`](./skills/pptx), and [`skills/xlsx`](./skills/xlsx) subfolders. These are source-available, not open source, but we wanted to share these with developers as a reference for more complex skills that are actively used in a production AI application.
Disclaimer
**These skills are provided for demonstration and educational purposes only.** While some of these capabilities may be available in Claude, the implementations and behaviors you receive from Claude may differ from what is shown in these skills. These skills are meant to illustrate patterns and possibilities. Always test skills thoroughly in your own environment before relying on them for critical tasks.
Skill Sets
- undefined
Try in Claude Code, Claude.ai, and the API
Claude Code
You can register this repository as a Claude Code Plugin marketplace by running the following command in Claude Code:
/plugin marketplace add anthropics/skills
Then, to install a specific set of skills:
- undefined
Alternatively, directly install either Plugin via:
/plugin install document-skills@anthropic-agent-skills
/plugin install example-skills@anthropic-agent-skills
After installing the plugin, you can use the skill by just mentioning it. For instance, if you install the `document-skills` plugin from the marketplace, you can ask Claude Code to do something like: "Use the PDF skill to extract the form fields from `path/to/some-file.pdf`"
Claude.ai
These example skills are all already available to paid plans in Claude.ai.
To use any skill from this repository or upload custom skills, follow the instructions in [Using skills in Claude](https://support.claude.com/en/articles/12512180-using-skills-in-claude#h_a4222fa77b).
Claude API
You can use Anthropic's pre-built skills, and upload custom skills, via the Claude API. See the [Skills API Quickstart](https://docs.claude.com/en/api/skills-guide#creating-a-skill) for more.
Creating a Basic Skill
Skills are simple to create - just a folder with a `SKILL.md` file containing YAML frontmatter and instructions. You can use the **template-skill** in this repository as a starting point:
---
name: my-skill-name
description: A clear description of what this skill does and when to use it
---
# My Skill Name
[Add your instructions here that Claude will follow when this skill is active]
## Examples
- Example usage 1
- Example usage 2
## Guidelines
- Guideline 1
- Guideline 2
The frontmatter requires only two fields:
- undefined
The markdown content below contains the instructions, examples, and guidelines that Claude will follow
[truncated]
Related Skills
next.js
| The React Framework | 138360 | 1503 | 1 |
Development community sharing-skills
skill for guidance.
Development community root-cause-tracing
Use when errors occur deep in execution and you need to trace back to find the original trigger.
Development community Template Skill
Minimal skeleton for a new skill project structure.
Development community Third-party Notices
THE FOLLOWING SETS FORTH ATTRIBUTION NOTICES FOR THIRD PARTY SOFTWARE THAT MAY BE CONTAINED IN PORTIONS OF THIS PRODUCT. ---
Development official Claude API
When code imports anthropic/@anthropic-ai/sdk/claude_agent_sdk, or user asks to use Claude APIBuild apps with the Claude API or Anthropic SDK
Development official Related Agents
Openai Codex CLI
(55.8k ⭐) - Lightweight coding agent that runs in your terminal.
Contributing to nanobot
Thank you for being here. nanobot is built with a simple belief: good tools should feel calm, clear, and humane. We care deeply about useful features, but we also believe in achieving more with less:
Key exports from each phase
for summary in .planning/phases/*/*-SUMMARY.md; do echo "=== $summary ===" grep -A 10 "Key Files\|Exports\|Provides" "$summary" 2>/dev/null done