gspec 1.10.0 → 1.13.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 (78) hide show
  1. package/README.md +25 -34
  2. package/bin/gspec.js +762 -159
  3. package/commands/gspec.analyze.md +1 -1
  4. package/commands/gspec.architect.md +2 -2
  5. package/commands/gspec.feature.md +2 -2
  6. package/commands/gspec.implement.md +8 -6
  7. package/commands/gspec.migrate.md +13 -10
  8. package/commands/gspec.practices.md +2 -2
  9. package/commands/gspec.profile.md +2 -2
  10. package/commands/gspec.research.md +4 -4
  11. package/commands/gspec.stack.md +2 -2
  12. package/commands/gspec.style.md +2 -2
  13. package/dist/antigravity/gspec-analyze/SKILL.md +1 -1
  14. package/dist/antigravity/gspec-architect/SKILL.md +2 -2
  15. package/dist/antigravity/gspec-feature/SKILL.md +2 -2
  16. package/dist/antigravity/gspec-implement/SKILL.md +8 -6
  17. package/dist/antigravity/gspec-migrate/SKILL.md +13 -10
  18. package/dist/antigravity/gspec-practices/SKILL.md +2 -2
  19. package/dist/antigravity/gspec-profile/SKILL.md +2 -2
  20. package/dist/antigravity/gspec-research/SKILL.md +4 -4
  21. package/dist/antigravity/gspec-stack/SKILL.md +2 -2
  22. package/dist/antigravity/gspec-style/SKILL.md +2 -2
  23. package/dist/claude/gspec-analyze/SKILL.md +1 -1
  24. package/dist/claude/gspec-architect/SKILL.md +2 -2
  25. package/dist/claude/gspec-feature/SKILL.md +2 -2
  26. package/dist/claude/gspec-implement/SKILL.md +8 -6
  27. package/dist/claude/gspec-migrate/SKILL.md +13 -10
  28. package/dist/claude/gspec-practices/SKILL.md +2 -2
  29. package/dist/claude/gspec-profile/SKILL.md +2 -2
  30. package/dist/claude/gspec-research/SKILL.md +4 -4
  31. package/dist/claude/gspec-stack/SKILL.md +2 -2
  32. package/dist/claude/gspec-style/SKILL.md +2 -2
  33. package/dist/codex/gspec-analyze/SKILL.md +1 -1
  34. package/dist/codex/gspec-architect/SKILL.md +2 -2
  35. package/dist/codex/gspec-feature/SKILL.md +2 -2
  36. package/dist/codex/gspec-implement/SKILL.md +8 -6
  37. package/dist/codex/gspec-migrate/SKILL.md +13 -10
  38. package/dist/codex/gspec-practices/SKILL.md +2 -2
  39. package/dist/codex/gspec-profile/SKILL.md +2 -2
  40. package/dist/codex/gspec-research/SKILL.md +4 -4
  41. package/dist/codex/gspec-stack/SKILL.md +2 -2
  42. package/dist/codex/gspec-style/SKILL.md +2 -2
  43. package/dist/cursor/gspec-analyze.mdc +1 -1
  44. package/dist/cursor/gspec-architect.mdc +2 -2
  45. package/dist/cursor/gspec-feature.mdc +2 -2
  46. package/dist/cursor/gspec-implement.mdc +8 -6
  47. package/dist/cursor/gspec-migrate.mdc +13 -10
  48. package/dist/cursor/gspec-practices.mdc +2 -2
  49. package/dist/cursor/gspec-profile.mdc +2 -2
  50. package/dist/cursor/gspec-research.mdc +4 -4
  51. package/dist/cursor/gspec-stack.mdc +2 -2
  52. package/dist/cursor/gspec-style.mdc +2 -2
  53. package/dist/opencode/gspec-analyze/SKILL.md +1 -1
  54. package/dist/opencode/gspec-architect/SKILL.md +2 -2
  55. package/dist/opencode/gspec-feature/SKILL.md +2 -2
  56. package/dist/opencode/gspec-implement/SKILL.md +8 -6
  57. package/dist/opencode/gspec-migrate/SKILL.md +13 -10
  58. package/dist/opencode/gspec-practices/SKILL.md +2 -2
  59. package/dist/opencode/gspec-profile/SKILL.md +2 -2
  60. package/dist/opencode/gspec-research/SKILL.md +4 -4
  61. package/dist/opencode/gspec-stack/SKILL.md +2 -2
  62. package/dist/opencode/gspec-style/SKILL.md +2 -2
  63. package/package.json +1 -2
  64. package/templates/spec-sync.md +1 -1
  65. package/starters/features/about-page.md +0 -98
  66. package/starters/features/contact-form.md +0 -147
  67. package/starters/features/contact-page.md +0 -103
  68. package/starters/features/home-page.md +0 -103
  69. package/starters/features/responsive-navbar.md +0 -113
  70. package/starters/features/services-page.md +0 -103
  71. package/starters/features/site-footer.md +0 -121
  72. package/starters/features/theme-switcher.md +0 -124
  73. package/starters/practices/tdd-pipeline-first.md +0 -192
  74. package/starters/stacks/astro-tailwind-github-pages.md +0 -283
  75. package/starters/stacks/nextjs-supabase-vercel.md +0 -319
  76. package/starters/stacks/nextjs-vercel-typescript.md +0 -264
  77. package/starters/styles/clean-professional.md +0 -316
  78. package/starters/styles/dark-minimal-developer.md +0 -442
