Moai Ref React Patterns
modu-ai/moai-adk
React/Next.js component design patterns, state management strategies, and project structure reference for frontend development.
TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers.
$ npx skills add secondsky/claude-skills --skill tanstack-start -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install secondsky/claude-skills tanstack-start --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/secondsky/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/tanstack-start/skills/tanstack-start .claude/skills/tanstack-start && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "tanstack-start" agent skill from https://github.com/secondsky/claude-skills/tree/main/plugins/tanstack-start/skills/tanstack-start into .claude/skills/tanstack-start/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tanstack-start", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/secondsky/claude-skills/tree/main/plugins/tanstack-start/skills/tanstack-startType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add secondsky/claude-skills --skill tanstack-start -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install secondsky/claude-skills tanstack-start --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/secondsky/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/tanstack-start/skills/tanstack-start .agents/skills/tanstack-start && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "tanstack-start" agent skill from https://github.com/secondsky/claude-skills/tree/main/plugins/tanstack-start/skills/tanstack-start into .agents/skills/tanstack-start/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tanstack-start", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add secondsky/claude-skills --skill tanstack-start -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install secondsky/claude-skills tanstack-start --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/secondsky/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/tanstack-start/skills/tanstack-start .cursor/skills/tanstack-start && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "tanstack-start" agent skill from https://github.com/secondsky/claude-skills/tree/main/plugins/tanstack-start/skills/tanstack-start into .cursor/skills/tanstack-start/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tanstack-start", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/secondsky/claude-skills.git --path plugins/tanstack-start/skills/tanstack-start--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add secondsky/claude-skills --skill tanstack-start -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install secondsky/claude-skills tanstack-start --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/secondsky/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/tanstack-start/skills/tanstack-start .gemini/skills/tanstack-start && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "tanstack-start" agent skill from https://github.com/secondsky/claude-skills/tree/main/plugins/tanstack-start/skills/tanstack-start into .gemini/skills/tanstack-start/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tanstack-start", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install secondsky/claude-skills tanstack-startInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add secondsky/claude-skills --skill tanstack-start -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/secondsky/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/tanstack-start/skills/tanstack-start .github/skills/tanstack-start && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "tanstack-start" agent skill from https://github.com/secondsky/claude-skills/tree/main/plugins/tanstack-start/skills/tanstack-start into .github/skills/tanstack-start/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tanstack-start", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add secondsky/claude-skills --skill tanstack-start -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install secondsky/claude-skills tanstack-start --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/secondsky/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/tanstack-start/skills/tanstack-start .opencode/skills/tanstack-start && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "tanstack-start" agent skill from https://github.com/secondsky/claude-skills/tree/main/plugins/tanstack-start/skills/tanstack-start into .opencode/skills/tanstack-start/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tanstack-start", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
tanstack-startTanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers.
Tanstack Start is an agent skill from secondsky/claude-skills. TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers. Use for Next.js migration, edge rendering, or encountering hydration, auth, data pattern errors.
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 11 other files, including scripts and reference files (for example `references/cloudflare-hosting-and-env.md`, `references/devtools-and-llm-support.md` and `references/execution-and-auth.md`).
It sits in Development. It works with TanStack, React, Cloudflare Workers and Next.js. The repository describes itself as: Production-ready skills for Claude Code CLI - Cloudflare, React, Tailwind v4, and AI integrations. The licence is MIT.
Read from SKILL.md and the folder at commit 8837836. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
BashReadWriteEditFrom allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/ (Shell), which the agent can run.
Shell commands in SKILL.md call:
npmcurlFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use npm and curl, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Tanstack Start loads about 1.6k tokens when it runs, and up to ~6.1k if it reads all its reference files. Until then it costs about 49 tokens; SKILL.md has 576 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
allowed-tools: Bash, Read, Write, EditAutomated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from secondsky/claude-skills at commit 8837836, republished under its MIT licence (© secondsky). 576 words, ~1,642 tokens.
.claude/skills/tanstack-start/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.Full-stack React on TanStack Router with per-route SSR/CSR, file-based routing, server functions, and first-class Cloudflare Workers support.
scripts/bootstrap-cloudflare-start.sh <app> scaffolds Start + Workers + binding types.npm create @tanstack/start@latest my-app
cd my-app
npm run devManual installs (all bundle targets are supported): add @tanstack/react-router + @tanstack/react-start with your bundler plugin (vite, webpack, or esbuild) per the official install guides.
app/routes/** file-based routes → router tree, automatic code-splitting + data preloading.app/entry.client.tsx hydrates <StartClient />; app/entry.server.tsx wraps createServerEntry.app/config.ts or app/start.ts sets defaultSsr, spaMode, middleware, and context.createFileRoute() infers path params; add validateSearch (zod) to parse and coerce search params.redirect()/notFound() for control flow.action/server functions; keep loaders read-only and invalidate via router.invalidate() after mutation.QueryClient in router context and ensureQueryData inside loaders to dedupe fetches.head per route for <title>/meta; derive from loader data to keep SEO consistent.notFound() or redirect() in loaders/middleware; use error boundaries for UX.Example route (typed search + data-only SSR):
// app/routes/posts.$postId.tsx
import { createFileRoute, redirect } from '@tanstack/react-router'
import { z } from 'zod'
export const Route = createFileRoute('/posts/$postId')({
validateSearch: z.object({ preview: z.boolean().optional() }),
ssr: 'data-only',
loader: async ({ params, search, context }) => {
const post = await context.queryClient.ensureQueryData(['post', params.postId], () =>
fetch(`/api/posts/${params.postId}?preview=${!!search.preview}`).then(r => r.json())
)
if (!post.published && !search.preview) throw redirect({ to: '/drafts' })
return { post }
},
})<Link preload="intent"> (hover/focus) preloads route data/code; use preload="render" for above-the-fold routes.router.preloadRoute({ to, search }) to warm caches before navigation (e.g., on visibility)./products?slug=abc masked as /p/abc).router.navigate({ to, replace, from }) blockers or useBlocker.scrollRestoration to restore positions on back/forward; customize per route when using long lists.ssr: true | false | 'data-only' on routes; defaultSsr config sets the baseline.lazy/load for manual chunks on code-based routes.preload="intent" links with defaultPreloadStaleTime to avoid over-fetching.pendingComponent for CSR routes to avoid layout shift.<RouterDevtools /> during development to inspect matches, loader states, and preloading.@tanstack/eslint-plugin-router with the recommended config to enforce inference-sensitive property order (e.g., beforeLoad before loader).Route meta for better AI navigation.cloudflare({ viteEnvironment: { name: 'ssr' } }) first in Vite plugins so bindings reach server entry.npm run cf-typegen.pages.ssr: 'data-only' for non-deterministic UI).validateSearch and custom serializer where needed.create-route-property-order rule) and npm run check passes.router.matches state looks correct.cf-typegen) and streaming tested via curl -N.© secondsky, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 9 other files (scripts, references) in plugins/tanstack-start/skills/tanstack-start of secondsky/claude-skills.
Open the folder on GitHubat commit 8837836
Tanstack Start next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Tanstack Start this skillsecondsky/claude-skills | 227 | — | ~1.6k | Automated safety check: Notes | MIT | |
| Moai Ref React Patternsmodu-ai/moai-adk | 1.2k | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Component Patternsrevfactory/harness-100 | 1.3k | — | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| Nextjs On Cloudflarecloudflare/skills | 3k | 2 repos | ~678 | Automated safety check: Pass | Apache-2.0 | |
| Prepare Cloudflare Production DeploymentLubomirGeorgiev/cloudflare-workers-nextjs-saas-template | 786 | — | ~5.9k | Automated safety check: Notes | MIT | |
| Spiceflowremorses/spiceflow | 167 | — | ~1.9k | Automated safety check: Pass | MIT |
modu-ai/moai-adk
React/Next.js component design patterns, state management strategies, and project structure reference for frontend development.
revfactory/harness-100
React/Next.js component design pattern library. An agent skill from revfactory/harness-100.
cloudflare/skills
Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext.
LubomirGeorgiev/cloudflare-workers-nextjs-saas-template
Source-of-truth runbook for preparing this Vinext Cloudflare Workers SaaS template for production deployment.
remorses/spiceflow
Spiceflow is a super simple, fast, and type-safe API and React Server Components framework for TypeScript.
hodgef/apiker
Build AI agents on Cloudflare Workers using the Agents SDK. An agent skill from hodgef/apiker.
secondsky/claude-skills
TanStack AI (alpha) provider-agnostic type-safe chat with streaming for OpenAI, Anthropic, Gemini, Ollama.
secondsky/claude-skills
AutoAnimate (@formkit/auto-animate) zero-config animations for React.
secondsky/claude-skills
MUI Base UI unstyled React components with Floating UI. An agent skill from secondsky/claude-skills.
secondsky/claude-skills
This skill should be used when the user asks to "upload images to Cloudflare", "implement direct creator upload", "configure image transformations", "optimize WebP/AVIF", "create image variants"…
secondsky/claude-skills
Deploy Next.js to Cloudflare Workers via the OpenNext adapter (@opennextjs/cloudflare).
secondsky/claude-skills
Cloudflare Sandboxes SDK for secure code execution in Linux containers at edge.
Categories
TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers. Tanstack Start is an agent skill from secondsky/claude-skills. TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers.
Tanstack Start fits situations like: Next.js migration; encountering hydration; data pattern errors.
Run `npx skills add secondsky/claude-skills --skill tanstack-start -a claude-code`. Or copy the skill folder (plugins/tanstack-start/skills/tanstack-start in secondsky/claude-skills) into .claude/skills/tanstack-start in your project. Claude Code loads it when a task matches its description.
Run `npx skills add secondsky/claude-skills --skill tanstack-start -a codex`. Or copy the skill folder (plugins/tanstack-start/skills/tanstack-start in secondsky/claude-skills) into .agents/skills/tanstack-start in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add secondsky/claude-skills --skill tanstack-start -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tanstack-start, .gemini/skills/tanstack-start, .github/skills/tanstack-start and .opencode/skills/tanstack-start in your project.
Going by SKILL.md and its folder, Tanstack Start needs a shell for the scripts in its folder and the command-line tools its instructions call (npm and curl). Our summary lists: A Bash shell. Its frontmatter pre-approves these tools: Bash, Read, Write, Edit.
SKILL.md contains no URLs. Its commands use npm and curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Tanstack Start is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.6k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.5k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Tanstack Start: Moai Ref React Patterns (modu-ai/moai-adk, 1.2k stars), Component Patterns (revfactory/harness-100, 1.3k stars), Nextjs On Cloudflare (cloudflare/skills, 3k stars) and Prepare Cloudflare Production Deployment (LubomirGeorgiev/cloudflare-workers-nextjs-saas-template, 786 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
secondsky (a GitHub user) maintains it in secondsky/claude-skills, which has 227 GitHub stars. The repository holds 169 skills in this directory. The repository was last updated on September 28, 2026.
Source: secondsky/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.