91d70558ac
- 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.
393 lines
12 KiB
Markdown
393 lines
12 KiB
Markdown
---
|
|
name: agency-web-developer
|
|
description: "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:**
|
|
|
|
1. **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>`
|
|
|
|
2. **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"
|
|
|
|
3. **Crea cartella `{project}/website/`**
|
|
|
|
4. **Crea sottocartelle:**
|
|
- `index.html` (homepage)
|
|
- `pages/` (altre pagine HTML)
|
|
- `css/` (stylesheet)
|
|
- `js/` (JavaScript)
|
|
- `assets/` (immagini, font, etc.)
|
|
- `assets/img/`
|
|
- `assets/fonts/`
|
|
|
|
5. **Collega asset da archivio:**
|
|
- Crea symlink o copia da `{project}/assets/` a `website/assets/`
|
|
- Oppure usa path relativi: `../assets/images/logo/logo.png`
|
|
|
|
6. **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:**
|
|
|
|
1. **Per ogni pagina in sitemap:**
|
|
|
|
2. **Struttura base:**
|
|
```html
|
|
<!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>
|
|
```
|
|
|
|
3. **Hero section:**
|
|
- `<section class="hero">`
|
|
- `<h1>` per headline
|
|
- `<p class="hero-sub">` per subcopy
|
|
- `<a class="btn btn-primary">` per CTA
|
|
|
|
4. **Content sections:**
|
|
- Usa tag semantici: `<section>`, `<article>`, `<aside>`
|
|
- Heading hierarchy: `<h2>`, `<h3>` (mai saltare livelli)
|
|
- Liste: `<ul>`, `<ol>` con `<li>`
|
|
- Immagini: `<img alt="descrizione">`
|
|
|
|
5. **Componenti da copy:**
|
|
- Card grid per services
|
|
- Testimonial blocks
|
|
- FAQ accordion
|
|
- CTA sections
|
|
- Form di contatto
|
|
|
|
6. **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:**
|
|
|
|
1. **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
|
|
|
|
2. **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
|
|
|
|
3. **Implementa da `../agency-shared-references/references/css_layout.md`:**
|
|
- Responsive design (mobile-first)
|
|
- Breakpoints (mobile, tablet, desktop)
|
|
- Typography scale
|
|
- Color system
|
|
- Spacing system
|
|
|
|
4. **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:**
|
|
|
|
1. **Includi librerie in HTML:**
|
|
```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>
|
|
```
|
|
|
|
2. **Funzionalità base (jQuery):**
|
|
- Mobile menu toggle
|
|
- Smooth scroll per anchor links
|
|
- Form validation
|
|
- Accordion FAQ
|
|
- Image lazy loading
|
|
- Back to top button
|
|
|
|
3. **Animazioni (GSAP):**
|
|
- Fade-in on scroll
|
|
- Hero animations (headline, CTA)
|
|
- Parallax effects (se richiesti)
|
|
- Hover animations complesse
|
|
- Timeline per sequenze animate
|
|
|
|
4. **Segui `../agency-shared-references/references/js_interactivity.md`:**
|
|
- Best practices jQuery
|
|
- GSAP patterns
|
|
- Performance considerations
|
|
- Accessibility (respect reduced-motion)
|
|
|
|
**Template `js/main.js`:**
|
|
```javascript
|
|
$(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:**
|
|
|
|
1. **HTML validation:**
|
|
- Tag chiusi correttamente
|
|
- Attributi required presenti
|
|
- Nesting corretto
|
|
|
|
2. **CSS check:**
|
|
- Responsive su mobile/tablet/desktop
|
|
- Color contrast (accessibility)
|
|
- No overflow o layout broken
|
|
|
|
3. **JS check:**
|
|
- Console errors (nessuno)
|
|
- Funzionalità testate (menu, form, accordion)
|
|
- Animazioni fluide
|
|
|
|
4. **SEO check:**
|
|
- Title tag unico per pagina
|
|
- Meta description presente
|
|
- Heading hierarchy corretta
|
|
- Alt text su immagini
|
|
|
|
5. **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](../agency-shared-references/references/html_semantics.md) — Semantic HTML best practices
|
|
- [css_layout.md](../agency-shared-references/references/css_layout.md) — Layout, responsive, Bootstrap
|
|
- [js_interactivity.md](../agency-shared-references/references/js_interactivity.md) — jQuery + GSAP patterns
|
|
- [hero_sections.md](../agency-shared-references/references/hero_sections.md) — Hero checklist, formula, layouts
|
|
- [design_patterns.md](../agency-shared-references/references/design_patterns.md) — Card grid, split layout, testimonial, FAQ patterns
|
|
- [navigation_patterns.md](../agency-shared-references/references/navigation_patterns.md) — Primary nav, mobile nav, IA
|
|
- [conversion_patterns.md](../agency-shared-references/references/conversion_patterns.md) — CTA hierarchy, forms, friction reducers
|
|
- [layout_systems.md](../agency-shared-references/references/layout_systems.md) — Grid, spacing, vertical rhythm
|
|
- [resource_types.md](../agency-shared-references/references/resource_types.md) — Tipologie risorse e use case
|
|
|
|
**Flusso consigliato:**
|
|
1. Leggi catalogo risorse (`assets/catalog.md`)
|
|
2. Verifica asset disponibili o richiedi ad @agency-archivist
|
|
3. Leggi pattern UX da `agency-shared-references/references` (COSA fare)
|
|
4. 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_
|