AgentePotente 40efeb240c Fix YAML frontmatter: quote description fields to avoid colon parsing issues

2026-03-10 02:17:17 +01:00

9.4 KiB

Raw Blame History

name	description
agency-web-developer	Sviluppare siti web statici o landing page partendo da copy e design system. Usare quando: (1) costruire sito da sitemap + copy, (2) creare landing page, (3) implementare design in HTML/CSS/JS. Output: Sito completo con HTML semantico, CSS (Bootstrap o custom), JS (jQuery + GSAP).

Agency Web Developer — Sviluppo Siti Web Statici

Trasforma copy e design system in siti web funzionanti con HTML semantico, CSS e JS.

Quando Usare

Nuovo sito: Costruire sito completo da sitemap + copy + design tokens
Landing page: Pagina singola campaign-specific
Design implementation: Convertire mockup in codice
Static site: Sito senza backend (brochure, portfolio, landing)

Input

Input	Tipo	Validazione
`client_path`	string	Percorso client
`sitemap`	object	Da agency-ux-copy
`page_copy`	array	Copy completo per ogni pagina
`design_tokens`	object	Da agency-design-system
`page_layouts`	array	Layout definitions
`seo_metadata`	array	SEO notes per pagina

Processo

Fase 1: Setup Struttura Progetto

Obiettivo: Creare directory structure per il sito.

Azioni:

Crea cartella clients/{client}/website/
Crea sottocartelle:
- index.html (homepage)
- pages/ (altre pagine HTML)
- css/ (stylesheet)
- js/ (JavaScript)
- assets/ (immagini, font, etc.)
- assets/img/
- assets/fonts/
Inizializza file base:
- css/main.css (o css/bootstrap.min.css + css/custom.css)
- js/main.js
- assets/ (vuoto, pronto per asset)

Output:

Struttura directory pronta

Fase 2: HTML Semantico

Obiettivo: Costruire struttura HTML per ogni pagina.

Azioni:

Per ogni pagina in sitemap:

Struttura base:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{SEO Title}</title>
  <meta name="description" content="{SEO Meta Description}">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <header>{Navigation}</header>
  <main>{Content}</main>
  <footer>{Footer}</footer>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

Hero section:
- <section class="hero">
- <h1> per headline
- <p class="hero-sub"> per subcopy
- <a class="btn btn-primary"> per CTA
Content sections:
- Usa tag semantici: <section>, <article>, <aside>
- Heading hierarchy: <h2>, <h3> (mai saltare livelli)
- Liste: <ul>, <ol> con <li>
- Immagini: <img alt="descrizione">
Componenti da copy:
- Card grid per services
- Testimonial blocks
- FAQ accordion
- CTA sections
- Form di contatto
Segui references/html_semantics.md:
- Semantic HTML best practices
- Accessibility (ARIA labels dove necessario)
- SEO on-page (heading structure, alt text)

Output:

clients/{client}/website/index.html
clients/{client}/website/pages/*.html

Fase 3: CSS Layout

Obiettivo: Stilizzare il sito con CSS.

Decisione: Bootstrap vs Custom

Usa Bootstrap se:

Design è standard (grid, cards, buttons standard)
Progetto semplice/veloce
Cliente non richiede customizzazione estrema

Usa Custom CSS se:

Design altamente personalizzato
Brand ha linee guida specifiche
Layout non-standard

Azioni:

Se Bootstrap:
- Includi CDN in HTML
- Crea css/custom.css per override
- Usa classi Bootstrap (.container, .row, .col, .btn, etc.)
- Override tokens in custom.css
Se Custom:
- Crea css/main.css da zero
- Implementa design tokens (fonts, colors, spacing)
- Crea grid system (o usa CSS Grid/Flexbox)
- Stilizza componenti uno a uno
Implementa da references/css_layout.md:
- Responsive design (mobile-first)
- Breakpoints (mobile, tablet, desktop)
- Typography scale
- Color system
- Spacing system
Componenti da stilizzare:
- Header/navigation (sticky, mobile menu)
- Hero section
- Buttons (primary, secondary, hover states)
- Cards
- Forms
- Footer

Output:

clients/{client}/website/css/main.css (o bootstrap.min.css + custom.css)

Fase 4: JavaScript Interattività

Obiettivo: Aggiungere interattività al sito.

Librerie:

jQuery: Per DOM manipulation, event handling, AJAX (se necessario)
GSAP: Per animazioni fluide, timeline, effetti complessi

Azioni:

Includi librerie in HTML:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="js/main.js"></script>

Funzionalità base (jQuery):
- Mobile menu toggle
- Smooth scroll per anchor links
- Form validation
- Accordion FAQ
- Image lazy loading
- Back to top button
Animazioni (GSAP):
- Fade-in on scroll
- Hero animations (headline, CTA)
- Parallax effects (se richiesti)
- Hover animations complesse
- Timeline per sequenze animate
Segui references/js_interactivity.md:
- Best practices jQuery
- GSAP patterns
- Performance considerations
- Accessibility (respect reduced-motion)

Template js/main.js:

$(document).ready(function() {
  
  // Mobile menu toggle
  $('.mobile-menu-toggle').on('click', function() {
    $('.nav-menu').toggleClass('is-open');
  });
  
  // Smooth scroll
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    const target = $(this.getAttribute('href'));
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top - 80
      }, 800);
    }
  });
  
  // FAQ accordion
  $('.faq-question').on('click', function() {
    $(this).next('.faq-answer').slideToggle(300);
    $(this).toggleClass('is-active');
  });
  
  // GSAP animations
  gsap.from('.hero h1', {
    duration: 1,
    opacity: 0,
    y: 30,
    ease: 'power3.out'
  });
  
  gsap.from('.hero .btn', {
    duration: 1,
    opacity: 0,
    y: 20,
    delay: 0.3,
    ease: 'power3.out'
  });
  
  // Scroll animations
  gsap.utils.toArray('.fade-on-scroll').forEach(function(elem) {
    gsap.to(elem, {
      scrollTrigger: {
        trigger: elem,
        start: 'top 80%',
        toggleActions: 'play none none none'
      },
      opacity: 1,
      y: 0
    });
  });
  
});

Output:

clients/{client}/website/js/main.js

Fase 5: QA e Testing

Obiettivo: Verificare qualità del sito.

Azioni:

HTML validation:
- Tag chiusi correttamente
- Attributi required presenti
- Nesting corretto
CSS check:
- Responsive su mobile/tablet/desktop
- Color contrast (accessibility)
- No overflow o layout broken
JS check:
- Console errors (nessuno)
- Funzionalità testate (menu, form, accordion)
- Animazioni fluide
SEO check:
- Title tag unico per pagina
- Meta description presente
- Heading hierarchy corretta
- Alt text su immagini
Performance:
- Immagini ottimizzate (se presenti)
- CSS/JS minified (opzionale)
- No console warnings

Output:

clients/{client}/website/qa/qa_website.md

Output

File	Formato	Descrizione
`clients/{client}/website/index.html`	HTML	Homepage
`clients/{client}/website/pages/*.html`	HTML	Altre pagine
`clients/{client}/website/css/main.css`	CSS	Stylesheet
`clients/{client}/website/js/main.js`	JS	Interattività
`clients/{client}/website/assets/`	Folder	Immagini, font, etc.
`clients/{client}/website/qa/qa_website.md`	Markdown	QA checklist

References

Technical (Web Developer Specific)

html_semantics.md — Semantic HTML best practices
css_layout.md — Layout, responsive, Bootstrap
js_interactivity.md — jQuery + GSAP patterns

UX/Design Patterns (Shared References)

Consultare PRIMA di implementare:

hero_sections.md — Hero checklist, formula, layouts
design_patterns.md — Card grid, split layout, testimonial, FAQ patterns
navigation_patterns.md — Primary nav, mobile nav, IA
conversion_patterns.md — CTA hierarchy, forms, friction reducers
layout_systems.md — Grid, spacing, vertical rhythm

Flusso consigliato:

Leggi pattern UX da shared references (COSA fare)
Implementa con technical references (COME codificare)

Note

Edge Cases:

Nessun design system: Usa Bootstrap default + stile minimal
Solo landing page: Crea single-page con anchor navigation
Cliente fornisce asset: Copia in assets/ e usa percorsi corretti
Animazioni complesse: Usa GSAP timeline, documenta in decision log

Limitazioni:

Siti statici (no backend, no database)
Form richiedono servizio esterno (Formspree, Netlify Forms) o backend
E-commerce non supportato (richiede piattaforma dedicata)

Skill creata per agency_v3_1 suite

9.4 KiB Raw Blame History

Agency Web Developer — Sviluppo Siti Web Statici

Quando Usare

Input

Processo

Fase 1: Setup Struttura Progetto

Fase 2: HTML Semantico

Fase 3: CSS Layout

Fase 4: JavaScript Interattività

Fase 5: QA e Testing

Output

References

Technical (Web Developer Specific)

UX/Design Patterns (Shared References)

Note

9.4 KiB

Raw Blame History