skills.rest
khulnasoft-bot
khulnasoft-botCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-vite-dashboard

Convert Stitch screens into React and Vite dashboards with TanStack Query and DESIGN.md tokens.

1|Updated Jun 30, 2026
Search Tags:#react#dashboard#design tokens#vite#tanstack query#web3#stitch
One-click install
npx skills add https://github.com/khulnasoft-bot/design.md --skill react-vite-dashboard-khulnasoft-bot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-vite-dashboard
Source: https://github.com/khulnasoft-bot/design.md/tree/main/skills/plugins/stitch-build/skills/react-vite-dashboard
Command: npx skills add https://github.com/khulnasoft-bot/design.md --skill react-vite-dashboard-khulnasoft-bot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a Stitch design screen into a working React dashboard requires manual translation of layouts, tokens, and data wiring, which is slow and error-prone. This Skill automates that conversion while preserving design-token fidelity and accessibility. ## Core Features & Use Cases - Stitch-to-React conversion: Fetches Stitch screens via MCP, downloads HTML/screenshot assets, and generates React 18 + Vite + TypeScript components organized into components, pages, hooks, and lib directories. - DESIGN.md token integration: Maps colors, typography, and spacing tokens to CSS variables and validates them with the design.md linter before shipping UI. - Data and Web3 wiring: Connects TanStack Query for async fetches and supports read-only on-chain calls via ethers v6 or viem/wagmi with proper formatting and error surfacing. - Use Case: Given a Stitch portfolio dashboard screen, generate a Vite app where summary cards are wired to TanStack Query and ethers read-only contract calls, styled from your DESIGN.md tokens. ## Quick Start Ask the agent to convert your Stitch dashboard screen into React + Vite components using your project's DESIGN.md tokens.

Frequently Asked Questions about react-vite-dashboard

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

FAQPage Schema
How do I convert a Stitch design into React components?▼

Configure Stitch MCP, then let the Skill fetch the screen with get_screen, download the HTML and screenshot assets, and generate React 18 + Vite + TypeScript components split into components, pages, and hooks directories.

How to apply DESIGN.md tokens in a React Vite app?▼

Map colors, typography, and spacing tokens from DESIGN.md to CSS variables in src/index.css, then reference them in components. Run npx @scalify/cli lint DESIGN.md before shipping to catch contrast and token issues.

Can I use ethers or viem for Web3 dashboard data?▼

Yes, both are supported for read-only contract calls. Use useReadContract with viem/wagmi or an ethers Contract inside a TanStack Query queryFn, and format amounts with formatUnits.

Does the generated dashboard meet accessibility requirements?▼

The workflow targets WCAG 2.2 AA, including contrast validation from DESIGN.md component pairs, keyboard-navigable focus order, semantic tables, labeled form inputs, and aria-busy states during loading.

What are the prerequisites for using this Skill?▼

You need Stitch MCP configured, a project DESIGN.md file for token fidelity, and a Vite + React + TypeScript scaffold created with npm create vite@latest. RPC URLs must come from environment variables, never hardcoded secrets.

Related Skills

Explore More Software Engineering Skills→
KaziNizamulKaziNizamul

design-md

Extract design tokens from Stitch screens into a semantic DESIGN.md.

Community
Advanced
vmkteamvmkteam
6

api-health

Query JSON-RPC endpoints to validate health and collect method timing data.

Official
Intermediate
ZoyaAfzalZoyaAfzal

shadcn

Compose accessible React UI components with Tailwind CSS and shadcn.

Community
Intermediate
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced