smithery-homepage

Name: smithery-homepage
Author: smithery-ai

56installs94forks

How to install smithery-homepage?

smithery-ai/cli/smithery-homepage

$npx -y skills add smithery-ai/cli --skill smithery-homepage

Installs into the current project.

Summary

Build and edit the Smithery homepage app -- a TanStack Start + shadcn/ui web app at ~/.smithery/homepage that connects to MCP servers through the Smithery Connect API. Use this skill whenever the user wants to create, modify, or add features to the Smithery homepage, build pages

Files · 1

View on GitHub

SKILL.md

1	# Smithery Homepage
2
3	The Smithery homepage is a TanStack Start app at `~/.smithery/homepage` that serves as a personal dashboard connecting to MCP servers via the Smithery Connect API.
4
5	## Project Initialization
6
7	If `~/.smithery/homepage` does not exist, scaffold it from scratch:
8
9	1. Create the directory if needed and scaffold the app in place:
10	```bash
11	mkdir -p ~/.smithery
12	cd ~/.smithery && npx shadcn@latest init --preset b1FSjVe3E --template start --name homepage
13	```
14	2. Install additional dependencies:
15	```bash
16	cd ~/.smithery/homepage
17	npm install @smithery/api @modelcontextprotocol/sdk @tanstack/react-query @tanstack/react-query-devtools
18	```
19	3. Initialize git: `git init && git add -A && git commit -m "feat: initial commit"`
20	4. Create `.env` with the user's Smithery API key and namespace (read from `~/Library/Application Support/smithery/settings.json` on macOS — fields `apiKey` and `namespace`)
21
22	If `~/.smithery/homepage` already exists, work within the existing project — read the current code before making changes.
23
24	## Tech Stack
25
26	- Framework: TanStack Start (Vite 7, React 19, file-based routing)
27	- Styling: Tailwind CSS v4 + shadcn/ui (radix-nova style, taupe base). Always use shadcn components with their default styling unless absolutely necessary or explicitly requested otherwise. This applies especially to charts — use shadcn's chart components (built on Recharts) rather than custom chart implementations.
28	- Data Fetching: `@tanstack/react-query` (React Query) — ALL API requests MUST use React Query
29	- MCP Integration: `@smithery/api` + `@modelcontextprotocol/sdk`
30	- Server functions: `createServerFn` from `@tanstack/react-start` for server-side MCP calls
31
32	## CRITICAL: React Query for ALL API Requests
33
34	Every API request in the app MUST use React Query (`@tanstack/react-query`). Do not use raw `fetch`, `useEffect` + `useState`, or route loaders alone for data fetching. React Query provides caching, background refetching, loading/error states, and stale-while-revalidate — all of which are essential for a good dashboard UX.
35
36	### QueryClient Setup
37
38	The `QueryClient` must be configured in the router and provided at the root layout. The scaffold generates `getRouter()` — update it to add the QueryClient:
39
40	```typescript
41	// src/router.tsx
42	import { QueryClient } from "@tanstack/react-query"
43	import { createRouter as createTanStackRouter } from "@tanstack/react-router"
44	import { routeTree } from "./routeTree.gen"
45
46	export function getRouter() {
47	const queryClient = new QueryClient({
48	defaultOptions: {
49	queries: {
50	staleTime: 1000 * 60, // 1 minute
51	refetchOnWindowFocus: true,
52	},
53	},
54	})
55
56	return createTanStackRouter({
57	routeTree,
58	context: { queryClient },
59	scrollRestoration: true,
60	defaultPreload: "intent",
61	defaultPreloadStaleTime: 0,
62	})
63	}
64
65	declare module "@tanstack/react-router" {
66	interface Register {
67	router: ReturnType<typeof getRouter>
68	}
69	}
70	```
71
72	The scaffold generates `__root.tsx` with `createRootRoute` and a `shellComponent` for the HTML document wrapper. Replace `createRootRoute` with `createRootRouteWithContext` to pass QueryClient, keep the `shellComponent`, and add a `component` with QueryClientProvider:
73
74	```typescript
75	// src/routes/__root.tsx
76	import {
77	HeadContent,
78	Outlet,
79	Scripts,
80	createRootRouteWithContext,
81	} from "@tanstack/react-router"
82	import { QueryClientProvider } from "@tanstack/react-query"
83	import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
84	import type { QueryClient } from "@tanstack/react-query"
85	import appCss from "../styles.css?url"
86
87	export const Route = createRootRouteWithContext<{
88	queryClient: QueryClient
89	}>()({
90	head: () => ({
91	meta: [
92	{ charSet: "utf-8" },
93	{ name: "viewport", content: "width=device-width, initial-scale=1" },
94	{ title: "Dashboard" },
95	],
96	links: [{ rel: "stylesheet", href: appCss }],
97	}),
98	component: RootComponent,
99	shellComponent: RootDocument,
100	})
101
102	function RootComponent() {
103	const { queryClient } = Route.useRouteContext()
104	return (
105	<QueryClientProvider client={queryClient}>
106	<Outlet />
107	<ReactQueryDevtools />
108	</QueryClientProvider>
109	)
110	}
111
112	function RootDocument({ children }: { children: React.ReactNode }) {
113	return (
114	<html lang="en">
115	<head>
116	<HeadCon

People who liked this also viewed

6 picks

Type

smithery-homepage

56installs94forks

View on GitHub

How to install smithery-homepage?

smithery-ai/cli/smithery-homepage

$npx -y skills add smithery-ai/cli --skill smithery-homepage

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Smithery Homepage
2
3	The Smithery homepage is a TanStack Start app at `~/.smithery/homepage` that serves as a personal dashboard connecting to MCP servers via the Smithery Connect API.
4
5	## Project Initialization
6
7	If `~/.smithery/homepage` does not exist, scaffold it from scratch:
8
9	1. Create the directory if needed and scaffold the app in place:
10	```bash
11	mkdir -p ~/.smithery
12	cd ~/.smithery && npx shadcn@latest init --preset b1FSjVe3E --template start --name homepage
13	```
14	2. Install additional dependencies:
15	```bash
16	cd ~/.smithery/homepage
17	npm install @smithery/api @modelcontextprotocol/sdk @tanstack/react-query @tanstack/react-query-devtools
18	```
19	3. Initialize git: `git init && git add -A && git commit -m "feat: initial commit"`
20	4. Create `.env` with the user's Smithery API key and namespace (read from `~/Library/Application Support/smithery/settings.json` on macOS — fields `apiKey` and `namespace`)
21
22	If `~/.smithery/homepage` already exists, work within the existing project — read the current code before making changes.
23
24	## Tech Stack
25
26	- Framework: TanStack Start (Vite 7, React 19, file-based routing)
27	- Styling: Tailwind CSS v4 + shadcn/ui (radix-nova style, taupe base). Always use shadcn components with their default styling unless absolutely necessary or explicitly requested otherwise. This applies especially to charts — use shadcn's chart components (built on Recharts) rather than custom chart implementations.
28	- Data Fetching: `@tanstack/react-query` (React Query) — ALL API requests MUST use React Query
29	- MCP Integration: `@smithery/api` + `@modelcontextprotocol/sdk`
30	- Server functions: `createServerFn` from `@tanstack/react-start` for server-side MCP calls
31
32	## CRITICAL: React Query for ALL API Requests
33
34	Every API request in the app MUST use React Query (`@tanstack/react-query`). Do not use raw `fetch`, `useEffect` + `useState`, or route loaders alone for data fetching. React Query provides caching, background refetching, loading/error states, and stale-while-revalidate — all of which are essential for a good dashboard UX.
35
36	### QueryClient Setup
37
38	The `QueryClient` must be configured in the router and provided at the root layout. The scaffold generates `getRouter()` — update it to add the QueryClient:
39
40	```typescript
41	// src/router.tsx
42	import { QueryClient } from "@tanstack/react-query"
43	import { createRouter as createTanStackRouter } from "@tanstack/react-router"
44	import { routeTree } from "./routeTree.gen"
45
46	export function getRouter() {
47	const queryClient = new QueryClient({
48	defaultOptions: {
49	queries: {
50	staleTime: 1000 * 60, // 1 minute
51	refetchOnWindowFocus: true,
52	},
53	},
54	})
55
56	return createTanStackRouter({
57	routeTree,
58	context: { queryClient },
59	scrollRestoration: true,
60	defaultPreload: "intent",
61	defaultPreloadStaleTime: 0,
62	})
63	}
64
65	declare module "@tanstack/react-router" {
66	interface Register {
67	router: ReturnType<typeof getRouter>
68	}
69	}
70	```
71
72	The scaffold generates `__root.tsx` with `createRootRoute` and a `shellComponent` for the HTML document wrapper. Replace `createRootRoute` with `createRootRouteWithContext` to pass QueryClient, keep the `shellComponent`, and add a `component` with QueryClientProvider:
73
74	```typescript
75	// src/routes/__root.tsx
76	import {
77	HeadContent,
78	Outlet,
79	Scripts,
80	createRootRouteWithContext,
81	} from "@tanstack/react-router"
82	import { QueryClientProvider } from "@tanstack/react-query"
83	import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
84	import type { QueryClient } from "@tanstack/react-query"
85	import appCss from "../styles.css?url"
86
87	export const Route = createRootRouteWithContext<{
88	queryClient: QueryClient
89	}>()({
90	head: () => ({
91	meta: [
92	{ charSet: "utf-8" },
93	{ name: "viewport", content: "width=device-width, initial-scale=1" },
94	{ title: "Dashboard" },
95	],
96	links: [{ rel: "stylesheet", href: appCss }],
97	}),
98	component: RootComponent,
99	shellComponent: RootDocument,
100	})
101
102	function RootComponent() {
103	const { queryClient } = Route.useRouteContext()
104	return (
105	<QueryClientProvider client={queryClient}>
106	<Outlet />
107	<ReactQueryDevtools />
108	</QueryClientProvider>
109	)
110	}
111
112	function RootDocument({ children }: { children: React.ReactNode }) {
113	return (
114	<html lang="en">
115	<head>
116	<HeadCon

People who liked this also viewed

6 picks

Type