@withmata/blueprints 0.3.5 → 0.5.0

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.
Files changed (62) hide show
  1. package/.claude/skills/audit/SKILL.md +4 -4
  2. package/.claude/skills/blueprint-catalog/SKILL.md +17 -7
  3. package/.claude/skills/copywrite/SKILL.md +187 -0
  4. package/.claude/skills/copywrite-landing/SKILL.md +489 -0
  5. package/.claude/skills/design-system/SKILL.md +970 -0
  6. package/.claude/skills/new-project/SKILL.md +168 -112
  7. package/.claude/skills/scaffold-auth/SKILL.md +9 -9
  8. package/.claude/skills/scaffold-db/SKILL.md +14 -14
  9. package/.claude/skills/scaffold-env/SKILL.md +4 -4
  10. package/.claude/skills/scaffold-foundation/SKILL.md +15 -15
  11. package/.claude/skills/scaffold-tailwind/SKILL.md +17 -3
  12. package/.claude/skills/scaffold-ui/SKILL.md +155 -36
  13. package/ENGINEERING.md +2 -2
  14. package/blueprints/discovery/design-system/BLUEPRINT.md +1479 -0
  15. package/blueprints/discovery/marketing-copywriting/BLUEPRINT.md +664 -0
  16. package/blueprints/features/auth-better-auth/BLUEPRINT.md +20 -22
  17. package/blueprints/features/db-drizzle-postgres/BLUEPRINT.md +12 -12
  18. package/blueprints/features/db-drizzle-postgres/files/db/src/example-entity.ts +1 -1
  19. package/blueprints/features/db-drizzle-postgres/files/db/src/scripts/seed.ts +1 -1
  20. package/blueprints/features/env-t3/BLUEPRINT.md +1 -1
  21. package/blueprints/features/tailwind-v4/BLUEPRINT.md +9 -2
  22. package/blueprints/features/tailwind-v4/files/tailwind-config/shared-styles.css +80 -1
  23. package/blueprints/features/ui-shared-components/BLUEPRINT.md +411 -78
  24. package/blueprints/features/ui-shared-components/files/ui/components/ui/alert-dialog.tsx +192 -0
  25. package/blueprints/features/ui-shared-components/files/ui/components/ui/avatar.tsx +71 -0
  26. package/blueprints/features/ui-shared-components/files/ui/components/ui/badge.tsx +52 -0
  27. package/blueprints/features/ui-shared-components/files/ui/components/ui/breadcrumb.tsx +122 -0
  28. package/blueprints/features/ui-shared-components/files/ui/components/ui/button.tsx +56 -0
  29. package/blueprints/features/ui-shared-components/files/ui/components/ui/card-select.tsx +72 -0
  30. package/blueprints/features/ui-shared-components/files/ui/components/ui/card.tsx +100 -0
  31. package/blueprints/features/ui-shared-components/files/ui/components/ui/collapsible.tsx +34 -0
  32. package/blueprints/features/ui-shared-components/files/ui/components/ui/combobox.tsx +301 -0
  33. package/blueprints/features/ui-shared-components/files/ui/components/ui/dropdown-menu.tsx +264 -0
  34. package/blueprints/features/ui-shared-components/files/ui/components/ui/empty-state.tsx +43 -0
  35. package/blueprints/features/ui-shared-components/files/ui/components/ui/entity-select.tsx +110 -0
  36. package/blueprints/features/ui-shared-components/files/ui/components/ui/field.tsx +237 -0
  37. package/blueprints/features/ui-shared-components/files/ui/components/ui/form-field.tsx +217 -0
  38. package/blueprints/features/ui-shared-components/files/ui/components/ui/input-group.tsx +161 -0
  39. package/blueprints/features/ui-shared-components/files/ui/components/ui/input.tsx +20 -0
  40. package/blueprints/features/ui-shared-components/files/ui/components/ui/label.tsx +20 -0
  41. package/blueprints/features/ui-shared-components/files/ui/components/ui/org-switcher.tsx +114 -0
  42. package/blueprints/features/ui-shared-components/files/ui/components/ui/page-header.tsx +45 -0
  43. package/blueprints/features/ui-shared-components/files/ui/components/ui/pagination.tsx +52 -0
  44. package/blueprints/features/ui-shared-components/files/ui/components/ui/pill-select.tsx +151 -0
  45. package/blueprints/features/ui-shared-components/files/ui/components/ui/popover.tsx +41 -0
  46. package/blueprints/features/ui-shared-components/files/ui/components/ui/search-input.tsx +49 -0
  47. package/blueprints/features/ui-shared-components/files/ui/components/ui/select.tsx +205 -0
  48. package/blueprints/features/ui-shared-components/files/ui/components/ui/selected-entity-card.tsx +47 -0
  49. package/blueprints/features/ui-shared-components/files/ui/components/ui/separator.tsx +25 -0
  50. package/blueprints/features/ui-shared-components/files/ui/components/ui/sidebar.tsx +389 -0
  51. package/blueprints/features/ui-shared-components/files/ui/components/ui/status-filter.tsx +43 -0
  52. package/blueprints/features/ui-shared-components/files/ui/components/ui/tag-input.tsx +131 -0
  53. package/blueprints/features/ui-shared-components/files/ui/components/ui/textarea.tsx +18 -0
  54. package/blueprints/features/ui-shared-components/files/ui/components/ui/user-menu.tsx +149 -0
  55. package/blueprints/features/ui-shared-components/files/ui/components.json +11 -8
  56. package/blueprints/features/ui-shared-components/files/ui/package.json +20 -11
  57. package/blueprints/foundation/monorepo-turbo/BLUEPRINT.md +19 -20
  58. package/blueprints/foundation/monorepo-turbo/files/root/package.json +1 -1
  59. package/dist/index.js +27 -10
  60. package/package.json +1 -1
  61. package/blueprints/features/tailwind-v4/files/tailwind-config/package.json +0 -20
  62. package/blueprints/foundation/monorepo-turbo/files/root/pnpm-workspace.yaml +0 -5
