MCPs Skills Docs Pricing

Smithery is now a part of Arcade.dev! Read more in our announcement here

Give agents more agency

Resources

Documentation Privacy Policy System Status

Company

Connect

© 2026 Smithery. All rights reserved.

building-tour-cards

itsmealee/building-tour-cards

Design

About

SKILL.md

Install

Telegram
Slack
Claude Code
Codex
OpenClaw
Cursor
Amp
GitHub Copilot
Gemini CLI
Kilo Code
Junie
Replit
Windsurf
Cline
Continue
OpenCode
OpenHands
Roo Code
Augment
Goose
Trae
Zencoder
Antigravity
Download skill

├─

├─

└─

About

Guidelines for the Tour Card UI, the primary item in the tour grid. Use when building the tour browsing interface.

SKILL.md

Tour Card UI Component

When to use this skill

Building the travel catalog.
Implementing "Featured Tours" on the homepage.

Design Specs

Image: Aspect ratio 4:3, rounded corners.
Content:
- Right: Rating (Star icon + number).
- Top: Title (Bold, 1.1rem).
- Subtitle: Location (Muted text + pin icon).
- Bottom: Price (Prominent, e.g., "$299/person").
Hover: Subtle lift/shadow effect.

Instructions

Accessibility: Use semantic tags (article, h3).
Performance: Use next/image for optimized tour images.

Recommended Servers

MantleKit Launch Planner

Primary Source Commodities

Airtable

Repository

itsmealee/tourly2

Files