@@ -21,10 +21,10 @@ You should:
21
21
 
22
22
  - Output **ONLY** a single Markdown document
23
23
  - Save the file as `gspec/stack.md` in the root of the project, create the `gspec` folder if it doesn't exist
24
- - Begin the file with YAML frontmatter containing the gspec version:
24
+ - Begin the file with YAML frontmatter containing the spec version:
25
25
  ```
26
26
  ---
27
- gspec-version: 1.10.0
27
+ spec-version: v1
28
28
  ---
29
29
  ```
30
30
  The frontmatter must be the very first content in the file, before the main heading.
@@ -23,10 +23,10 @@ You should:
23
23
 
24
24
  - Output **ONLY** a single Markdown document
25
25
  - Save the file as `gspec/style.md` in the root of the project, create the `gspec` folder if it doesn't exist
26
- - Begin the file with YAML frontmatter containing the gspec version:
26
+ - Begin the file with YAML frontmatter containing the spec version:
27
27
  ```
28
28
  ---
29
- gspec-version: 1.10.0
29
+ spec-version: v1
30
30
  ---
31
31
  ```
32
32
  The frontmatter must be the very first content in the file, before the main heading.
@@ -128,7 +128,7 @@ When updating specs to resolve a discrepancy:
128
128
 
129
129
  - **Surgical updates only** — change the minimum text needed to resolve the conflict
130
130
  - **Preserve format and tone** — match the existing document's style, heading structure, and voice
131
- - **Preserve `gspec-version` frontmatter** — do not alter or remove it
131
+ - **Preserve `spec-version` frontmatter** — do not alter or remove it
132
132
  - **Do not rewrite sections** — if a one-line change resolves the conflict, make a one-line change
133
133
  - **Do not add changelog annotations** — the git history captures what changed
134
134
 
@@ -42,10 +42,10 @@ All of these provide essential context. If any are missing, note the gap and mak
42
42
 
43
43
  - Output **ONLY** a single Markdown document
44
44
  - Save the file as `gspec/architecture.md` in the root of the project, create the `gspec` folder if it doesn't exist
45
- - Begin the file with YAML frontmatter containing the gspec version:
45
+ - Begin the file with YAML frontmatter containing the spec version:
46
46
  ```
47
47
  ---
48
- gspec-version: 1.10.0
48
+ spec-version: v1
49
49
  ---
50
50
  ```
51
51
  The frontmatter must be the very first content in the file, before the main heading.
@@ -82,10 +82,10 @@ Feature PRDs are designed to be **portable across projects**. A feature spec wri
82
82
  - Output one or more Markdown documents — **one per feature**
83
83
  - Save each file to the `gspec/features/` folder in the root of the project, create it if it doesn't exist
84
84
  - Name each file based on the feature (e.g., `user-authentication.md`, `dashboard-analytics.md`)
85
- - Begin each file with YAML frontmatter containing the gspec version:
85
+ - Begin each file with YAML frontmatter containing the spec version:
86
86
  ```
87
87
  ---
88
- gspec-version: 1.10.0
88
+ spec-version: v1
89
89
  ---
90
90
  ```
91
91
  The frontmatter must be the very first content in the file, before the main heading.
@@ -62,8 +62,9 @@ Present this summary to the user so they understand the starting point. If **all
62
62
  - Identify files to create or modify
63
63
  - Note dependencies on prior phases
64
64
  - Include an estimated scope (small/medium/large)
65
- 3. **Define test expectations per phase** — For each phase, specify what tests will be run to verify correctness before moving on (unit tests, integration tests, build verification, etc.)
66
- 4. **Present the plan** — Show the user the full phased plan with clear phase boundaries and ask for approval
65
+ 3. **Account for every unchecked capability** — The plan must explicitly place every unchecked capability from in-scope feature PRDs into a phase **or** list it under a "Proposed to Defer" section with a reason. No unchecked capability may be silently omitted from the plan. The user reviews and approves what gets deferred at plan approval time.
66
+ 4. **Define test expectations per phase** — For each phase, specify what tests will be run to verify correctness before moving on (unit tests, integration tests, build verification, etc.)
67
+ 5. **Present the plan** — Show the user the full phased plan with clear phase boundaries and ask for approval
67
68
 
