web-artifacts-builder
Web Artifacts Builder
To build powerful frontend claude.ai artifacts, follow these steps:
- Initialize the frontend repo using
scripts/init-artifact.sh - Develop your artifact by editing the generated code
- Bundle all code into a single HTML file using
scripts/bundle-artifact.sh - Display artifact to user
- (Optional) Test the artifact
Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
Design & Style Guidelines
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.
Quick Start
Step 1: Initialize Project
More from outlinedriven/odin-codex-plugin
copilotkit
CopilotKit integration patterns for providers, runtime wiring, `useCoAgent`, `useCopilotAction`, `useLangGraphInterrupt`, shared state, and HITL with LangGraph. Use when building agent-native product UX.
65ag-ui
AG-UI protocol implementation guidance for event ordering (`RUN_STARTED`, `TOOL_CALL_*`, `STATE_SNAPSHOT`/`STATE_DELTA`), streaming semantics, and middleware patterns. Use when integrating agent backends with AG-UI clients.
29mesop
Build Python-native web apps with Mesop. Triggers when users want to build, debug, or deploy Mesop applications, including AI chat interfaces, internal tools, and ML demos.
22plan
Generate a plan for how an agent should accomplish a complex coding task. Use when a user asks for a plan, and optionally when they want to save, find, read, update, or delete plan files in $CODEX_HOME/plans (default ~/.codex/plans).
22langgraph
LangGraph state-machine design and debugging for `StateGraph`, node/edge routing, checkpoints, `interrupt`, and HITL flows. Use when building or troubleshooting graph-based agents with conditional edges and thread state.
22code-simplifier
Simplifies and refines code for clarity, consistency, and maintainability while preserving all functionality. Focuses on recently modified code unless instructed otherwise.
22