菜单
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 - not for simple single-file HTML/JSX artifacts.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Go High Level (GHL / HighLevel) expert consultant. Handles any GHL question - API integrations (v2 OAuth, endpoints, webhooks), UI navigation, workflows and automations, funnels and websites, CRM and contacts, calendars, conversations, payments, SaaS mode, white-labeling, sub-accounts, snapshots, troubleshooting, and best practices. Trigger when user mentions GoHighLevel, GHL, HighLevel, Go High Level, LeadConnector, LC Email, LC Phone, sub-account, location, snapshot, funnel, pipeline, or workflow in a GHL context, or asks about any feature, API endpoint, or configuration within the HighLevel platform. Also trigger for CRM platforms for agencies, white-label SaaS tools, or marketing automation when GHL is a plausible answer.
Go High Level (GHL / HighLevel) expert consultant. Handles any GHL question - API integrations (v2 OAuth, endpoints, webhooks), UI navigation, workflows and automations, funnels and websites, CRM and contacts, calendars, conversations, payments, SaaS mode, white-labeling, sub-accounts, snapshots, troubleshooting, and best practices. Trigger when user mentions GoHighLevel, GHL, HighLevel, Go High Level, LeadConnector, LC Email, LC Phone, sub-account, location, snapshot, funnel, pipeline, or workflow in a GHL context, or asks about any feature, API endpoint, or configuration within the HighLevel platform. Also trigger for CRM platforms for agencies, white-label SaaS tools, or marketing automation when GHL is a plausible answer.
Deep document research specialist for blog content creators. Finds rare, citable statistics and primary-source data buried in PDFs, PPTX, DOCX, XLSX, and Google Drive files from government, academic, NGO, and institutional sources - the documents standard web searches miss. Use when a user needs high-authority, non-article sources to strengthen blog content. Trigger on: research for my blog, find statistics, find data, find sources, primary sources, government reports, academic data, citable stats, or any request for document-based research.
Researches and qualifies sales leads by defining an ideal customer profile, searching for matching companies, scoring fit, and generating personalized outreach strategies with decision-maker contacts. Use when asked to find leads, prospect companies, identify potential customers, do lead generation, build a pipeline, research target accounts, find outreach targets, or identify ICP matches.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes
| name | 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 - not for simple single-file HTML/JSX artifacts. |
| license | Complete terms in LICENSE.txt |
To build powerful frontend artifacts, follow these steps:
Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
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.
Create a new React + TypeScript project (e.g., via Vite) and add Tailwind CSS + shadcn/ui. Ensure:
@/) configuredTo build the artifact, edit the generated files. See Common Development Tasks below for guidance.
Bundle the React app into a single HTML artifact using your preferred bundler (e.g., Parcel with html-inline) so all assets are inlined into bundle.html. Ensure your project has an index.html in the root directory.
Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
Note: This is a completely optional step. Only perform if necessary or requested.
To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.