version: "1.0.0" name: building-tour-cards description: Guidelines for the Tour Card UI, the primary item in the tour grid. Use when building the tour browsing interface.

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.