{"id":"196e0356-4ed7-41b2-b99c-07b150cb1b63","shortId":"ChFPBV","kind":"skill","title":"Scaffold and bundle rich single-file web artifacts with React, Tailwind, and shadcn/ui","tagline":"Use Anthropic's web-artifacts-builder skill to scaffold a React artifact project, build a richer interface with state or routing, and bundle everything into one shareable HTML file. It is for artifact-delivery workflows, not for listing React or Tailwind as standalone products.","description":"# Scaffold and bundle rich single-file web artifacts with React, Tailwind, and shadcn/ui\n\nUse Anthropic's web-artifacts-builder skill to scaffold a React artifact project, build a richer interface with state or routing, and bundle everything into one shareable HTML file. It is for artifact-delivery workflows, not for listing React or Tailwind as standalone products.\n\n## Prerequisites\n\nNode.js 18+, React, TypeScript, Vite, Parcel, Tailwind CSS, and shadcn/ui\n\n## Installation\n\nRequirements and caveats from upstream:\n- The frontmatter requires only two fields:\n\nBasic usage or getting-started notes:\n- Select document-skills or example-skills\n- /plugin install example-skills@anthropic-agent-skills\n- These example skills are all already available to paid plans in Claude.ai.\n\n- Source: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder\n- Extracted from upstream docs: https://raw.githubusercontent.com/anthropics/skills/HEAD/README.md\n\n## Documentation\n\n- https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md\n\n## Source\n\n- [Agent Skill Exchange](https://agentskillexchange.com/skills/scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui/)","tags":["scaffold","and","bundle","rich","single","file","web","artifacts","with","react","tailwind","shadcn"],"capabilities":["skill","source-agentskillexchange","skill-scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui","topic-agent-skills","topic-ai-agents","topic-ai-tools","topic-awesome-list","topic-claude-code","topic-codex","topic-cursor","topic-llm","topic-mcp","topic-npx-skills","topic-openclaw","topic-skills-catalog"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/agentskillexchange/skills/scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add agentskillexchange/skills","source_repo":"https://github.com/agentskillexchange/skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (1,242 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:12:17.427Z","embedding":null,"createdAt":"2026-05-18T13:19:07.468Z","updatedAt":"2026-05-18T19:12:17.427Z","lastSeenAt":"2026-05-18T19:12:17.427Z","tsv":"'/anthropics/skills/head/readme.md':190 '/anthropics/skills/main/skills/web-artifacts-builder/skill.md':194 '/anthropics/skills/tree/main/skills/web-artifacts-builder':183 '/plugin':159 '/skills/scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui/)':201 '18':123 'agent':166,196 'agentskillexchange.com':200 'agentskillexchange.com/skills/scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui/)':199 'alreadi':173 'anthrop':16,76,165 'anthropic-agent-skil':164 'artifact':9,20,27,49,69,80,87,109 'artifact-deliveri':48,108 'avail':174 'basic':144 'build':29,89 'builder':21,81 'bundl':3,38,63,98 'caveat':135 'claude.ai':179 'css':129 'deliveri':50,110 'doc':187 'document':153,191 'document-skil':152 'everyth':39,99 'exampl':157,162,169 'example-skil':156,161 'exchang':198 'extract':184 'field':143 'file':7,44,67,104 'frontmatt':139 'get':148 'getting-start':147 'github.com':182 'github.com/anthropics/skills/tree/main/skills/web-artifacts-builder':181 'html':43,103 'instal':132,160 'interfac':32,92 'list':54,114 'node.js':122 'note':150 'one':41,101 'paid':176 'parcel':127 'plan':177 'prerequisit':121 'product':60,120 'project':28,88 'raw.githubusercontent.com':189,193 'raw.githubusercontent.com/anthropics/skills/head/readme.md':188 'raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/skill.md':192 'react':11,26,55,71,86,115,124 'requir':133,140 'rich':4,64 'richer':31,91 'rout':36,96 'scaffold':1,24,61,84 'select':151 'shadcn/ui':14,74,131 'shareabl':42,102 'singl':6,66 'single-fil':5,65 'skill':22,82,154,158,163,167,170,197 'skill-scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui' 'sourc':180,195 'source-agentskillexchange' 'standalon':59,119 'start':149 'state':34,94 'tailwind':12,57,72,117,128 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-tools' 'topic-awesome-list' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-llm' 'topic-mcp' 'topic-npx-skills' 'topic-openclaw' 'topic-skills-catalog' 'two':142 'typescript':125 'upstream':137,186 'usag':145 'use':15,75 'vite':126 'web':8,19,68,79 'web-artifacts-build':18,78 'workflow':51,111","prices":[{"id":"95b01acb-0dc4-48c3-9fc7-d74d6236eba6","listingId":"196e0356-4ed7-41b2-b99c-07b150cb1b63","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"agentskillexchange","category":"skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:19:07.468Z"}],"sources":[{"listingId":"196e0356-4ed7-41b2-b99c-07b150cb1b63","source":"github","sourceId":"agentskillexchange/skills/scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui","sourceUrl":"https://github.com/agentskillexchange/skills/tree/main/skills/scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui","isPrimary":false,"firstSeenAt":"2026-05-18T13:19:07.468Z","lastSeenAt":"2026-05-18T19:12:17.427Z"}],"details":{"listingId":"196e0356-4ed7-41b2-b99c-07b150cb1b63","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"agentskillexchange","slug":"scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui","github":{"repo":"agentskillexchange/skills","stars":8,"topics":["agent-skills","ai-agents","ai-tools","awesome-list","claude-code","codex","cursor","llm","mcp","npx-skills","openclaw","skills-catalog"],"license":"mit","html_url":"https://github.com/agentskillexchange/skills","pushed_at":"2026-05-18T19:02:17Z","description":"The open catalog of AI agent skills — 2,000+ security-scanned skills for Claude Code, Cursor, Codex, and more.","skill_md_sha":"66dea8f8848e77ac8ce544eb3a63f592efcbb147","skill_md_path":"skills/scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/agentskillexchange/skills/tree/main/skills/scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"Scaffold and bundle rich single-file web artifacts with React, Tailwind, and shadcn/ui","description":"Use Anthropic's web-artifacts-builder skill to scaffold a React artifact project, build a richer interface with state or routing, and bundle everything into one shareable HTML file. It is for artifact-delivery workflows, not for listing React or Tailwind as standalone products."},"skills_sh_url":"https://skills.sh/agentskillexchange/skills/scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui"},"updatedAt":"2026-05-18T19:12:17.427Z"}}