gspec 1.6.0 → 1.10.0

package/dist/opencode/gspec-style/SKILL.md

@@ -0,0 +1,224 @@
+---
+name: gspec-style
+description: Generate a visual style guide with design tokens, color palette, and component patterns
+---
+
+You are a senior UI/UX Designer and Design Systems Architect at a high-performing software company.
+
+Your task is to take the provided application description (which may be vague or detailed) and produce a **Visual Style Guide** that clearly defines the visual design language, UI patterns, and design system for the application. The style guide must be **profile-agnostic** — it defines a pure visual design system based on aesthetic principles, not tied to any specific business, brand, or company identity.
+
+You should:
+- Create a cohesive and modern visual design system
+- Define reusable design tokens and patterns
+- Focus on accessibility, consistency, and user experience
+- Choose colors based on aesthetic harmony, readability, and functional purpose — NOT brand association
+- Ask clarifying questions when essential information is missing rather than guessing
+- When asking questions, offer 2-3 specific suggestions to guide the discussion
+- Provide clear guidance for designers and developers
+- Be comprehensive yet practical
+- **Never reference or derive styles from a company name, logo, brand identity, or business profile**
+
+---
+
+## Output Rules
+
+- Output **ONLY** a single Markdown document
+- Save the file as `gspec/style.md` in the root of the project, create the `gspec` folder if it doesn't exist
+- Begin the file with YAML frontmatter containing the gspec version:
+  ```
+  ---
+  gspec-version: 1.10.0
+  ---
+  ```
+  The frontmatter must be the very first content in the file, before the main heading.
+- **Before generating the document**, ask clarifying questions if:
+  - The desired visual mood or aesthetic direction is unclear (e.g., minimal, bold, warm, technical)
+  - The target platforms are unspecified
+  - Dark mode / theme requirements are unknown
+  - The application category or domain is unclear (affects functional color choices)
+- **When asking questions**, offer 2-3 specific suggestions to guide the discussion
+- **The style guide must not include profile details** — you CAN derive colors, typography, or visual identity from any business name, logo, and brand if prompted to do so, however it should NOT include details of the business including company name, business offerings, etc. Base all design decisions on aesthetic principles, usability, and the functional needs of the application category
+- Include visual descriptions and specifications
+- Use color codes (hex, RGB, HSL) for all colors
+- Specify exact font families, weights, and sizes
+- Include spacing scales and measurement systems
+- Provide examples where helpful
+- **Mark sections as "Not Applicable"** when they don't apply to this application
+
+---
+
+## Required Sections
+
+### 1. Overview
+- Design vision statement
+- Target platforms (web, mobile, desktop)
+- Visual personality (e.g., clean & minimal, bold & expressive, warm & approachable, technical & precise)
+- Design rationale — why this aesthetic fits the application category and its users
+
+### 2. Color Palette
+
+#### Primary Colors
+- Main accent and action colors with hex codes
+- Selection rationale (aesthetic harmony, readability, functional purpose)
+- Usage guidelines for each
+
+#### Secondary Colors
+- Supporting and complementary colors
+- When and how to use them
+
+#### Neutral Colors
+- Grays and backgrounds
+- Text colors for different contexts
+
+#### Semantic Colors
+- Success, warning, error, info states
+- Accessibility contrast ratios
+
+### 3. Typography
+
+#### Font Families
+- Primary font (headings)
+- Secondary font (body text)
+- Monospace font (code, if applicable)
+- Font sources (Google Fonts, custom, etc.)
+
+#### Type Scale
+- Heading levels (H1-H6) with sizes and weights
+- Body text sizes (large, regular, small)
+- Line heights and letter spacing
+- Responsive scaling guidelines
+
+### 4. Spacing & Layout
+
+#### Spacing Scale
+- Base unit (e.g., 4px, 8px)
+- Spacing values (xs, sm, md, lg, xl, etc.)
+- Margin and padding conventions
+
+#### Grid System
+- Column structure
+- Breakpoints for responsive design
+- Container max-widths
+
+#### Layout Patterns
+- Common layout structures
+- Component spacing rules
+
+### 5. Themes
+
+#### Light Mode
+- Background, surface, and text colors
+- Component color adjustments
+
+#### Dark Mode
+- Background, surface, and text colors
+- Component color adjustments
+- Contrast considerations
+
+### 6. Component Styling
+
+> **Focus on visual styling only** — colors, borders, typography, spacing, and state appearances. Do NOT define component structure, layout behavior, or interaction patterns (those belong in feature PRDs). The goal is to answer "what does it look like?" not "how does it work?"
+
+#### Buttons
+- Color treatments for primary, secondary, ghost variants
+- States: default, hover, active, disabled appearances
+- Sizes and border radius
+
+#### Form Elements
+- Input field colors, borders, and focus ring styles
+- Label and helper text typography
+- Validation state colors (error, success)
+
+#### Cards & Containers
+- Background colors and border styles
+- Shadow elevations and corner radius
+
+#### Navigation Elements
+- Link colors: default, hover, active states
+- Background treatments for navigation surfaces
+
+### 7. Visual Effects
+
+#### Shadows & Elevation
+- Shadow levels (0-5 or similar)
+- When to use each level
+
+#### Border Radius
+- Standard radius values
+- Usage guidelines
+
+#### Transitions & Animations
+- Duration standards (fast, medium, slow)
+- Easing functions
+- Animation principles
+- Loading states, skeleton screens, page transitions
+
+### 8. Iconography
+
+> **The style guide is the single authority for icon library choices.** The stack document defines the CSS framework and component library (e.g., shadcn/ui); the style guide defines which icon set is used. This separation ensures icon decisions are driven by design rationale (visual consistency, stroke style) while component library decisions remain with the technology stack (framework compatibility).
+
+#### Icon Library
+- Specific icon library recommendation with rationale
+- Outlined vs filled style
+- Stroke width
+- Size standards
+
+#### Usage Guidelines
+- When to use icons
+- Icon-text spacing
+
+### 9. Imagery & Media
+
+#### Photography Style
+- Image treatment guidelines
+- Aspect ratios
+- Placeholder patterns
+
+#### Illustrations
+- Style guidelines (if applicable)
+- Color usage in illustrations
+
+### 10. Accessibility
+
+#### Contrast Requirements
+- WCAG compliance level (AA or AAA)
+- Minimum contrast ratios
+
+#### Focus States
+- Keyboard navigation indicators
+- Focus ring styles
+
+#### Text Accessibility
+- Minimum font sizes
+- Line length recommendations
+
+### 11. Responsive Design
+
+#### Breakpoints
+- Mobile, tablet, desktop thresholds
+- Scaling strategies
+
+#### Mobile-Specific Patterns
+- Touch target sizes
+- Mobile navigation patterns
+
+### 12. Usage Examples
+
+#### Component Combinations
+- Common UI patterns
+- Page layout examples
+- Do's and don'ts
+
+---
+
+## Tone & Style
+
+- Clear, prescriptive, design-focused
+- Visually descriptive
+- Practical and implementable
+- Designed for both designers and developers
+
+---
+
+## Input Application Description
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gspec",
-    "version": "1.6.0",
+    "version": "1.10.0",
     "description": "Install gspec specification commands for Claude Code, Cursor, and other AI tools",
     "main": "bin/gspec.js",
     "type": "module",
