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.
- package/README.md +25 -34
- package/bin/gspec.js +762 -159
- package/commands/gspec.analyze.md +1 -1
- package/commands/gspec.architect.md +2 -2
- package/commands/gspec.feature.md +2 -2
- package/commands/gspec.implement.md +8 -6
- package/commands/gspec.migrate.md +13 -10
- package/commands/gspec.practices.md +2 -2
- package/commands/gspec.profile.md +2 -2
- package/commands/gspec.research.md +4 -4
- package/commands/gspec.stack.md +2 -2
- package/commands/gspec.style.md +2 -2
- package/dist/antigravity/gspec-analyze/SKILL.md +1 -1
- package/dist/antigravity/gspec-architect/SKILL.md +2 -2
- package/dist/antigravity/gspec-feature/SKILL.md +2 -2
- package/dist/antigravity/gspec-implement/SKILL.md +8 -6
- package/dist/antigravity/gspec-migrate/SKILL.md +13 -10
- package/dist/antigravity/gspec-practices/SKILL.md +2 -2
- package/dist/antigravity/gspec-profile/SKILL.md +2 -2
- package/dist/antigravity/gspec-research/SKILL.md +4 -4
- package/dist/antigravity/gspec-stack/SKILL.md +2 -2
- package/dist/antigravity/gspec-style/SKILL.md +2 -2
- package/dist/claude/gspec-analyze/SKILL.md +1 -1
- package/dist/claude/gspec-architect/SKILL.md +2 -2
- package/dist/claude/gspec-feature/SKILL.md +2 -2
- package/dist/claude/gspec-implement/SKILL.md +8 -6
- package/dist/claude/gspec-migrate/SKILL.md +13 -10
- package/dist/claude/gspec-practices/SKILL.md +2 -2
- package/dist/claude/gspec-profile/SKILL.md +2 -2
- package/dist/claude/gspec-research/SKILL.md +4 -4
- package/dist/claude/gspec-stack/SKILL.md +2 -2
- package/dist/claude/gspec-style/SKILL.md +2 -2
- package/dist/codex/gspec-analyze/SKILL.md +1 -1
- package/dist/codex/gspec-architect/SKILL.md +2 -2
- package/dist/codex/gspec-feature/SKILL.md +2 -2
- package/dist/codex/gspec-implement/SKILL.md +8 -6
- package/dist/codex/gspec-migrate/SKILL.md +13 -10
- package/dist/codex/gspec-practices/SKILL.md +2 -2
- package/dist/codex/gspec-profile/SKILL.md +2 -2
- package/dist/codex/gspec-research/SKILL.md +4 -4
- package/dist/codex/gspec-stack/SKILL.md +2 -2
- package/dist/codex/gspec-style/SKILL.md +2 -2
- package/dist/cursor/gspec-analyze.mdc +1 -1
- package/dist/cursor/gspec-architect.mdc +2 -2
- package/dist/cursor/gspec-feature.mdc +2 -2
- package/dist/cursor/gspec-implement.mdc +8 -6
- package/dist/cursor/gspec-migrate.mdc +13 -10
- package/dist/cursor/gspec-practices.mdc +2 -2
- package/dist/cursor/gspec-profile.mdc +2 -2
- package/dist/cursor/gspec-research.mdc +4 -4
- package/dist/cursor/gspec-stack.mdc +2 -2
- package/dist/cursor/gspec-style.mdc +2 -2
- package/dist/opencode/gspec-analyze/SKILL.md +1 -1
- package/dist/opencode/gspec-architect/SKILL.md +2 -2
- package/dist/opencode/gspec-feature/SKILL.md +2 -2
- package/dist/opencode/gspec-implement/SKILL.md +8 -6
- package/dist/opencode/gspec-migrate/SKILL.md +13 -10
- package/dist/opencode/gspec-practices/SKILL.md +2 -2
- package/dist/opencode/gspec-profile/SKILL.md +2 -2
- package/dist/opencode/gspec-research/SKILL.md +4 -4
- package/dist/opencode/gspec-stack/SKILL.md +2 -2
- package/dist/opencode/gspec-style/SKILL.md +2 -2
- package/package.json +1 -2
- package/templates/spec-sync.md +1 -1
- package/starters/features/about-page.md +0 -98
- package/starters/features/contact-form.md +0 -147
- package/starters/features/contact-page.md +0 -103
- package/starters/features/home-page.md +0 -103
- package/starters/features/responsive-navbar.md +0 -113
- package/starters/features/services-page.md +0 -103
- package/starters/features/site-footer.md +0 -121
- package/starters/features/theme-switcher.md +0 -124
- package/starters/practices/tdd-pipeline-first.md +0 -192
- package/starters/stacks/astro-tailwind-github-pages.md +0 -283
- package/starters/stacks/nextjs-supabase-vercel.md +0 -319
- package/starters/stacks/nextjs-vercel-typescript.md +0 -264
- package/starters/styles/clean-professional.md +0 -316
- 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
|
|
24
|
+
- Begin the file with YAML frontmatter containing the spec version:
|
|
25
25
|
```
|
|
26
26
|
---
|
|
27
|
-
|
|
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
|
|
26
|
+
- Begin the file with YAML frontmatter containing the spec version:
|
|
27
27
|
```
|
|
28
28
|
---
|
|
29
|
-
|
|
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 `
|
|
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
|
|
45
|
+
- Begin the file with YAML frontmatter containing the spec version:
|
|
46
46
|
```
|
|
47
47
|
---
|
|
48
|
-
|
|
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
|
|
85
|
+
- Begin each file with YAML frontmatter containing the spec version:
|
|
86
86
|
```
|
|
87
87
|
---
|
|
88
|
-
|
|
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. **
|
|
66
|
-
4. **
|
|
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 `
|
|
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. **
|
|
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
|
|
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
|
|
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 `
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
|
104
|
-
- If the file has
|
|
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
|
|
25
|
+
- Begin the file with YAML frontmatter containing the spec version:
|
|
26
26
|
```
|
|
27
27
|
---
|
|
28
|
-
|
|
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
|
|
25
|
+
- Begin the file with YAML frontmatter containing the spec version:
|
|
26
26
|
```
|
|
27
27
|
---
|
|
28
|
-
|
|
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: `---\
|
|
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
|
|
181
|
+
- Begin `gspec/research.md` with YAML frontmatter containing the spec version:
|
|
182
182
|
```
|
|
183
183
|
---
|
|
184
|
-
|
|
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
|
-
|
|
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
|
|
25
|
+
- Begin the file with YAML frontmatter containing the spec version:
|
|
26
26
|
```
|
|
27
27
|
---
|
|
28
|
-
|
|
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
|
|
27
|
+
- Begin the file with YAML frontmatter containing the spec version:
|
|
28
28
|
```
|
|
29
29
|
---
|
|
30
|
-
|
|
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.
|
|
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": {
|
package/templates/spec-sync.md
CHANGED
|
@@ -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 `
|
|
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.
|