OpenSkillIndex← back to search
claude-codeother

Claude-skill-registry building-tour-cards

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

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/building-tour-cards" ~/.claude/skills/majiayu000-claude-skill-registry-building-tour-cards && rm -rf "$T"
manifest: skills/data/building-tour-cards/SKILL.md
tags
#ui-design#travel-tours#semantic-html#image-optimization#accessibility
source content

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.