@jaimevalasek/aioson 1.6.0 → 1.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +74 -0
- package/README.md +729 -232
- package/docs/design-previews/pt.squarespace.com-homepage.html +889 -0
- package/docs/integrations/sdlc-genius-boundary.md +76 -0
- package/docs/integrations/sdlc-genius-eval-matrix.md +75 -0
- package/docs/integrations/sdlc-genius-install-checklist.md +93 -0
- package/docs/integrations/sdlc-genius-review-samples.md +86 -0
- package/docs/pt/README.md +3 -0
- package/docs/pt/agentes.md +1 -0
- package/docs/pt/comandos-cli.md +888 -2
- package/docs/pt/design-hybrid-forge.md +255 -6
- package/docs/pt/devlog-pipeline.md +270 -0
- package/docs/pt/fluxo-artefatos.md +178 -0
- package/docs/pt/hooks-session-guard.md +454 -0
- package/docs/pt/monitor-de-contexto.md +59 -5
- package/docs/pt/sdd-automation-scripts.md +557 -0
- package/docs/pt/site-forge.md +309 -0
- package/docs/pt/spec-learnings-pipeline.md +265 -0
- package/package.json +1 -1
- package/src/a2a/client.js +165 -0
- package/src/a2a/server.js +223 -0
- package/src/cli.js +235 -1
- package/src/commands/agent-audit.js +397 -0
- package/src/commands/agent-export-skill.js +229 -0
- package/src/commands/artifact-validate.js +189 -0
- package/src/commands/brief-gen.js +405 -0
- package/src/commands/brief-validate.js +65 -0
- package/src/commands/classify.js +256 -0
- package/src/commands/context-compact.js +49 -0
- package/src/commands/context-health.js +175 -0
- package/src/commands/context-monitor.js +71 -0
- package/src/commands/context-trim.js +177 -0
- package/src/commands/detect-test-runner.js +55 -0
- package/src/commands/devlog-export-brains.js +27 -0
- package/src/commands/devlog-process.js +292 -0
- package/src/commands/devlog-watch.js +131 -0
- package/src/commands/feature-close.js +165 -0
- package/src/commands/gate-check.js +228 -0
- package/src/commands/hooks-emit.js +253 -0
- package/src/commands/hooks-install.js +347 -0
- package/src/commands/learning-auto-promote.js +195 -0
- package/src/commands/learning-evolve.js +18 -9
- package/src/commands/learning-export.js +103 -0
- package/src/commands/learning-rollback.js +164 -0
- package/src/commands/live.js +25 -1
- package/src/commands/pattern-detect.js +33 -0
- package/src/commands/preflight-context.js +30 -0
- package/src/commands/preflight.js +208 -0
- package/src/commands/pulse-update.js +130 -0
- package/src/commands/runner-daemon.js +274 -0
- package/src/commands/runner-plan.js +70 -0
- package/src/commands/runner-queue-from-plan.js +166 -0
- package/src/commands/runner-queue.js +189 -0
- package/src/commands/runner-run.js +129 -0
- package/src/commands/runtime.js +47 -1
- package/src/commands/self-implement-loop.js +256 -0
- package/src/commands/session-guard.js +218 -0
- package/src/commands/sizing.js +165 -0
- package/src/commands/skill.js +65 -0
- package/src/commands/spec-checkpoint.js +177 -0
- package/src/commands/spec-status.js +79 -0
- package/src/commands/spec-sync.js +190 -0
- package/src/commands/spec-tasks.js +288 -0
- package/src/commands/squad-autorun.js +1220 -0
- package/src/commands/squad-bus.js +217 -0
- package/src/commands/squad-card.js +149 -0
- package/src/commands/squad-daemon.js +134 -0
- package/src/commands/squad-dependency-graph.js +164 -0
- package/src/commands/squad-review.js +106 -0
- package/src/commands/squad-scaffold.js +55 -0
- package/src/commands/squad-tool-register.js +157 -0
- package/src/commands/state-save.js +122 -0
- package/src/commands/update.js +2 -0
- package/src/commands/verify-gate.js +572 -0
- package/src/commands/workflow-execute.js +241 -0
- package/src/constants.js +22 -0
- package/src/install-profile.js +2 -2
- package/src/install-wizard.js +3 -2
- package/src/installer.js +6 -0
- package/src/lib/health-check.js +158 -0
- package/src/lib/hook-protocol.js +76 -0
- package/src/mcp/apps/squad-dashboard/app.js +163 -0
- package/src/mcp/apps/squad-dashboard/index.html +261 -0
- package/src/mcp/apps/squad-dashboard/mcp-manifest.json +23 -0
- package/src/mcp/resources/squad-state.js +130 -0
- package/src/preflight-engine.js +443 -0
- package/src/runner/cascade.js +97 -0
- package/src/runner/cli-launcher.js +109 -0
- package/src/runner/plan-importer.js +63 -0
- package/src/runner/queue-store.js +159 -0
- package/src/runtime-store.js +61 -3
- package/src/squad/agent-teams-adapter.js +264 -0
- package/src/squad/brief-validator.js +350 -0
- package/src/squad/bus-bridge.js +140 -0
- package/src/squad/context-compactor.js +265 -0
- package/src/squad/cross-ai-synthesizer.js +250 -0
- package/src/squad/hooks-generator.js +196 -0
- package/src/squad/inter-squad-events.js +175 -0
- package/src/squad/intra-bus.js +345 -0
- package/src/squad/learning-extractor.js +213 -0
- package/src/squad/pattern-detector.js +365 -0
- package/src/squad/preflight-context.js +296 -0
- package/src/squad/recovery-context.js +242 -71
- package/src/squad/reflection.js +365 -0
- package/src/squad/squad-scaffold.js +177 -0
- package/src/squad/state-manager.js +310 -0
- package/src/squad/task-decomposer.js +652 -0
- package/src/squad/verify-gate.js +303 -0
- package/src/updater.js +4 -5
- package/src/worker-runner.js +186 -1
- package/template/.aioson/agents/analyst.md +62 -1
- package/template/.aioson/agents/architect.md +61 -1
- package/template/.aioson/agents/copywriter.md +463 -0
- package/template/.aioson/agents/design-hybrid-forge.md +14 -0
- package/template/.aioson/agents/dev.md +271 -25
- package/template/.aioson/agents/deyvin.md +67 -8
- package/template/.aioson/agents/discovery-design-doc.md +44 -0
- package/template/.aioson/agents/genome.md +14 -0
- package/template/.aioson/agents/neo.md +83 -2
- package/template/.aioson/agents/orache.md +50 -4
- package/template/.aioson/agents/orchestrator.md +197 -1
- package/template/.aioson/agents/pm.md +35 -0
- package/template/.aioson/agents/product.md +50 -5
- package/template/.aioson/agents/profiler-enricher.md +14 -0
- package/template/.aioson/agents/profiler-forge.md +14 -0
- package/template/.aioson/agents/profiler-researcher.md +14 -0
- package/template/.aioson/agents/qa.md +273 -21
- package/template/.aioson/agents/setup.md +96 -10
- package/template/.aioson/agents/sheldon.md +131 -6
- package/template/.aioson/agents/site-forge.md +1753 -0
- package/template/.aioson/agents/squad.md +352 -0
- package/template/.aioson/agents/tester.md +53 -0
- package/template/.aioson/agents/ux-ui.md +203 -4
- package/template/.aioson/brains/README.md +128 -0
- package/template/.aioson/brains/_index.json +16 -0
- package/template/.aioson/brains/scripts/query.js +103 -0
- package/template/.aioson/brains/site-forge/visual-patterns.brain.json +205 -0
- package/template/.aioson/config.md +143 -13
- package/template/.aioson/constitution.md +33 -0
- package/template/.aioson/context/project-pulse.md +34 -0
- package/template/.aioson/docs/LAYERS.md +79 -0
- package/template/.aioson/docs/README.md +76 -0
- package/template/.aioson/docs/example-external-api-context.md +72 -0
- package/template/.aioson/genomes/copywriting.md +204 -0
- package/template/.aioson/locales/en/agents/architect.md +17 -0
- package/template/.aioson/locales/en/agents/dev.md +79 -13
- package/template/.aioson/locales/en/agents/orache.md +6 -0
- package/template/.aioson/locales/en/agents/orchestrator.md +24 -0
- package/template/.aioson/locales/en/agents/product.md +50 -0
- package/template/.aioson/locales/en/agents/sheldon.md +115 -0
- package/template/.aioson/locales/en/agents/squad.md +14 -0
- package/template/.aioson/locales/en/agents/tester.md +6 -0
- package/template/.aioson/locales/es/agents/analyst.md +2 -0
- package/template/.aioson/locales/es/agents/architect.md +19 -0
- package/template/.aioson/locales/es/agents/dev.md +64 -4
- package/template/.aioson/locales/es/agents/deyvin.md +2 -0
- package/template/.aioson/locales/es/agents/discovery-design-doc.md +2 -0
- package/template/.aioson/locales/es/agents/genome.md +2 -0
- package/template/.aioson/locales/es/agents/neo.md +2 -0
- package/template/.aioson/locales/es/agents/orache.md +2 -0
- package/template/.aioson/locales/es/agents/orchestrator.md +26 -0
- package/template/.aioson/locales/es/agents/pair.md +2 -0
- package/template/.aioson/locales/es/agents/pm.md +2 -0
- package/template/.aioson/locales/es/agents/product.md +52 -0
- package/template/.aioson/locales/es/agents/profiler-enricher.md +2 -0
- package/template/.aioson/locales/es/agents/profiler-forge.md +2 -0
- package/template/.aioson/locales/es/agents/profiler-researcher.md +2 -0
- package/template/.aioson/locales/es/agents/qa.md +2 -0
- package/template/.aioson/locales/es/agents/setup.md +2 -0
- package/template/.aioson/locales/es/agents/sheldon.md +117 -0
- package/template/.aioson/locales/es/agents/squad.md +16 -0
- package/template/.aioson/locales/es/agents/tester.md +9 -0
- package/template/.aioson/locales/es/agents/ux-ui.md +2 -0
- package/template/.aioson/locales/fr/agents/analyst.md +2 -0
- package/template/.aioson/locales/fr/agents/architect.md +19 -0
- package/template/.aioson/locales/fr/agents/dev.md +64 -4
- package/template/.aioson/locales/fr/agents/deyvin.md +2 -0
- package/template/.aioson/locales/fr/agents/discovery-design-doc.md +2 -0
- package/template/.aioson/locales/fr/agents/genome.md +2 -0
- package/template/.aioson/locales/fr/agents/neo.md +2 -0
- package/template/.aioson/locales/fr/agents/orache.md +2 -0
- package/template/.aioson/locales/fr/agents/orchestrator.md +26 -0
- package/template/.aioson/locales/fr/agents/pair.md +2 -0
- package/template/.aioson/locales/fr/agents/pm.md +2 -0
- package/template/.aioson/locales/fr/agents/product.md +52 -0
- package/template/.aioson/locales/fr/agents/profiler-enricher.md +2 -0
- package/template/.aioson/locales/fr/agents/profiler-forge.md +2 -0
- package/template/.aioson/locales/fr/agents/profiler-researcher.md +2 -0
- package/template/.aioson/locales/fr/agents/qa.md +2 -0
- package/template/.aioson/locales/fr/agents/setup.md +2 -0
- package/template/.aioson/locales/fr/agents/sheldon.md +117 -0
- package/template/.aioson/locales/fr/agents/squad.md +16 -0
- package/template/.aioson/locales/fr/agents/tester.md +9 -0
- package/template/.aioson/locales/fr/agents/ux-ui.md +2 -0
- package/template/.aioson/locales/pt-BR/agents/analyst.md +64 -3
- package/template/.aioson/locales/pt-BR/agents/architect.md +42 -0
- package/template/.aioson/locales/pt-BR/agents/dev.md +147 -14
- package/template/.aioson/locales/pt-BR/agents/deyvin.md +47 -0
- package/template/.aioson/locales/pt-BR/agents/neo.md +62 -1
- package/template/.aioson/locales/pt-BR/agents/orchestrator.md +158 -2
- package/template/.aioson/locales/pt-BR/agents/pm.md +95 -1
- package/template/.aioson/locales/pt-BR/agents/product.md +145 -18
- package/template/.aioson/locales/pt-BR/agents/qa.md +16 -0
- package/template/.aioson/locales/pt-BR/agents/setup.md +101 -18
- package/template/.aioson/locales/pt-BR/agents/sheldon.md +132 -1
- package/template/.aioson/locales/pt-BR/agents/squad.md +14 -0
- package/template/.aioson/locales/pt-BR/agents/tester.md +449 -0
- package/template/.aioson/rules/README.md +69 -0
- package/template/.aioson/rules/data-format-convention.md +136 -0
- package/template/.aioson/rules/example-monetary-values.md +30 -0
- package/template/.aioson/schemas/squad-manifest.schema.json +124 -3
- package/template/.aioson/skills/design/cognitive-core-ui/references/motion.md +2 -0
- package/template/.aioson/skills/design/pt.squarespace.com/.skill-meta.json +31 -0
- package/template/.aioson/skills/design/pt.squarespace.com/SKILL.md +66 -0
- package/template/.aioson/skills/design/pt.squarespace.com/references/components.md +368 -0
- package/template/.aioson/skills/design/pt.squarespace.com/references/design-tokens.md +150 -0
- package/template/.aioson/skills/design/pt.squarespace.com/references/motion.md +270 -0
- package/template/.aioson/skills/design/pt.squarespace.com/references/patterns.md +189 -0
- package/template/.aioson/skills/design/pt.squarespace.com/references/websites.md +165 -0
- package/template/.aioson/skills/marketing/references/anti-patterns.md +254 -0
- package/template/.aioson/skills/marketing/references/fascinations.md +192 -0
- package/template/.aioson/skills/marketing/references/five-acts.md +248 -0
- package/template/.aioson/skills/marketing/references/market-intelligence.md +198 -0
- package/template/.aioson/skills/marketing/references/offer-structure.md +203 -0
- package/template/.aioson/skills/marketing/references/one-belief.md +149 -0
- package/template/.aioson/skills/marketing/references/patterns.md +218 -0
- package/template/.aioson/skills/marketing/references/pms-research.md +193 -0
- package/template/.aioson/skills/marketing/vsl-craft.md +385 -0
- package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +1 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/analyst.md +30 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/architect.md +23 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/dev.md +47 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/deyvin.md +27 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +35 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/product.md +25 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/qa.md +30 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/sheldon.md +25 -0
- package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +4 -1
- package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +15 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +32 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +20 -0
- package/template/.aioson/skills/process/simplify/SKILL.md +173 -0
- package/template/.aioson/skills/static/context-budget-guide.md +46 -0
- package/template/.aioson/skills/static/harness-sensors.md +74 -0
- package/template/.aioson/skills/static/landing-page-deploy.md +192 -0
- package/template/.aioson/skills/static/landing-page-forge.md +730 -0
- package/template/.aioson/skills/static/multi-agent-patterns.md +43 -0
- package/template/.aioson/skills/static/react-motion-patterns.md +22 -0
- package/template/.aioson/skills/static/static-html-patterns/checklists.md +43 -0
- package/template/.aioson/skills/static/static-html-patterns/css-tokens.md +609 -0
- package/template/.aioson/skills/static/static-html-patterns/motion.md +193 -0
- package/template/.aioson/skills/static/static-html-patterns/premium.md +711 -0
- package/template/.aioson/skills/static/static-html-patterns/structure.md +209 -0
- package/template/.aioson/skills/static/static-html-patterns/utilities.md +190 -0
- package/template/.aioson/skills/static/static-html-patterns.md +58 -1913
- package/template/.aioson/skills/static/threejs-patterns.md +929 -0
- package/template/.aioson/skills/static/ui-ux-modern.md +1 -0
- package/template/.aioson/skills/static/web-research-cache.md +112 -0
- package/template/.aioson/tasks/implementation-plan.md +21 -1
- package/template/.aioson/tasks/squad-create.md +22 -0
- package/template/.aioson/tasks/squad-design.md +30 -0
- package/template/.aioson/templates/squads/digital-marketing-agency/template.json +96 -0
- package/template/.claude/commands/aioson/agent/design-hybrid-forge.md +5 -0
- package/template/.claude/commands/aioson/agent/orache.md +5 -0
- package/template/.claude/commands/aioson/agent/sheldon.md +5 -0
- package/template/.claude/commands/aioson/agent/site-forge.md +5 -0
- package/template/AGENTS.md +55 -3
- package/template/CLAUDE.md +31 -0
- package/template/OPENCODE.md +4 -0
- package/template/researchs/.gitkeep +0 -0
- package/template/.aioson/skills/design-system/components/SKILL.md:Zone.Identifier +0 -0
- package/template/.aioson/skills/design-system/dashboards/SKILL.md:Zone.Identifier +0 -0
- package/template/.aioson/skills/design-system/foundations/SKILL.md:Zone.Identifier +0 -0
- package/template/.aioson/skills/design-system/motion/SKILL.md:Zone.Identifier +0 -0
- package/template/.aioson/skills/design-system/patterns/SKILL.md:Zone.Identifier +0 -0
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
# Structure — HTML Production Shell
|
|
2
|
+
|
|
3
|
+
> Load when building any landing page. Contains the Hero Law and the complete semantic HTML skeleton.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 0. THE HERO LAW (read this first, it overrides everything)
|
|
8
|
+
|
|
9
|
+
> **The hero section is NEVER a grid of cards.**
|
|
10
|
+
> The hero is: full viewport height — background (animated mesh OR full-bleed photograph) — ONE large headline — ONE or TWO supporting lines — TWO buttons — optional social proof strip below. That is it.
|
|
11
|
+
>
|
|
12
|
+
> Card grids belong in the Features or Tools section. A hero with cards looks like a dashboard, not a landing page.
|
|
13
|
+
>
|
|
14
|
+
> For Bold & Cinematic: the hero background must be ALIVE (animated mesh gradient or parallax image).
|
|
15
|
+
> For Clean & Luminous: the hero background must have generous whitespace and a large, confident headline.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## 1. HTML Structure — The Production Shell
|
|
20
|
+
|
|
21
|
+
Every landing page follows this semantic skeleton:
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<!DOCTYPE html>
|
|
25
|
+
<html lang="pt-BR">
|
|
26
|
+
<head>
|
|
27
|
+
<meta charset="UTF-8">
|
|
28
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
29
|
+
<meta name="description" content="[real product description]">
|
|
30
|
+
<title>[Product Name] — [Value Proposition]</title>
|
|
31
|
+
|
|
32
|
+
<!-- Preload critical fonts (eliminate layout shift) -->
|
|
33
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
34
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
35
|
+
<link href="https://fonts.googleapis.com/css2?family=[ChosenFont]:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
36
|
+
|
|
37
|
+
<!-- Inline critical CSS (above-the-fold only: reset, header, hero) -->
|
|
38
|
+
<style>
|
|
39
|
+
/* === CRITICAL CSS — inline here, rest in external file === */
|
|
40
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
41
|
+
html { font-size: 16px; scroll-behavior: smooth; }
|
|
42
|
+
body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; }
|
|
43
|
+
img { max-width: 100%; display: block; object-fit: cover; }
|
|
44
|
+
a { text-decoration: none; color: inherit; }
|
|
45
|
+
button { cursor: pointer; border: none; font: inherit; }
|
|
46
|
+
/* rest of CSS below */
|
|
47
|
+
</style>
|
|
48
|
+
</head>
|
|
49
|
+
<body>
|
|
50
|
+
|
|
51
|
+
<!-- HEADER: sticky, transparent → solid on scroll -->
|
|
52
|
+
<header class="header" id="header">
|
|
53
|
+
<div class="container header__inner">
|
|
54
|
+
<a href="/" class="header__logo" aria-label="Home">
|
|
55
|
+
<span class="logo-mark">●</span>
|
|
56
|
+
<span class="logo-text">ProductName</span>
|
|
57
|
+
</a>
|
|
58
|
+
<nav class="header__nav" aria-label="Main navigation">
|
|
59
|
+
<a href="#features">Features</a>
|
|
60
|
+
<a href="#how-it-works">How it works</a>
|
|
61
|
+
<a href="#pricing">Pricing</a>
|
|
62
|
+
</nav>
|
|
63
|
+
<a href="#cta" class="btn btn--primary btn--sm">Get started</a>
|
|
64
|
+
<button class="header__burger" aria-label="Open menu" aria-expanded="false">
|
|
65
|
+
<span></span><span></span><span></span>
|
|
66
|
+
</button>
|
|
67
|
+
</div>
|
|
68
|
+
</header>
|
|
69
|
+
|
|
70
|
+
<main>
|
|
71
|
+
<!-- HERO: full viewport, image/gradient + content -->
|
|
72
|
+
<section class="hero" aria-labelledby="hero-title">
|
|
73
|
+
<div class="hero__bg">
|
|
74
|
+
<img src="https://images.unsplash.com/photo-[id]?w=1920&q=80&fit=crop"
|
|
75
|
+
alt="" role="presentation" loading="eager" fetchpriority="high">
|
|
76
|
+
<div class="hero__overlay" aria-hidden="true"></div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="container hero__content">
|
|
79
|
+
<span class="hero__label reveal">Category / Tagline</span>
|
|
80
|
+
<h1 class="hero__title reveal reveal-delay-1" id="hero-title">
|
|
81
|
+
Bold Headline That <em class="gradient-text">Changes Everything</em>
|
|
82
|
+
</h1>
|
|
83
|
+
<p class="hero__subtitle reveal reveal-delay-2">
|
|
84
|
+
Supporting text that adds real context — who benefits, how fast, what outcome.
|
|
85
|
+
</p>
|
|
86
|
+
<div class="hero__actions reveal reveal-delay-3">
|
|
87
|
+
<a href="#signup" class="btn btn--primary btn--lg">Primary CTA</a>
|
|
88
|
+
<a href="#demo" class="btn btn--ghost btn--lg">
|
|
89
|
+
<span class="btn__icon" aria-hidden="true">▶</span>
|
|
90
|
+
Watch demo
|
|
91
|
+
</a>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="hero__social-proof reveal reveal-delay-4">
|
|
94
|
+
<span>Trusted by 2,000+ teams</span>
|
|
95
|
+
<div class="avatar-group" aria-label="User avatars">
|
|
96
|
+
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=40&h=40&fit=crop&crop=face" alt="User" width="40" height="40">
|
|
97
|
+
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&h=40&fit=crop&crop=face" alt="User" width="40" height="40">
|
|
98
|
+
<img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=40&h=40&fit=crop&crop=face" alt="User" width="40" height="40">
|
|
99
|
+
</div>
|
|
100
|
+
<div class="star-rating" aria-label="5 out of 5 stars">★★★★★ <span>4.9</span></div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
<!-- Decorative floating elements (aria-hidden) -->
|
|
104
|
+
<div class="hero__decor" aria-hidden="true">
|
|
105
|
+
<div class="orb orb--1"></div>
|
|
106
|
+
<div class="orb orb--2"></div>
|
|
107
|
+
<div class="orb orb--3"></div>
|
|
108
|
+
</div>
|
|
109
|
+
</section>
|
|
110
|
+
|
|
111
|
+
<!-- LOGOS: social proof bar -->
|
|
112
|
+
<section class="logos-bar" aria-label="Trusted by">
|
|
113
|
+
<div class="container">
|
|
114
|
+
<p class="logos-bar__label">Trusted by teams at</p>
|
|
115
|
+
<div class="logos-bar__track">
|
|
116
|
+
<!-- Logo images or text placeholders -->
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</section>
|
|
120
|
+
|
|
121
|
+
<!-- FEATURES: 3 or 6 cards in grid -->
|
|
122
|
+
<section class="features" id="features" aria-labelledby="features-title">
|
|
123
|
+
<div class="container">
|
|
124
|
+
<div class="section-header">
|
|
125
|
+
<span class="section-label">Features</span>
|
|
126
|
+
<h2 class="section-title" id="features-title">Everything you need</h2>
|
|
127
|
+
<p class="section-subtitle">One sentence expanding on the value.</p>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="features__grid">
|
|
130
|
+
<article class="feature-card reveal">
|
|
131
|
+
<div class="feature-card__icon" aria-hidden="true">⚡</div>
|
|
132
|
+
<h3 class="feature-card__title">Feature Name</h3>
|
|
133
|
+
<p class="feature-card__desc">What it does and why it matters to the user.</p>
|
|
134
|
+
</article>
|
|
135
|
+
<!-- repeat 5 more -->
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</section>
|
|
139
|
+
|
|
140
|
+
<!-- HOW IT WORKS: numbered steps, alternating layout -->
|
|
141
|
+
<section class="how-it-works" id="how-it-works" aria-labelledby="hiw-title">
|
|
142
|
+
<div class="container">
|
|
143
|
+
<div class="section-header">
|
|
144
|
+
<span class="section-label">Process</span>
|
|
145
|
+
<h2 class="section-title" id="hiw-title">How it works</h2>
|
|
146
|
+
</div>
|
|
147
|
+
<ol class="steps" role="list">
|
|
148
|
+
<li class="step reveal">
|
|
149
|
+
<span class="step__number" aria-hidden="true">01</span>
|
|
150
|
+
<div class="step__content">
|
|
151
|
+
<h3>Step title</h3>
|
|
152
|
+
<p>Explanation focused on what the user does and gets.</p>
|
|
153
|
+
</div>
|
|
154
|
+
<div class="step__visual">
|
|
155
|
+
<img src="https://images.unsplash.com/photo-[id]?w=600&q=80" alt="[descriptive alt]" loading="lazy">
|
|
156
|
+
</div>
|
|
157
|
+
</li>
|
|
158
|
+
</ol>
|
|
159
|
+
</div>
|
|
160
|
+
</section>
|
|
161
|
+
|
|
162
|
+
<!-- TESTIMONIALS -->
|
|
163
|
+
<section class="testimonials" aria-labelledby="testimonials-title">
|
|
164
|
+
<div class="container">
|
|
165
|
+
<h2 class="section-title" id="testimonials-title">What teams say</h2>
|
|
166
|
+
<div class="testimonials__grid">
|
|
167
|
+
<blockquote class="testimonial-card reveal">
|
|
168
|
+
<p class="testimonial-card__quote">"Specific outcome they achieved using the product."</p>
|
|
169
|
+
<footer class="testimonial-card__author">
|
|
170
|
+
<img src="https://images.unsplash.com/photo-[id]?w=48&h=48&fit=crop&crop=face"
|
|
171
|
+
alt="[Name]" width="48" height="48" loading="lazy">
|
|
172
|
+
<div>
|
|
173
|
+
<cite class="testimonial-card__name">Full Name</cite>
|
|
174
|
+
<span class="testimonial-card__role">Role, Company</span>
|
|
175
|
+
</div>
|
|
176
|
+
</footer>
|
|
177
|
+
</blockquote>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</section>
|
|
181
|
+
|
|
182
|
+
<!-- FINAL CTA -->
|
|
183
|
+
<section class="cta-final" id="cta" aria-labelledby="cta-title">
|
|
184
|
+
<div class="container">
|
|
185
|
+
<h2 class="cta-final__title reveal" id="cta-title">Ready to get started?</h2>
|
|
186
|
+
<p class="cta-final__subtitle reveal reveal-delay-1">Join thousands of teams already using [Product].</p>
|
|
187
|
+
<a href="#signup" class="btn btn--primary btn--xl reveal reveal-delay-2">Start for free</a>
|
|
188
|
+
<p class="cta-final__note">No credit card required · Cancel anytime</p>
|
|
189
|
+
</div>
|
|
190
|
+
</section>
|
|
191
|
+
</main>
|
|
192
|
+
|
|
193
|
+
<footer class="footer" role="contentinfo">
|
|
194
|
+
<div class="container footer__inner">
|
|
195
|
+
<a href="/" class="footer__logo" aria-label="Home">ProductName</a>
|
|
196
|
+
<nav class="footer__nav" aria-label="Footer navigation">
|
|
197
|
+
<a href="/privacy">Privacy</a>
|
|
198
|
+
<a href="/terms">Terms</a>
|
|
199
|
+
<a href="/contact">Contact</a>
|
|
200
|
+
</nav>
|
|
201
|
+
<p class="footer__copy">© 2026 ProductName. All rights reserved.</p>
|
|
202
|
+
</div>
|
|
203
|
+
</footer>
|
|
204
|
+
|
|
205
|
+
<!-- Scripts: async, non-blocking -->
|
|
206
|
+
<script async src="main.js"></script>
|
|
207
|
+
</body>
|
|
208
|
+
</html>
|
|
209
|
+
```
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
# Utilities — Performance, JS, BEM, Responsive, A11y, Images, SCSS
|
|
2
|
+
|
|
3
|
+
> Load when you need: performance rules, minimal JS patterns, naming conventions,
|
|
4
|
+
> responsive strategy, accessibility checklist, Unsplash image IDs, or SCSS architecture.
|
|
5
|
+
> These sections are short — all included in one file for convenience.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 3. Performance Patterns (always apply)
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<!-- Critical: preconnect fonts before CSS -->
|
|
13
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
14
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
15
|
+
|
|
16
|
+
<!-- Hero image: eager + fetchpriority for LCP -->
|
|
17
|
+
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="">
|
|
18
|
+
|
|
19
|
+
<!-- Below-fold images: lazy -->
|
|
20
|
+
<img src="feature.jpg" loading="lazy" alt="[descriptive]">
|
|
21
|
+
|
|
22
|
+
<!-- Non-critical CSS: preload then apply -->
|
|
23
|
+
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
|
24
|
+
<noscript><link rel="stylesheet" href="styles.css"></noscript>
|
|
25
|
+
|
|
26
|
+
<!-- Scripts: always async or defer -->
|
|
27
|
+
<script async src="analytics.js"></script>
|
|
28
|
+
<script defer src="interactions.js"></script>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
**Critical CSS inline rule:** Only header + hero CSS in `<style>` tag. Everything else in external file.
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## 4. Minimal JavaScript (interactions only)
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
// Header: add .scrolled class after scroll
|
|
39
|
+
window.addEventListener('scroll', () => {
|
|
40
|
+
document.getElementById('header')
|
|
41
|
+
.classList.toggle('scrolled', window.scrollY > 40);
|
|
42
|
+
}, { passive: true });
|
|
43
|
+
|
|
44
|
+
// Mobile menu toggle
|
|
45
|
+
document.querySelector('.header__burger')?.addEventListener('click', function() {
|
|
46
|
+
const expanded = this.getAttribute('aria-expanded') === 'true';
|
|
47
|
+
this.setAttribute('aria-expanded', String(!expanded));
|
|
48
|
+
document.querySelector('.header__nav').classList.toggle('open', !expanded);
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
// Scroll reveal with IntersectionObserver
|
|
52
|
+
const observer = new IntersectionObserver((entries) => {
|
|
53
|
+
entries.forEach(entry => {
|
|
54
|
+
if (entry.isIntersecting) {
|
|
55
|
+
entry.target.classList.add('revealed');
|
|
56
|
+
observer.unobserve(entry.target);
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
}, { threshold: 0.15 });
|
|
60
|
+
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
|
61
|
+
|
|
62
|
+
// Counter animation (for stats section)
|
|
63
|
+
function animateCounter(el) {
|
|
64
|
+
const target = +el.dataset.target;
|
|
65
|
+
const duration = 1500;
|
|
66
|
+
const start = performance.now();
|
|
67
|
+
requestAnimationFrame(function tick(now) {
|
|
68
|
+
const progress = Math.min((now - start) / duration, 1);
|
|
69
|
+
const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
|
|
70
|
+
el.textContent = Math.round(eased * target).toLocaleString();
|
|
71
|
+
if (progress < 1) requestAnimationFrame(tick);
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## 5. CSS Naming Convention (BEM-lite)
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
component → .hero, .feature-card, .testimonial-card
|
|
82
|
+
component__element → .hero__title, .feature-card__icon
|
|
83
|
+
component--modifier → .btn--primary, .btn--lg, .card--glow-border
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Rules:
|
|
87
|
+
- Class names are lowercase, hyphenated
|
|
88
|
+
- No deep nesting in CSS (max 2 levels: `.hero .hero__content`)
|
|
89
|
+
- No `id` for styling — only for anchor links and `aria-labelledby`
|
|
90
|
+
- Utility classes for single-purpose overrides: `.sr-only`, `.reveal`, `.gradient-text`
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## 6. Responsive Strategy
|
|
95
|
+
|
|
96
|
+
**Do NOT just reflow columns on mobile. Also:**
|
|
97
|
+
- Hide secondary navigation links → show only logo + CTA + burger
|
|
98
|
+
- Reduce heading sizes with `clamp()` instead of media queries for font-size
|
|
99
|
+
- Stack `.hero__actions` buttons vertically below 480px
|
|
100
|
+
- Remove decorative orbs/blobs on mobile (performance + layout stability)
|
|
101
|
+
- Simplify card grids: 3 → 2 → 1 columns
|
|
102
|
+
- Show testimonials as carousel or stacked, not 3-column grid
|
|
103
|
+
|
|
104
|
+
```css
|
|
105
|
+
/* Prefer clamp() for fluid typography over breakpoint-heavy font-size */
|
|
106
|
+
.hero__title { font-size: clamp(2rem, 6vw, 4.5rem); }
|
|
107
|
+
.section-title { font-size: clamp(1.875rem, 4vw, 3rem); }
|
|
108
|
+
|
|
109
|
+
/* Hide decorative elements on mobile */
|
|
110
|
+
@media (max-width: 768px) {
|
|
111
|
+
.hero__decor { display: none; }
|
|
112
|
+
.header__nav { display: none; }
|
|
113
|
+
.header__nav.open { display: flex; flex-direction: column; }
|
|
114
|
+
.hero__actions { flex-direction: column; align-items: center; }
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## 7. Accessibility Checklist (non-negotiable)
|
|
121
|
+
|
|
122
|
+
- [ ] All `<img>` have `alt` — decorative images use `alt=""` + `role="presentation"`
|
|
123
|
+
- [ ] All interactive elements reachable by `Tab` and operable by `Enter`/`Space`
|
|
124
|
+
- [ ] `:focus-visible` styles visible and clear (2px outline, offset, accent color)
|
|
125
|
+
- [ ] All `<button>` have `type="button"` or `type="submit"`
|
|
126
|
+
- [ ] Icon-only buttons have `aria-label`
|
|
127
|
+
- [ ] Sections have `aria-labelledby` pointing to their heading `id`
|
|
128
|
+
- [ ] Color contrast ≥ 4.5:1 for body text, ≥ 3:1 for large text and UI controls
|
|
129
|
+
- [ ] `prefers-reduced-motion: reduce` disables all animations
|
|
130
|
+
- [ ] Mobile menu uses `aria-expanded` toggling
|
|
131
|
+
- [ ] Footer `<nav>` has `aria-label="Footer navigation"` distinct from header nav
|
|
132
|
+
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
## 8. Curated Unsplash Images by Domain
|
|
136
|
+
|
|
137
|
+
Format: `https://images.unsplash.com/photo-{ID}?w=1920&q=80&fit=crop`
|
|
138
|
+
|
|
139
|
+
| Domain | Hero | Feature/Section |
|
|
140
|
+
|---|---|---|
|
|
141
|
+
| Tech/AI/SaaS | `1518770660439-4636190af475` | `1551288049-bebda4e38f71` |
|
|
142
|
+
| Business/Corp | `1497366216548-37526070297c` | `1522071820081-009f0129c71c` |
|
|
143
|
+
| Creative/Agency | `1558618666-fcd25c85cd64` | `1504607798333-52a30db54a5d` |
|
|
144
|
+
| Wellness/Health | `1506905925346-21bda4d32df4` | `1571019613454-1cb2f99b2d8b` |
|
|
145
|
+
| Food/Restaurant | `1414235077428-338989a2e8c0` | `1555939594-58d7cb561ad1` |
|
|
146
|
+
| Architecture | `1486325212027-8081e485255e` | `1460317442991-0ec209397118` |
|
|
147
|
+
| Nature/Travel | `1441974231531-c6227db76b6e` | `1506197603052-3cc9c3a201bd` |
|
|
148
|
+
| People/Teams | `1522202176988-66273c2fd55f` | `1582213782179-e0d53f98f2ca` |
|
|
149
|
+
| Avatars (face) | `1535713875002-d1d0cf377fde` | `1494790108377-be9c29b29330` |
|
|
150
|
+
|
|
151
|
+
Face crops (for testimonials): append `&w=48&h=48&fit=crop&crop=face`
|
|
152
|
+
|
|
153
|
+
---
|
|
154
|
+
|
|
155
|
+
## 11. SCSS Architecture (for larger projects)
|
|
156
|
+
|
|
157
|
+
```
|
|
158
|
+
assets/scss/
|
|
159
|
+
base/
|
|
160
|
+
_reset.scss ← minimal reset + box-model
|
|
161
|
+
_typography.scss ← font imports, type scale, body
|
|
162
|
+
_helpers.scss ← .sr-only, .reveal, .gradient-text, .container
|
|
163
|
+
tokens/
|
|
164
|
+
_colors.scss ← CSS custom properties :root block
|
|
165
|
+
_spacing.scss ← --space-* tokens
|
|
166
|
+
_typography.scss ← --font-*, --text-* tokens
|
|
167
|
+
_motion.scss ← --ease-*, --duration-* tokens
|
|
168
|
+
layout/
|
|
169
|
+
_header.scss
|
|
170
|
+
_footer.scss
|
|
171
|
+
_grid.scss
|
|
172
|
+
components/
|
|
173
|
+
_buttons.scss
|
|
174
|
+
_cards.scss
|
|
175
|
+
_forms.scss
|
|
176
|
+
_modal.scss
|
|
177
|
+
_accordion.scss
|
|
178
|
+
_slider.scss
|
|
179
|
+
sections/
|
|
180
|
+
_hero.scss
|
|
181
|
+
_features.scss
|
|
182
|
+
_how-it-works.scss
|
|
183
|
+
_testimonials.scss
|
|
184
|
+
_pricing.scss
|
|
185
|
+
_faq.scss
|
|
186
|
+
_cta-final.scss
|
|
187
|
+
main.scss ← @forward all partials in order
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
**Compile:** `sass assets/scss/main.scss assets/css/main.min.css --style=compressed --watch`
|