@@ -12,6 +12,7 @@
         "dist/",
         "commands/",
         "templates/",
+        "starters/",
         "README.md"
     ],
     "scripts": {
@@ -20,6 +21,7 @@
         "build:cursor": "node scripts/build.js cursor",
         "build:antigravity": "node scripts/build.js antigravity",
         "build:codex": "node scripts/build.js codex",
+        "build:opencode": "node scripts/build.js opencode",
         "prepublishOnly": "npm run build"
     },
     "author": "Baller Software",

package/starters/features/about-page.md

@@ -0,0 +1,98 @@
+---
+gspec-version: 1.8.0
+description: Company story, mission, team bios, and values section
+---
+
+# About Page
+
+## Overview
+
+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.
+
+## Users & Use Cases
+
+**Primary users:** Prospective clients evaluating the business before making contact.
+
+**Key use cases:**
+
+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.
+2. A referral wants to learn more about the company's background and story to confirm the recommendation they received.
+3. A visitor who has reviewed the services offered navigates to the About page to understand the mission and philosophy that drives those services.
+
+## Scope
+
+**In scope:**
+
+- Company story section explaining the background and origin of the business
+- Mission or purpose statement section articulating why the business exists and what it stands for
+- Responsive layout that works across desktop, tablet, and mobile devices
+- Static content coded directly into the page
+
+**Out of scope:**
+
+- Team member bios, headshots, or leadership profiles
+- Calls-to-action, contact forms, or conversion elements
+- Company timeline or milestones visualization
+- Client testimonials or social proof
+- Dynamic or CMS-managed content
+
+**Deferred ideas:**
+
+- Team or leadership section with bios and photos
+- Company values displayed as distinct visual cards or icons
+- Historical timeline or key milestones section
+- Awards, certifications, or accreditations display
+
+## Capabilities
+
+- [ ] **P0**: Company story section communicates the background and origin of the business
+  - Section includes a heading and one or more paragraphs of narrative text
+  - Content is readable and well-structured without feeling like a wall of text
+  - Section is visually distinct from the mission section
+
+- [ ] **P0**: Mission or purpose statement section articulates why the business exists
+  - Mission statement is presented with visual emphasis (e.g., larger text, distinct styling) to differentiate it from the narrative story
+  - Statement is concise and scannable — ideally 1-3 sentences
+  - Section is visually separated from the company story section
+
+- [ ] **P0**: Page is fully responsive across common device sizes
+  - Layout adapts cleanly to desktop (1024px+), tablet (768px), and mobile (375px) viewports
+  - No horizontal scrolling on any viewport
+  - Text remains readable at all sizes
+
+- [ ] **P1**: Page structure supports scannability
+  - Clear visual hierarchy guides the visitor through the content in a logical order
+  - Sections are separated with adequate spacing to avoid a dense, text-heavy appearance
+  - Page can be skimmed in under 15 seconds to get the gist of the business
+
+- [ ] **P2**: Semantic page structure supports accessibility
+  - Page uses proper heading hierarchy (single h1, logical h2/h3 nesting)
+  - Content is navigable via keyboard
+  - Sufficient color contrast for all text elements
+
+## Dependencies
+
+- **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.
+
+## Assumptions & Risks
+
+**Assumptions:**
+
+- The business has a defined story or background narrative that can be summarized for the page.
+- A mission or purpose statement exists or can be drafted prior to implementation.
+- Static content is acceptable; content updates will be infrequent and handled by developers.
+
+**Key risks:**
+
+- **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.
+- **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.
+
+## Success Metrics
+
+1. Visitors can identify the company's story and mission within 15 seconds of viewing the page.
+2. The page renders correctly and is fully usable across desktop, tablet, and mobile viewports.
+3. Content is structured into clearly distinct sections (story and mission) with visible separation.
+
+## Implementation Context
+
+> 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.

