Communitygithub.com

gabrielmoreira/agent-skills-mirror

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.

agent-skills-mirror とは？

agent-skills-mirror is a Claude Code agent skill that 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.

対応~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/gabrielmoreira/agent-skills-mirror/tree/HEAD/mirrors/repos/ECNU-ICALK@AutoSkill/SkillBank/ConvSkill/english_gpt4_8/responsive-service-landing-page-with-tailwind-css
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

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

Individual skills in this repo

This repo contains 12 individual skills — each has its own dedicated page.

gabrielmoreira/agent-skills-mirror

Design exclusive bonus packages that make YOUR affiliate link the obvious choice. Triggers on: "create bonuses for", "bonus stack", "what bonuses should I offer", "bonus ideas for", "exclusive bonuses", "differentiate my affiliate link", "why buy through my link", "affiliate bonuses", "bonus package", "what can I offer as a bonus", "design bonuses", "build a bonus stack".

gabrielmoreira/agent-skills-mirror

Design irresistible affiliate offers using the Hormozi Grand Slam framework. Triggers on: "create an offer for", "design my offer", "grand slam offer", "make an irresistible offer", "why should someone buy through my link", "offer framework", "value proposition for", "Hormozi offer", "offer stack", "make my offer irresistible", "craft an offer", "what makes my offer different", "offer design", "increase perceived value".

gabrielmoreira/agent-skills-mirror

Create YOUR personal guarantee on top of the product's guarantee for risk reversal. Triggers on: "create a guarantee", "guarantee for my affiliate", "risk reversal", "money back guarantee", "what guarantee can I offer", "reduce buyer risk", "guarantee copy", "how to guarantee", "affiliate guarantee", "personal guarantee", "risk-free offer", "satisfaction guarantee", "results guarantee".

gabrielmoreira/agent-skills-mirror

Build high-converting affiliate landing pages as single self-contained HTML files. Triggers on: "create a landing page for", "build a landing page", "product landing page", "affiliate landing page", "comparison page for", "vs page", "single product page", "conversion page", "sales page for affiliate", "landing page HTML", "build me a page for", "create a page to promote [product]", "I need a landing page", "make a page for [product]".

gabrielmoreira/agent-skills-mirror

Build a single-product deep-dive showcase page as a self-contained HTML file. Triggers on: "build a product showcase page", "deep dive landing page for [product]", "create a product spotlight page", "product feature page", "single product page", "detailed page about [product]", "build a page showing everything about [product]", "create a long-form product page", "build a sales page for [product]", "product deep dive page", "make a feature breakdown page for [product]".

gabrielmoreira/agent-skills-mirror

Build email capture landing pages (squeeze pages) as single self-contained HTML files. Triggers on: "build a squeeze page", "email capture page", "lead magnet page", "create an opt-in page", "build an email list page", "lead capture landing page", "create a freebie page", "build a page to collect emails", "opt-in landing page", "email signup page for [product/niche]", "create a lead magnet landing page", "build a page that captures emails before sending to affiliate offer".

gabrielmoreira/agent-skills-mirror

Design the complete free-to-premium value ladder for affiliate promotions. Triggers on: "value ladder", "customer journey", "upsell path", "ascension model", "free to paid funnel", "tripwire offer", "upsell strategy", "downsell", "product ladder", "price ladder", "customer ascension", "funnel architecture", "map my funnel", "design my funnel stages", "monetization path".

gabrielmoreira/agent-skills-mirror

Build a webinar or live event registration page as a self-contained HTML file with countdown timer, speaker bio, agenda, and registration form. Triggers on: "build a webinar registration page", "create a webinar sign-up page", "event registration landing page", "live training registration page", "workshop sign-up page", "create a webinar page", "build an event page", "free webinar landing page", "live demo registration page", "online event page", "create a registration page for my webinar", "build a training event page".

gabrielmoreira/agent-skills-mirror

Audit paid-ad landing pages for message match, mobile experience, performance, accessibility, trust, forms, consent, tracking, security, and conversion friction. Use for landing-page audit, post-click experience, LP audit, conversion-rate optimization, form optimization, ad-to-page message match, redirects, blocked navigation, or requests involving private, loopback, link-local, or metadata IP destinations.

gabrielmoreira/agent-skills-mirror

Review UI code for Web Interface Guidelines compliance.

gabrielmoreira/agent-skills-mirror

Generate complete, deploy-ready landing pages from any repository. Use when creating a homepage for an open-source project, building a project website, converting a README into a marketing page, or standardizing landing pages across multiple repos.

gabrielmoreira/agent-skills-mirror

Shapes job-seeking personal sites: thirty-second hero, outcome-led case studies, hybrid home-plus-project routes, and frictionless contact CTAs, with heavy motion that degrades on mobile. Use for developer, designer, or creative portfolio work. Not a SaaS marketing landing page and not a WebGL engine tutorial.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community