68
69
  **Wait for user approval before proceeding to Phase 3.** The user may reorder phases, adjust scope, or split/merge phases.
69
70
 
@@ -109,7 +110,7 @@ Present a brief scaffold summary to the user before proceeding to feature implem
109
110
  b. **Follow the practices** — Adhere to coding standards, testing philosophy, pipeline structure, and conventions from `gspec/practices.md`
110
111
  c. **Follow the style** — Apply the design system, tokens, and icon library from `gspec/style.md`. The style is the single authority for icon library choices. Component libraries (e.g., shadcn/ui) are defined in `gspec/stack.md`.
111
112
  d. **Satisfy the requirements** — Trace each piece of code back to a functional requirement in the feature PRD (if available) or to the user's stated goals and the approved implementation plan
112
- 3. **Mark capabilities as implemented** — After successfully implementing each capability, immediately update the feature PRD by changing its checkbox from `- [ ]` to `- [x]`. Do this incrementally as each capability is completed, not in a batch at the end. If a capability line did not have a checkbox prefix, add one as `- [x]`. This ensures that if the session is interrupted, progress is not lost. When updating gspec files, preserve existing `gspec-version` YAML frontmatter. If a file lacks frontmatter, add `---\ngspec-version: 1.10.0\n---` at the top.
113
+ 3. **Mark capabilities as implemented** — After successfully implementing each capability, immediately update the feature PRD by changing its checkbox from `- [ ]` to `- [x]`. Do this incrementally as each capability is completed, not in a batch at the end. If a capability line did not have a checkbox prefix, add one as `- [x]`. This ensures that if the session is interrupted, progress is not lost. When updating gspec files, preserve existing `spec-version` YAML frontmatter. If a file lacks frontmatter, add `---\nspec-version: v1\n---` at the top.
113
114
  4. **Run tests** — Execute the tests defined for this phase (and any existing tests to catch regressions). Fix any failures before proceeding.
114
115
  6. **Surface new gaps** — If implementation reveals new ambiguities, pause and consult the user rather than making silent assumptions
115
116
  7. **Pause and report** — After completing the phase and confirming tests pass, present a phase completion summary to the user:
@@ -129,8 +130,8 @@ After implementation:
129
130
  1. **Walk through each functional requirement** from the feature PRD (if available) or the approved implementation plan and confirm it's satisfied
130
131
  2. **Review against acceptance criteria** — For each capability in the feature PRDs, check that every acceptance criterion listed under it is satisfied. These sub-listed conditions are the definition of "done" for each capability. If any criterion is not met, the capability should not be marked `[x]`.
131
132
  3. **Check the Definition of Done** from `gspec/practices.md`
132
- 4. **Note any deferred items** — Requirements that were intentionally postponed or descoped during implementation
133
- 5. **Verify checkbox accuracy** — Confirm that every capability marked `[x]` in the feature PRDs is genuinely implemented and working. Confirm that capabilities left as `[ ]` were intentionally deferred. Present a final status summary:
133
+ 4. **Verify no unapproved deferrals** — Compare the final implementation against the approved plan. If any capability that was assigned to a phase was not implemented, **do not silently leave it unchecked**. Flag it to the user, explain why it wasn't completed, and get explicit approval before marking it as deferred. Only capabilities the user approved for deferral during planning (or explicitly approves now) may remain unchecked.
134
+ 5. **Verify checkbox accuracy** — Confirm that every capability marked `[x]` in the feature PRDs is genuinely implemented and working. Confirm that capabilities left as `[ ]` were approved for deferral by the user. Present a final status summary:
134
135
 
135
136
  > **Implementation Summary:**
136
137
  > - Feature X: 7/7 capabilities implemented (complete)
@@ -149,6 +150,7 @@ When you encounter something the specs don't fully cover during implementation:
149
150
  - **If the ambiguity is significant** (e.g., unclear user flow, missing data model, conflicting requirements), pause and consult the user rather than making silent assumptions
150
151
  - **Never silently implement unspecified behavior** that contradicts or significantly extends the original spec — ask first
151
152
  - **Never override explicit spec decisions** with your own preferences
153
+ - **Never skip or descope a PRD capability without user approval** — ambiguity in *how* to implement something is not grounds for dropping it. If a capability seems too complex, unclear, or problematic, raise it with the user rather than omitting it
152
154
 
153
155
  ---
154
156
 
@@ -178,7 +180,7 @@ If the user specifies a feature, focus on that feature's **unchecked capabilitie
178
180
 
