skills.rest
smithery-ai
smithery-aiOFFICIAL
Explore all skills by this author →
Website𝕏@smitherydotaiGitHub

smithery-homepage

Build a TanStack Start dashboard with React Query and Zod-validated MCP tool data.

815|95|Updated Dec 22, 2024
Search Tags:#React Query#MCP#dashboard#shadcn/ui#TanStack Start#Smithery Connect#typed API integration
One-click install
npx skills add https://github.com/smithery-ai/cli --skill smithery-homepage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: smithery-homepage
Source: https://github.com/smithery-ai/cli/tree/main/skills/smithery-homepage
Command: npx skills add https://github.com/smithery-ai/cli --skill smithery-homepage

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of building and maintaining a personal dashboard that pulls live data from MCP tools without manually wiring authentication, server calls, caching, or UI updates.

Core Features & Use Cases

  • Create and evolve a persistent homepage: Sets up a TanStack Start + shadcn/ui app in ~/.smithery/homepage and supports ongoing feature additions or UI edits.
  • Connect MCP tools through Smithery Connect: Uses @smithery/api and @modelcontextprotocol/sdk to call MCP servers safely from server-side functions.
  • Reliable typed tool integration: Enforces React Query for all API requests, uses cached Zod schemas from real tool responses for validation, and standardizes loading/error handling.
  • Use Case: Show Linear issues, Gmail updates, Notion pages, or other MCP-powered results as homepage pages and widgets, then keep them fresh with cached queries and refetch behavior.

Quick Start

Use the smithery-homepage skill to scaffold the dashboard at ~/.smithery/homepage and then update a new route page to display data from one connected MCP tool.

Frequently Asked Questions about smithery-homepage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a dashboard with TanStack Start and shadcn/ui?▼

To build a dashboard with TanStack Start and shadcn/ui, scaffold a persistent project in ~/.smithery/homepage and add custom routes and UI components. This creates a local homepage project you can continuously update with new widgets.

How does React Query fetch MCP tool data for a personal homepage?▼

React Query fetches MCP tool data by enforcing typed API integration with cached Zod schemas that validate tool inputs and outputs safely. This standardizes loading and error handling for all data requests on your homepage.

Can I display Linear issues or Gmail updates using Smithery Connect?▼

Yes, you can display Linear issues, Gmail updates, or Notion pages as homepage widgets using Smithery Connect. It uses server-side MCP calls to pull live data and keeps results fresh with cached queries and refetch behavior.

Do I need Zod schemas to validate MCP tool inputs?▼

Yes, cached Zod schemas are required to validate MCP tool inputs and outputs safely. This enforces reliable typed tool integration and standardizes data handling across all tool-backed pages on your dashboard.

What is the best way to add a new route to a Smithery dashboard?▼

The best way to add a new route to a Smithery dashboard is to edit the existing TanStack Start project under ~/.smithery/homepage. You create the route page and wire it to display data from a connected MCP tool using React Query.

Related Skills

Explore More Software Engineering Skills→
hollaugohollaugo

mcp-app-builder

Scaffold MCP Apps with React UIs and Vite bundling.

Community
Advanced
lespacemanlespaceman
4

start-core/deployment

Deploy TanStack Start applications with SSR, prerendering, and SEO configurations.

Community
Intermediate
hotriluanhotriluan

ck:tanstack

Scaffold TanStack Start, Form, and AI for full-stack React applications.

Community
Intermediate
johnnystefanjohnnystefan

react-19

Enforce React 19 component patterns with React Query, Zustand, and Zod validation.

Community
Intermediate