Communitygithub.com

evalix098/tiktoklive

Add user accounts and sign-in to this TanStack Start app. Use when the app needs authentication, sign-in, user accounts, protected routes, or per-user data. Triggers on "auth", "login", "log in", "sign in", "sign up", "account", "users", "authentication", "protected", "who is logged in", "current user", "per-user".

tiktoklive 是什么?

tiktoklive is a Claude Code agent skill that add user accounts and sign-in to this TanStack Start app. Use when the app needs authentication, sign-in, user accounts, protected routes, or per-user data. Triggers on "auth", "login", "log in", "sign in", "sign up", "account", "users", "authentication", "protected", "who is logged in", "current user", "per-user".

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/evalix098/tiktoklive/tree/HEAD/.grok/skills/auth

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Auth

This app runs its own Better Auth at /api/auth/*, federating to the shared Grok auth broker (auth.grok.me) via the genericOAuth plugin. This template wires Google and X.

Supported sign-in methods — use ONLY these three; nothing else is supported: Google, X, and email/password. No other social/OAuth provider (GitHub, Apple, Discord, …), no magic links, passkeys, OTP, phone/SMS, or anonymous sign-in. Do not add entries to GROK_PROVIDERS. Method detail and the email/password switch (edit only src/lib/auth/email-password.ts): references/sign-in-methods.md. Exception — gate viewers are signed in already; NEVER render login/re-auth buttons for them. Connector / app-data apps: ONLY gate "Continue with Grok", no Google/X buttons: references/grok-identity.md.

Sign-in is OFF by default — the template ships .grok/app-env.json with {"VITE_AUTH_ENABLED": "false"}, so only add accounts when the ask calls for them (AGENTS.md §0.5). Switching it on is "Turning sign-in on" below.

Once on, sign-in is REAL — including in the sandbox live preview. Do NOT scaffold demo/mock/hardcoded users. Preview: popup + baked preview client; deployed: per-app client + DATABASE_URL + zero-click gate sign-in (references/prewired-and-env.md).

While OFF (VITE_AUTH_ENABLED=false) a dev user is returned so a non-auth app renders without a signed-in visitor — dev and preview only. Deployed, the flag is the platform's (always "true"), so requireUserId rejects every visitor — auth-off apps use neither it nor authMiddleware.

Everything is preinstalled and pre-wired in src/lib/auth/ — do not npm install anything; better-auth is the only auth package (never @neondatabase/*, @stackframe/*, or @clerk/*). Do not edit or rewrite any file under src/lib/auth/ — server.ts least of all — except email-password.ts for its one flag. Per-file map: references/prewired-and-env.md.

/auth/popup is already handled by the template Vite plugin (vite.config.ts → popup.server.ts): it never paints the React app. Do NOT create src/routes/auth/popup.tsx (or any React page / client OAuth at that path) — that shows the full app inside the popup, the common failure mode.

Never write a .env / .env.local / .env.example in this sandbox: live preview needs zero env configuration and a deployed app gets its vars injected by the platform. The knobs that exist are in references/prewired-and-env.md — never expose a non-VITE_ var to the client.

migrations/auth/0001_auth.sql is the Better Auth schema — do not edit. It sits outside the globbed migrations/ directory (neither applier descends), so it is not applied to apps without sign-in; "Turning sign-in on" copies it up.

Turning sign-in on

Do all of this — the routes alone render the disabled branch:

  1. Flag: delete the VITE_AUTH_ENABLED key from .grok/app-env.json and restart the dev server. Vite reads env at startup, so HMR will not pick it up. npm run dev, npm run build and npm run preview all read that file through scripts/with-app-env.mjs, so preview and the built output flip together — never start Vite directly.
  2. Schema: cp migrations/auth/0001_auth.sql migrations/0001_auth.sql, then restart so it applies. It is tracked by basename in _migrations, so a database that already has it will not re-run it.
  3. Routes: add src/routes/api/auth/$.ts + src/routes/login.tsx — copy both from references/wiring.md (the catch-all API route is what makes /api/auth/* and the broker callback work).
  4. Sign out: a login with no way out is not done — render <UserButton /> from @/lib/auth/gates (wires signOut(); hides sign-out for gate sessions).
  5. Existing data: wrap the app's server functions in authMiddleware (an auth-off app must not have been using it — see the neon skill). Rows from before sign-in existed are development data: drop and recreate them unless the user says otherwise — don't hand them to whoever signs in first.

Building on it once it's on

  • Sign in / out: signIn(providerId) and signOut() from @/lib/auth/client; GROK_PROVIDERS renders the buttons. The popup, bearer-token hand-off, and request attachment are internal — leave them alone. Prefer <UserButton /> (it handles the pending and failure states); signOut() rejects when deployed if the server never confirms — catch it. Never authClient.signOut(): it leaves the preview bearer token attached to every later request, so the visitor stays signed in.
  • Reading the user: useCurrentUser() is display-only (null means loading OR signed out, so never redirect on it alone); guard on useCurrentUserState()'s isPending instead. Gates (SignedIn, SignedOut, SignInGate, RedirectToSignIn, UserButton) live in @/lib/auth/gates. CTA hard rules, skeleton, and cookie-SSR zero-flash: references/session-ui.md.
  • Per-user data (mandatory): every server function that touches per-user data must use the prewired authMiddleware and scope every read and write to context.userId — a Postgres driver has full DB access, so nothing else limits the query. Keep user_id columns TEXT; never trust a client-supplied user id; signed out, the middleware throws UnauthorizedError (401). Code and disabled-mode semantics: references/per-user-data.md.
  • Security model: headless broker, __Host- cookies + trustedOrigins, and Fetch-Metadata sibling isolation are already wired — never weaken them to make an error go away (references/sign-in-methods.md covers the model and the "Invalid origin" fix).

Individual skills in this repo

This repo contains 17 individual skills — each has its own dedicated page.

evalix098/tiktoklive

Build browser games and interactive/canvas/3D experiences in this TanStack Start + React app. Use for any game, simulation, or WebGL/Canvas experience — 2D or 3D, single-player. Covers the game loop & timing, 3D orientation/camera conventions, collision, performance, assets, audio, save, game feel, and per-genre playbooks. For WASD / vehicle / flight **input signs and inverted A/D**, open the **`controls`** skill — do not rely on this file or racing-kart alone. Triggers on "game", "minecraft", "fps", "platformer", "racing", "tetris", "snake", "shooter", "3d", "three.js", "canvas", "voxel", "physics".

evalix098/tiktoklive

Player-facing input signs for browser games: WASD, vehicles, flight, FPS mouse-look, and the #1 failure mode (inverted A/D). Mandatory control self-tests and a tiny test interface so you can verify A turns left before shipping. Load for ANY game with movement, steering, flying, driving, tanks, boats, mechs, drones, planes, karts, third-person follow cams — not only racing. Triggers on "controls", "WASD", "inverted", "steer", "flight", "airplane", "kart", "vehicle", "yaw", "roll", "pitch", "mouse look", "A/D".

evalix098/tiktoklive

Design and build polished, non-generic UI for this TanStack Start + React + Tailwind v4 + shadcn/Radix app. Use whenever you create or restyle any interface surface — pages, landing pages, dashboards, forms, modals, nav, and game overlays (start screens, HUD, menus). Covers design tokens, layout, typography, color, spacing, motion, and the anti-"AI-slop" rules that keep output from looking generic. Triggers on "design", "UI", "make it look good", "polish", "landing page", "theme", "style", "redesign", "ugly", "clean up".

evalix098/tiktoklive

Deep guide for game ANIMATION assets: motion cycles, action keyframes, effect sequences, and animation sprite sheets — built around a video-first pipeline. In this app-builder sandbox, execute via the video2dsprite / generate2dsprite skills (magenta + scripts), not ad-hoc ffmpeg. Use whenever generating anything that moves: walk/run cycles, attacks, idles, FX, flags, fire, animation sheets. Complements game-asset-core.

evalix098/tiktoklive

Core discipline for ANY game-asset generation with Imagine tools: the engine-ready defaults users don't state, spec checklists, style anchoring, read-back verification, honest defect flagging. Use whenever generating any game art (sprites, sheets, animations, tiles, UI, FX) — then ALSO load the matching specialist skill: game-animation-frames for anything that moves, game-tilesets for tiles/terrain, game-character-consistency for recurring characters, game-ui-icons for UI and icons.

evalix098/tiktoklive

Deep guide for CHARACTER IDENTITY across images: turnarounds (front/side/ back), state and damage variants, palette swaps, equipment changes, and same-character-in-context sets. Use whenever generating character turnarounds, character sheets, variants of an existing sprite, or any same-subject multi-image set. Complements game-asset-core.

evalix098/tiktoklive

Deep guide for game TILE assets: seamless tileable textures, terrain transition tilesets, autotiles, and ground/platform tiles. Use whenever generating tileable textures, tilesets, terrain transitions, or seamless patterns. Complements game-asset-core.

evalix098/tiktoklive

Deep guide for game UI assets: buttons with interaction states, panels, bars, wordmark logos, and icon sets. Use whenever generating game UI elements, HUD assets, inventory icons, icon sets, buttons, or title logos. Complements game-asset-core.

evalix098/tiktoklive

Generate production-oriented 2D game maps with `imagine_text_to_image`: RPG/top-down maps, side-scroller parallax stages, tilemaps, layered raster maps, prop packs, collision zones, and walkable areas. Use when building browser games that need real map art (not pure code-drawn tiles), layered props, or map collision metadata. Triggers on "map", "level", "stage", "tilemap", "overworld", "dungeon", "side scroller background", "prop pack", "2D map".

evalix098/tiktoklive

Generate and postprocess 2D game sprites and animation sheets: pixel-art characters, NPCs, creatures, spells, projectiles, impacts, props, summons, and transparent PNG/GIF exports. Use when building browser games that need real sprite sheets (not code-drawn placeholders), matching a map art style, or producing magenta-background sheets for chroma-key cleanup. Triggers on "sprite", "sprite sheet", "animation sheet", "pixel art character", "walk cycle", "attack animation", "projectile sprite", "2D game asset".

evalix098/tiktoklive

How to use the Imagine tools in Grok Build: imagine_text_to_image, imagine_image_to_image, imagine_reference_to_image, imagine_text_to_video, imagine_image_to_video, imagine_reference_to_video, and render_file for chat previews. When to build a visual with code instead of generating it, prompt-craft, reference-first handling of real people, factual grounding, and asset-consistency. Load this whenever generating or editing an image or video is on the table. Tool-usage-driven, not triggered by a user merely mentioning images.

evalix098/tiktoklive

Peer-to-peer realtime multiplayer over WebRTC data channels: every user of the deployed app connects directly to every other user (full mesh), the server only brokers the handshake at /api/rtc. Lowest possible latency, zero per-message server cost. Use for 2-8 player co-op/casual realtime: shared cursors, drawing, party games, casual action. Triggers: p2p, peer to peer, webrtc, low latency multiplayer, direct connection.

evalix098/tiktoklive

Use Neon Postgres (the database) in this TanStack Start app. Use when the app needs to store or query data, persist state, or keep per-user data. Triggers on "database", "Postgres", "Neon", "save data", "store data", "persist", "tables", "SQL", "query", "migrations".

evalix098/tiktoklive

Share-link previews and app identity for apps on *.grok.me: the injector-owned og:image card, the SVG favicon, and PWA icons for installable apps. Use when scaffolding, renaming, or restyling the app — and for share / unfurl / OG / Twitter card questions. A custom 1200×630 card from the app's own art is the default — games of every kind (DOM board/word games included), whimsical apps, creative tools, and brand-forward pages; only plain utilities keep the placeholder. Always run the brand-asset pass as a `task` subagent and never wait for it. Triggers on "share", "rename", "app name", "OG", "Open Graph", "twitter card", "unfurl", "og:image", "og:type", "x:game:image", "x-banner", "link preview", "social card", "thumbnail", "preview image", "favicon", "app icon", "PWA", "manifest", "installable", "home screen", "SEO", "meta description".

evalix098/tiktoklive

Official Three.js API and TSL (Three.js Shading Language) reference for LLM code generation. Load when writing or debugging three.js / WebGL / WebGPU / custom materials / shaders / GLTF / advanced three APIs beyond basic game loop/controls. Prefer building-games for game correctness (loop, WASD, camera, orientation); use this skill for full API/TSL depth. Triggers on "three.js", "threejs", "WebGPU", "TSL", "NodeMaterial", "shader", "GLTF", "MeshStandard", "OrbitControls", "WebGLRenderer".

evalix098/tiktoklive

Grok Build only. Turn a 2D character still into denser animation sprites via imagine_text_to_image base → imagine_image_to_video (6s/10s run-in-place) → ffmpeg frames → magenta chroma-key → dense sampled strips/grids/GIFs. Use when the user wants video-to-sprite, smoother run/walk cycles, or denser intermediate poses. Prefer generate2dsprite for crisp production pixel sheets. Triggers on "video to sprite", "imagine_image_to_video sprite", "dense walk cycle", "smooth run animation from video".

evalix098/tiktoklive

Call the xAI API (Grok) from this app's server code using the injected XAI_API_KEY: chat/LLM features, image and video generation (Imagine), and voice (text-to-speech). Use when the app needs any "AI" / "assistant" / "chatbot" / "Grok" functionality, runtime image/video generation, or speech. Triggers on "AI", "LLM", "chatbot", "assistant", "Grok", "xAI", "generate text", "summarize", "generate image", "AI video", "voice", "text to speech", "TTS", "OpenAI" (use xAI instead).

相关技能