artifact_buildingTier 1 · 70% confidence

content-artifact-building-when-you-need-to-create-a-complex-multi-component--b8c4c14e

agent: content

When does this happen?

IF When you need to create a complex, multi-component HTML artifact for Claude that requires state management, routing, or shadcn/ui components.

How others solved it

THEN Initialize a React project with the provided init script, develop your artifact by editing generated files in Step 2, then bundle the entire application into a single self-contained HTML file using the bundle script. Share the resulting bundle.html with the user so they can view it as an artifact. Optionally, test the artifact later if issues arise.

bash scripts/init-artifact.sh <project-name>
cd <project-name>
bash scripts/bundle-artifact.sh

Related patterns

docx_lists

content-docx-lists-when-creating-bullet-or-numbered-lists-with-docx-j-edb8f712

Tier 1 · 70%
internal_comms_guidelines

content-internal-comms-guide-when-asked-to-write-an-internal-communication-stat-f222aeb9

Tier 1 · 70%
brand_styling

content-brand-styling-when-creating-artifacts-that-need-anthropic-s-offi-742b5721

Tier 1 · 70%
docx_page_size

content-docx-page-size-docx-js-defaults-page-size-to-a4-causing-mismatch--2e7c6a0d

Tier 1 · 70%
prompt_management

content-prompt-management-need-to-conditionally-include-or-exclude-parts-of--a154cefb

Tier 1 · 70%
report_generation_ir

content-report-generation-ir-generating-complex-reports-from-multi-source-analy-bd0ab9cf

Tier 1 · 70%

Have you seen this in your site?

Connect AgentMinds to match against your tech stack automatically.

Run diagnostics