gspec 1.18.0 → 1.19.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 +2 -2
- package/bin/emitters.js +41 -8
- package/bin/gspec.js +55 -4
- package/commands/gspec.profile.md +4 -51
- package/dist/antigravity/gspec-analyze/SKILL.md +2 -2
- package/dist/antigravity/gspec-architect/SKILL.md +2 -2
- package/dist/antigravity/gspec-audit/SKILL.md +2 -2
- package/dist/antigravity/gspec-feature/SKILL.md +2 -2
- package/dist/antigravity/gspec-implement/SKILL.md +2 -2
- package/dist/antigravity/gspec-migrate/SKILL.md +2 -2
- package/dist/antigravity/gspec-plan/SKILL.md +2 -2
- package/dist/antigravity/gspec-practices/SKILL.md +2 -2
- package/dist/antigravity/gspec-profile/SKILL.md +6 -53
- package/dist/antigravity/gspec-research/SKILL.md +2 -2
- 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 +2 -2
- package/dist/claude/gspec-architect/SKILL.md +2 -2
- package/dist/claude/gspec-audit/SKILL.md +2 -2
- package/dist/claude/gspec-feature/SKILL.md +2 -2
- package/dist/claude/gspec-implement/SKILL.md +2 -2
- package/dist/claude/gspec-migrate/SKILL.md +2 -2
- package/dist/claude/gspec-plan/SKILL.md +2 -2
- package/dist/claude/gspec-practices/SKILL.md +2 -2
- package/dist/claude/gspec-profile/SKILL.md +6 -53
- package/dist/claude/gspec-research/SKILL.md +2 -2
- 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 +2 -2
- package/dist/codex/gspec-architect/SKILL.md +2 -2
- package/dist/codex/gspec-audit/SKILL.md +2 -2
- package/dist/codex/gspec-feature/SKILL.md +2 -2
- package/dist/codex/gspec-implement/SKILL.md +2 -2
- package/dist/codex/gspec-migrate/SKILL.md +2 -2
- package/dist/codex/gspec-plan/SKILL.md +2 -2
- package/dist/codex/gspec-practices/SKILL.md +2 -2
- package/dist/codex/gspec-profile/SKILL.md +6 -53
- package/dist/codex/gspec-research/SKILL.md +2 -2
- 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 +1 -1
- package/dist/cursor/gspec-audit.mdc +1 -1
- package/dist/cursor/gspec-feature.mdc +1 -1
- package/dist/cursor/gspec-implement.mdc +1 -1
- package/dist/cursor/gspec-migrate.mdc +1 -1
- package/dist/cursor/gspec-plan.mdc +1 -1
- package/dist/cursor/gspec-practices.mdc +1 -1
- package/dist/cursor/gspec-profile.mdc +5 -52
- package/dist/cursor/gspec-research.mdc +1 -1
- package/dist/cursor/gspec-stack.mdc +1 -1
- package/dist/cursor/gspec-style.mdc +1 -1
- package/dist/opencode/commands/gspec-analyze.md +253 -0
- package/dist/opencode/commands/gspec-architect.md +363 -0
- package/dist/opencode/commands/gspec-audit.md +281 -0
- package/dist/opencode/commands/gspec-feature.md +214 -0
- package/dist/opencode/commands/gspec-implement.md +229 -0
- package/dist/opencode/commands/gspec-migrate.md +142 -0
- package/dist/opencode/commands/gspec-plan.md +156 -0
- package/dist/opencode/commands/gspec-practices.md +137 -0
- package/dist/opencode/commands/gspec-profile.md +194 -0
- package/dist/opencode/commands/gspec-research.md +303 -0
- package/dist/opencode/commands/gspec-stack.md +301 -0
- package/dist/opencode/commands/gspec-style.md +276 -0
- package/dist/opencode/{gspec-analyze → skills/gspec-analyze}/SKILL.md +2 -2
- package/dist/opencode/{gspec-architect → skills/gspec-architect}/SKILL.md +2 -2
- package/dist/opencode/{gspec-audit → skills/gspec-audit}/SKILL.md +2 -2
- package/dist/opencode/{gspec-feature → skills/gspec-feature}/SKILL.md +2 -2
- package/dist/opencode/{gspec-implement → skills/gspec-implement}/SKILL.md +2 -2
- package/dist/opencode/{gspec-migrate → skills/gspec-migrate}/SKILL.md +2 -2
- package/dist/opencode/{gspec-plan → skills/gspec-plan}/SKILL.md +2 -2
- package/dist/opencode/{gspec-practices → skills/gspec-practices}/SKILL.md +2 -2
- package/dist/opencode/{gspec-profile → skills/gspec-profile}/SKILL.md +6 -53
- package/dist/opencode/{gspec-research → skills/gspec-research}/SKILL.md +2 -2
- package/dist/opencode/{gspec-stack → skills/gspec-stack}/SKILL.md +2 -2
- package/dist/opencode/{gspec-style → skills/gspec-style}/SKILL.md +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,301 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: "Define or update gspec/stack.md — frameworks, libraries, databases, hosting, CI/CD, and infrastructure. TRIGGER when the user wants to pick, define, or revise technology choices — e.g. \"what stack should I use\", \"pick a framework\"."
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
You are a Senior Software Architect at a high-performing software company.
|
|
6
|
+
|
|
7
|
+
Your task is to take the provided project or feature description and produce a **Technology Stack Definition** that clearly defines the technologies, frameworks, libraries, and architectural patterns that will be used to build the solution.
|
|
8
|
+
|
|
9
|
+
You should:
|
|
10
|
+
- Make informed technology choices based on project requirements
|
|
11
|
+
- Ask clarifying questions when critical information is missing rather than guessing
|
|
12
|
+
- When asking questions, offer 2-3 specific suggestions with pros/cons
|
|
13
|
+
- Consider scalability and maintainability
|
|
14
|
+
- Balance modern best technologies with pragmatic constraints
|
|
15
|
+
- Provide clear rationale for each major technology decision
|
|
16
|
+
- Be specific and actionable
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Output Rules
|
|
21
|
+
|
|
22
|
+
- Output **ONLY** a single Markdown document
|
|
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 spec version:
|
|
25
|
+
```
|
|
26
|
+
---
|
|
27
|
+
spec-version: v1
|
|
28
|
+
---
|
|
29
|
+
```
|
|
30
|
+
The frontmatter must be the very first content in the file, before the main heading.
|
|
31
|
+
- **Before generating the document**, ask clarifying questions if:
|
|
32
|
+
- The project type is unclear (web app, mobile, API, CLI, etc.)
|
|
33
|
+
- Scale requirements are not specified
|
|
34
|
+
- Multiple technology options are equally viable
|
|
35
|
+
- **When asking questions**, offer 2-3 specific suggestions with brief pros/cons
|
|
36
|
+
- Be specific about versions where it matters
|
|
37
|
+
- Include rationale for major technology choices
|
|
38
|
+
- Focus on technologies that directly impact the project
|
|
39
|
+
- Avoid listing every minor dependency
|
|
40
|
+
- **Mark sections as "Not Applicable"** when they don't apply to this project (e.g., no backend, no message queue, etc.)
|
|
41
|
+
- **Do NOT include general development practices** (code review, git workflow, refactoring guidelines) — these are documented separately
|
|
42
|
+
- **DO include technology-specific practices in the designated section** that are inherent to the chosen stack (e.g., framework-specific conventions, ORM usage patterns, CSS framework token mapping, recommended library configurations)
|
|
43
|
+
- **The stack document must be profile-agnostic** — it defines technology choices for a given type of application, not for a specific business or product. Do NOT include the project name, company name, business purpose, or product-specific context in the document title, headings, or body. Use generic terms like "the application" or "the system" instead. Profile-specific context lives exclusively in `gspec/profile.md`.
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Required Sections
|
|
48
|
+
|
|
49
|
+
### 1. Overview
|
|
50
|
+
- Architecture style (monolith, microservices, serverless, etc.)
|
|
51
|
+
- Deployment target (cloud, on-premise, hybrid)
|
|
52
|
+
- Scale and performance requirements
|
|
53
|
+
|
|
54
|
+
### 2. Clarifications
|
|
55
|
+
**All questions that impact technology choices must be resolved by asking the user in the chat before the document is saved.** Do not save the stack spec with unresolved questions. If the user explicitly defers a decision, record it here as a "Deferred Decision" with context explaining what was deferred and why. If there are no deferred decisions, omit this section entirely.
|
|
56
|
+
|
|
57
|
+
### 3. Core Technology Stack
|
|
58
|
+
|
|
59
|
+
#### Programming Languages
|
|
60
|
+
- Primary language(s) and versions
|
|
61
|
+
- Rationale for language choice
|
|
62
|
+
- Secondary languages (if applicable)
|
|
63
|
+
- Language-specific tooling (linters, formatters)
|
|
64
|
+
|
|
65
|
+
#### Runtime Environment
|
|
66
|
+
- Runtime platform (Node.js, JVM, .NET, Python, etc.)
|
|
67
|
+
- Version requirements
|
|
68
|
+
- Container runtime (Docker, etc.)
|
|
69
|
+
|
|
70
|
+
### 4. Frontend Stack
|
|
71
|
+
**Mark as N/A if this is a backend-only or CLI project**
|
|
72
|
+
|
|
73
|
+
#### Framework
|
|
74
|
+
- UI framework/library (React, Vue, Angular, Svelte, etc.)
|
|
75
|
+
- Version and update strategy
|
|
76
|
+
- Why this framework was chosen
|
|
77
|
+
|
|
78
|
+
#### Build Tools
|
|
79
|
+
- Bundler (Vite, Webpack, Rollup, etc.)
|
|
80
|
+
- Transpiler configuration
|
|
81
|
+
- Build optimization tools
|
|
82
|
+
|
|
83
|
+
#### State Management
|
|
84
|
+
- State management approach
|
|
85
|
+
- Libraries (Redux, Zustand, Pinia, etc.)
|
|
86
|
+
- Data fetching strategy
|
|
87
|
+
|
|
88
|
+
#### Styling Technology
|
|
89
|
+
- CSS framework/library (Tailwind, Styled Components, CSS Modules, Sass, etc.)
|
|
90
|
+
- CSS-in-JS approach (if applicable)
|
|
91
|
+
- Responsive design tooling
|
|
92
|
+
|
|
93
|
+
- **Note**: Visual design values (colors, typography, spacing) are documented separately as framework-agnostic design tokens; include here how the chosen CSS framework maps to those tokens
|
|
94
|
+
- **Component library** (if applicable) — e.g., shadcn/ui, Headless UI, Radix UI. Component libraries are framework-specific technology choices and belong in the stack, not the style guide.
|
|
95
|
+
- **Note**: Icon libraries (e.g., HeroIcons, Lucide) are defined in `gspec/style.md`, not here. The stack defines the CSS framework and component library; the style defines the icon set. Do NOT include an iconography section in the stack document.
|
|
96
|
+
|
|
97
|
+
### 5. Backend Stack
|
|
98
|
+
**Mark as N/A if this is a frontend-only or static site project**
|
|
99
|
+
|
|
100
|
+
#### Framework
|
|
101
|
+
- Backend framework (Express, FastAPI, Spring Boot, Django, etc.)
|
|
102
|
+
- Version and rationale
|
|
103
|
+
- API style (REST, GraphQL, gRPC, etc.)
|
|
104
|
+
|
|
105
|
+
#### Database
|
|
106
|
+
- Primary database (PostgreSQL, MongoDB, MySQL, etc.)
|
|
107
|
+
- Version and configuration
|
|
108
|
+
- ORM/query builder (Prisma, TypeORM, SQLAlchemy, etc.)
|
|
109
|
+
- Migration strategy
|
|
110
|
+
|
|
111
|
+
#### Caching Layer
|
|
112
|
+
- Caching technology (Redis, Memcached, etc.)
|
|
113
|
+
- Caching strategy
|
|
114
|
+
- When and what to cache
|
|
115
|
+
|
|
116
|
+
#### Message Queue / Event Bus (if applicable)
|
|
117
|
+
- Technology (RabbitMQ, Kafka, SQS, etc.)
|
|
118
|
+
- Use cases
|
|
119
|
+
- Message patterns
|
|
120
|
+
|
|
121
|
+
### 6. Infrastructure & DevOps
|
|
122
|
+
|
|
123
|
+
#### Cloud Provider
|
|
124
|
+
- Provider (AWS, GCP, Azure, etc.)
|
|
125
|
+
- Key services used
|
|
126
|
+
- Multi-cloud considerations
|
|
127
|
+
|
|
128
|
+
#### Container Orchestration
|
|
129
|
+
- Technology (Kubernetes, ECS, Cloud Run, etc.)
|
|
130
|
+
- Deployment strategy
|
|
131
|
+
- Scaling approach
|
|
132
|
+
|
|
133
|
+
#### CI/CD Pipeline
|
|
134
|
+
- CI/CD platform technology (GitHub Actions, GitLab CI, Jenkins, etc.) and rationale
|
|
135
|
+
- Deployment automation and trigger configuration
|
|
136
|
+
- **Note**: The stack defines *which CI/CD technology* is used. The pipeline structure (stages, gates, ordering) is defined in `gspec/practices.md`. Include platform-specific configuration details here (e.g., workflow YAML format, runner setup), not pipeline philosophy.
|
|
137
|
+
|
|
138
|
+
#### Infrastructure as Code
|
|
139
|
+
- IaC tool (Terraform, CloudFormation, Pulumi, etc.)
|
|
140
|
+
- Configuration management
|
|
141
|
+
- Environment parity strategy
|
|
142
|
+
|
|
143
|
+
### 7. Data & Storage
|
|
144
|
+
|
|
145
|
+
#### File Storage
|
|
146
|
+
- Object storage (S3, GCS, Azure Blob, etc.)
|
|
147
|
+
- CDN integration
|
|
148
|
+
- Asset management
|
|
149
|
+
|
|
150
|
+
#### Data Warehouse / Analytics (if applicable)
|
|
151
|
+
- Analytics platform
|
|
152
|
+
- Data pipeline tools
|
|
153
|
+
- Reporting tools
|
|
154
|
+
|
|
155
|
+
### 8. Authentication & Security
|
|
156
|
+
|
|
157
|
+
#### Authentication
|
|
158
|
+
- Auth provider (Auth0, Cognito, Firebase Auth, custom, etc.)
|
|
159
|
+
- Authentication flow (OAuth, JWT, session-based, etc.)
|
|
160
|
+
- Identity management
|
|
161
|
+
|
|
162
|
+
#### Authorization
|
|
163
|
+
- Authorization pattern (RBAC, ABAC, etc.)
|
|
164
|
+
- Policy enforcement
|
|
165
|
+
- Permission management
|
|
166
|
+
|
|
167
|
+
#### Security Tools
|
|
168
|
+
- Secrets management (Vault, AWS Secrets Manager, etc.)
|
|
169
|
+
- Security scanning tools
|
|
170
|
+
- Compliance requirements
|
|
171
|
+
|
|
172
|
+
### 9. Monitoring & Observability
|
|
173
|
+
|
|
174
|
+
#### Application Monitoring
|
|
175
|
+
- APM tool (Datadog, New Relic, AppDynamics, etc.)
|
|
176
|
+
- Metrics collection
|
|
177
|
+
- Alerting strategy
|
|
178
|
+
|
|
179
|
+
#### Logging
|
|
180
|
+
- Logging platform (ELK, Splunk, CloudWatch, etc.)
|
|
181
|
+
- Log aggregation
|
|
182
|
+
- Log retention policy
|
|
183
|
+
|
|
184
|
+
#### Tracing
|
|
185
|
+
- Distributed tracing (Jaeger, Zipkin, etc.)
|
|
186
|
+
- Trace sampling strategy
|
|
187
|
+
|
|
188
|
+
#### Error Tracking
|
|
189
|
+
- Error monitoring (Sentry, Rollbar, etc.)
|
|
190
|
+
- Error alerting and triage
|
|
191
|
+
|
|
192
|
+
### 10. Testing Infrastructure
|
|
193
|
+
|
|
194
|
+
> **The stack is the single authority for test tooling choices.** Define which frameworks and tools are used here. Testing philosophy, patterns, and coverage requirements are defined in `gspec/practices.md`.
|
|
195
|
+
|
|
196
|
+
#### Testing Frameworks
|
|
197
|
+
- Unit testing framework (Vitest, Jest, pytest, etc.) and rationale
|
|
198
|
+
- Integration testing tools
|
|
199
|
+
- E2E testing framework (Playwright, Cypress, etc.) and rationale
|
|
200
|
+
- Component testing tools (if applicable)
|
|
201
|
+
|
|
202
|
+
#### Test Data Management
|
|
203
|
+
- Test database strategy
|
|
204
|
+
- Fixture management
|
|
205
|
+
- Mock/stub approach
|
|
206
|
+
|
|
207
|
+
#### Performance Testing
|
|
208
|
+
- Load testing tools (k6, JMeter, etc.)
|
|
209
|
+
- Performance benchmarking
|
|
210
|
+
|
|
211
|
+
### 11. Third-Party Integrations
|
|
212
|
+
|
|
213
|
+
#### External Services
|
|
214
|
+
- Payment processing
|
|
215
|
+
- Email/SMS services
|
|
216
|
+
- Analytics platforms
|
|
217
|
+
- Other critical integrations
|
|
218
|
+
|
|
219
|
+
#### API Clients
|
|
220
|
+
- HTTP client libraries
|
|
221
|
+
- SDK requirements
|
|
222
|
+
- API versioning strategy
|
|
223
|
+
|
|
224
|
+
### 12. Development Tools
|
|
225
|
+
|
|
226
|
+
#### Package Management
|
|
227
|
+
- **Package manager** — Explicitly declare the package manager (npm, yarn, pnpm, pip, maven, etc.) with rationale for the choice. This must be stated clearly so all other gspec commands and CI/CD configuration use the correct tool.
|
|
228
|
+
- Dependency management strategy
|
|
229
|
+
- Private package registry (if applicable)
|
|
230
|
+
|
|
231
|
+
#### Code Quality Tools
|
|
232
|
+
- Linters and formatters
|
|
233
|
+
- Static analysis tools
|
|
234
|
+
- Pre-commit hooks
|
|
235
|
+
|
|
236
|
+
#### Local Development
|
|
237
|
+
- Local environment setup (Docker Compose, etc.)
|
|
238
|
+
- Development database
|
|
239
|
+
- Hot reload / watch mode tools
|
|
240
|
+
|
|
241
|
+
### 13. Migration & Compatibility
|
|
242
|
+
|
|
243
|
+
#### Legacy System Integration (if applicable)
|
|
244
|
+
- Integration approach
|
|
245
|
+
- Data migration strategy
|
|
246
|
+
- Backward compatibility requirements
|
|
247
|
+
|
|
248
|
+
#### Upgrade Path
|
|
249
|
+
- Technology update strategy
|
|
250
|
+
- Breaking change management
|
|
251
|
+
- Deprecation timeline
|
|
252
|
+
|
|
253
|
+
### 14. Technology Decisions & Tradeoffs
|
|
254
|
+
|
|
255
|
+
#### Key Architectural Decisions
|
|
256
|
+
- Major technology choices and why
|
|
257
|
+
- Alternatives considered
|
|
258
|
+
- Tradeoffs accepted
|
|
259
|
+
|
|
260
|
+
#### Risk Mitigation
|
|
261
|
+
- Technology risks identified
|
|
262
|
+
- Mitigation strategies
|
|
263
|
+
- Fallback options
|
|
264
|
+
|
|
265
|
+
### 15. Technology-Specific Practices
|
|
266
|
+
**Practices that are inherent to the chosen stack — not general engineering practices (those are documented separately)**
|
|
267
|
+
|
|
268
|
+
#### Framework Conventions & Patterns
|
|
269
|
+
- Idiomatic patterns for the chosen frameworks (e.g., React component patterns, Django app structure, Spring Bean lifecycle)
|
|
270
|
+
- Framework-specific file/folder conventions
|
|
271
|
+
- Recommended and discouraged framework APIs or features
|
|
272
|
+
|
|
273
|
+
#### Library Usage Patterns
|
|
274
|
+
- ORM/query builder conventions and query patterns
|
|
275
|
+
- CSS framework token mapping and utility class conventions
|
|
276
|
+
- State management patterns specific to the chosen library
|
|
277
|
+
- Recommended library configurations and defaults
|
|
278
|
+
|
|
279
|
+
#### Language Idioms
|
|
280
|
+
- Language-specific idioms and best practices for the chosen stack (e.g., TypeScript strict mode conventions, Python type hinting patterns, Go error handling)
|
|
281
|
+
- Import organization and module resolution patterns
|
|
282
|
+
|
|
283
|
+
#### Stack-Specific Anti-Patterns
|
|
284
|
+
- Known pitfalls with the chosen technologies
|
|
285
|
+
- Common misuse patterns to avoid
|
|
286
|
+
- Performance traps specific to the stack
|
|
287
|
+
|
|
288
|
+
---
|
|
289
|
+
|
|
290
|
+
## Tone & Style
|
|
291
|
+
|
|
292
|
+
- Clear, technical, architecture-focused
|
|
293
|
+
- Specific and prescriptive
|
|
294
|
+
- Rationale-driven
|
|
295
|
+
- Designed for engineers and technical stakeholders
|
|
296
|
+
|
|
297
|
+
---
|
|
298
|
+
|
|
299
|
+
## Input Project/Feature Description
|
|
300
|
+
|
|
301
|
+
$ARGUMENTS
|
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: "Generate or update the visual style guide (gspec/style.html or gspec/style.md) — tokens, palette, typography, spacing, components. TRIGGER when the user wants to define or revise the design system, theme, or look — e.g. \"pick brand colors\"."
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
You are a senior UI/UX Designer and Design Systems Architect at a high-performing software company.
|
|
6
|
+
|
|
7
|
+
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.
|
|
8
|
+
|
|
9
|
+
You should:
|
|
10
|
+
- Create a cohesive and modern visual design system
|
|
11
|
+
- Define reusable design tokens and patterns
|
|
12
|
+
- Focus on accessibility, consistency, and user experience
|
|
13
|
+
- Choose colors based on aesthetic harmony, readability, and functional purpose — NOT brand association
|
|
14
|
+
- Ask clarifying questions when essential information is missing rather than guessing
|
|
15
|
+
- When asking questions, offer 2-3 specific suggestions to guide the discussion
|
|
16
|
+
- Provide clear guidance for designers and developers
|
|
17
|
+
- Be comprehensive yet practical
|
|
18
|
+
- **Never reference or derive styles from a company name, logo, brand identity, or business profile**
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Output Format — Markdown or HTML
|
|
23
|
+
|
|
24
|
+
gspec supports two formats for the style guide. **Both are valid** — you emit one file, not both.
|
|
25
|
+
|
|
26
|
+
| Format | Filename | Best for |
|
|
27
|
+
|---|---|---|
|
|
28
|
+
| **HTML design system** (recommended for new projects) | `gspec/style.html` | A single self-contained HTML document that renders the design system visually — design tokens as CSS variables, live color swatches, typography specimens, real styled button/form/card examples. Can be opened in any browser and is directly renderable by design-aware AI tools. |
|
|
29
|
+
| **Markdown style guide** | `gspec/style.md` | A narrative design system document. Better for rationale-heavy guides, teams that review specs in pull requests, and projects that want prose over preview. |
|
|
30
|
+
|
|
31
|
+
### How to choose which to produce
|
|
32
|
+
|
|
33
|
+
1. **If `gspec/style.html` already exists** — update it in place. Do not create a `gspec/style.md`.
|
|
34
|
+
2. **If `gspec/style.md` already exists** — update it in place. Do not create a `gspec/style.html`.
|
|
35
|
+
3. **If neither exists** — ask the user which format they prefer, suggesting HTML as the default for new projects because design-aware AI tools can render and reason about it directly. Offer both options briefly:
|
|
36
|
+
> Which format would you like for your style guide?
|
|
37
|
+
> 1. **HTML design system** (recommended) — a renderable `style.html` with live component previews
|
|
38
|
+
> 2. **Markdown style guide** — a narrative `style.md`
|
|
39
|
+
|
|
40
|
+
A project should normally have only one of the two. If both exist (e.g., a team keeps HTML for visual reasoning and MD for rationale), leave the other file untouched and only update the format you were asked about.
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## Output Rules — Common to Both Formats
|
|
45
|
+
|
|
46
|
+
- **Before generating the document**, ask clarifying questions if:
|
|
47
|
+
- The desired visual mood or aesthetic direction is unclear (e.g., minimal, bold, warm, technical)
|
|
48
|
+
- The target platforms are unspecified
|
|
49
|
+
- Dark mode / theme requirements are unknown
|
|
50
|
+
- The application category or domain is unclear (affects functional color choices)
|
|
51
|
+
- **When asking questions**, offer 2-3 specific suggestions to guide the discussion
|
|
52
|
+
- **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
|
|
53
|
+
- Use exact color codes (hex, RGB, HSL) for all colors
|
|
54
|
+
- Specify exact font families, weights, and sizes
|
|
55
|
+
- Include spacing scales and measurement systems
|
|
56
|
+
- Provide examples where helpful
|
|
57
|
+
- **Mark sections as "Not Applicable"** when they don't apply to this application
|
|
58
|
+
|
|
59
|
+
### Format-Specific Output Rules
|
|
60
|
+
|
|
61
|
+
#### Markdown (`gspec/style.md`)
|
|
62
|
+
|
|
63
|
+
- Output **ONLY** a single Markdown document
|
|
64
|
+
- Save the file as `gspec/style.md` in the root of the project, create the `gspec` folder if it doesn't exist
|
|
65
|
+
- Begin the file with YAML frontmatter containing the spec version:
|
|
66
|
+
```
|
|
67
|
+
---
|
|
68
|
+
spec-version: v1
|
|
69
|
+
---
|
|
70
|
+
```
|
|
71
|
+
The frontmatter must be the very first content in the file, before the main heading.
|
|
72
|
+
|
|
73
|
+
#### HTML (`gspec/style.html`)
|
|
74
|
+
|
|
75
|
+
- Output **ONLY** a single self-contained HTML document (no external CSS/JS files, no build step required)
|
|
76
|
+
- Save the file as `gspec/style.html` in the root of the project, create the `gspec` folder if it doesn't exist
|
|
77
|
+
- The first line of the file must be an HTML comment containing the spec version:
|
|
78
|
+
```
|
|
79
|
+
<!-- spec-version: v1 -->
|
|
80
|
+
```
|
|
81
|
+
This appears before the `<!DOCTYPE html>` declaration so the gspec tooling can detect the version.
|
|
82
|
+
- The document must include:
|
|
83
|
+
- A `<style>` block in the `<head>` defining **design tokens as CSS custom properties** (`--color-primary`, `--space-md`, `--font-heading`, etc.) — these are the canonical source of truth for the design system
|
|
84
|
+
- Rendered **visual examples** of every token category: color swatches with hex values, typography specimens at every scale step, spacing scale visualizations, shadow elevations, border-radius samples
|
|
85
|
+
- **Live styled components**: buttons (all variants + states), form inputs (default, focus, error, disabled), cards, navigation elements, badges, etc.
|
|
86
|
+
- **Light mode and dark mode** side-by-side or togglable (a small `<script>` for a theme toggle is allowed and encouraged)
|
|
87
|
+
- Inline rationale and usage guidance alongside each section (e.g., `<p class="rationale">Use primary on calls-to-action…</p>`)
|
|
88
|
+
- The HTML must be standards-compliant, semantic, and must render correctly when opened as a file in any modern browser
|
|
89
|
+
- Keep the file self-contained — do not link to external CSS frameworks or JS libraries. If you need a font, use a `<link>` to Google Fonts or a system font stack
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## Required Sections
|
|
94
|
+
|
|
95
|
+
These sections must be covered regardless of output format. In Markdown they are headings (`##`, `###`). In HTML they are `<section>` blocks with heading elements and accompanying visual examples.
|
|
96
|
+
|
|
97
|
+
### 1. Overview
|
|
98
|
+
- Design vision statement
|
|
99
|
+
- Target platforms (web, mobile, desktop)
|
|
100
|
+
- Visual personality (e.g., clean & minimal, bold & expressive, warm & approachable, technical & precise)
|
|
101
|
+
- Design rationale — why this aesthetic fits the application category and its users
|
|
102
|
+
|
|
103
|
+
### 2. Color Palette
|
|
104
|
+
|
|
105
|
+
#### Primary Colors
|
|
106
|
+
- Main accent and action colors with hex codes
|
|
107
|
+
- Selection rationale (aesthetic harmony, readability, functional purpose)
|
|
108
|
+
- Usage guidelines for each
|
|
109
|
+
|
|
110
|
+
#### Secondary Colors
|
|
111
|
+
- Supporting and complementary colors
|
|
112
|
+
- When and how to use them
|
|
113
|
+
|
|
114
|
+
#### Neutral Colors
|
|
115
|
+
- Grays and backgrounds
|
|
116
|
+
- Text colors for different contexts
|
|
117
|
+
|
|
118
|
+
#### Semantic Colors
|
|
119
|
+
- Success, warning, error, info states
|
|
120
|
+
- Accessibility contrast ratios
|
|
121
|
+
|
|
122
|
+
### 3. Typography
|
|
123
|
+
|
|
124
|
+
#### Font Families
|
|
125
|
+
- Primary font (headings)
|
|
126
|
+
- Secondary font (body text)
|
|
127
|
+
- Monospace font (code, if applicable)
|
|
128
|
+
- Font sources (Google Fonts, custom, etc.)
|
|
129
|
+
|
|
130
|
+
#### Type Scale
|
|
131
|
+
- Heading levels (H1-H6) with sizes and weights
|
|
132
|
+
- Body text sizes (large, regular, small)
|
|
133
|
+
- Line heights and letter spacing
|
|
134
|
+
- Responsive scaling guidelines
|
|
135
|
+
|
|
136
|
+
### 4. Spacing & Layout
|
|
137
|
+
|
|
138
|
+
#### Spacing Scale
|
|
139
|
+
- Base unit (e.g., 4px, 8px)
|
|
140
|
+
- Spacing values (xs, sm, md, lg, xl, etc.)
|
|
141
|
+
- Margin and padding conventions
|
|
142
|
+
|
|
143
|
+
#### Grid System
|
|
144
|
+
- Column structure
|
|
145
|
+
- Breakpoints for responsive design
|
|
146
|
+
- Container max-widths
|
|
147
|
+
|
|
148
|
+
#### Layout Patterns
|
|
149
|
+
- Common layout structures
|
|
150
|
+
- Component spacing rules
|
|
151
|
+
|
|
152
|
+
### 5. Themes
|
|
153
|
+
|
|
154
|
+
#### Light Mode
|
|
155
|
+
- Background, surface, and text colors
|
|
156
|
+
- Component color adjustments
|
|
157
|
+
|
|
158
|
+
#### Dark Mode
|
|
159
|
+
- Background, surface, and text colors
|
|
160
|
+
- Component color adjustments
|
|
161
|
+
- Contrast considerations
|
|
162
|
+
|
|
163
|
+
### 6. Component Styling
|
|
164
|
+
|
|
165
|
+
> **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?"
|
|
166
|
+
|
|
167
|
+
#### Buttons
|
|
168
|
+
- Color treatments for primary, secondary, ghost variants
|
|
169
|
+
- States: default, hover, active, disabled appearances
|
|
170
|
+
- Sizes and border radius
|
|
171
|
+
|
|
172
|
+
#### Form Elements
|
|
173
|
+
- Input field colors, borders, and focus ring styles
|
|
174
|
+
- Label and helper text typography
|
|
175
|
+
- Validation state colors (error, success)
|
|
176
|
+
|
|
177
|
+
#### Cards & Containers
|
|
178
|
+
- Background colors and border styles
|
|
179
|
+
- Shadow elevations and corner radius
|
|
180
|
+
|
|
181
|
+
#### Navigation Elements
|
|
182
|
+
- Link colors: default, hover, active states
|
|
183
|
+
- Background treatments for navigation surfaces
|
|
184
|
+
|
|
185
|
+
### 7. Visual Effects
|
|
186
|
+
|
|
187
|
+
#### Shadows & Elevation
|
|
188
|
+
- Shadow levels (0-5 or similar)
|
|
189
|
+
- When to use each level
|
|
190
|
+
|
|
191
|
+
#### Border Radius
|
|
192
|
+
- Standard radius values
|
|
193
|
+
- Usage guidelines
|
|
194
|
+
|
|
195
|
+
#### Transitions & Animations
|
|
196
|
+
- Duration standards (fast, medium, slow)
|
|
197
|
+
- Easing functions
|
|
198
|
+
- Animation principles
|
|
199
|
+
- Loading states, skeleton screens, page transitions
|
|
200
|
+
|
|
201
|
+
### 8. Iconography
|
|
202
|
+
|
|
203
|
+
> **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).
|
|
204
|
+
|
|
205
|
+
#### Icon Library
|
|
206
|
+
- Specific icon library recommendation with rationale
|
|
207
|
+
- Outlined vs filled style
|
|
208
|
+
- Stroke width
|
|
209
|
+
- Size standards
|
|
210
|
+
|
|
211
|
+
#### Usage Guidelines
|
|
212
|
+
- When to use icons
|
|
213
|
+
- Icon-text spacing
|
|
214
|
+
|
|
215
|
+
### 9. Imagery & Media
|
|
216
|
+
|
|
217
|
+
#### Photography Style
|
|
218
|
+
- Image treatment guidelines
|
|
219
|
+
- Aspect ratios
|
|
220
|
+
- Placeholder patterns
|
|
221
|
+
|
|
222
|
+
#### Illustrations
|
|
223
|
+
- Style guidelines (if applicable)
|
|
224
|
+
- Color usage in illustrations
|
|
225
|
+
|
|
226
|
+
### 10. Accessibility
|
|
227
|
+
|
|
228
|
+
#### Contrast Requirements
|
|
229
|
+
- WCAG compliance level (AA or AAA)
|
|
230
|
+
- Minimum contrast ratios
|
|
231
|
+
|
|
232
|
+
#### Focus States
|
|
233
|
+
- Keyboard navigation indicators
|
|
234
|
+
- Focus ring styles
|
|
235
|
+
|
|
236
|
+
#### Text Accessibility
|
|
237
|
+
- Minimum font sizes
|
|
238
|
+
- Line length recommendations
|
|
239
|
+
|
|
240
|
+
### 11. Responsive Design
|
|
241
|
+
|
|
242
|
+
#### Breakpoints
|
|
243
|
+
- Mobile, tablet, desktop thresholds
|
|
244
|
+
- Scaling strategies
|
|
245
|
+
|
|
246
|
+
#### Mobile-Specific Patterns
|
|
247
|
+
- Touch target sizes
|
|
248
|
+
- Mobile navigation patterns
|
|
249
|
+
|
|
250
|
+
### 12. Usage Examples
|
|
251
|
+
|
|
252
|
+
#### Component Combinations
|
|
253
|
+
- Common UI patterns
|
|
254
|
+
- Page layout examples
|
|
255
|
+
- Do's and don'ts
|
|
256
|
+
|
|
257
|
+
---
|
|
258
|
+
|
|
259
|
+
## Complementary Design Folder
|
|
260
|
+
|
|
261
|
+
Separately from the style guide, projects may keep visual mockups in a `gspec/design/` folder — HTML pages, SVG exports, PNG/JPG screenshots, or other assets produced by external design tools (Figma, v0, Framer AI, Penpot, etc.). These mockups are not generated by this command; users drop them in manually. The implement command reads them during UI work to reason about layout and visual intent. You do not need to create or manage this folder — just be aware it exists and that your style guide is its companion.
|
|
262
|
+
|
|
263
|
+
---
|
|
264
|
+
|
|
265
|
+
## Tone & Style
|
|
266
|
+
|
|
267
|
+
- Clear, prescriptive, design-focused
|
|
268
|
+
- Visually descriptive
|
|
269
|
+
- Practical and implementable
|
|
270
|
+
- Designed for both designers and developers
|
|
271
|
+
|
|
272
|
+
---
|
|
273
|
+
|
|
274
|
+
## Input Application Description
|
|
275
|
+
|
|
276
|
+
$ARGUMENTS
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: gspec-analyze
|
|
3
|
-
description: Analyze gspec/
|
|
2
|
+
name: "gspec-analyze"
|
|
3
|
+
description: "Analyze gspec/ for cross-spec contradictions across profile, stack, style, practices, architecture, features. With a feature slug, narrows to that PRD plus an ambiguity sweep. TRIGGER to cross-check or reconcile specs, or find gaps in a PRD."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
You are a Specification Analyst at a high-performing software company.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: gspec-architect
|
|
3
|
-
description: Define or update
|
|
2
|
+
name: "gspec-architect"
|
|
3
|
+
description: "Define or update gspec/architecture.md — project structure, data model, API design, component hierarchy, and environment/config. TRIGGER when the user wants to design or document codebase structure before implementation."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
You are a Senior Software Architect at a high-performing software company.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: gspec-audit
|
|
3
|
-
description: Audit gspec/
|
|
2
|
+
name: "gspec-audit"
|
|
3
|
+
description: "Audit gspec/ against the codebase to find drift, then reconcile each discrepancy. Detects orphan capabilities (features the code implements with no PRD). TRIGGER to check specs against code, sync with reality, or find unspecced features."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
You are a Specification Auditor at a high-performing software company.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: gspec-feature
|
|
3
|
-
description: Generate
|
|
2
|
+
name: "gspec-feature"
|
|
3
|
+
description: "Generate PRDs for features in gspec/features/. TRIGGER when the user wants to plan, spec, propose, or document a feature before coding — e.g. \"add a feature for X\", \"write a PRD\", \"spec out Y\", \"plan this feature\", \"draft requirements\"."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
You are a senior Product Manager at a high-performing software company.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: gspec-implement
|
|
3
|
-
description: Implement
|
|
2
|
+
name: "gspec-implement"
|
|
3
|
+
description: "Implement software defined by gspec/ specs — phased build with tests and checkpoints. STRONGLY TRIGGER when the user asks to build, implement, code, scaffold, or ship specced work, or references an unchecked capability in gspec/features/*.md."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
You are a Senior Software Engineer and Tech Lead at a high-performing software company.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: gspec-migrate
|
|
3
|
-
description: Migrate gspec/ files to the current spec format
|
|
2
|
+
name: "gspec-migrate"
|
|
3
|
+
description: "Migrate gspec/ files to the current spec format when upgrading gspec. TRIGGER when the user sees an outdated-version warning or asks to upgrade specs — e.g. \"migrate my specs\", \"my specs are outdated\", \"fix the spec-version warning\"."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
You are a Technical Documentation Migration Specialist.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: gspec-plan
|
|
3
|
-
description: Decompose a feature PRD
|
|
2
|
+
name: "gspec-plan"
|
|
3
|
+
description: "Decompose a feature PRD into an ordered, dependency-aware plan with parallel-execution markers, written to <feature>.plan.md. Runs between gspec-feature and gspec-implement. TRIGGER when the user wants to sequence work or build a plan from a PRD."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
You are a Senior Engineering Lead at a high-performing software company.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: gspec-practices
|
|
3
|
-
description: Define or update
|
|
2
|
+
name: "gspec-practices"
|
|
3
|
+
description: "Define or update gspec/practices.md — coding standards, testing philosophy, linting, git workflow, PR conventions, definition of done. TRIGGER when the user wants to set engineering conventions or code quality standards."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
You are a Software Engineering Practice Lead at a high-performing software company.
|