179
181
  ### When the user provides a prompt alongside existing features:
180
182
 
181
- The user's prompt takes priority for scoping. Use it to determine focus, and reference existing feature PRDs as supporting context rather than the sole driver.
183
+ The user's prompt takes priority for scoping. Use it to determine focus, and reference existing feature PRDs as supporting context rather than the sole driver. However, if the user's prompt narrows scope such that some unchecked PRD capabilities will not be implemented this run, explicitly list those excluded capabilities in the plan under "Out of Scope for This Run" so the user can see what is being deferred and why.
182
184
 
183
185
  ---
184
186
 
@@ -5,7 +5,7 @@ description: Migrate existing gspec files to the current format when upgrading t
5
5
 
6
6
  You are a Technical Documentation Migration Specialist.
7
7
 
8
- Your task is to update existing gspec specification documents to match the current gspec format (version 1.10.0). You preserve all substantive content while ensuring documents follow the latest structural conventions.
8
+ Your task is to update existing gspec specification documents to match the current spec format (spec-version v1). You preserve all substantive content while ensuring documents follow the latest structural conventions.
9
9
 
10
10
  ---
11
11
 
@@ -19,16 +19,17 @@ Scan the `gspec/` directory for all Markdown files:
19
19
 
20
20
 
21
21
  For each file, check the YAML frontmatter at the top of the file:
22
- - If the file starts with `---` followed by YAML content and another `---`, read the `gspec-version` field
22
+ - If the file starts with `---` followed by YAML content and another `---`, read the `spec-version` field (also check for the legacy `gspec-version` field)
23
23
  - If no frontmatter exists, the file predates version tracking
24
- - If `gspec-version` matches `1.10.0`, the file is current — skip it
24
+ - If `spec-version` matches `v1`, the file is current — skip it
25
+ - If the file has `gspec-version` (old field name) instead of `spec-version`, it needs migration regardless of value
25
26
 
26
27
  Present an inventory to the user:
27
28
 
28
29
  > **gspec File Inventory:**
29
30
  > - `gspec/profile.md` — no version (needs migration)
30
- > - `gspec/stack.md` — version 1.0.3 (needs migration)
31
- > - `gspec/style.md` — version 1.10.0 (current, skipping)
31
+ > - `gspec/stack.md` — gspec-version 1.0.3 (needs migration — old field name)
32
+ > - `gspec/style.md` — spec-version v1 (current, skipping)
32
33
  > - `gspec/features/user-auth.md` — no version (needs migration)
33
34
 
34
35
  Ask the user to confirm which files to migrate, or confirm all.
@@ -63,21 +64,22 @@ For each file to migrate:
63
64
  5. **Add or update the frontmatter** — Ensure the file starts with:
64
65
  ```
65
66
  ---
66
- gspec-version: 1.10.0
67
+ spec-version: v1
67
68
  ---
68
69
  ```
70
+ If the file has the old `gspec-version` field, rename it to `spec-version` and set the value to `v1`.
69
71
  6. **Present the proposed changes** to the user before writing. Show what sections are being reorganized, what is being added, and confirm no content is being lost.
70
72
 
71
73
  ### Phase 4: Verify — Confirm Migration
72
74
 
73
75
  After migrating all files:
74
76
 
75
- 1. **Verify every migrated file** has the correct frontmatter
77
+ 1. **Verify every migrated file** has the correct frontmatter (`spec-version: v1`)
76
78
  2. **Verify no content was lost** — Briefly summarize what was preserved and any content that was relocated
77
79
  3. **Present a completion summary**:
78
80
 
79
81
  > **Migration Complete:**
80
- > - 4 files migrated to version 1.10.0
82
+ > - 4 files migrated to spec-version v1
81
83
  > - 2 files were already current (skipped)
82
84
  > - Content preserved in all files
83
85
  > - Sections reorganized: [list any structural changes]
@@ -100,8 +102,9 @@ After migrating all files:
100
102
 
101
103
  **Frontmatter handling:**
102
104
  - If the file has no frontmatter, add it at the very top
103
- - If the file has frontmatter without `gspec-version`, add the field
104
- - If the file has an outdated `gspec-version`, update it
105
+ - If the file has the old `gspec-version` field, rename it to `spec-version`
106
+ - If the file has frontmatter without `spec-version`, add the field
107
+ - If the file has an outdated `spec-version`, update it
105
108
  - Preserve any other frontmatter fields that may exist
106
109
 
107
110
  ---
@@ -22,10 +22,10 @@ You should:
22
22
 
23
23
  - Output **ONLY** a single Markdown document
24
24
  - Save the file as `gspec/practices.md` in the root of the project, create the `gspec` folder if it doesn't exist
