Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From Prototyping
Pins exact React/ReactDOM/Babel standalone versions with integrity hashes for inline JSX prototypes without a bundler. Copy script tags into HTML head.
How this skill is triggered — by the user, by Claude, or both
Slash command
/prototyping:react-pinningWhen to use
Любой HTML-артефакт с inline JSX. Подключай ровно эти теги, не апгрейдь без причины.
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Babel + JSX + React в браузере без bundler'а — хрупкая связка. Минор-апгрейд React'а ломает Babel transform; апгрейд Babel ломает React 18 deprecations. Только закреплённые версии с проверенными integrity-хешами.
Babel + JSX + React в браузере без bundler'а — хрупкая связка. Минор-апгрейд React'а ломает Babel transform; апгрейд Babel ломает React 18 deprecations. Только закреплённые версии с проверенными integrity-хешами.
Скопируй в <head>:
<script src="https://unpkg.com/[email protected]/umd/react.development.js"
integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"
integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"
integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y"
crossorigin="anonymous"></script>
react@18 без minorhttps://unpkg.com/react@18/umd/... — unpkg отдаст последний 18.x, может оказаться 18.4 с breaking changes.[email protected] — точная версия.Без integrity unpkg может отдать что угодно при компрометации CDN. С хешем — браузер откажется грузить.
В development-сборках есть warnings и hot-reload поддержка. В production — оптимизировано. Для прототипов используй development.dev.js — лучше ловить ошибки.
@babel/standalone, не отдельные плагиныInline JSX работает только через standalone. Не пытайся подключить @babel/preset-react отдельно — не загрузится.
<script type="text/babel" src="components.jsx"></script>
<script type="text/babel" src="app.jsx"></script>
Не type="module" — Babel не транспилит модули.
<script type="text/babel"> — свой scopeBabel оборачивает в IIFE. Чтобы делиться компонентами между файлами:
// в конце components.jsx
Object.assign(window, { Button, Card, Modal });
И никаких const styles = {...} — обязательно const cardStyles = {...} или inline-styles. Конфликт имён в global scope тихо ломает.
Когда у пользователя есть Node + желание собирать — это надёжнее. Но требует setup.
<script type="module">
import React from 'https://esm.sh/[email protected]';
</script>
Работает в чистом ES-модуле, без Babel. Но JSX тогда не транспилировать — пиши на React.createElement.
https://cdn.jsdelivr.net/... без integrity — те же риски.latest в URL — невоспроизводимо.import в <script type="text/babel"> — не работает. Только Object.assign(window, ...) или <script> подряд.После подключения проверь:
console.log(React.version); // 18.3.1
console.log(ReactDOM.version); // 18.3.1
console.log(Babel.version); // 7.29.0
Если хоть одна — undefined, integrity не прошёл или CDN недоступен.
npx claudepluginhub jhamidun/claude-code-config-pack --plugin prototypingBuilds a throwaway prototype to answer a design question about UI appearance or state/logic behavior. Guides you through two branches: interactive terminal app for logic validation, or multiple UI variations for visual exploration.