@@ -0,0 +1,489 @@
1
+ ---
2
+ name: copywrite-landing
3
+ description: Write high-converting landing page copy with CRO frameworks, traffic source matching, and psychology-backed annotations
4
+ ---
5
+
6
+ # Write Landing Page Copy
7
+
8
+ Write high-converting copy for landing pages and homepages — the highest-stakes conversion pages. This is a deeper, more rigorous version of `/copywrite`, tailored specifically for pages where every word directly impacts revenue. It applies CRO frameworks, traffic source matching, objection mapping, and awareness-level calibration to produce copy that converts.
9
+
10
+ This skill covers landing pages and homepages. For other marketing pages (pricing, about, features, careers, changelog), redirect to `/copywrite`.
11
+
12
+ ## Step 1: Read the Blueprint
13
+
14
+ Read the full copywriting blueprint:
15
+
16
+ ```
17
+ ~/.withmata/blueprints/blueprints/discovery/marketing-copywriting/BLUEPRINT.md
18
+ ```
19
+
20
+ If not found, run `npx @withmata/blueprints` to install.
21
+
22
+ The BLUEPRINT.md contains the complete methodology: page-type section sequences, copywriting frameworks, psychology principles, and the Seven Sweeps editing process. Follow it precisely.
23
+
24
+ ## Step 2: Read Context
25
+
26
+ Check if `.project-context.md` exists in the target project root. If it contains a `## Product Discovery` section, read the product docs:
27
+
28
+ - `docs/product/product-thesis.md` — for pillars, positioning, value prop
29
+ - `docs/product/product-brief.md` — for competitive landscape, differentiation
30
+ - `docs/product/users/archetype-*.md` — for customer language, pain points, desires, "In Their Voice" quotes
31
+
32
+ Map discovery findings to copywriting context:
33
+
34
+ - Product thesis pillars become the key benefits to emphasize
35
+ - Archetype "Their World" + "The Problem in Their Words" become problem/pain section content
36
+ - Archetype "What They Care About Most" drives benefit prioritization
37
+ - Competitive landscape informs differentiation claims, objection handling, and "why us vs. alternatives" sections
38
+ - "In Their Voice" quotes supply customer language to weave into copy
39
+
40
+ If no product docs exist, note what context is missing. Gather it conversationally in Step 3.
41
+
42
+ ## Step 3: Understand the Landing Page
43
+
44
+ Ask these questions. Skip any already answered by product docs. Present pre-filled answers from discovery and confirm before moving on.
45
+
46
+ ### Standard Context Questions
47
+
48
+ 1. **"What page are you writing?"** — This skill handles two types:
49
+ - **Landing page** — single message, single CTA, one conversion action. Built for a specific campaign, traffic source, or audience segment.
50
+ - **Homepage** — serves multiple audiences, multiple paths. The "front door" of the product.
51
+
52
+ 2. **"Who's the audience for THIS specific page?"** — Pre-fill from archetypes if available. For landing pages, this should be one specific segment, not "everyone."
53
+
54
+ 3. **"What tone fits?"** — casual/conversational, professional but friendly, technical/precise, playful/bold. Derive from product docs if brand voice is defined.
55
+
56
+ 4. **"Any specific content that MUST be included?"** — e.g., a launch date, a specific feature, a partnership announcement, regulatory disclaimers.
57
+
58
+ ### Landing-Page-Specific Questions
59
+
60
+ 5. **"Where is traffic coming from?"** — This determines headline matching.
61
+ - **Paid ads (Google, Meta, LinkedIn)** — headline must match ad copy closely
62
+ - **Organic search** — headline should include the keyword/intent
63
+ - **Email campaigns** — headline should match the email subject/promise
64
+ - **Social media** — headline should match the hook
65
+ - **Product Hunt / launch** — headline should match the tagline
66
+ - **Direct / word of mouth** — broadest value proposition
67
+ - **Multiple sources** — identify the primary source; note secondary sources for variation headlines
68
+
69
+ *Why this matters: Message match between the traffic source and the landing page headline is one of the highest-impact CRO factors. When the visitor sees what they expected, bounce rate drops dramatically. When there's a disconnect, they leave in seconds.*
70
+
71
+ 6. **"What's the SINGLE conversion action?"** — One page, one goal.
72
+ - Start free trial
73
+ - Book a demo
74
+ - Join waitlist
75
+ - Download resource
76
+ - Create account
77
+ - Contact sales
78
+
79
+ *Why one: Every additional CTA reduces conversion on the primary action. Hick's Law — more choices, slower decisions, more abandonment. The entire page builds ONE argument toward ONE decision.*
80
+
81
+ 7. **"What's the visitor's awareness level?"** — Eugene Schwartz's five levels of awareness:
82
+ - **Unaware** — doesn't know they have the problem. Lead with the problem, not the solution. The page must create recognition before it can offer resolution.
83
+ - **Problem-aware** — knows the problem, doesn't know solutions exist. Lead with empathy and pain amplification, then reveal the solution as the natural next step.
84
+ - **Solution-aware** — knows solutions exist, evaluating options. Lead with differentiation. Why THIS solution over alternatives they're already considering?
85
+ - **Product-aware** — knows YOUR product, needs a reason to act now. Lead with proof, urgency, and risk reversal. They don't need education, they need confidence.
86
+ - **Most-aware** — ready to buy, needs the right offer. Lead with the CTA and the deal. Get out of the way.
87
+
88
+ *Why this matters: The awareness level determines how much education the page needs to do before asking for action. An unaware visitor needs the full 9-section sequence. A most-aware visitor might just need hero + social proof + CTA. Writing a long educational page for someone ready to buy wastes their attention. Writing a short CTA-focused page for someone who doesn't know the problem exists will bounce them immediately.*
89
+
90
+ 8. **"What are the top 3 objections a visitor would have?"** — Pre-fill from competitive landscape if available. Common objections:
91
+ - "Is this worth the price?"
92
+ - "Will this work for my specific situation?"
93
+ - "Is it hard to set up / switch from what I use now?"
94
+ - "Can I trust this company?"
95
+ - "What if I don't like it?"
96
+ - "Is this really different from [competitor]?"
97
+ - "Do I need this right now?"
98
+
99
+ Probe: "Think about what would make someone hesitate right before clicking the CTA. What stops them?"
100
+
101
+ 9. **"Is there a specific offer?"** — free trial length, discount, bonus, guarantee, limited-time deal. If no offer exists, note this as a CRO gap to flag later.
102
+
103
+ If product docs exist, present a summary of what you pulled and ask: "Here's what I'm working from — [summarize context]. Anything to adjust or add?"
104
+
105
+ ## Step 4: Build the Objection Map
106
+
107
+ Before writing any copy, create an explicit objection map. This is the strategic backbone of the page — every objection must be addressed before the visitor reaches the final CTA.
108
+
109
+ ```
110
+ ## Objection Map
111
+
112
+ | Objection | Where Addressed | How |
113
+ |-----------|----------------|-----|
114
+ | "Is it worth the price?" | Pricing section + ROI testimonial | Show value vs. cost, comparison to alternatives, "pays for itself in X" framing |
115
+ | "Will it work for me?" | How It Works + Use cases | Show 3 scenarios matching their industry/role, specificity builds confidence |
116
+ | "Is it hard to switch?" | How It Works step 1 | "Import your data in one click" — reduce perceived effort to near zero |
117
+ | "Can I trust them?" | Social proof + Testimonials | Logos, review scores, attributed quotes with name + role + photo |
118
+ | "What if I don't like it?" | Near final CTA | "30-day money-back guarantee, no questions asked" — risk reversal |
119
+ ```
120
+
121
+ Present this to the user: "Here's how I plan to address each objection throughout the page. Any objections missing? Any that feel more important than I've ranked them?"
122
+
123
+ Wait for confirmation before proceeding.
124
+
125
+ ## Step 5: Generate Page Structure
126
+
127
+ Use the 9-section landing page sequence as the default framework, adapted to the visitor's awareness level. The awareness level determines which sections are included and how much weight each carries.
128
+
129
+ ### For Unaware / Problem-Aware Visitors (Full Sequence)
130
+
131
+ These visitors need the most education. The page must create recognition of the problem before introducing the solution.
132
+
133
+ 1. **Hero** — headline matched to traffic source + primary CTA
134
+ *Unaware: headline names the problem. Problem-aware: headline empathizes with the pain.*
135
+ 2. **Social Proof Bar** — logos, user count, review scores
136
+ *Brief credibility before asking them to invest attention in reading further.*
137
+ 3. **Problem / Pain** — recognition of their situation, consequences of inaction
138
+ *The visitor must feel "this is about ME" before they'll consider a solution.*
139
+ 4. **Solution / Benefits** — 3 key outcomes (not features), bridged with "which means..."
140
+ *Transition from pain to possibility. Each benefit answers "so what?" for a specific pain point.*
141
+ 5. **How It Works** — 3-step process, reduced to maximum simplicity
142
+ *Lowers perceived effort. Three steps feels achievable. Seven feels like a project.*
143
+ 6. **Testimonials** — 2-3 attributed quotes with name, role, company
144
+ *Social proof placed after claims, so proof follows promise.*
145
+ 7. **Pricing** (if applicable) or **Feature Deep-Dive**
146
+ *Only after value is established. Never lead with price for unaware visitors.*
147
+ 8. **FAQ / Objections** — from the objection map, the remaining concerns not yet addressed
148
+ *Systematic objection cleanup before the final ask.*
149
+ 9. **Final CTA** — recap value proposition + urgency + risk reversal
150
+ *The last push: remind them what they get, why now, and why it's safe.*
151
+
152
+ ### For Solution-Aware Visitors (Differentiation Focus)
153
+
154
+ These visitors know solutions exist and are comparing. The page must answer "why THIS one?"
155
+
156
+ 1. **Hero** — differentiation headline + primary CTA
157
+ 2. **Social Proof** — heavy, quantified ("10,000+ teams", "4.9/5 on G2")
158
+ 3. **"Why [Product] vs. Alternatives"** — direct comparison, honest positioning
159
+ 4. **Key Differentiating Features** — what you do that others don't or can't
160
+ 5. **How It Works** — emphasize ease of switching
161
+ 6. **Testimonials** — focus on switching stories ("We moved from X to Y and...")
162
+ 7. **Pricing** — with clear recommendation, comparison to alternatives
163
+ 8. **FAQ** — competitive and buying-specific objections
164
+ 9. **Final CTA** — risk reversal prominent
165
+
166
+ ### For Product-Aware / Most-Aware Visitors (Conversion Focus)
167
+
168
+ These visitors know the product. They need a reason to act NOW, not more education.
169
+
170
+ 1. **Hero** — offer-focused headline + prominent, high-contrast CTA
171
+ 2. **Social Proof** — heavy and quantified (logos, numbers, review scores, awards)
172
+ 3. **Key Benefits Recap** — brief, 3 bullet points maximum
173
+ 4. **Testimonials** — results-focused ("We increased X by Y%")
174
+ 5. **Pricing** — with recommendation, highlight the offer
175
+ 6. **FAQ** — buying-specific objections only (billing, cancellation, support)
176
+ 7. **Final CTA** — urgency + risk reversal + the deal
177
+
178
+ Present the structure with reasoning for each section's placement and confirm before writing:
179
+
180
+ ```
181
+ Here's the structure I recommend for your [page type] targeting [awareness level] visitors from [traffic source]:
182
+
183
+ 1. **Hero** — [what this section will accomplish]
184
+ *Why first: [psychology reasoning]*
185
+
186
+ 2. **[Section 2]** — [purpose]
187
+ *Why here: [reasoning]*
188
+
189
+ ... etc
190
+
191
+ Mobile note: [how the structure adapts on small screens]
192
+
193
+ Does this structure feel right, or should we adjust before I write the copy?
194
+ ```
195
+
196
+ Wait for confirmation. Do not proceed to writing until the user approves or adjusts the structure.
197
+
198
+ ## Step 6: Apply Above-the-Fold Formula
199
+
200
+ The hero section must communicate value within 5 seconds. This is non-negotiable — research shows that visitors form a first impression in 50 milliseconds and decide to stay or leave within 5 seconds. The hero uses 5 elements to win those seconds:
201
+
202
+ 1. **Headline** (6-12 words) — states the outcome directly, matched to the traffic source
203
+ *Psychology: Processing fluency. Short, clear statements are perceived as more truthful and more important. Match the traffic source language for message congruence — the visitor should feel "I'm in the right place" instantly.*
204
+
205
+ 2. **Subheadline** (15-25 words) — expands with methodology, proof, or specificity
206
+ *Psychology: The headline hooks, the subheadline justifies the hook. It answers the implicit "how?" or "really?" that follows a strong headline.*
207
+
208
+ 3. **Hero visual** (described, not created) — show the outcome, not a product screenshot
209
+ *Psychology: Picture superiority effect. Images of the OUTCOME (happy customer, completed dashboard, results graph) outperform product screenshots because visitors buy the result, not the tool.*
210
+
211
+ 4. **Primary CTA** — action verb + value, high contrast, visually prominent
212
+ *Psychology: Action-oriented buttons ("Start Free Trial" vs. "Submit") convert higher because they describe what the visitor GETS, not what they DO. High contrast ensures the eye finds it without searching.*
213
+
214
+ 5. **Social proof nugget** — one line of credibility: "Trusted by 10,000+ teams" or a logo strip
215
+ *Psychology: Social proof reduces cognitive load. The visitor doesn't need to evaluate the product alone — others have already validated it.*
216
+
217
+ For each element, generate the primary recommendation plus 2 variations:
218
+
219
+ ```
220
+ ### Headline
221
+
222
+ **Primary (recommended):**
223
+ > [headline text]
224
+ *Framework: [which formula — e.g., Outcome + Timeframe, Problem Agitate Solve]. Traffic source match: [how this echoes the ad/email/search query]. Psychology: [why this works for this awareness level].*
225
+
226
+ **Alternative A** — [angle description]:
227
+ > [headline text]
228
+ *Best when: [context where this variation wins — e.g., "when visitors are more solution-aware", "when the traffic source emphasizes speed"]*
229
+
230
+ **Alternative B** — [angle description]:
231
+ > [headline text]
232
+ *Best when: [context]*
233
+ ```
234
+
235
+ **Mobile-first note for hero:** On mobile, the hero must work without the image. Headline + CTA should be visible without scrolling. The social proof nugget should be a single line, not a logo grid.
236
+
237
+ ## Step 7: Write Copy Section by Section
238
+
239
+ For each section in the approved structure, generate:
240
+
241
+ - The actual copy text (headlines, body, CTAs, micro-copy)
242
+ - An annotation explaining the framework/psychology behind the choices
243
+ - For key elements (headlines, CTAs, problem/pain opening, final CTA): 2-3 variations with rationale
244
+
245
+ **Annotation format for every section:**
246
+
247
+ ```
248
+ *Why this works: [Name the specific framework or psychology principle]. [Explain in 1-2 sentences why this technique is effective for this audience/product]. [Note any product-specific reasoning from the discovery docs].*
249
+ ```
250
+
251
+ **Variation format for key elements:**
252
+
253
+ ```
254
+ **Primary (recommended):**
255
+ > [copy text]
256
+ *Why: [reasoning]*
257
+
258
+ **Alternative A** — [angle description]:
259
+ > [copy text]
260
+ *Best when: [context]*
261
+
262
+ **Alternative B** — [angle description]:
263
+ > [copy text]
264
+ *Best when: [context]*
265
+ ```
266
+
267
+ Generate 2-3 meaningfully different angles, not slight word swaps. Each variation should represent a different strategic choice.
268
+
269
+ ### Landing-Page-Specific Writing Principles
270
+
271
+ Apply these throughout every section:
272
+
273
+ - **Traffic source matching** — the headline must echo the ad, email, or social hook that brought the visitor here. If the user provided their ad copy or email subject lines, the headline MUST use the same core language. A disconnect between what was promised and what the page says is the #1 conversion killer.
274
+
275
+ - **Awareness-level calibration** — the amount of education in each section matches the visitor's awareness level. Unaware visitors need problem sections with vivid "day in the life" pain descriptions. Product-aware visitors need proof and urgency, not education. Never over-explain to someone ready to buy. Never under-explain to someone who doesn't know the problem exists.
276
+
277
+ - **Objection weaving** — objections from the map are addressed in the natural flow of the page, not just quarantined in the FAQ section. The best objection handling feels like a natural part of the argument. Example: "Import your existing data in one click" in the How It Works section addresses "Is it hard to switch?" without making it feel defensive.
278
+
279
+ - **Mobile-first notes** — for each section, include a brief note on mobile considerations:
280
+ - Full-width CTAs on mobile (no side-by-side buttons)
281
+ - Sticky CTA bar on scroll for long pages
282
+ - Content priority: what gets cut or reordered on small screens
283
+ - Minimum 16px font for body text
284
+ - Minimum 48x48px tap targets for all interactive elements
285
+ - Horizontal scroll for logo bars instead of grid
286
+
287
+ - **Social proof placement** — note where to place trust signals relative to claims and CTAs:
288
+ - Place social proof immediately after any claim that might trigger skepticism
289
+ - Place trust badges (security, guarantee) near forms and CTAs
290
+ - Place testimonials after the section whose claim they validate
291
+ - Never cluster all social proof in one section — distribute it throughout the page
292
+
293
+ Use customer language from archetypes when available. Bridge every feature to a benefit with "which means..."
294
+
295
+ ## Step 8: CRO Analysis Pass
296
+
297
+ Run the 7-dimension CRO framework against the generated copy. This is a quality gate — do not skip it. Score each dimension and provide specific, actionable recommendations for any "needs work" items.
298
+
299
+ ### 1. Value Proposition Clarity
300
+
301
+ **Score:** clear / needs work
302
+
303
+ Can a first-time visitor understand the offering within 5 seconds of seeing the hero? Test: read only the headline + subheadline. Does a stranger know (a) what the product does, (b) who it's for, and (c) why it matters?
304
+
305
+ *If needs work: rewrite the headline to be more specific. "Automate your invoicing" beats "The future of business." Specificity is clarity.*
306
+
307
+ ### 2. Headline Effectiveness
308
+
309
+ **Score:** strong / needs work
310
+
311
+ Does the headline use a proven formula (Outcome + Timeframe, Problem Agitate Solve, Social Proof Lead, Curiosity Gap)? Is it specific enough to feel real, not generic? Does it match the traffic source?
312
+
313
+ *If needs work: identify which formula is the best fit and rewrite. Check message match against the stated traffic source.*
314
+
315
+ ### 3. CTA Placement and Hierarchy
316
+
317
+ **Score:** strong / needs work
318
+
319
+ Is the primary CTA visible without scrolling? Is it repeated at least 2-3 times on the page? Is there a clear visual hierarchy — one primary CTA, optional secondary? Are CTAs placed after value-building sections, not in isolation?
320
+
321
+ *If needs work: add CTA repetitions, adjust placement, ensure the primary CTA has the highest visual contrast on the page.*
322
+
323
+ ### 4. Visual Hierarchy and Scannability
324
+
325
+ **Score:** strong / needs work
326
+
327
+ Can scanners (who read only headlines, bold text, and CTAs) get the main message without reading body text? Do section headlines tell a story when read in sequence? Is there enough white space between sections?
328
+
329
+ *If needs work: rewrite section headlines to be scannable value statements, not labels. "How It Works" becomes "Start Converting in 3 Steps."*
330
+
331
+ ### 5. Trust Signals and Social Proof
332
+
333
+ **Score:** strong / needs work
334
+
335
+ Are trust signals placed near CTAs and near claims? Are they specific and attributed? ("10,000+ teams" beats "Trusted by thousands." A named testimonial beats "Our customers love us.") Is there social proof above the fold?
336
+
337
+ *If needs work: add proof nugget to hero, add attributed testimonial placeholders near key claims, add trust badges near forms.*
338
+
339
+ ### 6. Objection Handling
340
+
341
+ **Score:** strong / needs work
342
+
343
+ Are all objections from the objection map addressed before the final CTA? Are they addressed naturally within the flow (not just in FAQ)? Is risk reversal (guarantee, free trial, easy cancellation) placed near the final CTA?
344
+
345
+ *If needs work: map unaddressed objections to specific sections, add risk reversal near the final CTA.*
346
+
347
+ ### 7. Friction Points
348
+
349
+ **Score:** strong / needs work
350
+
351
+ Is there any unnecessary complexity? Multiple CTAs competing for attention? Jargon that the target audience wouldn't understand? Long paragraphs without scannable formatting? Forms with too many fields? Navigation links that leak the visitor off-page?
352
+
353
+ *If needs work: simplify. Remove competing CTAs, break up long paragraphs, reduce form fields (max 2 for landing pages: name + email), remove or minimize navigation.*
354
+
355
+ Output the full analysis with scores, findings, and specific recommendations. Fix what can be fixed inline in the copy. Flag what requires user input or design decisions.
356
+
357
+ ## Step 9: Quality Pass — Seven Sweeps
358
+
359
+ Run the Seven Sweeps copy editing framework against the generated copy:
360
+
361
+ 1. **Clarity** — flag anything not immediately understandable on first read
362
+ 2. **Voice & Tone** — flag any inconsistencies with the chosen tone
363
+ 3. **"So What?"** — flag features presented without benefits, claims without stakes
364
+ 4. **"Prove It"** — flag unsupported claims (suggest where to add testimonials, stats, or specifics; never fabricate them)
365
+ 5. **Specificity** — flag vague language ("many", "better", "fast"), suggest concrete alternatives with numbers or comparisons
366
+ 6. **Heightened Emotion** — flag purely informational sections near decision points that should carry emotional weight
367
+ 7. **Zero Risk** — flag missing risk reversals near CTAs (guarantee, free trial, easy cancellation, money-back)
368
+
369
+ Include the sweep results in the output document under "## Copy Editing Notes". Fix what can be fixed inline; call out what needs user input (e.g., real testimonials, actual stats, customer logos).
370
+
371
+ ## Step 10: Output
372
+
373
+ Create `docs/pages/landing/` in the target project if it does not exist. Write the page copy to `docs/pages/landing/{page-name}.md` using this structure:
374
+
375
+ ```markdown
376
+ # {Page Name} — Landing Page Copy
377
+
378
+ ## Context
379
+ - **Page type:** Landing page / Homepage
380
+ - **Primary goal:** [single conversion action]
381
+ - **Target audience:** [from product docs or conversation]
382
+ - **Traffic source:** [where visitors come from]
383
+ - **Visitor awareness level:** [unaware / problem-aware / solution-aware / product-aware / most-aware]
384
+ - **Tone:** [chosen tone]
385
+ - **Product discovery:** [Yes — linked to docs/product/ | No — gathered conversationally]
386
+
387
+ ## Objection Map
388
+
389
+ | Objection | Where Addressed | How |
390
+ |-----------|----------------|-----|
391
+ | [objection] | [section] | [technique] |
392
+ | ... | ... | ... |
393
+
394
+ ## Page Structure Sketch
395
+ [Section-by-section layout with mobile-first notes.
396
+ Describe the visual flow: hero occupies full viewport, social proof bar is a horizontal scroll on mobile, problem section uses alternating text/image layout, etc.
397
+ Include spacing, visual weight, and content hierarchy notes that a developer would need to build this page.]
398
+
399
+ ## Above the Fold
400
+ [The 5 elements (headline, subheadline, hero visual description, primary CTA, social proof nugget) with full annotations and variations for headline, subheadline, and CTA.]
401
+
402
+ ## Copy by Section
403
+
404
+ ### 1. Hero
405
+ [Headlines with variations, subheadline with variations, CTA text with variations, supporting micro-copy.
406
+ Each with full annotations.
407
+ Mobile-first notes for this section.
408
+ Social proof placement notes.]
409
+
410
+ ### 2. [Section 2]
411
+ [Copy + annotations + mobile notes + social proof notes where relevant]
412
+
413
+ ... [all sections from the approved structure]
414
+
415
+ ## CRO Analysis
416
+ [7-dimension analysis with scores and specific recommendations.
417
+ For each "needs work" item, include the specific fix applied or the specific action the user needs to take.]
418
+
419
+ ## Copy Editing Notes
420
+ [Seven Sweeps results — what was flagged, what was improved inline, what needs user input.]
421
+
422
+ ## Social Proof Placement Guide
423
+ [Where to place which type of social proof throughout the page:
424
+ - Company logos — below hero in a horizontal strip, grayscale with color on hover
425
+ - User/team count — hero section or social proof bar, specific number not rounded
426
+ - Star rating — near CTA, sourced from a real review platform (G2, Capterra, etc.)
427
+ - Testimonials — dedicated section + inline near the claims they validate
428
+ - Case study snippets — after How It Works or Benefits section
429
+ - Trust badges (security, compliance) — near forms, pricing, and footer
430
+ - Media mentions ("As seen in...") — below hero or in social proof bar]
431
+
432
+ ## Mobile Considerations
433
+ [Section-by-section mobile adaptation notes:
434
+ - Hero: headline + CTA visible above fold without image; image loads below
435
+ - CTA: full width, sticky bar on scroll after hero passes out of viewport
436
+ - Social proof bar: horizontal scroll, not grid
437
+ - Forms: single column, max 2 fields, large tap targets
438
+ - Body fonts: minimum 16px, line height 1.5
439
+ - Tap targets: minimum 48x48px with adequate spacing
440
+ - Testimonials: carousel or stack, not grid
441
+ - Navigation: minimal or hidden; do not provide escape routes from the conversion path]
442
+
443
+ ## Meta Content
444
+ - **Page title:** [SEO-optimized, 60 chars max]
445
+ - **Meta description:** [155 chars max, includes value prop and implicit CTA]
446
+ - **OG title:** [for social sharing, can be more provocative than page title]
447
+ - **OG description:** [for social sharing, 2 sentences max]
448
+ ```
449
+
450
+ Update `.project-context.md` under `## Installed Blueprints`. If a `### marketing-copywriting` entry already exists, update `pages_created` to include the new page. Otherwise append:
451
+
452
+ ```yaml
453
+ ### marketing-copywriting
454
+ blueprint: marketing-copywriting
455
+ pages_created:
456
+ - docs/pages/landing/{page-name}.md
457
+ ```
458
+
459
+ ## Step 11: Summary
460
+
461
+ Tell the user:
462
+
463
+ - What page was created and where the file lives
464
+ - Key copywriting decisions and the reasoning behind them
465
+ - **Top 3 CRO findings** — the three most impactful improvements from the CRO analysis, with the reasoning behind each
466
+ - **What real data would strengthen the page most** — the specific gaps that only the user can fill:
467
+ - Real testimonials with attribution (name, role, company, photo)
468
+ - Specific metrics ("increased conversion by X%", "saved Y hours/week")
469
+ - Customer logos for the social proof bar
470
+ - Actual pricing and offer details
471
+ - Screenshots or visuals of the product outcome
472
+ - **A/B test ideas** — suggest 2-3 experiments to run once the page is live:
473
+ - "Test headline A vs. B — they target different awareness levels"
474
+ - "Test short page (4 sections) vs. full page (9 sections) for your paid traffic"
475
+ - "Test 'Start Free Trial' vs. 'See It In Action' as the primary CTA"
476
+ - Suggested next steps ("Run `/copywrite` for your pricing page", "Add real testimonials to strengthen the social proof sections", "Set up analytics to measure CTA click-through rate per section")
477
+
478
+ ## Important Rules
479
+
480
+ - **Never fabricate testimonials, stats, or customer quotes.** Use placeholder format: `[Testimonial: Customer name, role — what they'd say about {specific benefit}]`. The user fills these in with real data. Fabricated social proof destroys trust permanently.
481
+ - **Always explain WHY.** Every section, every headline choice, every CTA, every structural decision — annotate with the framework and psychology behind it. The user is learning marketing through these outputs. The annotations are as valuable as the copy itself.
482
+ - **Use customer language when available.** If archetypes have "In Their Voice" quotes, weave that language into the copy. It converts because it feels like the visitor wrote it themselves. Mirror neurons fire when people see their own words reflected back.
483
+ - **Don't over-sell.** Honest, specific claims convert better than sensational ones. If the product can't back a claim, don't make it. Credibility is a conversion asset.
484
+ - **Variations are for comparison, not volume.** Each variation should represent a different strategic choice (different awareness level, different emotional angle, different framework), not a slight word swap.
485
+ - **Message match is critical.** If the user knows their ad copy, email subject lines, or social hooks, the headline MUST echo them. A disconnect between the traffic source promise and the landing page headline is the #1 conversion killer. Ask for the source copy if the user hasn't provided it.
486
+ - **One page, one goal.** Resist the urge to add secondary CTAs, navigation links, "also check out..." sections, or footer links to other pages. Every element on the page should build toward the single conversion action. If an element doesn't advance the argument, cut it.
487
+ - **Awareness level determines page length.** Unaware visitors need the full 9 sections. Product-aware visitors might need 4. Don't write a long educational page for someone who's ready to buy — you'll talk them out of it. Don't write a short CTA-focused page for someone who doesn't know the problem exists — you'll confuse them.
488
+ - **Form optimization matters.** If the conversion action involves a form: max 2 fields for landing pages (name + email), single column layout, inline validation, action-oriented submit button text ("Get Early Access" not "Submit"). Every additional field reduces conversion by approximately 11%. If more fields are truly needed, use multi-step forms with a progress indicator.
489
+ - **For non-landing pages, redirect to `/copywrite`.** If the user asks for a pricing page, about page, features page, or any other marketing page that isn't a landing page or homepage, suggest: "That page would be better served by `/copywrite`, which has section sequences optimized for [page type]. Want to use that instead?"