25
- - Begin the file with YAML frontmatter containing the gspec version:
25
+ - Begin the file with YAML frontmatter containing the spec version:
26
26
  ```
27
27
  ---
28
- gspec-version: 1.10.0
28
+ spec-version: v1
29
29
  ---
30
30
  ```
31
31
  The frontmatter must be the very first content in the file, before the main heading.
@@ -22,10 +22,10 @@ You should:
22
22
 
23
23
  - Output **ONLY** a single Markdown document
24
24
  - Save the file as `gspec/profile.md` in the root of the project, create the `gspec` folder if it doesn't exist
25
- - Begin the file with YAML frontmatter containing the gspec version:
25
+ - Begin the file with YAML frontmatter containing the spec version:
26
26
  ```
27
27
  ---
28
- gspec-version: 1.10.0
28
+ spec-version: v1
29
29
  ---
30
30
  ```
31
31
  The frontmatter must be the very first content in the file, before the main heading.
@@ -162,7 +162,7 @@ After writing `gspec/research.md`, ask the user:
162
162
  - Assumptions & Risks (assumptions, open questions, key risks and mitigations)
163
163
  - Success Metrics
164
164
  - Implementation Context (standard portability note)
165
- - Begin the file with YAML frontmatter: `---\ngspec-version: 1.10.0\n---`
165
+ - Begin the file with YAML frontmatter: `---\nspec-version: v1\n---`
166
166
  2. **Name the file** descriptively based on the feature (e.g., `gspec/features/csv-export.md`, `gspec/features/onboarding-wizard.md`)
167
167
  3. **Keep the PRD portable** — use generic role descriptions (not project-specific persona names), define success metrics in terms of the feature's own outcomes (not project-level KPIs), and describe UX behavior generically (not tied to a specific design system). The PRD should be reusable across projects.
168
168
  4. **Keep the PRD product-focused** — describe *what* and *why*, not *how*. Implementation details belong in the code, not the PRD.
@@ -178,10 +178,10 @@ After writing `gspec/research.md`, ask the user:
178
178
 
179
179
  - Save the primary output as `gspec/research.md` in the root of the project, create the `gspec` folder if it doesn't exist
180
180
  - If the user accepts feature generation (Phase 7), also save feature PRDs to `gspec/features/`
181
- - Begin `gspec/research.md` with YAML frontmatter containing the gspec version:
181
+ - Begin `gspec/research.md` with YAML frontmatter containing the spec version:
182
182
  ```
183
183
  ---
184
- gspec-version: 1.10.0
184
+ spec-version: v1
185
185
  ---
186
186
  ```
187
187
  The frontmatter must be the very first content in the file, before the main heading.
@@ -198,7 +198,7 @@ The `gspec/research.md` file must follow this structure:
198
198
 
199
199
  ```markdown
200
200
  ---
201
- gspec-version: 1.10.0
201
+ spec-version: v1
202
202
  ---
203
203
 
204
204
  # Competitive Research
@@ -22,10 +22,10 @@ You should:
22
22
 
23
23
  - Output **ONLY** a single Markdown document
24
24
  - Save the file as `gspec/stack.md` in the root of the project, create the `gspec` folder if it doesn't exist
25
- - Begin the file with YAML frontmatter containing the gspec version:
25
+ - Begin the file with YAML frontmatter containing the spec version:
26
26
  ```
27
27
  ---
28
- gspec-version: 1.10.0
28
+ spec-version: v1
29
29
  ---
30
30
  ```
31
31
  The frontmatter must be the very first content in the file, before the main heading.
@@ -24,10 +24,10 @@ You should:
24
24
 
25
25
  - Output **ONLY** a single Markdown document
26
26
  - Save the file as `gspec/style.md` in the root of the project, create the `gspec` folder if it doesn't exist
27
- - Begin the file with YAML frontmatter containing the gspec version:
27
+ - Begin the file with YAML frontmatter containing the spec version:
28
28
  ```
29
29
  ---
30
- gspec-version: 1.10.0
30
+ spec-version: v1
31
31
  ---
