@kennethsolomon/shipkit 3.13.2 → 3.15.1
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/README.md +7 -6
- package/commands/sk/brainstorm.md +13 -0
- package/commands/sk/execute-plan.md +1 -0
- package/commands/sk/security-check.md +4 -0
- package/commands/sk/website.md +93 -0
- package/commands/sk/write-plan.md +38 -0
- package/package.json +1 -1
- package/skills/sk:autopilot/SKILL.md +0 -1
- package/skills/sk:fast-track/SKILL.md +0 -1
- package/skills/sk:gates/SKILL.md +4 -1
- package/skills/sk:retro/SKILL.md +0 -1
- package/skills/sk:reverse-doc/SKILL.md +0 -1
- package/skills/sk:review/SKILL.md +24 -6
- package/skills/sk:scope-check/SKILL.md +0 -1
- package/skills/sk:setup-claude/templates/commands/brainstorm.md.template +13 -0
- package/skills/sk:setup-claude/templates/commands/execute-plan.md.template +1 -0
- package/skills/sk:setup-claude/templates/commands/security-check.md.template +3 -0
- package/skills/sk:setup-claude/templates/commands/write-plan.md.template +37 -0
- package/skills/sk:start/SKILL.md +0 -1
- package/skills/sk:team/SKILL.md +0 -1
- package/skills/sk:website/SKILL.md +471 -0
- package/skills/sk:website/references/art-direction.md +210 -0
- package/skills/sk:website/references/brief-template.md +121 -0
- package/skills/sk:website/references/content-seo.md +143 -0
- package/skills/sk:website/references/handoff-template.md +261 -0
- package/skills/sk:website/references/launch-checklist.md +99 -0
- package/skills/sk:website/references/niche/accountant.md +75 -0
- package/skills/sk:website/references/niche/agency.md +75 -0
- package/skills/sk:website/references/niche/cafe.md +79 -0
- package/skills/sk:website/references/niche/dentist.md +78 -0
- package/skills/sk:website/references/niche/ecommerce.md +76 -0
- package/skills/sk:website/references/niche/gym.md +75 -0
- package/skills/sk:website/references/niche/home-services.md +76 -0
- package/skills/sk:website/references/niche/law-firm.md +75 -0
- package/skills/sk:website/references/niche/local-business.md +78 -0
- package/skills/sk:website/references/niche/med-spa.md +78 -0
- package/skills/sk:website/references/niche/portfolio.md +77 -0
- package/skills/sk:website/references/niche/real-estate.md +72 -0
- package/skills/sk:website/references/niche/restaurant.md +80 -0
- package/skills/sk:website/references/niche/saas.md +80 -0
- package/skills/sk:website/references/niche/wedding.md +80 -0
- package/skills/sk:website/references/stacks/laravel.md +425 -0
- package/skills/sk:website/references/stacks/nextjs.md +345 -0
- package/skills/sk:website/references/stacks/nuxt.md +374 -0
- package/skills/sk:website/references/whatsapp-cta.md +160 -0
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
# Website Brief Template
|
|
2
|
+
|
|
3
|
+
Use this when prompting `/sk:website`. Fill in what you have — the skill will infer the rest.
|
|
4
|
+
|
|
5
|
+
The fastest way to start: paste a Google Maps URL or existing website URL. The skill extracts everything automatically.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Minimal brief (enough to start)
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
/sk:website
|
|
13
|
+
|
|
14
|
+
[Business name] — [type of business] in [city/location].
|
|
15
|
+
Goal: [what the site should achieve — bookings, inquiries, orders, etc.]
|
|
16
|
+
CTA: [primary action — "Book a Table", "Get a Quote", "Contact Us"]
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
**Example:**
|
|
20
|
+
```
|
|
21
|
+
/sk:website
|
|
22
|
+
|
|
23
|
+
Corner Brew — specialty coffee shop in BGC, Taguig.
|
|
24
|
+
Goal: drive foot traffic and reservation inquiries.
|
|
25
|
+
CTA: Reserve a Spot
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Full brief (more control)
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
/sk:website
|
|
34
|
+
|
|
35
|
+
**Business:** [name]
|
|
36
|
+
**Type:** [cafe / law firm / freelance designer / etc.]
|
|
37
|
+
**Location:** [city, region — required for local SEO]
|
|
38
|
+
**Goal:** [what success looks like for this site]
|
|
39
|
+
**Audience:** [who visits this business / who buys]
|
|
40
|
+
**Primary CTA:** [the one action you want visitors to take]
|
|
41
|
+
|
|
42
|
+
**Pages needed:**
|
|
43
|
+
- Home
|
|
44
|
+
- About
|
|
45
|
+
- [Services / Menu / Work]
|
|
46
|
+
- Contact
|
|
47
|
+
- [FAQ / Gallery / Blog — optional]
|
|
48
|
+
|
|
49
|
+
**Tone:** [warm and neighborhood / premium and editorial / bold and modern / etc.]
|
|
50
|
+
**Primary keyword:** [what people search to find this business]
|
|
51
|
+
|
|
52
|
+
**Real info to include:**
|
|
53
|
+
- Address: [full address if applicable]
|
|
54
|
+
- Phone: [for WhatsApp CTA — format: +63XXXXXXXXXX]
|
|
55
|
+
- Hours: [e.g., Mon–Fri 7am–6pm, Sat–Sun 8am–5pm]
|
|
56
|
+
- Services: [list what the business actually offers]
|
|
57
|
+
- Trust signals: [certifications, years open, anything real]
|
|
58
|
+
|
|
59
|
+
**Visual direction (optional):**
|
|
60
|
+
- Brand adjectives: [e.g., cozy, artisan, warm, minimal]
|
|
61
|
+
- Colors to use or avoid:
|
|
62
|
+
- Inspiration: [URL] for [what to borrow from it]
|
|
63
|
+
|
|
64
|
+
**Avoid:**
|
|
65
|
+
- [patterns or styles you don't want]
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## URL-first brief (fastest)
|
|
71
|
+
|
|
72
|
+
Just paste a URL — the skill fetches and extracts everything:
|
|
73
|
+
|
|
74
|
+
```
|
|
75
|
+
/sk:website
|
|
76
|
+
|
|
77
|
+
[Google Maps URL or existing website URL]
|
|
78
|
+
|
|
79
|
+
Goal: [what to improve or achieve]
|
|
80
|
+
CTA: [primary action]
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
**Example:**
|
|
84
|
+
```
|
|
85
|
+
/sk:website
|
|
86
|
+
|
|
87
|
+
https://maps.google.com/?q=Corner+Brew+BGC
|
|
88
|
+
|
|
89
|
+
Goal: replace the outdated site with something modern and bookable.
|
|
90
|
+
CTA: Reserve a Table
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## Revision brief
|
|
96
|
+
|
|
97
|
+
Use `/sk:website --revise` when you have an existing build and client feedback:
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
/sk:website --revise
|
|
101
|
+
|
|
102
|
+
Changes from the client:
|
|
103
|
+
1. [Change 1 — e.g., "make the hero image warmer and more inviting"]
|
|
104
|
+
2. [Change 2 — e.g., "add a gallery section on the Home page"]
|
|
105
|
+
3. [Change 3 — e.g., "change the CTA from 'Contact Us' to 'Book a Table'"]
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## Business type examples
|
|
111
|
+
|
|
112
|
+
| Business | CTA | Key pages | Niche guide |
|
|
113
|
+
|---|---|---|---|
|
|
114
|
+
| Specialty cafe | Visit Us / Reserve a Spot | Home, Menu, About, Find Us | cafe |
|
|
115
|
+
| Restaurant | Book a Table / Order Online | Home, Menu, About, Reservations | restaurant |
|
|
116
|
+
| Law firm | Schedule a Consultation | Home, Practice Areas, About, Contact | law-firm |
|
|
117
|
+
| Dentist | Book an Appointment | Home, Services, About Us, Contact | dentist |
|
|
118
|
+
| Yoga studio | Try a Free Class | Home, Classes, About, Schedule, Contact | gym |
|
|
119
|
+
| Accountant | Get a Free Consultation | Home, Services, About, Contact, FAQ | accountant |
|
|
120
|
+
| Freelance designer | View My Work / Hire Me | Home, Work, About, Contact | portfolio |
|
|
121
|
+
| Real estate agent | Search Listings / Get a Valuation | Home, Listings, About, Contact | real-estate |
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
# Content & SEO Reference
|
|
2
|
+
|
|
3
|
+
Use when writing copy, metadata, or reviewing content for a website. Helps the site communicate clearly to humans and search engines without sounding generic, manipulative, or keyword-stuffed.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Messaging Rules
|
|
8
|
+
|
|
9
|
+
- Start from the business, audience, and page goal — not from a template.
|
|
10
|
+
- Lead with concrete value, not vague brand language.
|
|
11
|
+
- Prefer simple claims the business can credibly support.
|
|
12
|
+
- Keep headings short and scannable — under 10 words where possible.
|
|
13
|
+
- Use CTAs that match the actual conversion step (not "Learn More" when you mean "Book a Table").
|
|
14
|
+
- Avoid filler: "innovative solutions", "next-level", "cutting-edge", "world-class", "passionate about".
|
|
15
|
+
|
|
16
|
+
**Good headline pattern:** [Who you help] + [specific outcome] + [where/context]
|
|
17
|
+
- "Hand-pulled espresso and house-made pastries in the heart of BGC"
|
|
18
|
+
- "Tax prep for freelancers and small businesses in Metro Manila"
|
|
19
|
+
- "Criminal defense attorneys serving Houston and surrounding counties"
|
|
20
|
+
|
|
21
|
+
**Bad headline pattern:** vague + buzzword + generic
|
|
22
|
+
- "Crafting memorable coffee experiences" — says nothing
|
|
23
|
+
- "Your trusted partner in financial success" — could be anyone
|
|
24
|
+
- "Excellence in legal representation" — no specifics
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## SEO Rules
|
|
29
|
+
|
|
30
|
+
- Match the title tag and meta description to the page's actual search intent.
|
|
31
|
+
- One primary keyword or search theme per page is usually enough.
|
|
32
|
+
- Support the primary intent with natural secondary terms in headings, body copy, alt text, and internal links.
|
|
33
|
+
- Do not force exact-match keyword repetition — write for humans, let intent match naturally.
|
|
34
|
+
- Keep important marketing content in HTML (not JS-only rendered) for crawlability.
|
|
35
|
+
|
|
36
|
+
**Title tag formula:** [Primary keyword] | [Brand name]
|
|
37
|
+
- "Coffee Shop in BGC Taguig | Corner Brew"
|
|
38
|
+
- "Small Business Tax Accountant Austin TX | Davis & Co."
|
|
39
|
+
|
|
40
|
+
**Meta description formula:** [Audience problem or intent] + [service/offer] + [location/differentiator] + [CTA]
|
|
41
|
+
- "Looking for great coffee near BGC? Corner Brew serves specialty espresso, fresh pastries, and free WiFi on 26th Street. Visit us today."
|
|
42
|
+
- 150–160 characters. Every page gets a unique one.
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Local SEO
|
|
47
|
+
|
|
48
|
+
Use when the business serves a geographic area — cafes, restaurants, law firms, clinics, contractors, etc.
|
|
49
|
+
|
|
50
|
+
**Always confirm these inputs:**
|
|
51
|
+
- Primary service and secondary services
|
|
52
|
+
- City, metro area, or specific neighborhood
|
|
53
|
+
- Secondary service areas (if any)
|
|
54
|
+
- Contact phone number
|
|
55
|
+
- Street address (if physical location)
|
|
56
|
+
- Business hours
|
|
57
|
+
- Appointment/booking CTA
|
|
58
|
+
|
|
59
|
+
**Content placement:**
|
|
60
|
+
- Mention service + city in the hero headline naturally — not as a keyword dump
|
|
61
|
+
- Add a short service-area statement in the footer or about section ("Serving Quezon City and nearby areas")
|
|
62
|
+
- Include trust sections that fit: process, years in business, certifications, FAQs — only if real
|
|
63
|
+
- Use FAQ sections for genuine customer objections, not SEO filler
|
|
64
|
+
|
|
65
|
+
**Local metadata checklist:**
|
|
66
|
+
- Title tag: [Service] in [City] | [Brand] (e.g., "Cafe in Tomas Morato | Kape Republic")
|
|
67
|
+
- Meta description: mentions the audience, service, and location in plain language
|
|
68
|
+
- H1: reflects the page's local search intent
|
|
69
|
+
- Footer: include full address, phone, and hours where applicable
|
|
70
|
+
- Structured data: `LocalBusiness` (or a more specific subtype)
|
|
71
|
+
|
|
72
|
+
**Structured data — LocalBusiness:**
|
|
73
|
+
```json
|
|
74
|
+
{
|
|
75
|
+
"@context": "https://schema.org",
|
|
76
|
+
"@type": "[BusinessType]",
|
|
77
|
+
"name": "[Business Name]",
|
|
78
|
+
"address": {
|
|
79
|
+
"@type": "PostalAddress",
|
|
80
|
+
"streetAddress": "[Street]",
|
|
81
|
+
"addressLocality": "[City]",
|
|
82
|
+
"addressRegion": "[Region]",
|
|
83
|
+
"addressCountry": "[Country Code]"
|
|
84
|
+
},
|
|
85
|
+
"telephone": "[Phone]",
|
|
86
|
+
"openingHours": ["Mo-Fr 08:00-18:00", "Sa 09:00-17:00"],
|
|
87
|
+
"url": "[Site URL]"
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Use `CafeOrCoffeeShop` for cafes, `Restaurant` for restaurants, `LegalService` for law firms, `Dentist` for dental, `MedicalBusiness` for clinics, `LocalBusiness` as fallback.
|
|
92
|
+
|
|
93
|
+
**Avoid:**
|
|
94
|
+
- Thin city pages with near-duplicate copy
|
|
95
|
+
- Fake office locations
|
|
96
|
+
- Invented reviews or star ratings
|
|
97
|
+
- Keyword repetition that makes copy sound mechanical
|
|
98
|
+
- Separate "city pages" unless each one is genuinely different
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
## Page-Level SEO Checklist
|
|
103
|
+
|
|
104
|
+
For every page generated, verify:
|
|
105
|
+
|
|
106
|
+
- [ ] Unique `<title>` tag (not duplicated from another page)
|
|
107
|
+
- [ ] Unique meta description (150–160 characters)
|
|
108
|
+
- [ ] One H1 that matches the page's primary intent
|
|
109
|
+
- [ ] Supporting H2s and H3s that structure the content logically
|
|
110
|
+
- [ ] OG `title`, `description`, and `image` defined
|
|
111
|
+
- [ ] Twitter card metadata defined
|
|
112
|
+
- [ ] Canonical URL set (no duplicate content)
|
|
113
|
+
- [ ] Structured data where applicable
|
|
114
|
+
- [ ] All important text is in HTML (not JS-rendered)
|
|
115
|
+
- [ ] Internal links to related pages (e.g., Services → Contact)
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## Internal Linking Strategy
|
|
120
|
+
|
|
121
|
+
- Home → Services, About, Contact (primary CTAs in nav and hero)
|
|
122
|
+
- Services → Contact (each service should have a CTA to book/inquire)
|
|
123
|
+
- About → Services, Contact (trust-building page leads to action)
|
|
124
|
+
- Blog/FAQ posts → relevant service pages (if applicable)
|
|
125
|
+
- Footer: always links to all top-level pages + legal pages
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## Content Anti-Patterns
|
|
130
|
+
|
|
131
|
+
Never produce:
|
|
132
|
+
- "Lorem ipsum" or any placeholder body copy
|
|
133
|
+
- Generic `[Your Headline Here]` style template text
|
|
134
|
+
- Invented testimonials, star ratings, or review counts
|
|
135
|
+
- Made-up certifications, awards, or rankings
|
|
136
|
+
- Fake "as seen in" media logos
|
|
137
|
+
- Invented pricing or "starting from" numbers without real data
|
|
138
|
+
- Claims like "best in [city]" without real proof
|
|
139
|
+
|
|
140
|
+
Always prefer:
|
|
141
|
+
- Specific over vague ("3 espresso origins rotating weekly" > "quality coffee")
|
|
142
|
+
- Verifiable over invented ("Open since 2019" vs. "20 years of experience" when unknown)
|
|
143
|
+
- Direct over clever ("Book a table" vs. "Experience our hospitality")
|
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
# Handoff Template
|
|
2
|
+
|
|
3
|
+
Use this to generate the 3 client deliverable files after the site is built. Populate using real project details — replace all `[PLACEHOLDER]` values.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## HANDOFF.md template
|
|
8
|
+
|
|
9
|
+
```markdown
|
|
10
|
+
# [Business Name] — Website Handoff
|
|
11
|
+
|
|
12
|
+
Built with Next.js + Tailwind CSS. Hosted on [Vercel/Netlify].
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## What was built
|
|
17
|
+
|
|
18
|
+
| Page | URL | Purpose |
|
|
19
|
+
|---|---|---|
|
|
20
|
+
| Home | `/` | Main landing + primary CTA |
|
|
21
|
+
| About | `/about` | Brand story + trust signals |
|
|
22
|
+
| [Services/Menu] | `/[path]` | [Purpose] |
|
|
23
|
+
| Contact | `/contact` | Inquiry form + location |
|
|
24
|
+
| [Additional pages] | | |
|
|
25
|
+
|
|
26
|
+
**Features included:**
|
|
27
|
+
- [ ] WhatsApp floating button — wired to [phone number / ⚠️ REPLACE: see below]
|
|
28
|
+
- [ ] Contact form with spam protection
|
|
29
|
+
- [ ] SEO metadata on all pages
|
|
30
|
+
- [ ] Sitemap + robots.txt
|
|
31
|
+
- [ ] [Other features]
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## What still needs replacing
|
|
36
|
+
|
|
37
|
+
Before going live, update these:
|
|
38
|
+
|
|
39
|
+
| Item | File | What to change |
|
|
40
|
+
|---|---|---|
|
|
41
|
+
| WhatsApp number | `app/layout.tsx` line ~[N] | Replace `+[PHONE]` with your WhatsApp number |
|
|
42
|
+
| Hero photo | `public/images/hero.jpg` | Replace with your actual photo |
|
|
43
|
+
| Google Analytics ID | `.env.local` | Add `NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX` |
|
|
44
|
+
| [Other placeholder] | [file] | [instruction] |
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
## Editing content
|
|
49
|
+
|
|
50
|
+
Most content lives in one file: `content/site.ts`
|
|
51
|
+
|
|
52
|
+
**To change your business name or tagline:**
|
|
53
|
+
Open `content/site.ts`, find `name:` and `tagline:` near the top.
|
|
54
|
+
|
|
55
|
+
**To change opening hours:**
|
|
56
|
+
Open `content/site.ts`, find `hours:` and update the values.
|
|
57
|
+
|
|
58
|
+
**To change services/menu items:**
|
|
59
|
+
Open `content/site.ts`, find `services:` (or `menu:`) and edit the list.
|
|
60
|
+
|
|
61
|
+
**To change contact info (phone, email, address):**
|
|
62
|
+
Open `content/site.ts`, find `contact:` and update.
|
|
63
|
+
|
|
64
|
+
**To change social media links:**
|
|
65
|
+
Open `content/site.ts`, find `social:` and update the URLs.
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Need help?
|
|
70
|
+
|
|
71
|
+
For technical changes beyond content editing, contact your developer or post in the project repo.
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Developer notes
|
|
76
|
+
|
|
77
|
+
- Stack: Next.js [version] + Tailwind CSS
|
|
78
|
+
- Node version: 18+
|
|
79
|
+
- Deploy: Vercel (see DEPLOY.md)
|
|
80
|
+
- Local dev: `npm install && npm run dev`
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## DEPLOY.md template
|
|
86
|
+
|
|
87
|
+
```markdown
|
|
88
|
+
# Deploying [Business Name] Website
|
|
89
|
+
|
|
90
|
+
Step-by-step guide to go live. Total time: ~10 minutes.
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## Option 1: Vercel (recommended — free tier available)
|
|
95
|
+
|
|
96
|
+
### One-click deploy
|
|
97
|
+
|
|
98
|
+
1. Push the project to a GitHub repository (create one at github.com if needed)
|
|
99
|
+
2. Go to vercel.com and sign in with GitHub
|
|
100
|
+
3. Click "Add New Project" → select your repository
|
|
101
|
+
4. Set environment variables (see below)
|
|
102
|
+
5. Click "Deploy"
|
|
103
|
+
6. Your site is live at `[project].vercel.app`
|
|
104
|
+
|
|
105
|
+
### Custom domain (recommended)
|
|
106
|
+
|
|
107
|
+
1. In Vercel dashboard → your project → Settings → Domains
|
|
108
|
+
2. Add your domain (e.g., `cornerbrew.ph`)
|
|
109
|
+
3. Follow the DNS instructions (add CNAME or A record in your domain registrar)
|
|
110
|
+
4. Takes 5–30 minutes to propagate
|
|
111
|
+
|
|
112
|
+
### Via CLI
|
|
113
|
+
|
|
114
|
+
```bash
|
|
115
|
+
npm install -g vercel
|
|
116
|
+
vercel login
|
|
117
|
+
vercel --prod
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
## Option 2: Netlify (alternative)
|
|
123
|
+
|
|
124
|
+
1. Go to netlify.com → "Add new site" → "Import from Git"
|
|
125
|
+
2. Connect GitHub and select the repository
|
|
126
|
+
3. Build command: `npm run build`
|
|
127
|
+
4. Publish directory: `.next`
|
|
128
|
+
5. Set environment variables
|
|
129
|
+
6. Deploy
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Environment variables
|
|
134
|
+
|
|
135
|
+
Set these in Vercel dashboard → Settings → Environment Variables (or in `.env.local` for local development):
|
|
136
|
+
|
|
137
|
+
| Variable | Required | Description | Example |
|
|
138
|
+
|---|---|---|---|
|
|
139
|
+
| `NEXT_PUBLIC_SITE_URL` | Yes | Your full site URL (no trailing slash) | `https://cornerbrew.ph` |
|
|
140
|
+
| `NEXT_PUBLIC_GA_ID` | Optional | Google Analytics 4 Measurement ID | `G-XXXXXXXXXX` |
|
|
141
|
+
| `NEXT_PUBLIC_PLAUSIBLE_DOMAIN` | Optional | Plausible domain (alternative to GA4) | `cornerbrew.ph` |
|
|
142
|
+
| `CONTACT_EMAIL` | If using contact form | Email to receive form submissions | `hello@cornerbrew.ph` |
|
|
143
|
+
| `RESEND_API_KEY` | If using Resend | API key for email sending | `re_xxxxxxxxx` |
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
## Estimated monthly costs
|
|
148
|
+
|
|
149
|
+
| Service | Cost | Notes |
|
|
150
|
+
|---|---|---|
|
|
151
|
+
| Vercel hosting | Free | Hobby plan — sufficient for most small business sites |
|
|
152
|
+
| Domain name | ~$12–20/year | Buy from Namecheap, GoDaddy, or Cloudflare Registrar |
|
|
153
|
+
| Google Analytics | Free | Optional — Plausible is $9/mo for privacy-friendly alternative |
|
|
154
|
+
| Custom email | ~$6/mo | Google Workspace or Zoho for @yourdomain.com email |
|
|
155
|
+
| **Total** | ~$18–26/year minimum | Domain + free hosting |
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
159
|
+
## After going live
|
|
160
|
+
|
|
161
|
+
- [ ] Test all pages on mobile and desktop
|
|
162
|
+
- [ ] Test the contact form by submitting it yourself
|
|
163
|
+
- [ ] Test the WhatsApp button
|
|
164
|
+
- [ ] Submit sitemap to Google Search Console: `yourdomain.com/sitemap.xml`
|
|
165
|
+
- [ ] Set up Google My Business if not already done (helps local SEO)
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
---
|
|
169
|
+
|
|
170
|
+
## CONTENT-GUIDE.md template
|
|
171
|
+
|
|
172
|
+
```markdown
|
|
173
|
+
# Content Editing Guide — [Business Name]
|
|
174
|
+
|
|
175
|
+
This guide is for updating your website content without a developer.
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
## Where content lives
|
|
180
|
+
|
|
181
|
+
Most of your site content is in one file:
|
|
182
|
+
|
|
183
|
+
**`content/site.ts`** — open this file to edit most things
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
187
|
+
## Editing your content
|
|
188
|
+
|
|
189
|
+
### Business name and tagline
|
|
190
|
+
File: `content/site.ts`
|
|
191
|
+
```
|
|
192
|
+
name: "[Your Business Name]",
|
|
193
|
+
tagline: "[Your Tagline]",
|
|
194
|
+
```
|
|
195
|
+
Change the text inside the quotes.
|
|
196
|
+
|
|
197
|
+
### Contact details
|
|
198
|
+
File: `content/site.ts`
|
|
199
|
+
```
|
|
200
|
+
contact: {
|
|
201
|
+
phone: "[Your Phone]",
|
|
202
|
+
email: "[Your Email]",
|
|
203
|
+
address: "[Your Address]",
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
### Opening hours
|
|
208
|
+
File: `content/site.ts`
|
|
209
|
+
```
|
|
210
|
+
hours: [
|
|
211
|
+
{ day: "Monday–Friday", time: "8:00 AM – 6:00 PM" },
|
|
212
|
+
{ day: "Saturday", time: "9:00 AM – 5:00 PM" },
|
|
213
|
+
{ day: "Sunday", time: "Closed" },
|
|
214
|
+
]
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
### Services / Menu items
|
|
218
|
+
File: `content/site.ts`
|
|
219
|
+
```
|
|
220
|
+
services: [
|
|
221
|
+
{ name: "[Service Name]", description: "[Short description]" },
|
|
222
|
+
...
|
|
223
|
+
]
|
|
224
|
+
```
|
|
225
|
+
Add or remove items by copying/pasting a line.
|
|
226
|
+
|
|
227
|
+
### Social media links
|
|
228
|
+
File: `content/site.ts`
|
|
229
|
+
```
|
|
230
|
+
social: {
|
|
231
|
+
facebook: "https://facebook.com/yourpage",
|
|
232
|
+
instagram: "https://instagram.com/yourhandle",
|
|
233
|
+
}
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
---
|
|
237
|
+
|
|
238
|
+
## Adding a photo
|
|
239
|
+
|
|
240
|
+
1. Save your photo as a `.jpg` or `.webp` file
|
|
241
|
+
2. Copy it to the `public/images/` folder
|
|
242
|
+
3. In the relevant page file, change the image filename to match
|
|
243
|
+
|
|
244
|
+
---
|
|
245
|
+
|
|
246
|
+
## After editing
|
|
247
|
+
|
|
248
|
+
Save the file, then run the site locally with:
|
|
249
|
+
```bash
|
|
250
|
+
npm run dev
|
|
251
|
+
```
|
|
252
|
+
Visit `http://localhost:3000` to preview your changes before deploying.
|
|
253
|
+
|
|
254
|
+
To deploy changes live: push to GitHub — Vercel will automatically redeploy.
|
|
255
|
+
|
|
256
|
+
---
|
|
257
|
+
|
|
258
|
+
## Need more help?
|
|
259
|
+
|
|
260
|
+
For changes beyond this guide (new pages, new features, design changes), contact your developer.
|
|
261
|
+
```
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
# Launch Checklist
|
|
2
|
+
|
|
3
|
+
Run this before generating the handoff package. The site must not only look complete — it must be operationally ready to ship.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 1. Search and Metadata
|
|
8
|
+
|
|
9
|
+
- [ ] Every page has a unique title tag (not "Home | Site Name" cloned across pages)
|
|
10
|
+
- [ ] Every page has a unique, useful meta description (150–160 chars)
|
|
11
|
+
- [ ] OG title, description, and image are defined (check `layout.tsx` or equivalent)
|
|
12
|
+
- [ ] Twitter card metadata defined
|
|
13
|
+
- [ ] Canonical URL handling in place (no duplicate content risk)
|
|
14
|
+
- [ ] Structured data present where appropriate (LocalBusiness, Organization, etc.)
|
|
15
|
+
- [ ] All important images have descriptive alt text (not empty, not "image.jpg")
|
|
16
|
+
- [ ] `sitemap.xml` is generating correctly (visit `/sitemap.xml`)
|
|
17
|
+
- [ ] `robots.txt` is correct (`/robots.txt` — no `Disallow: /` in production)
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## 2. Conversion and Content
|
|
22
|
+
|
|
23
|
+
- [ ] Clear primary CTA visible above the fold on the homepage
|
|
24
|
+
- [ ] CTA is consistent and repeated across all key pages
|
|
25
|
+
- [ ] No placeholder copy remains (`[Business Name]`, `Lorem ipsum`, `TODO`, `PLACEHOLDER`)
|
|
26
|
+
- [ ] No invented testimonials, fake reviews, or made-up certifications
|
|
27
|
+
- [ ] Contact information is real and visible (phone, email, address, hours)
|
|
28
|
+
- [ ] WhatsApp link is wired (if injected) — test that `wa.me/[NUMBER]` opens correctly
|
|
29
|
+
- [ ] Contact form submits without error (test in dev)
|
|
30
|
+
- [ ] Booking/reservation link works (if applicable)
|
|
31
|
+
- [ ] Footer includes business name, key navigation links, and contact info
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## 3. Accessibility and UX
|
|
36
|
+
|
|
37
|
+
- [ ] One H1 per page — no pages have multiple H1s
|
|
38
|
+
- [ ] Heading hierarchy is correct — no skipping H2 → H4
|
|
39
|
+
- [ ] Semantic landmarks in place: `<header>`, `<main>`, `<footer>`, `<nav>`
|
|
40
|
+
- [ ] Interactive elements are keyboard-navigable (tab through the page)
|
|
41
|
+
- [ ] Focus rings are visible (not `outline: none` without a replacement)
|
|
42
|
+
- [ ] Color contrast passes AA (4.5:1 for body text, 3:1 for large text)
|
|
43
|
+
- [ ] Images have alt text — decorative images have `alt=""`
|
|
44
|
+
- [ ] No horizontal scroll on mobile (375px viewport)
|
|
45
|
+
- [ ] Touch targets are at least 44×44px
|
|
46
|
+
- [ ] `prefers-reduced-motion` is respected for animations
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## 4. Performance and Implementation
|
|
51
|
+
|
|
52
|
+
- [ ] No unnecessary client-side JS (prefer server/static rendering for marketing content)
|
|
53
|
+
- [ ] Images are optimized — use Next.js `<Image>` or equivalent, specify `width`/`height`
|
|
54
|
+
- [ ] No layout shift visible on load (set explicit dimensions on media)
|
|
55
|
+
- [ ] Google Fonts loaded via `next/font` or with `display=swap` (no FOIT)
|
|
56
|
+
- [ ] `next build` (or equivalent) passes without errors or warnings
|
|
57
|
+
- [ ] No broken internal links or dead routes
|
|
58
|
+
- [ ] No console errors in the browser
|
|
59
|
+
- [ ] Required environment variables are documented in `.env.example`
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## 5. Launch Operations
|
|
64
|
+
|
|
65
|
+
- [ ] Analytics placeholder noted (GA4 measurement ID or Plausible domain to configure)
|
|
66
|
+
- [ ] Consent banner approach defined if analytics requires it (GDPR/PH data privacy consideration)
|
|
67
|
+
- [ ] Contact form submission endpoint configured or clearly marked as pending
|
|
68
|
+
- Local: API route created and tested
|
|
69
|
+
- External: Formspree/webhook endpoint documented
|
|
70
|
+
- [ ] WhatsApp number placeholder clearly flagged in HANDOFF.md if not provided
|
|
71
|
+
- [ ] `NEXT_PUBLIC_SITE_URL` or equivalent set for canonical and OG URL generation
|
|
72
|
+
- [ ] Favicon is present (`/public/favicon.ico` or via `app/icon.tsx`)
|
|
73
|
+
- [ ] Social preview image present (1200×630px OG image or dynamic via `/api/og`)
|
|
74
|
+
- [ ] Privacy policy and terms pages exist or are noted as needed
|
|
75
|
+
- [ ] Domain setup documented in DEPLOY.md
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## Blocker vs. Polish
|
|
80
|
+
|
|
81
|
+
**Must fix before handoff (blockers):**
|
|
82
|
+
- Missing title/meta on any page
|
|
83
|
+
- Broken contact form
|
|
84
|
+
- Placeholder copy visible to users
|
|
85
|
+
- `next build` failing
|
|
86
|
+
- Broken navigation links
|
|
87
|
+
- WhatsApp link not working
|
|
88
|
+
|
|
89
|
+
**Medium priority (note in HANDOFF.md):**
|
|
90
|
+
- Missing OG image
|
|
91
|
+
- Analytics not yet configured
|
|
92
|
+
- No privacy policy page
|
|
93
|
+
- Lighthouse score 80–89 on any metric
|
|
94
|
+
|
|
95
|
+
**Optional polish (mention, don't block):**
|
|
96
|
+
- Additional page transitions
|
|
97
|
+
- Image optimization for LCP
|
|
98
|
+
- Schema markup enrichment
|
|
99
|
+
- Blog or news section
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# Accountant / Bookkeeper / Tax Firm
|
|
2
|
+
|
|
3
|
+
Use for accountants, bookkeepers, tax preparers, CFO services, and financial advisory practices.
|
|
4
|
+
|
|
5
|
+
## Priorities
|
|
6
|
+
|
|
7
|
+
1. Establish competence and trust immediately — clients are trusting you with their money.
|
|
8
|
+
2. Clarify who the firm serves and what it specifically helps with.
|
|
9
|
+
3. Move visitors toward consultation or contact — the goal is a booked call, not a signup.
|
|
10
|
+
4. Tone: specific, calm, and credible — never inflated or salesy.
|
|
11
|
+
|
|
12
|
+
## Default page set
|
|
13
|
+
|
|
14
|
+
- Home (audience + offer + consultation CTA)
|
|
15
|
+
- Services (what you offer, who it's for, how it works)
|
|
16
|
+
- About (firm story, team credentials, values)
|
|
17
|
+
- Contact (consultation request form)
|
|
18
|
+
- FAQ (common tax/accounting questions + process questions)
|
|
19
|
+
|
|
20
|
+
Optional: Blog/Resources, Pricing (if transparent pricing is a differentiator), Client Portal link
|
|
21
|
+
|
|
22
|
+
## Section guidance
|
|
23
|
+
|
|
24
|
+
**Hero:**
|
|
25
|
+
- Clear positioning: audience + service + location (if local SEO matters)
|
|
26
|
+
- Example: "Tax prep and bookkeeping for freelancers and small businesses in Metro Manila"
|
|
27
|
+
- Primary CTA: "Schedule a Free Consultation" or "Book a Call"
|
|
28
|
+
- Phone number visible
|
|
29
|
+
|
|
30
|
+
**Services:**
|
|
31
|
+
- List with brief description of each service — what it includes, who it's for
|
|
32
|
+
- Avoid jargon (e.g., "accrual accounting services" — say "monthly bookkeeping")
|
|
33
|
+
- Link each to a detail page for SEO depth if possible
|
|
34
|
+
|
|
35
|
+
**Why choose us:**
|
|
36
|
+
- Specific credentials: CPA license, years in practice, types of clients served, notable affiliations
|
|
37
|
+
- Process transparency: "We review your books monthly and flag issues before they become problems"
|
|
38
|
+
- Never invent: no made-up client counts, invented savings amounts, or unverifiable claims
|
|
39
|
+
|
|
40
|
+
**Team:**
|
|
41
|
+
- Real names, credentials, and short bios
|
|
42
|
+
- Even solo practitioners benefit from a professional headshot + credentials section
|
|
43
|
+
|
|
44
|
+
**Consultation CTA:**
|
|
45
|
+
- Make the first step easy: "30-minute free call, no obligation"
|
|
46
|
+
- Simple form: Name, Email, Phone, Business type, What you need help with
|
|
47
|
+
|
|
48
|
+
## Design guidance
|
|
49
|
+
|
|
50
|
+
- **Art direction:** Restrained Editorial — calm, exact, composed.
|
|
51
|
+
- Avoid: flashy visuals, startup aesthetics, anything that looks "too clever"
|
|
52
|
+
- Typography: stable and precise — Source Serif, Libre Baskerville, or clean sans like Lato/Inter
|
|
53
|
+
- Palette: navy, slate, charcoal, white — one warm accent (gold or teal) if any
|
|
54
|
+
- Photography: real team photos if available; avoid generic "counting money" stock photos
|
|
55
|
+
|
|
56
|
+
## SEO guidance
|
|
57
|
+
|
|
58
|
+
- Title: "[Firm Name] — [Service] for [Audience] in [City, Region]"
|
|
59
|
+
- H1: "[Accounting/Tax Service] for [Target Client Type] in [City]"
|
|
60
|
+
- Target: "accountant for small business [city]", "bookkeeper [city]", "tax preparation [city]"
|
|
61
|
+
- Structured data: `LocalBusiness` or `AccountingService` + `ProfessionalService`
|
|
62
|
+
- FAQ page helps with "how much does X cost" and "do I need an accountant for X" queries
|
|
63
|
+
|
|
64
|
+
## WhatsApp / contact
|
|
65
|
+
|
|
66
|
+
- WhatsApp appropriate for PH/SEA accounting firms
|
|
67
|
+
- Phone number always visible — clients with urgent tax questions call
|
|
68
|
+
- Consultation booking: form + optional Calendly link works well
|
|
69
|
+
|
|
70
|
+
## Avoid
|
|
71
|
+
|
|
72
|
+
- Invented client testimonials, savings figures, or case outcomes
|
|
73
|
+
- Generic financial stock imagery (coins, graphs, calculators)
|
|
74
|
+
- Inflated language: "transforming your financial future" — be direct
|
|
75
|
+
- Hiding pricing entirely when competitors are transparent (consider at least explaining the pricing model)
|