AgentePotente 91d70558ac feat(placeholder): add placeholder mode for asset-missing workflows

- agency-archivist: frontmatter updated + 3-option pattern + placeholder section
- agency-visual-generator: 3-option pattern (block/placeholder/skip)
- agency-web-developer: placeholder inline SVG/CSS option
- agency-design-system: placeholder tokens option

All consuming skills now offer:
1. Block and request assets (traditional)
2. Placeholder mode for continuous workflow ⚡
3. Skip asset if optional

Pattern allows prototyping without real assets.

2026-03-11 10:42:47 +01:00

12 KiB

Raw Blame History

name	description
agency-web-developer	Sviluppare siti web statici o landing page partendo da copy e design system. PRIMA di sviluppare: leggi {project}/assets/catalog.md per immagini e asset. Se mancano, richiedi @agency-archivist. 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
`project_path`	string	Percorso progetto (cartella di lavoro)
`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: Risorse e Setup Struttura Progetto

Obiettivo: Verificare asset disponibili e creare directory structure.

Azioni:

LEGGI CATALOGO RISORSE:
- Apri {project}/assets/catalog.md
- Cerca:
  - Logo: #logo → Per header/footer
  - Immagini hero: #hero, #sfondo, #prodotto → Per homepage
  - Immagini pagine: #team, #ufficio, #prodotto → Per pagine interne
  - Favicon: #icon, #favicon → Per <head>
Se risorse mancanti: Proporre 3 opzioni

OPZIONE A — Blocca e richiedi asset:
- "🔒 Bloccato: servono immagini per il sito"
- Tagga: @agency-archivist con elenco specifico
- Attendi upload prima di procedere
OPZIONE B — Placeholder Mode (consigliata): ⚡
- Procedi con placeholder inline (SVG color-block o gradient)
- Esempi placeholder:
  - Logo: <div class="placeholder-logo">[LOGO]</div> (stilizzato CSS)
  - Hero: <div class="placeholder-hero">[HERO IMAGE 1920x1080]</div>
  - Team: <div class="placeholder-avatar"></div> con iniziali
- Genera sito completo ma documenta in README.md sezione "Assets Placeholder"
- Non bloccare — cliente sostituisce asset reali dopo
OPZIONE C — Genera senza asset visivi:
- Procedi con design testuale/minimal (no immagini, solo tipografia)
- Adatta layout: hero text-only, griglie senza foto
- Documenta: "⏭️ Design minimal — immagini da aggiungere in fase 2"
Crea cartella {project}/website/
Crea sottocartelle:
- index.html (homepage)
- pages/ (altre pagine HTML)
- css/ (stylesheet)
- js/ (JavaScript)
- assets/ (immagini, font, etc.)
- assets/img/
- assets/fonts/
Collega asset da archivio:
- Crea symlink o copia da {project}/assets/ a website/assets/
- Oppure usa path relativi: ../assets/images/logo/logo.png
Inizializza file base:
- css/main.css (o css/bootstrap.min.css + css/custom.css)
- js/main.js

Output:

Struttura directory pronta
Asset collegati o copiati

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 ../agency-shared-references/references/html_semantics.md:
- Semantic HTML best practices
- Accessibility (ARIA labels dove necessario)
- SEO on-page (heading structure, alt text)

Output:

{project}/website/index.html
{project}/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 ../agency-shared-references/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:

{project}/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 ../agency-shared-references/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:

{project}/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:

{project}/website/qa/qa_website.md

Output

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

References

Shared References (Agency Suite)

html_semantics.md — Semantic HTML best practices
css_layout.md — Layout, responsive, Bootstrap
js_interactivity.md — jQuery + GSAP patterns
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
resource_types.md — Tipologie risorse e use case

Flusso consigliato:

Leggi catalogo risorse (assets/catalog.md)
Verifica asset disponibili o richiedi ad @agency-archivist
Leggi pattern UX da agency-shared-references/references (COSA fare)
Implementa con technical references da agency-shared-references/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

12 KiB Raw Blame History

Agency Web Developer — Sviluppo Siti Web Statici

Quando Usare

Input

Processo

Fase 1: Risorse e Setup Struttura Progetto

Fase 2: HTML Semantico

Fase 3: CSS Layout

Fase 4: JavaScript Interattività

Fase 5: QA e Testing

Output

References

Shared References (Agency Suite)

Note

12 KiB

Raw Blame History