AgentSkillsCN

building-tour-cards

Tour Card UI 的设计指南——作为旅游网格中的核心元素。在构建旅游浏览界面时，可使用此指南。

SKILL.md
--- frontmatter
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.