web-design-patterns

Guide website section design with hierarchy, context, and trust-tier constraints.

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/moughamir/justwaitit-review --skill web-design-patterns-moughamir
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-patterns
Source: https://github.com/moughamir/justwaitit-review/tree/main/.agents/skills/web-design-patterns
Command: npx skills add https://github.com/moughamir/justwaitit-review --skill web-design-patterns-moughamir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents “template” and AI-generated aesthetics by giving principle-based patterns for heroes, cards, CTAs, trust signals, and testimonials that match real business context and convert without fabricating proof.

Core Features & Use Cases

  • Section pattern guidance: Choose appropriate layouts and hierarchy for heroes, card grids, conversion CTAs, credibility blocks, and social proof patterns.
  • Anti-AI design rules: Apply specific anti-patterns (e.g., generic headlines, equal-weight democracy, orphan cards, over-symmetry, carousels for testimonials) to keep designs credible and intentional.
  • Lead-gen safety & trust ethics: Use context-aware trust tiering and explicit guardrails to avoid fabricating reviews, ratings, license numbers, or identifiable people when you don’t have real data.

Quick Start

Use the web-design-patterns skill to generate a homepage hero plus matching CTAs, trust signals, and testimonial layout for a local service business without fabricating reviews.

Frequently Asked Questions about web-design-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design website sections that avoid AI-generated aesthetics and templated layouts?

Design website sections using principle-based patterns for heroes, cards, and CTAs that apply hierarchy and context sensitivity to avoid AI-generated aesthetics. This approach enforces anti-pattern avoidance rules to keep layouts credible and intentional for real business contexts.

What is the best way to structure trust signals and testimonials for lead-gen sites without fabricating reviews?

Structure trust signals using context-aware trust tiering and explicit guardrails to avoid fabricating reviews, ratings, or identifiable people. Apply trust-tier constraints to safely handle unverifiable proof while maintaining lead-gen ethics and credibility.

Why does my homepage hero design look generic, and how can I fix it using design patterns?

Homepage hero designs look generic due to anti-patterns like generic headlines and over-symmetry. Fix them using a pattern-to-implementation selection framework that applies proper visual hierarchy and context-sensitive layout rules to create intentional, human-feeling sections.

Can I use anti-pattern rules for card-based service grids and conversion CTA placements?

Yes, you can apply anti-pattern rules to card-based service grids and conversion CTA placements. The framework prevents issues like equal-weight democracy and orphan cards, ensuring your conversion-focused CTA placements maintain credibility and intentional design hierarchy.

When should I not use a carousel for my testimonial layout?

You should not use a carousel for testimonial layouts because it is flagged as an anti-pattern that reduces credibility. Instead, use principle-based testimonial approaches with trust-tier constraints that match your real business context and available social proof data.