This series started with the question "What is Hyvä?" and moved through architecture, templates, Tailwind, Alpine, and a complete own project (the team page from block 5), all the way to deployment and debugging. This final chapter summarizes every important pattern as a reference.

The five core principles

1. Hyvä replaces the frontend layer, not Magento's core architecture - Layout XML, blocks, DI stay unchanged (chapters 1-2).
2. ViewModels instead of block classes for pure data supply (chapter 7).
3. Every dynamic output goes through the escaper - escapeHtml, escapeHtmlAttr, escapeUrl, escapeJs (chapter 8).
4. Every inline script needs $hyvaCsp->registerInlineScript() right after it (chapter 9).
5. The deploy sequence always runs in the same order: build → delete → deploy → cache flush (chapters 5, 27).

Cheat sheet: layout and templates

<!-- Binding a ViewModel -->
<argument name="my_view_model" xsi:type="object">Vendor\Module\ViewModel\MyModel</argument>

<!-- Iterating over child blocks (in the template) -->
<?php foreach ($block->getChildNames() as $name): ?>
    <?= $block->getChildHtml($name) ?>
<?php endforeach; ?>

Cheat sheet: CSP

<script>
    /* ... Alpine initialization ... */
</script>
<?php $hyvaCsp->registerInlineScript(); ?>

Cheat sheet: Tailwind

@import 'tailwindcss';

@theme {
  --color-brand-accent: #0ea5e9;
}

@layer components {
  .btn-primary { @apply rounded-lg bg-brand-accent px-5 py-2.5 text-white; }
}

Cheat sheet: Alpine

<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open" x-cloak>Content</div>
</div>

<!-- List from embedded JSON data -->
<template x-for="item in items" :key="item.id">
    <div x-text="item.name"></div>
</template>

Cheat sheet: deploy sequence

bin/npm --prefix app/design/frontend/[Vendor]/[theme]/web/tailwind run build
cd src && rm -rf var/view_preprocessed/* pub/static/frontend/*
bin/magento setup:static-content:deploy de_DE -t [Vendor]/[theme] -f
bin/magento cache:flush

The team page project as a template

The six chapters of the continuous project (17-22) - own module, route, controller, ViewModel, Tailwind template, Alpine filter logic with CSP registration - can be used directly as a template for any other own storefront page in a Hyvä project. The order always stays the same: structure first (module, route, controller), then data (ViewModel), then appearance (Tailwind template), then interactivity (Alpine + CSP).

Nine golden rules for daily work

1. No Luma, no KnockoutJS, no jQuery, no UI components - follow Hyvä conventions consistently.
2. ViewModels instead of custom block classes, wherever pure data supply is enough.
3. Escape every dynamic output in a template - no exceptions.
4. After every inline <script>: immediately call registerInlineScript().
5. Keep the getChildNames() iteration for child blocks.
6. Tailwind configuration in CSS via @theme, not in a separate JS config.
7. Use @apply sparingly, only from three to four identical repetitions on.
8. Deploy sequence always in the fixed order: build → delete → deploy → cache flush.
9. On unexpected behavior, check the browser console first, only search the code afterwards.

That concludes this series. With these fundamentals, you can build any further Hyvä storefront page - whether an own module like the team page, or a customization of a standard Magento page like the product detail page or checkout - in a structured way, with confidence in the underlying patterns.