SKILL.md
$2a
Cross-Cutting Principles
These apply to ALL patterns. Internalise these before reading any reference file.
Anti-AI Patterns (Avoid These)
The "AI skeleton" that signals template-generated design:
- The sequence: Hero → trust bar → 3 identical cards → features → stats → CTA → footer
- Democratic design: Every element gets equal visual weight, no hierarchy
- Perfect symmetry: Everything centred, perfectly aligned, no intentional asymmetry
- Identical repetition: All cards same size, same structure, same padding, same shadow
- Generic copy: "Learn More" as every CTA, "Quality Service You Can Trust" as every headline
- Decoration without purpose: Floating shapes, random gradients, abstract blobs
What Makes Design Feel Human
- One element clearly dominates — hierarchy, not democracy
- Asymmetry is intentional — not everything centred or balanced
- Specific, opinionated copy — "Schedule Your Free Roof Inspection" not "Learn More"
- Visual weight guides the eye — you know where to look first, second, third
- Restraint — not every technique used, just the ones that serve the purpose
- Context-appropriate — emergency plumber looks different from luxury hotel
Ethical Rules
Non-negotiable across all patterns:
On lead-gen sites (no real business data), NEVER fabricate:
- Star ratings or review counts
- Specific years in business
- Licence or ABN numbers
- Named individuals or team members
- Exact customer counts
Safe alternatives for lead-gen:
- "Experienced Team" (not "25 Years Experience")
- "Highly Rated" (not "4.9 Stars (127 Reviews)")
- "Licensed & Insured" (not "QBCC License #1234567")
Business Context Shapes Everything
The same section type looks completely different for different businesses:
Business type
Design feel
Emergency services
Direct, immediate, phone-first
Luxury/hospitality
Spacious, refined, atmospheric
Trades/local services
Trustworthy, capable, genuine
Professional/corporate
Confident, clean, structured
Creative/agency
Distinctive, bold, personality-driven
Quick Pattern Examples
Hero Approaches
Image-dominant (strong photography available):
- Let the image do the work, minimal text
- One clear focal point
- Text placement within image composition, not slapped on top
Typography-dominant (no strong imagery):
- Font choice, size, weight, spacing IS the design
- Generous whitespace as active design element
- Colour blocking or subtle texture instead of stock photos
Split/balanced (strong copy + strong imagery):
- One side dominates slightly — true 50/50 feels indecisive
- On mobile, order matters — which element first in vertical stack?
Card Layout Decision
- Count items first — wrong grid math creates orphan cards
- Check hierarchy — is one item more important? Feature it at 2x size
- Content density — image-heavy = fewer columns, text-heavy = more columns
- Orphan fix — never leave 1 card alone on a row
CTA Hierarchy
Match CTA urgency to business context:
- Emergency services: Phone number IS the CTA. Huge, high-contrast, tappable.
- Professional services: Lower commitment first. "Book a consultation."
- Creative/agency: Relationship-building. "View our work."
Golden rule: Make your case first, then ask for action. CTA appears AFTER value.
Trust Signal Hierarchy
Tier
Type
Example
1 (Strongest)
Specific, verifiable
"QBCC License #1234567"
2
Third-party validation
"4.8 stars (127 Google Reviews)" + link
3
Self-claimed
"Fully licensed and insured"
4 (Weakest)
Generic assurances
"Quality guaranteed"
One Tier 1 signal beats three Tier 4 signals. Distribute trust throughout the page — don't isolate in one section.
Testimonial Approach
Situation
Approach
One powerful testimonial
Single featured quote, make it big
3-6 good testimonials
Grid with variety, one featured
No real testimonials
Service promises, guarantees, process descriptions
Never use carousels — users see 1 of 5 testimonials, <1% click controls. Show all or curate the best 3.
Reference File Index
Each reference is a deep-dive (300-470 lines) with full principles, anti-patterns, implementation patterns, and business-specific guidance.
File
Lines
Covers
hero-patterns.md
~470
Approach selection, constraint-based creativity, overlay techniques, responsive behaviour, page-specific heroes
card-patterns.md
~550
Layout decision framework, anti-sameness strategies, grid math, orphan handling, CSS patterns, business context
cta-patterns.md
~420
Action hierarchy, placement strategy, copy principles, visual design, mobile considerations, context-specific CTAs
trust-signals.md
~490
Trust psychology, trust hierarchy, context-sensitive trust, lead-gen vs client, placement strategy, anti-patterns
testimonial-patterns.md
~350
Social proof psychology, lead-gen ethics, design approach selection, content principles, placement, alternatives