Smithery Homepage
Build and edit the Smithery homepage app -- a TanStack Start + shadcn/ui web app at...
Install
npx skills add arcadeai-labs/smithery-cli --skill smithery-homepage -g -a claude-code -y- Repository
- arcadeai-labs/smithery-cli849
- Category
- Design
- Updated
- 5mo ago
- License
- AGPL-3.0
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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.
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:
- Create the directory if needed and scaffold the app in place:
mkdir -p ~/.smithery cd ~/.smithery && npx shadcn@latest init --preset b1FSjVe3E --template start --name homepage - Install additional dependencies:
cd ~/.smithery/homepage npm install @smithery/api @modelcontextprotocol/sdk @tanstack/react-query @tanstack/react-query-devtools - Initialize git:
git init && git add -A && git commit -m "feat: initial commit" - Create
.envwith the user's Smithery API key and namespace (read from~/Library/Application Support/smithery/settings.jsonon macOS, fieldsapiKeyandnamespace)
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:
createServerFnfrom@tanstack/react-startfor server-side MCP calls
