Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://fedi.simonwillison.net/users/simon/statuses/113679795565189815">Simon Willison (simon@fedi.simonwillison.net)'s status on Thursday, 19-Dec-2024 23:09:17 JST</a><a href="https://fedi.simonwillison.net/@simon" title="simon@fedi.simonwillison.net"><img src="https://gnusocial.jp/avatar/18625-48-20221108165340.webp" width="48" height="48" alt="Simon Willison" style="position: absolute; left: 0; top: 0;">Simon Willison</a><div><a href="https://fedi.simonwillison.net/@simon/113679680531362027" rel="in-reply-to">in reply to</a></div></section><article><p>I have a similar set of custom instructions I use with Claude Artifacts to get it to produce mobile-friendly single page HTML apps that run without a build step</p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/4217009#notice-8241524">In conversation</a><time datetime="2024-12-19T23:09:17+09:00" title="Thursday, 19-Dec-2024 23:09:17 JST">about 4 months ago</time> <span>from <span><a href="https://fedi.simonwillison.net/@simon/113679795565189815" rel="external" title="Sent from fedi.simonwillison.net via ActivityPub">fedi.simonwillison.net</a></span></span><a href="https://fedi.simonwillison.net/@simon/113679795565189815">permalink</a><h4>Attachments</h4><ol><li><label><a rel="external" href="https://gnusocial.jp/attachment/3732248">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:&lt;style&gt;
* {
  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:&lt;script type="module"&gt;
// code in here should not be indented at the first level</a></label><br><a href="https://cdn.masto.host/fedisimonwillisonnet/media_attachments/files/113/679/795/285/666/901/original/e64169f35301db67.jpeg" rel="external">https://cdn.masto.host/fedisimonwillisonnet/media_attachments/files/113/679/795/285/666/901/original/e64169f35301db67.jpeg</a></li></ol></footer></blockquote>

Corresponding Notice

Embed this notice
Simon Willison (simon@fedi.simonwillison.net)'s status on Thursday, 19-Dec-2024 23:09:17 JST Simon Willison
in reply to
I have a similar set of custom instructions I use with Claude Artifacts to get it to produce mobile-friendly single page HTML apps that run without a build step
In conversation4 months ago from fedi.simonwillison.netpermalink
Attachments
1. 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
  https://cdn.masto.host/fedisimonwillisonnet/media_attachments/files/113/679/795/285/666/901/original/e64169f35301db67.jpeg

Public

Embed Notice

HTML Code

Corresponding Notice