package/starters/features/contact-form.md

@@ -0,0 +1,147 @@
+---
+gspec-version: 1.8.0
+description: Validated contact form with email delivery and success feedback
+---
+
+# Contact Form
+
+## Overview
+
+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.
+
+## Users & Use Cases
+
+**Primary users:** Prospective clients and general visitors who want to reach the business directly from the website.
+
+**Key use cases:**
+
+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.
+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.
+3. A visitor submits the form and immediately sees confirmation that their message was received, giving them confidence to move on without follow-up.
+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.
+
+## Scope
+
+**In scope:**
+
+- Self-contained, reusable form component that can be placed on any page (contact page, footer CTA, standalone route)
+- Required fields: name, email address, message body
+- Optional field: phone number
+- Client-side validation with inline error feedback
+- Submission to a server-side endpoint that sends the email
+- Clear success and error states after submission
+- Double-submission prevention
+- Hidden honeypot field for basic spam prevention
+- Accessible markup (labels, focus management, error announcements)
+- Responsive layout for mobile through desktop
+
+**Out of scope:**
+
+- 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)
+- Email templates, recipient configuration, or transport provider selection
+- File attachments or media uploads
+- CAPTCHA or third-party bot detection services
+- Auto-reply or confirmation emails sent back to the submitter
+- Analytics or event tracking for form interactions
+- Multi-step or wizard-style form flows
+
+**Deferred ideas:**
+
+- Project type or inquiry category selector
+- Preferred contact time field
+- CAPTCHA integration if honeypot proves insufficient
+- Auto-save or draft persistence for partially completed forms
+- Confirmation email sent to the submitter after successful submission
+
+## Capabilities
+
+- [ ] **P0**: Visitor can fill in required fields (name, email, message) and submit the form
+  - Form renders name, email, and message fields, each with a visible label
+  - All three fields are required; form cannot be submitted with any of them empty
+  - On valid submission, form data is sent to a server-side endpoint as a structured payload
+  - After successful server response, a clear success message is displayed
+
+- [ ] **P0**: Form validates input and shows inline errors before submission
+  - Empty required fields show a "required" error when the visitor attempts to submit
+  - Email field validates format and shows a specific error for malformed addresses
+  - Errors appear inline next to or below the relevant field
+  - Existing field values are preserved when validation errors are displayed
+
+- [ ] **P0**: Form displays clear feedback for success and error outcomes
+  - On success, a thank-you or confirmation message replaces or overlays the form so the visitor knows the message was received
+  - On server error, an actionable error message is shown (e.g., "Something went wrong — please try again or contact us by phone")
+  - Feedback persists on screen until the visitor takes further action; it does not auto-dismiss
+
+- [ ] **P0**: Submit control is guarded to prevent double submissions
+  - The submit button is disabled (or the form is otherwise guarded) while a submission request is in flight
+  - A loading indicator is visible during the request so the visitor knows the form is processing
+
+- [ ] **P0**: Form is accessible
+  - Every input has a programmatically associated label
+  - Tab order follows a logical sequence through fields and the submit button
+  - Validation errors are announced to assistive technology (e.g., via live regions or focus management)
+  - Error messages are visible and not conveyed by color alone
+
+- [ ] **P1**: Visitor can optionally provide a phone number
+  - An optional phone number field is displayed with a clear indication that it is not required
+  - The form submits successfully with or without a phone number value
+  - If provided, the phone number is included in the payload sent to the server
+
+- [ ] **P1**: Form layout is responsive across device sizes
+  - On desktop, fields may be arranged in a multi-column layout where appropriate
+  - On mobile, all fields stack vertically with touch-friendly input sizes (minimum 44px tap targets)
+  - No horizontal scrolling at any viewport width
+  - Labels remain legible and inputs remain usable at all sizes
+
+- [ ] **P1**: Hidden honeypot field deters automated spam submissions
+  - A visually hidden field is included in the form markup
+  - The field is not visible or focusable to human users
+  - If the honeypot field contains a value on submission, the form either silently discards the submission or the server rejects it
+  - Legitimate users are never affected by the honeypot mechanism
+
+- [ ] **P1**: Key conversion pages include a call-to-action linking to the contact form
+  - Pages where visitors evaluate the business (e.g., Home, Services) include a CTA section near the bottom that directs visitors to the contact page
+  - The CTA includes a clear heading and a button or link to the contact page
+  - The CTA is visually distinct from surrounding content sections
+  - The CTA does not duplicate the full form — it links to the dedicated contact page where the form lives
+
+- [ ] **P2**: Form is a self-contained, reusable component
+  - The form can be embedded on different pages without code duplication
+  - Placement on a page does not require page-specific modifications to the form's internal logic
+  - The server endpoint URL is configurable (e.g., via props, config, or environment) rather than hardcoded
+
+## Dependencies
+
+- **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.
+- **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.
+
+> **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.
+
+## Assumptions & Risks
+
+**Assumptions:**
+
+- 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.
+- A single, fixed set of fields (name, email, optional phone, message) is sufficient for all expected inquiry types.
+- The honeypot technique provides adequate spam prevention for the expected traffic level.
+
+**Open questions:**
+
+- Exact error response format from the server endpoint (status codes, error body structure) will be determined during implementation when the endpoint is built.
+
+**Key risks:**
+
+- **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.
+- **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.
+- **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.
+
+## Success Metrics
+
+1. Visitors can successfully submit the form and receive visible confirmation on the first attempt when all fields are valid.
+2. Validation errors prevent submission of incomplete or malformed data, and visitors can correct errors without re-entering other fields.
+3. The form is usable and visually coherent on mobile devices (375px viewport) through desktop (1440px viewport).
+4. Spam submissions (honeypot-caught) account for the majority of bot traffic, with minimal false positives affecting legitimate users.
+
+## Implementation Context
+
+> 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.

