| name | holiday-lighting-ui |
| description | This skill gives the agents guidance for creating specific UI for Holiday Lighting Specific websites |
Skill: Holiday Lighting UI and Visual Direction
Design UI for a local holiday lighting company website. The visual result should feel premium, trustworthy, seasonal, and conversion-focused without becoming cheesy or over-decorated.
Design goals
Create UI that feels:
- polished
- premium
- easy to scan
- warm and seasonal
- credible for both homeowners and commercial buyers
- strong on mobile
The website should look like a high-quality local service brand, not like a generic AI-generated SaaS landing page and not like a novelty holiday microsite.
Visual style rules
Use:
- clean layouts
- strong spacing and hierarchy
- restrained card styling
- clear CTA buttons
- readable typography
- moderate border radius
- subtle shadows only when useful
- seasonal accents used sparingly
Avoid:
- excessive rounded corners
- floating decorative blobs
- glassmorphism
- cluttered gradients
- overuse of sparkle icons
- neon holiday colors
- tiny low-contrast text
- overly cute or gimmicky decorations
Color guidance
Use a restrained palette.
Suggested structure:
- one primary brand color
- one accent color
- neutral background colors
- one optional seasonal accent color used sparingly
Seasonal accents should support the brand, not overpower the page.
Good accent directions:
- deep evergreen
- warm gold
- rich red used carefully
- dark navy
- clean white backgrounds with dark text
Do not make every section look festive. The site should still feel professional year-round.
Typography guidance
Use typography that is:
- legible
- modern
- confident
- slightly premium
Headlines should be concise and strong.
Body text should be:
- easy to scan
- not too wide
- high contrast
- comfortably sized on mobile
Layout guidance
Prioritize familiar high-conversion local-service layouts.
Default homepage flow:
- Hero with headline, subheadline, CTA, trust points, and image
- Service overview
- Residential and commercial split section
- Why choose us
- Gallery preview
- Testimonials
- Service areas
- Process
- FAQ preview
- CTA band
Hero requirements
The hero must communicate:
- holiday lighting installation
- residential and commercial availability
- local service area
- clear next step
Good hero content structure:
- headline
- supporting paragraph
- primary CTA
- secondary CTA or phone link
- trust bullet row
- high-quality visual
Avoid oversized heroes with too much empty space.
Residential and commercial section guidance
Always make the two audiences easy to understand.
Use a clear split such as:
- Residential Holiday Lighting
- Commercial Holiday Lighting
Each should have:
- short description
- key benefits
- CTA
Gallery design guidance
Gallery is a major trust-builder.
The gallery should feel:
- clean
- image-first
- organized
- easy to browse on mobile
Use:
- consistent aspect ratios when possible
- simple filters only if they improve usability
- strong captions if available
- links to quote request near gallery content
Trust section guidance
Use sections that reinforce credibility:
- testimonial cards
- review summary
- process steps
- service guarantees
- installation and maintenance details
- professional photo usage
Trust content should appear early, not only near the footer.
CTA design guidance
Primary CTA should be obvious.
Use consistent CTA patterns:
- solid primary button
- simple secondary button or text link
- phone CTA visible in header and mobile
- CTA repeated at logical points
Avoid having too many competing button styles.
Mobile-first rules
Design for mobile first.
On mobile:
- make phone CTA easy to tap
- keep hero compact
- stack cards cleanly
- avoid dense multi-column layouts
- keep forms short
- make text large enough to read comfortably
- ensure image sections do not become visually chaotic
Accessibility rules
Always maintain:
- strong color contrast
- visible focus states
- semantic headings
- obvious buttons and links
- readable font sizes
- adequate spacing between interactive elements
Self-review before final output
Check each design for:
- immediate clarity
- trustworthiness
- premium appearance
- holiday relevance without gimmicks
- local service business conversion strength
- mobile usability
- visual restraint
