メニュー
Suite of tools for creating elaborate, multi-component HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when querying Jira issues, searching Confluence pages, creating tickets, updating documentation, or integrating Atlassian tools via MCP protocol.
Use when building PHP applications with modern PHP 8.3+ features, Laravel, or Symfony frameworks. Invoke for strict typing, PHPStan level 9, async patterns with Swoole, PSR standards.
Structured security event logging with JSON format, 90-day retention, log rotation, and querying for SOC 2 and ISO 27001 compliance.
Root-level credential inheritance for agent delegation chains with access logging and permission validation. Use for multi-level agent workflows.
OAuth 2.0 Authorization Code Flow with PKCE for Atlassian, GitHub, and Google providers. Handles token exchange and secure storage. Use PROACTIVELY for OAuth flows.
Performance optimization for token usage (15% reduction), latency (P95 <500ms), memory (<10% growth), and context compression (75%+) with comprehensive benchmarking. Use for optimizing system performance.
| name | web-artifacts-builder |
| description | Suite of tools for creating elaborate, multi-component HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components. |
| version | 1.0.0 |
| author | Anthropic |
| license | Apache 2.0 |
| triggers | ["React artifact","complex HTML","shadcn/ui","multi-component","state management"] |
| tools | ["file_read","file_write","shell"] |
| models | ["qwen3-coder","qwen3-32b"] |
React 18 + TypeScript + Vite + Tailwind CSS + shadcn/ui
npm create vite@latest my-artifact -- --template react-ts
cd my-artifact
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npx shadcn-ui@latest init
Avoid "AI Slop":
Use Parcel or Vite to bundle:
npm run build
Missing Scripts: scripts/init-artifact.sh and bundle-artifact.sh not included. Use manual setup as shown above.
Use /skills web-artifacts-builder to invoke.