32
32
  ```
33
33
  The frontmatter must be the very first content in the file, before the main heading.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gspec",
3
- "version": "1.10.0",
3
+ "version": "1.13.0",
4
4
  "description": "Install gspec specification commands for Claude Code, Cursor, and other AI tools",
5
5
  "main": "bin/gspec.js",
6
6
  "type": "module",
@@ -12,7 +12,6 @@
12
12
  "dist/",
13
13
  "commands/",
14
14
  "templates/",
15
- "starters/",
16
15
  "README.md"
17
16
  ],
18
17
  "scripts": {
@@ -21,6 +21,6 @@ These specs define what the product is, how it should look, what technology it u
21
21
 
22
22
  5. **Announce spec updates** — When you update a spec, briefly mention what changed and why in your response. Never silently modify specs.
23
23
 
24
- 6. **Preserve frontmatter** — gspec files use YAML frontmatter with a `gspec-version` field. Preserve it when editing. If a file lacks frontmatter, leave it as-is.
24
+ 6. **Preserve frontmatter** — gspec files use YAML frontmatter with a `spec-version` field. Preserve it when editing. If a file lacks frontmatter, leave it as-is.
25
25
 
26
26
  7. **Don't create new foundation specs** — Only update existing spec files. If you believe a new spec document is needed, suggest it to the user rather than creating it yourself.
@@ -1,98 +0,0 @@
1
- ---
2
- gspec-version: 1.8.0
3
- description: Company story, mission, team bios, and values section
4
- ---
5
-
6
- # About Page
7
-
8
- ## Overview
9
-
10
- A static About page that tells the story of the business and communicates its mission. The page gives visitors a sense of who is behind the brand, why the business exists, and what it stands for — building trust and credibility beyond the service offerings presented on the home page.
11
-
12
- ## Users & Use Cases
13
-
14
- **Primary users:** Prospective clients evaluating the business before making contact.
15
-
16
- **Key use cases:**
17
-
18
- 1. A prospective client wants to understand the people and values behind the business before deciding to engage, so they visit the About page to assess credibility and alignment.
19
- 2. A referral wants to learn more about the company's background and story to confirm the recommendation they received.
20
- 3. A visitor who has reviewed the services offered navigates to the About page to understand the mission and philosophy that drives those services.
21
-
22
- ## Scope
23
-
24
- **In scope:**
25
-
26
- - Company story section explaining the background and origin of the business
27
- - Mission or purpose statement section articulating why the business exists and what it stands for
28
- - Responsive layout that works across desktop, tablet, and mobile devices
29
- - Static content coded directly into the page
30
-
31
- **Out of scope:**
32
-
33
- - Team member bios, headshots, or leadership profiles
34
- - Calls-to-action, contact forms, or conversion elements
35
- - Company timeline or milestones visualization
36
- - Client testimonials or social proof
37
- - Dynamic or CMS-managed content
38
-
39
- **Deferred ideas:**
40
-
41
- - Team or leadership section with bios and photos
42
- - Company values displayed as distinct visual cards or icons
43
- - Historical timeline or key milestones section
44
- - Awards, certifications, or accreditations display
45
-
46
- ## Capabilities
47
-
48
- - [ ] **P0**: Company story section communicates the background and origin of the business
49
- - Section includes a heading and one or more paragraphs of narrative text
50
- - Content is readable and well-structured without feeling like a wall of text
51
- - Section is visually distinct from the mission section
52
-
53
- - [ ] **P0**: Mission or purpose statement section articulates why the business exists
54
- - Mission statement is presented with visual emphasis (e.g., larger text, distinct styling) to differentiate it from the narrative story
55
- - Statement is concise and scannable — ideally 1-3 sentences
56
- - Section is visually separated from the company story section
57
-
58
- - [ ] **P0**: Page is fully responsive across common device sizes
59
- - Layout adapts cleanly to desktop (1024px+), tablet (768px), and mobile (375px) viewports
60
- - No horizontal scrolling on any viewport
61
- - Text remains readable at all sizes
62
-
63
- - [ ] **P1**: Page structure supports scannability
64
- - Clear visual hierarchy guides the visitor through the content in a logical order
65
- - Sections are separated with adequate spacing to avoid a dense, text-heavy appearance
66
- - Page can be skimmed in under 15 seconds to get the gist of the business
67
-
68
- - [ ] **P2**: Semantic page structure supports accessibility
69
- - Page uses proper heading hierarchy (single h1, logical h2/h3 nesting)
70
- - Content is navigable via keyboard
71
- - Sufficient color contrast for all text elements
72
-
73
- ## Dependencies
74
-
75
- - **Home Page** ([home-page.md](home-page.md)): The About page is a secondary page that visitors typically navigate to from the home page. Navigation between pages should be consistent.
76
-
77
- ## Assumptions & Risks
78
-
79
- **Assumptions:**
80
-
81
- - The business has a defined story or background narrative that can be summarized for the page.
82
- - A mission or purpose statement exists or can be drafted prior to implementation.
83
- - Static content is acceptable; content updates will be infrequent and handled by developers.
84
-
85
- **Key risks:**
86
-
87
- - **Content readiness:** The page depends on finalized copy for the company story and mission statement. Mitigation: use realistic placeholder content during development so layout and structure can be validated independently.
88
- - **Text-heavy appearance:** An About page with only narrative content can feel dense and uninviting. Mitigation: ensure the design uses adequate spacing, visual hierarchy, and section separation to maintain readability.
89
-
90
- ## Success Metrics
91
-
92
- 1. Visitors can identify the company's story and mission within 15 seconds of viewing the page.
93
- 2. The page renders correctly and is fully usable across desktop, tablet, and mobile viewports.
94
- 3. Content is structured into clearly distinct sections (story and mission) with visible separation.
95
-
96
- ## Implementation Context
97
-
98
- > This feature PRD is portable and project-agnostic. During implementation, consult the project's `gspec/profile.md` (target users, positioning), `gspec/style.md` (design system), `gspec/stack.md` (technology choices), and `gspec/practices.md` (development standards) to resolve project-specific context.
@@ -1,147 +0,0 @@
1
- ---
2
- gspec-version: 1.8.0
3
- description: Validated contact form with email delivery and success feedback
4
- ---
5
-
6
- # Contact Form
7
-
8
- ## Overview
9
-
10
- A reusable contact form component that lets visitors submit a structured inquiry (name, email, optional phone, and message) which triggers a server-side email to the business. Without a contact form, visitors must manually compose an email or make a phone call — adding friction that can cause drop-off at the moment of highest intent.
11
-
12
- ## Users & Use Cases
13
-
14
- **Primary users:** Prospective clients and general visitors who want to reach the business directly from the website.
15
-
16
- **Key use cases:**
17
-
18
- 1. A prospective client finishes reviewing services and wants to describe their needs in a message without leaving the site or opening their email client.
19
- 2. A visitor on a mobile device quickly fills in their name, email, and a short message using touch-friendly inputs and submits it in under a minute.
20
- 3. A visitor submits the form and immediately sees confirmation that their message was received, giving them confidence to move on without follow-up.
21
- 4. A visitor makes a validation error (e.g., malformed email) and corrects it in place without losing any of the text they already typed.
22
-
23
- ## Scope
24
-
25
- **In scope:**
26
-
27
- - Self-contained, reusable form component that can be placed on any page (contact page, footer CTA, standalone route)
28
- - Required fields: name, email address, message body
29
- - Optional field: phone number
30
- - Client-side validation with inline error feedback
31
- - Submission to a server-side endpoint that sends the email
32
- - Clear success and error states after submission
33
- - Double-submission prevention
34
- - Hidden honeypot field for basic spam prevention
35
- - Accessible markup (labels, focus management, error announcements)
36
- - Responsive layout for mobile through desktop
37
-
38
- **Out of scope:**
39
-
40
- - The server-side email-sending endpoint itself (this feature defines the client-side form and its contract with the server; the endpoint is an infrastructure concern)
41
- - Email templates, recipient configuration, or transport provider selection
42
- - File attachments or media uploads
43
- - CAPTCHA or third-party bot detection services
44
- - Auto-reply or confirmation emails sent back to the submitter
45
- - Analytics or event tracking for form interactions
46
- - Multi-step or wizard-style form flows
47
-
48
- **Deferred ideas:**
49
-
50
- - Project type or inquiry category selector
51
- - Preferred contact time field
52
- - CAPTCHA integration if honeypot proves insufficient
53
- - Auto-save or draft persistence for partially completed forms
54
- - Confirmation email sent to the submitter after successful submission
55
-
56
- ## Capabilities
57
-
58
- - [ ] **P0**: Visitor can fill in required fields (name, email, message) and submit the form
59
- - Form renders name, email, and message fields, each with a visible label
60
- - All three fields are required; form cannot be submitted with any of them empty
61
- - On valid submission, form data is sent to a server-side endpoint as a structured payload
62
- - After successful server response, a clear success message is displayed
63
-
64
- - [ ] **P0**: Form validates input and shows inline errors before submission
65
- - Empty required fields show a "required" error when the visitor attempts to submit
66
- - Email field validates format and shows a specific error for malformed addresses
67
- - Errors appear inline next to or below the relevant field
68
- - Existing field values are preserved when validation errors are displayed
69
-
70
- - [ ] **P0**: Form displays clear feedback for success and error outcomes
71
- - On success, a thank-you or confirmation message replaces or overlays the form so the visitor knows the message was received
72
- - On server error, an actionable error message is shown (e.g., "Something went wrong — please try again or contact us by phone")
73
- - Feedback persists on screen until the visitor takes further action; it does not auto-dismiss
74
-
75
- - [ ] **P0**: Submit control is guarded to prevent double submissions
76
- - The submit button is disabled (or the form is otherwise guarded) while a submission request is in flight
77
- - A loading indicator is visible during the request so the visitor knows the form is processing
78
-
79
- - [ ] **P0**: Form is accessible
80
- - Every input has a programmatically associated label
81
- - Tab order follows a logical sequence through fields and the submit button
82
- - Validation errors are announced to assistive technology (e.g., via live regions or focus management)
83
- - Error messages are visible and not conveyed by color alone
84
-
85
- - [ ] **P1**: Visitor can optionally provide a phone number
86
- - An optional phone number field is displayed with a clear indication that it is not required
87
- - The form submits successfully with or without a phone number value
88
- - If provided, the phone number is included in the payload sent to the server
89
-
90
- - [ ] **P1**: Form layout is responsive across device sizes
91
- - On desktop, fields may be arranged in a multi-column layout where appropriate
92
- - On mobile, all fields stack vertically with touch-friendly input sizes (minimum 44px tap targets)
93
- - No horizontal scrolling at any viewport width
94
- - Labels remain legible and inputs remain usable at all sizes
95
-
96
- - [ ] **P1**: Hidden honeypot field deters automated spam submissions
97
- - A visually hidden field is included in the form markup
98
- - The field is not visible or focusable to human users
99
- - If the honeypot field contains a value on submission, the form either silently discards the submission or the server rejects it
100
- - Legitimate users are never affected by the honeypot mechanism
101
-
102
- - [ ] **P1**: Key conversion pages include a call-to-action linking to the contact form
103
- - Pages where visitors evaluate the business (e.g., Home, Services) include a CTA section near the bottom that directs visitors to the contact page
104
- - The CTA includes a clear heading and a button or link to the contact page
105
- - The CTA is visually distinct from surrounding content sections
106
- - The CTA does not duplicate the full form — it links to the dedicated contact page where the form lives
107
-
108
- - [ ] **P2**: Form is a self-contained, reusable component
109
- - The form can be embedded on different pages without code duplication
110
- - Placement on a page does not require page-specific modifications to the form's internal logic
111
- - The server endpoint URL is configurable (e.g., via props, config, or environment) rather than hardcoded
112
-
113
- ## Dependencies
114
-
115
- - **Contact Page** ([contact-page.md](contact-page.md)): The contact page is the primary intended host for this form component. The form should integrate visually alongside the static contact details already specified in that feature.
116
- - **Form submission endpoint**: The form requires a backend that accepts the form payload and delivers the inquiry via email. This may be a server-side endpoint within the application or a third-party form service, depending on the stack's capabilities. Consult `gspec/stack.md` to determine the available approach.
117
-
118
- > **Compatibility note**: This feature requires a form submission endpoint. Static-only stacks with no server runtime must include a third-party form submission service (check `gspec/stack.md` Section 11 — Third-Party Integrations). Full-stack stacks with backend capabilities should implement a custom server endpoint (check `gspec/stack.md` Section 5 — Backend Stack). The form's payload contract (name, email, phone, message, honeypot) remains the same regardless of approach.
119
-
120
- ## Assumptions & Risks
121
-
122
- **Assumptions:**
123
-
124
- - A server-side endpoint for receiving form submissions and sending email will be available at implementation time or will be built as a companion task.
125
- - A single, fixed set of fields (name, email, optional phone, message) is sufficient for all expected inquiry types.
126
- - The honeypot technique provides adequate spam prevention for the expected traffic level.
127
-
128
- **Open questions:**
129
-
130
- - Exact error response format from the server endpoint (status codes, error body structure) will be determined during implementation when the endpoint is built.
131
-
132
- **Key risks:**
133
-
134
- - **Server endpoint availability:** The form is inert without a functioning server endpoint. Mitigation: the form can be built and tested with a mock endpoint; the real endpoint can be connected later.
135
- - **Spam volume:** A honeypot field alone may not stop sophisticated bots. Mitigation: monitor submission volume post-launch; CAPTCHA integration is a deferred enhancement if needed.
136
- - **Email deliverability:** Submissions may be lost if the server-side email send fails silently. Mitigation: the server endpoint should return clear success/failure responses so the form can display accurate feedback to the visitor.
137
-
138
- ## Success Metrics
139
-
140
- 1. Visitors can successfully submit the form and receive visible confirmation on the first attempt when all fields are valid.
141
- 2. Validation errors prevent submission of incomplete or malformed data, and visitors can correct errors without re-entering other fields.
142
- 3. The form is usable and visually coherent on mobile devices (375px viewport) through desktop (1440px viewport).
143
- 4. Spam submissions (honeypot-caught) account for the majority of bot traffic, with minimal false positives affecting legitimate users.
144
-
145
- ## Implementation Context
146
-
147
- > This feature PRD is portable and project-agnostic. During implementation, consult the project's `gspec/profile.md` (target users, positioning), `gspec/style.md` (design system), `gspec/stack.md` (technology choices), and `gspec/practices.md` (development standards) to resolve project-specific context.