القائمة
To build powerful frontend claude.ai artifacts, follow these steps:
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Designs, improves, converts, debugs, and operationalizes prompts, system instructions, agent definitions, and reusable AI-agent behavior. Works autonomously by default: reads the project, infers intent, and produces a finished prompt with stated assumptions in one pass; runs a guided one-question-at-a-time interactive mode on request. Use when the user is writing or refining a prompt, a system prompt, GPT/agent instructions, an AGENTS.md or CLAUDE.md, a Cursor rule, or asks to make a prompt better, convert a prompt between platforms, debug poor prompt output, or cut a prompt's token usage. Triggers on: 'write a prompt', 'improve this prompt', 'prompt for', 'system prompt', 'agent instructions', 'convert this prompt', 'why is this prompt failing', 'reduce tokens', 'prompt engineering'.
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.
Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).
To access Anthropic's official brand identity and style resources, use this skill.
To access Anthropic's official brand identity and style resources, use this skill.
These are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files.
| name | web-artifacts-builder |
| description | To build powerful frontend claude.ai artifacts, follow these steps: |
| license | Apache-2.0 |
| metadata | {"imported_from":"codex-regular","source_repository":"https://github.com/sickn33/antigravity-awesome-skills","source_path":"~/.codex/skills/web-artifacts-builder/SKILL.md","imported_at":"2026-05-09"} |
To build powerful frontend claude.ai artifacts, follow these steps:
scripts/init-artifact.shscripts/bundle-artifact.shStack: 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.
Run the initialization script to create a new React project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a fully configured project with:
@/) configuredTo build the artifact, edit the generated files. See Common Development Tasks below for guidance.
To bundle the React app into a single HTML artifact:
bash scripts/bundle-artifact.sh
This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.
Requirements: Your project must have an index.html in the root directory.
What the script does:
.parcelrc config with path alias supportFinally, 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.
This skill is applicable to execute the workflow or actions described in the overview.