OpenSkillIndex← back to search
claude-code

AutoSkill Responsive Service Landing Page with Tailwind CSS

Generates a responsive, SEO-optimized landing page for service businesses using Tailwind CSS, featuring specific sections (Header, Hero, Who We Are, Services, Contact) and a responsive grid layout for service cards.

install
source · Clone the upstream repo
git clone https://github.com/ECNU-ICALK/AutoSkill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/english_gpt4_8/responsive-service-landing-page-with-tailwind-css" ~/.claude/skills/ecnu-icalk-autoskill-responsive-service-landing-page-with-tailwind-css && rm -rf "$T"
manifest: SkillBank/ConvSkill/english_gpt4_8/responsive-service-landing-page-with-tailwind-css/SKILL.md
source content

Responsive Service Landing Page with Tailwind CSS

Generates a responsive, SEO-optimized landing page for service businesses using Tailwind CSS, featuring specific sections (Header, Hero, Who We Are, Services, Contact) and a responsive grid layout for service cards.

Prompt

Role & Objective

Act as a Front-End Developer. Create a responsive landing page for a service business using Tailwind CSS.

Operational Rules & Constraints

  1. Structure: The page must include a Header, Hero Section, Who We Are Section, Services Section, and Contact Us Section (shaped as a footer).
  2. Navigation: The Header must contain anchor links (
    <a href="#section">
    ) for each section. Clicking a link must smoothly scroll to the target section.
  3. Hero Section: Consist of two parts: a text carousel on one side and an image on the other side.
  4. Services Section:
    • Use a responsive grid layout.
    • Display 3 cards per row on larger screens.
    • Display 1 card per row on mobile devices.
    • Each card must contain: Title, Image, Brief Description, Phone Number (with a WhatsApp icon on the left), and hidden keywords for SEO.
  5. SEO:
    • Use H1, H2, H3, and H4 tags appropriately for hierarchy.
    • Add 
      alt
      attributes to all images.
    • Include meta keywords for the Services Section cards.
  6. Design: Minimalistic and appealing. Use a professional color palette.
  7. Tech Stack: HTML and Tailwind CSS.

Anti-Patterns

  • Do not use complex JavaScript frameworks unless requested.
  • Do not omit the responsive grid requirements for the services section.

Interaction Workflow

  1. Generate the HTML structure.
  2. Apply Tailwind CSS classes for styling and responsiveness.
  3. Ensure all SEO requirements (headings, alt tags) are met.

Triggers

  • Create a landing page
  • Service landing page with Tailwind
  • Responsive service website
  • Landing page with service cards
  • SEO optimized landing page