create-skybridge 0.0.0-cloudflare

package/template/web/src/index.css

@@ -0,0 +1,154 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,600&display=swap");
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.ball {
+  background: radial-gradient(
+    circle at 30% 30%,
+    #454565 0%,
+    #1c1c30 40%,
+    #0a0a10 100%
+  );
+  border-radius: 50%;
+  width: 12rem;
+  height: 12rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: monospace;
+  text-align: center;
+  position: relative;
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.5),
+    0 5px 15px rgba(0, 0, 0, 0.3),
+    inset 0 -20px 40px rgba(0, 0, 0, 0.6);
+  animation:
+    float 3s ease-in-out infinite,
+    colorShift 15s ease-in-out infinite;
+  transition: transform 0.3s ease;
+  cursor: pointer;
+  border: 1px solid rgba(30, 30, 50, 0.6);
+}
+
+.ball:hover {
+  transform: scale(1.05) translateY(-8px);
+  animation: colorShift 15s ease-in-out infinite;
+  box-shadow:
+    0 20px 50px rgba(0, 0, 0, 0.6),
+    0 10px 25px rgba(0, 0, 0, 0.4),
+    inset 0 -20px 40px rgba(0, 0, 0, 0.6);
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes colorShift {
+  0%,
+  100% {
+    background: radial-gradient(
+      circle at 30% 30%,
+      #454565 0%,
+      #1c1c30 40%,
+      #0a0a10 100%
+    );
+  }
+  25% {
+    background: radial-gradient(
+      circle at 30% 30%,
+      #3f4a65 0%,
+      #181e30 40%,
+      #090a10 100%
+    );
+  }
+  50% {
+    background: radial-gradient(
+      circle at 30% 30%,
+      #3a5065 0%,
+      #152230 40%,
+      #080a10 100%
+    );
+  }
+  75% {
+    background: radial-gradient(
+      circle at 30% 30%,
+      #3f4a65 0%,
+      #181e30 40%,
+      #090a10 100%
+    );
+  }
+}
+
+.ball::before {
+  content: "";
+  position: absolute;
+  top: 8%;
+  left: 20%;
+  width: 30%;
+  height: 20%;
+  background: radial-gradient(
+    ellipse,
+    rgba(255, 255, 255, 0.3) 0%,
+    transparent 70%
+  );
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.ball::after {
+  content: "";
+  position: absolute;
+  bottom: 8%;
+  right: 25%;
+  width: 25%;
+  height: 10%;
+  background: radial-gradient(
+    ellipse,
+    rgba(255, 255, 255, 0.1) 0%,
+    transparent 70%
+  );
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.question {
+  font-size: clamp(0.5rem, 2vw, 0.75rem);
+  color: lightgrey;
+  max-width: 90%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  text-align: center;
+  line-height: 1.3;
+  font-style: italic;
+}
+
+.answer {
+  font-family: "Playfair Display", serif;
+  font-style: italic;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 0.5rem;
+  color: #7dd3fc;
+  text-shadow: 0 0 10px rgba(125, 211, 252, 0.5);
+  max-width: 90%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  text-align: center;
+  line-height: 1.3;
+}

package/template/web/src/widgets/magic-8-ball.tsx

@@ -0,0 +1,27 @@
+import "@/index.css";
+
+import { mountWidget } from "skybridge/web";
+import { useToolInfo } from "../helpers.js";
+
+function Magic8Ball() {
+  const { input, output } = useToolInfo<"magic-8-ball">();
+
+  return (
+    <div className="container">
+      <div className="ball">
+        {output ? (
+          <>
+            <div className="question">{input.question}</div>
+            <div className="answer">{output.answer}</div>
+          </>
+        ) : (
+          <div className="question">Shaking...</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Magic8Ball;
+
+mountWidget(<Magic8Ball />);

package/template/web/vite.config.ts

@@ -0,0 +1,15 @@
+import path from "node:path";
+import react from "@vitejs/plugin-react";
+import { skybridge } from "skybridge/web";
+import { defineConfig, type PluginOption } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [skybridge() as PluginOption, react()],
+  root: __dirname,
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package/template/wrangler.jsonc

@@ -0,0 +1,12 @@
+{
+  "name": "create-skybridge-template",
+  "compatibility_date": "2026-03-16",
+  "main": "dist/server/src/index.js",
+  "assets": {
+    "directory": "dist"
+  },
+  "compatibility_flags": ["nodejs_compat"],
+  "define": {
+    "process.env.NODE_ENV": "\"production\""
+  }
+}