Web Artifacts Builder Codex Skill
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS,...
What it adds
Suite of tools for creating elaborate, multi-component claude.ai 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.
design and ui
Get set up
- Copy the skill folder from the source into your Codex skills directory.
- Start a new thread so Codex picks up the skill.
Before you install
Compatibility & limitations
Documented for ChatGPT desktop app, Codex CLI, Codex IDE extension
Cursor: Not confirmed for Cursor.
This listing is based on source documentation. We have not installed or runtime-tested this asset.
How it fits together
Test Driven Development · SkillUse when implementing any feature or bugfix, before writing implementation code.Figma Code Connect Components · SkillConnects Figma design components to code components using Code Connect mapping tools.Figma Create Design System Rules · SkillGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set...Figma Create New File · SkillCreate a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling...Figma Context · MCP serverMCP server to provide Figma layout information to AI coding agents like Cursor.Adobe · PluginDesign, combine, and edit.Canva · PluginCreate, review, edit designs.Sources & provenance
Reviewed 2026-09-20. Source revision: main (mutable; commit not pinned).