auriti-labs/agentwork/pa-design-system-italia

PA Design System .italia

Scope

Building, reviewing, and maintaining digital interfaces for the Pubblica Amministrazione italiana using Bootstrap Italia (v2.x, based on Bootstrap 5) and the Design System .italia.

Boundaries

• This skill: Bootstrap Italia components, PA page patterns, institutional navigation, service-oriented UI, PA forms, consistency with Linee Guida
• NOT this skill: Accessibility audit (separate skill), Angular kit (design-angular-kit), WordPress theme integration (→ wordpress-theme-engineering), generic frontend, CMS config

Triggers

• "build a PA website" / "create a public service page"
• "use Bootstrap Italia" / "implement Design System .italia"
• "institutional header/footer" / "PA navigation"
• "form for a public service" / "citizen-facing form"
• "review PA design compliance"
• "customize Bootstrap Italia without breaking consistency"

When NOT to Use

• Generic Bootstrap 5 without PA context
• Private sector websites
• Accessibility-only audits
• Angular-specific implementation
• Backend/API development

Goals

• Produce interfaces citizens recognize as institutional and trustworthy
• Use Bootstrap Italia components as designed — don't reinvent what exists
• Ensure every page has clear purpose: what service, what action, what outcome
• Maintain visual and structural consistency across all pages of the same ente

Constraints

• Use Bootstrap Italia v2.x only — never mix with vanilla Bootstrap
• Titillium Web as only body font
• PA color palette from Bootstrap Italia variables — no custom brand colors on header/footer/primary actions
• Header: Slim Header + Center Header + Navigation (mandatory stack)
• Footer: standard PA footer (contacts, links, social, legal)
• Breadcrumbs on every page below homepage
• Forms: inline validation with Bootstrap Italia classes, not just on submit
• Icons: Bootstrap Italia SVG sprite only — not FontAwesome
• All assets self-hosted: CSS, JS, fonts, icons served from the project — no CDN in production. GDPR compliance requires no unnecessary third-party requests.
• Language: Italian, formal, clear, action-oriented — no marketing, no anglicisms
• CTAs state the outcome: "Invia la richiesta" not "Submit"

Input Minimi

• Type of ente (Comune, Regione, Ministero, ASL, Università)
• Services to expose
• Target users (cittadini, imprese, professionisti)
• Bootstrap Italia version

Check Before Acting

• package.json — Bootstrap Italia version
• Existing header/footer — standard PA patterns?
• Component usage — Bootstrap Italia or custom HTML?
• SCSS variables — customizations applied?

Checklist

New PA Site

1. Install: npm i bootstrap-italia
2. Load fonts via loadFonts() or CSS
3. Implement standard header (Slim + Center + Navigation)
4. Implement standard footer
5. Add breadcrumbs to every page
6. Build service pages (see examples/public-service-page-example.md)

Review

1. Header/footer compliance
2. Component usage correctness
3. Customization boundaries respected
4. Forms: inline validation, labels, feedback
5. See references/customization-boundaries-and-consistency.md

Gotchas

1. Mixing Bootstrap Italia with vanilla Bootstrap. Both loaded, CSS conflicts. Fix: use ONLY Bootstrap Italia — it includes Bootstrap 5. Remove separate Bootstrap dependency.

1. Custom colors breaking institutional identity. Ente "brand color" replaces PA primary blue. Fix: PA palette for header/footer/primary. Custom accent only for secondary elements.

1. Header without Slim Header. The top bar with ente name and governo.it link is mandatory. Fix: always include full stack: Slim → Center → Navigation.

1. Forms without inline validation. 15-field form, generic error at top on submit. Fix: is-valid/is-invalid/invalid-feedback inline next to each field.

1. Marketing language on service page. "Scopri i nostri fantastici servizi!" Fix: formal, clear. "Servizi per il cittadino" with action-oriented descriptions.

1. CTAs in English. "Submit", "Download" on Italian PA site. Fix: "Invia la richiesta di residenza", "Scarica il modulo".

1. Custom icons instead of Bootstrap Italia sprite. FontAwesome mixed in. Fix: use bootstrap-italia/dist/svg/sprites.svg.

1. No breadcrumbs. User from search has no context. Fix: breadcrumbs on every sub-page.

1. Multi-step process without Stepper. 4-step application as separate pages, no progress. Fix: use Bootstrap Italia Stepper component.

1. Assets loaded from CDN in production. Bootstrap Italia CSS/JS loaded from jsdelivr or unpkg. Violates GDPR — third-party requests expose user IP. Fix: npm i bootstrap-italia, serve from project. CDN only acceptable in development/prototyping, never in production PA sites.

Handoff

• After interface designed → kiro-builder for implementation
• After implementation → kiro-qa for compliance review
• If WordPress-based → load wordpress-theme-engineering
• After site ready → load geo-ai-visibility for discoverability

Memory Guidance

TotalRecall: Component usage decisions, customization boundaries, header/footer configs, form patterns Kore candidates: PA page templates across enti, Bootstrap Italia patterns, institutional navigation, form validation patterns Never save: Specific ente content, individual page text, CSS values from docs

When to Read Support Files

• Using components? Read references/bootstrap-italia-and-component-usage.md
• Building navigation/layouts? Read references/layout-navigation-and-public-service-patterns.md
• Customizing? Read references/customization-boundaries-and-consistency.md
• Building a service page? Read examples/public-service-page-example.md
• Building header/footer? Read examples/institutional-navigation-example.md
• Building forms? Read examples/form-and-feedback-example.md