feat: Added agency-web-developer skill
- New skill for building static websites from copy + design system - HTML semantic with accessibility + SEO best practices - CSS layout with Bootstrap or custom support - JS interactivity with jQuery + GSAP for smooth animations - 3 reference files: html_semantics.md, css_layout.md, js_interactivity.md - Updated README with new skill (13 total) and references (23 total) - Workflow updated: agency-ux-copy → agency-web-developer → agency-seo No overlap with existing skills: - agency-visual-generator: generates images (PNG/webp) for social/YouTube - agency-publisher: publishes content via webhook - agency-web-developer: builds complete static websites (HTML/CSS/JS)
This commit is contained in:
AgentePotente
parent
6ac766172c
commit
b79b28034a
5 changed files with 2153 additions and 5 deletions
346
agency-web-developer/SKILL.md
Normal file
346
agency-web-developer/SKILL.md
Normal file
|
|
@ -0,0 +1,346 @@
|
|||
---
|
||||
name: agency-web-developer
|
||||
description: 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:**
|
||||
|
||||
1. Crea cartella `clients/{client}/website/`
|
||||
2. Crea sottocartelle:
|
||||
- `index.html` (homepage)
|
||||
- `pages/` (altre pagine HTML)
|
||||
- `css/` (stylesheet)
|
||||
- `js/` (JavaScript)
|
||||
- `assets/` (immagini, font, etc.)
|
||||
- `assets/img/`
|
||||
- `assets/fonts/`
|
||||
|
||||
3. 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:**
|
||||
|
||||
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 `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:**
|
||||
|
||||
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 `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:**
|
||||
- `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:**
|
||||
|
||||
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 `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:**
|
||||
- `clients/{client}/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:**
|
||||
- `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
|
||||
|
||||
- [html_semantics.md](./references/html_semantics.md) — Semantic HTML best practices
|
||||
- [css_layout.md](./references/css_layout.md) — Layout, responsive, Bootstrap
|
||||
- [js_interactivity.md](./references/js_interactivity.md) — jQuery + GSAP patterns
|
||||
|
||||
---
|
||||
|
||||
## 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_
|
||||
Loading…
Add table
Add a link
Reference in a new issue