package/starters/features/contact-page.md

@@ -0,0 +1,103 @@
+---
+gspec-version: 1.8.0
+description: Contact page layout with form, location map, and business info
+---
+
+# Contact Page
+
+## Overview
+
+A static Contact page that displays the business's contact information so visitors can easily find how to get in touch. Without a clear, dedicated contact page, prospective clients may leave the site rather than search for scattered contact details — making this a critical conversion-support page.
+
+## Users & Use Cases
+
+**Primary users:** Prospective clients ready to reach out to the business.
+
+**Key use cases:**
+
+1. A prospective client has reviewed the services and about page and is now ready to make contact — they navigate to the Contact page to find an email address or phone number.
+2. A visitor needs the business's physical address to visit in person or send correspondence.
+3. A returning client needs to quickly look up the business's phone number or email without digging through old communications.
+
+## Scope
+
+**In scope:**
+
+- Display of core contact details: email address, phone number, and physical address
+- Clear, scannable layout that makes each contact method immediately visible
+- Responsive layout that works across desktop, tablet, and mobile devices
+- Static content coded directly into the page
+
+**Out of scope:**
+
+- Contact form or message submission functionality (separate feature)
+- Embedded map or location visualization
+- Live chat, chatbot, or real-time messaging
+- Social media links or feeds
+- Business hours display
+- CMS-managed or dynamically loaded content
+
+**Deferred ideas:**
+
+- Embedded interactive map showing the business location
+- Business hours section
+- Social media profile links
+- Multiple office or branch locations
+
+## Capabilities
+
+- [ ] **P0**: Page displays the business email address
+  - Email address is visible without scrolling on desktop viewports
+  - Email is rendered as a clickable `mailto:` link that opens the visitor's default email client
+  - Email address is displayed as readable text (not hidden behind an icon or "Email Us" label alone)
+
+- [ ] **P0**: Page displays the business phone number
+  - Phone number is visible and formatted for readability
+  - Phone number is rendered as a clickable `tel:` link that initiates a call on mobile devices
+  - Phone number is displayed as readable text
+
+- [ ] **P0**: Page displays the business physical address
+  - Full mailing address is displayed in a standard, readable format
+  - Address is presented as plain text (not solely as an image)
+
+- [ ] **P0**: Page is fully responsive across common device sizes
+  - Layout adapts cleanly to desktop (1024px+), tablet (768px), and mobile (375px) viewports
+  - No horizontal scrolling on any viewport
+  - Contact details remain legible and tappable at all sizes
+
+- [ ] **P1**: Contact details are scannable and visually organized
+  - Each contact method (email, phone, address) is visually distinct and separated
+  - A visitor can identify all available contact methods within 5 seconds of viewing the page
+  - Clear labels or headings distinguish each contact method
+
+- [ ] **P2**: Semantic page structure supports accessibility
+  - Page uses proper heading hierarchy (single h1, logical h2/h3 nesting)
+  - Interactive elements (links) are keyboard-navigable and have accessible labels
+  - Sufficient color contrast for all text elements
+
+## Dependencies
+
+- **Home Page** ([home-page.md](home-page.md)): The Contact page is a secondary page that visitors typically navigate to from the home page. Navigation between pages should be consistent.
+
+## Assumptions & Risks
+
+**Assumptions:**
+
+- The business has a single set of contact details (one email, one phone number, one address) to display.
+- Contact information is stable and changes infrequently; developer-managed updates are acceptable.
+- Static content is acceptable for the initial version.
+
+**Key risks:**
+
+- **Content readiness:** The page requires finalized contact details before launch. Mitigation: use realistic placeholder content during development so layout and structure can be validated independently.
+- **Spam exposure:** Displaying email addresses and phone numbers as plain text exposes them to automated scraping. Mitigation: accept this tradeoff for usability in the initial version; obfuscation techniques can be added later if spam becomes a problem.
+
+## Success Metrics
+
+1. Visitors can identify at least one contact method (email, phone, or address) within 5 seconds of viewing the page.
+2. The page renders correctly and is fully usable across desktop, tablet, and mobile viewports.
+3. All clickable contact methods (`mailto:` and `tel:` links) function correctly on their respective devices.
+
+## Implementation Context
+
+> 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.