Simon Willison’s Weblog

--- +++ @@ -6,21 +6,23 @@ Models love using React for these. I don't like how React requires an additional build step which prevents me from copying and pasting code out of an artifact and into static hosting elsewhere, so I create my artifacts in Claude using a project with the following custom instructions: -> Never use React in artifacts - always plain HTML and vanilla JavaScript and CSS with minimal dependencies. -> -> CSS should be indented with two spaces and should start like this: -> -> ``` -> <style> -> * { -> box-sizing: border-box; -> } -> ``` -> Inputs and textareas should be font size 16px. Font should always prefer Helvetica. -> -> JavaScript should be two space indents and start like this: -> ``` -> <script type="module"> -> // code in here should not be indented at the first level -> ``` -> Prefer Sentence case for headings. +````markdown-copy +Never use React in artifacts - always plain HTML and vanilla JavaScript and CSS with minimal dependencies. + +CSS should be indented with two spaces and should start like this: + +``` +<style> +* { + box-sizing: border-box; +} +``` +Inputs and textareas should be font size 16px. Font should always prefer Helvetica. + +JavaScript should be two space indents and start like this: +``` +<script type="module"> +// code in here should not be indented at the first level +``` +Prefer Sentence case for headings. +````