agentsclimarketplace

Responsive service landing page with tailwind css

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8/responsive-service-landing-page-with-tailwind-css

AutoSkill: Experience-Driven Lifelong Learning via Skill Self-Evolution

Install
npx -y skills add ECNU-ICALK/AutoSkill --skill responsive-service-landing-page-with-tailwind-css

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.5 KB, as published. Nobody here has run it

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

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.