# Smithery Homepage

Build and edit the Smithery homepage app -- a TanStack Start + shadcn/ui web app at...

- Repository: https://github.com/arcadeai-labs/smithery-cli (849 stars)
- Category: Design
- License: AGPL-3.0
- Last updated: 2026-05-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add arcadeai-labs/smithery-cli --skill smithery-homepage -g -a claude-code -y`
Codex: `npx skills add arcadeai-labs/smithery-cli --skill smithery-homepage -g -a codex -y`
Cursor: `npx skills add arcadeai-labs/smithery-cli --skill smithery-homepage -g -a cursor -y`
Gemini CLI: `npx skills add arcadeai-labs/smithery-cli --skill smithery-homepage -g -a gemini-cli -y`

## Description

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 that display data from MCP tools (Linear issues, Gmail, Notion, etc.), or asks about editing anything in ~/.smithery/homepage. Also triggers for requests like 'add a page to the homepage', 'show my Linear issues on the homepage', 'update the homepage UI', or any task involving the ~/.smithery/homepage project.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Smithery Homepage

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.

## Project Initialization

If `~/.smithery/homepage` does not exist, scaffold it from scratch:

1. Create the directory if needed and scaffold the app in place:
   ```bash
   mkdir -p ~/.smithery
   cd ~/.smithery && npx shadcn@latest init --preset b1FSjVe3E --template start --name homepage
   ```
2. Install additional dependencies:
   ```bash
   cd ~/.smithery/homepage
   npm install @smithery/api @modelcontextprotocol/sdk @tanstack/react-query @tanstack/react-query-devtools
   ```
3. Initialize git: `git init && git add -A && git commit -m "feat: initial commit"`
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`)

If `~/.smithery/homepage` already exists, work within the existing project, read the current code before making changes.

## Tech Stack

- **Framework**: TanStack Start (Vite 7, React 19, file-based routing)
- **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.
- **Data Fetching**: `@tanstack/react-query` (React Query), ALL API requests MUST use React Query
- **MCP Integration**: `@smithery/api` + `@modelcontextprotocol/sdk`
- **Server functions**: `createServerFn` from `@tanstack/react-start` for server-side MCP calls

## CRITICAL: React Query for ALL API Requests

The rest: https://github.com/arcadeai-labs/smithery-cli/blob/HEAD/skills/smithery-homepage/SKILL.md