@pheem49/mint 1.9.0 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/Cargo.lock +55 -3
  2. package/Cargo.toml +2 -1
  3. package/Release_Note.md +285 -140
  4. package/bin/mint +0 -0
  5. package/crates/mint-cli/Cargo.toml +1 -0
  6. package/crates/mint-cli/src/actions.rs +233 -0
  7. package/crates/mint-cli/src/agent.rs +287 -43
  8. package/crates/mint-cli/src/gmail.rs +22 -2
  9. package/crates/mint-cli/src/interactive.rs +2888 -0
  10. package/crates/mint-cli/src/main.rs +336 -2854
  11. package/crates/mint-cli/src/markdown.rs +294 -0
  12. package/crates/mint-cli/src/onboard.rs +44 -1
  13. package/crates/mint-cli/src/updater.rs +48 -6
  14. package/crates/mint-core/Cargo.toml +1 -0
  15. package/crates/mint-core/src/agent_loop.rs +1 -0
  16. package/crates/mint-core/src/api_server.rs +376 -13
  17. package/crates/mint-core/src/browser.rs +629 -101
  18. package/crates/mint-core/src/channels.rs +105 -6
  19. package/crates/mint-core/src/chat.rs +52 -4
  20. package/crates/mint-core/src/code_tools.rs +29 -11
  21. package/crates/mint-core/src/config.rs +118 -0
  22. package/crates/mint-core/src/image_gen.rs +294 -33
  23. package/crates/mint-core/src/lib.rs +5 -2
  24. package/crates/mint-core/src/mcp.rs +119 -6
  25. package/crates/mint-core/src/orchestration.rs +133 -11
  26. package/crates/mint-core/src/pictures.rs +64 -1
  27. package/crates/mint-core/src/skills.rs +82 -6
  28. package/crates/mint-core/src/video_gen.rs +235 -0
  29. package/package.json +8 -2
  30. package/shared-modules/luajit/luajit.json +2 -2
  31. package/skills-lock.json +41 -0
  32. package/src/renderer/index-web.html +1 -1
  33. package/src/renderer/index.html +1 -1
  34. package/src/renderer/shared/constants/slashCommands.ts +27 -0
  35. package/src/renderer/shared/platform.ts +3 -0
  36. package/src/renderer/shared/types.ts +4 -0
  37. package/src/renderer/shared/utils/approval.tsx +86 -7
  38. package/src/renderer/shared/utils/markdown.tsx +217 -88
  39. package/src/renderer/shared/utils/slashCommandProcessor.ts +239 -0
  40. package/src/renderer/src/components/ChatPanel.tsx +461 -64
  41. package/src/renderer/src/components/DashboardSidebar.tsx +11 -2
  42. package/src/renderer/src/components/ImageStudioPanel.tsx +87 -4
  43. package/src/renderer/src/components/MintDashboard.tsx +150 -5
  44. package/src/renderer/src/components/PicturesLibrary.tsx +156 -15
  45. package/src/renderer/src/components/Settings/AutomationTab.tsx +316 -18
  46. package/src/renderer/src/components/Settings/GeneralTab.tsx +762 -634
  47. package/src/renderer/src/components/Settings/PluginsTab.tsx +304 -70
  48. package/src/renderer/src/components/Settings/ThemeTab.tsx +6 -1
  49. package/src/renderer/src/components/SettingsWindow.tsx +38 -2
  50. package/src/renderer/src/components/VeoStudioPanel.tsx +549 -0
  51. package/src/renderer/src/css/image-studio.css +106 -0
  52. package/src/renderer/src/css/settings.css +158 -0
  53. package/src/renderer/src/css/styles.css +352 -1
  54. package/src/renderer/src/css/veo-studio.css +626 -0
  55. package/src/renderer/src/index.css +1 -0
  56. package/src/renderer/src/tauri.ts +144 -17
  57. package/src/renderer/src-web/components/ChatPanel.tsx +360 -88
  58. package/src/renderer/src-web/components/DashboardSidebar.tsx +16 -1
  59. package/src/renderer/src-web/components/ImageStudioPanel.tsx +87 -4
  60. package/src/renderer/src-web/components/MintDashboard.tsx +137 -4
  61. package/src/renderer/src-web/components/PicturesLibrary.tsx +155 -15
  62. package/src/renderer/src-web/components/Settings/AutomationTab.tsx +316 -18
  63. package/src/renderer/src-web/components/Settings/GeneralTab.tsx +762 -629
  64. package/src/renderer/src-web/components/Settings/PluginsTab.tsx +304 -70
  65. package/src/renderer/src-web/components/Settings/ThemeTab.tsx +6 -1
  66. package/src/renderer/src-web/components/SettingsWindow.tsx +35 -2
  67. package/src/renderer/src-web/components/VeoStudioPanel.tsx +549 -0
  68. package/src/renderer/src-web/css/image-studio.css +106 -0
  69. package/src/renderer/src-web/css/settings.css +158 -0
  70. package/src/renderer/src-web/css/styles.css +353 -1
  71. package/src/renderer/src-web/css/veo-studio.css +650 -0
  72. package/src/renderer/src-web/index.css +1 -0
  73. package/src/renderer/src-web/tauri.ts +135 -16
  74. package/src-tauri/src/lib.rs +114 -8
  75. package/src-tauri/src/webhooks.rs +45 -31
  76. package/src-tauri/src/workflows.rs +1 -0
  77. package/src-tauri/tauri.conf.json +1 -1
  78. package/temp_gridgeist/AGENTS.md +8 -0
  79. package/temp_gridgeist/CHANGELOG.md +130 -0
  80. package/temp_gridgeist/LICENSE +21 -0
  81. package/temp_gridgeist/README.md +323 -0
  82. package/temp_gridgeist/README.th.md +325 -0
  83. package/temp_gridgeist/skills/gridgeist/SKILL.md +88 -0
  84. package/temp_gridgeist/skills/gridgeist/agents/openai.yaml +9 -0
  85. package/temp_gridgeist/skills/gridgeist/assets/gridgeist-small.svg +10 -0
  86. package/temp_gridgeist/skills/gridgeist/assets/gridgeist.png +0 -0
  87. package/temp_gridgeist/skills/gridgeist/assets/gridgeist.svg +18 -0
  88. package/temp_gridgeist/skills/gridgeist/references/design-language.md +88 -0
  89. package/temp_gridgeist/skills/gridgeist/references/review-checklist.md +128 -0
  90. package/temp_gridgeist/skills/gridgeist/references/system-contract.md +109 -0
@@ -0,0 +1,130 @@
1
+ # Changelog
2
+
3
+ All notable changes to Gridgeist are documented here. This project follows
4
+ [Semantic Versioning](https://semver.org/).
5
+
6
+ ## [Unreleased]
7
+
8
+ ## [1.2.0] - 2026-07-20
9
+
10
+ ### Added
11
+
12
+ - Added a conditional system-contract reference covering semantic color,
13
+ typography, layout, spacing, component grammar, states, media, motion, and
14
+ proportional DESIGN.md interoperability.
15
+ - Added paired English and Thai behavioral evaluation coverage for design-system
16
+ coherence and persistent-artifact boundaries.
17
+
18
+ ### Changed
19
+
20
+ - Strengthened the core workflow and review checklist to reconcile existing
21
+ design-system sources, define reusable component rules, and review color/theming
22
+ and component coherence separately.
23
+ - Clarified that product content alone cannot make an underspecified broad redesign
24
+ brand-derived, and prohibited system definition or implementation edits while its
25
+ direction remains provisional.
26
+ - Made overlapping broad visual-skill ownership an explicit pre-thesis gate instead
27
+ of allowing the companion to be silently ignored or blended.
28
+ - Documented optional DESIGN.md intake and output in the English and Thai usage
29
+ guidance without making it a dependency.
30
+
31
+ ## [1.1.2] - 2026-07-18
32
+
33
+ ### Added
34
+
35
+ - Added compact companion coordination so Gridgeist remains the default owner of
36
+ product and visual direction without requiring optional context, asset, audit, or
37
+ verification capabilities.
38
+ - Added paired English and Thai evaluation scenarios for overlapping art-direction
39
+ skills, internationalization and user preferences, interaction alternatives, and
40
+ bounded performance evidence.
41
+
42
+ ### Changed
43
+
44
+ - Strengthened the review checklist for container resilience, language direction,
45
+ forced colors, unobscured focus, non-drag alternatives, media stability, and
46
+ evidence-bounded performance review.
47
+ - Documented optional companion workflows and role boundaries in the English and
48
+ Thai READMEs without making them installation dependencies.
49
+
50
+ ## [1.1.1] - 2026-07-18
51
+
52
+ ### Added
53
+
54
+ - Added isolated live smoke tests for Codex plugin clean installation, marketplace
55
+ refresh, reinstall, and universal installer updates on release tags and manual CI
56
+ runs.
57
+ - Added a bilingual direction-decision fixture, paired ambiguous/explicit scenarios,
58
+ and preserved raw regression outputs for the new collaboration boundary.
59
+
60
+ ### Changed
61
+
62
+ - Reordered the English and Thai Quickstarts so the Codex plugin and universal
63
+ installer lead, with repository cloning and manual copying kept as fallback.
64
+ - Added a conditional direction-alignment gate for broad, underspecified Create and
65
+ Redesign work without slowing explicit directions, Reviews, or narrow repairs.
66
+
67
+ ## [1.1.0] - 2026-07-16
68
+
69
+ ### Added
70
+
71
+ - Added explicit update instructions for Codex plugins, `npx skills`, Git clones,
72
+ and manual installations in English and Thai documentation.
73
+ - Added dependency-free release validation and GitHub Actions checks for skill,
74
+ plugin, marketplace, documentation, and bilingual evaluation alignment.
75
+
76
+ ### Changed
77
+
78
+ - Reframed Gridgeist around product-native structure so grids may be visible,
79
+ quiet, or invisible according to the established brand.
80
+ - Added explicit adaptation guidance for image-led, playful, technical,
81
+ content-heavy, and transactional interfaces.
82
+ - Added interaction-state inventory, verification evidence, and claim-integrity
83
+ requirements to the core workflow and review checklist.
84
+ - Strengthened behavioral evaluation guidance with repeat runs,
85
+ scenario-level evidence, implementation checks, and trigger boundaries.
86
+ - Made the documented Windows validation command explicitly use UTF-8.
87
+ - Pinned the public marketplace entry to the v1.1.0 release tag.
88
+
89
+ ## [1.0.1] - 2026-07-14
90
+
91
+ ### Fixed
92
+
93
+ - Added a Git-backed Codex marketplace catalog for two-command installation.
94
+ - Moved the installable skill to the standard `skills/gridgeist/` plugin path
95
+ so Codex plugin validation and marketplace installation use the same source.
96
+
97
+ ## [1.0.0] - 2026-07-13
98
+
99
+ Gridgeist's first stable release.
100
+
101
+ ### Added
102
+
103
+ - A reproducible Tracefield case study with the original baseline, exact prompt,
104
+ six-part rubric, verification evidence, and stated limitations.
105
+ - A dedicated case-study page and a field-proof section on the project website.
106
+ - Direct links from the English and Thai documentation to the live Tracefield
107
+ interface and its source repository.
108
+
109
+ ### Changed
110
+
111
+ - Promoted the Codex plugin manifest from `0.1.0` to `1.0.0` to mark the public
112
+ skill interface and its Create, Redesign, and Review workflows as stable.
113
+
114
+ ## [0.1.0] - 2026-07-13
115
+
116
+ ### Added
117
+
118
+ - Initial Gridgeist agent skill with Create, Redesign, and Review workflows.
119
+ - Codex plugin manifest and agent-facing interface metadata.
120
+ - English and Thai documentation and evaluation prompts.
121
+ - Interactive examples and a responsive GitHub Pages website.
122
+
123
+ [Unreleased]: https://github.com/ohmiler/gridgeist/compare/v1.2.0...HEAD
124
+ [1.2.0]: https://github.com/ohmiler/gridgeist/compare/v1.1.2...v1.2.0
125
+ [1.1.2]: https://github.com/ohmiler/gridgeist/compare/v1.1.1...v1.1.2
126
+ [1.1.1]: https://github.com/ohmiler/gridgeist/compare/v1.1.0...v1.1.1
127
+ [1.1.0]: https://github.com/ohmiler/gridgeist/compare/v1.0.1...v1.1.0
128
+ [1.0.1]: https://github.com/ohmiler/gridgeist/compare/v1.0.0...v1.0.1
129
+ [1.0.0]: https://github.com/ohmiler/gridgeist/compare/v0.1.0...v1.0.0
130
+ [0.1.0]: https://github.com/ohmiler/gridgeist/releases/tag/v0.1.0
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Miler
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,323 @@
1
+ <p align="center">
2
+ <img src="skills/gridgeist/assets/gridgeist.svg" alt="Gridgeist agent skill for web interface direction" width="240" />
3
+ </p>
4
+
5
+ # Gridgeist
6
+
7
+ **English** · [ภาษาไทย](README.th.md) · [Website](https://ohmiler.github.io/gridgeist/) · [Examples](https://ohmiler.github.io/gridgeist/examples/)
8
+
9
+ Gridgeist is an agent skill for creating, redesigning, and reviewing product-native web interfaces. It adapts structure, typography, imagery, interaction, and product evidence to the established brand, using grids as visible, quiet, or invisible logic. It helps agents move beyond generic AI-generated SaaS patterns while preserving product intent, behavior, responsiveness, and accessibility.
10
+
11
+ ## See the difference
12
+
13
+ This illustrative Northline logistics comparison is rendered from two full HTML/CSS pages with the same product, copy, sample operating data, and viewport. The After page and screenshot were rebuilt with the **Gridgeist v1.2.0** system workflow; Northline and all displayed data are fictional.
14
+
15
+ <table>
16
+ <tr>
17
+ <th width='50%'>Without Gridgeist - generic SaaS</th>
18
+ <th width='50%'>With Gridgeist v1.2.0 - product-native system</th>
19
+ </tr>
20
+ <tr>
21
+ <td><img src='docs/assets/northline-before.png' alt='Generic Northline logistics landing page with centered marketing copy, rounded controls, a chart, and interchangeable metric cards' width='100%' /></td>
22
+ <td><img src='docs/assets/northline-after.png' alt='Gridgeist v1.2.0 Northline concept organized as one operational system with live freight topology, semantic lane states, arrival times, and an explicit priority exception' width='100%' /></td>
23
+ </tr>
24
+ </table>
25
+
26
+ Same content and sample operating data; a different design system. Gridgeist turns the topology, route table, exception, actions, and metrics into one connected operational surface built from product evidence, while labeling the concept honestly. Both README images are browser captures of the working pages. [Open the Before page](https://ohmiler.github.io/gridgeist/readme-showcase/?view=before) or [open the v1.2.0 After page](https://ohmiler.github.io/gridgeist/readme-showcase/?view=after&rev=ab77ceb6).
27
+
28
+ ## What v1.2.0 changes
29
+
30
+ Gridgeist now treats visual decisions as one system, not a sequence of isolated styling choices.
31
+
32
+ | Area | v1.2.0 behavior |
33
+ | --- | --- |
34
+ | System contract | Defines color, typography, layout, spacing, shape, components, states, media, and motion as one compact direction before implementation. |
35
+ | Semantic roles | Connects foundation tokens to semantic roles and component decisions, so contrast and state relationships remain intentional. |
36
+ | Component grammar | Gives related controls and content shared anatomy, variants, density, states, and content-stress rules instead of styling each instance separately. |
37
+ | Direction safety | When the visual thesis is still broad, offers distinct directions and waits for alignment before committing tokens or editing the interface. |
38
+ | Skill coordination | Names one direction owner when multiple UI skills are active, preventing competing visual systems. |
39
+ | Verification | Checks representative widths, overflow, focus, interaction states, themes, and reduced motion—and limits claims to observed evidence. |
40
+
41
+ In practice, the result is more coherent, less generic, and easier to extend without losing the product's identity. The v1.2.0 release was exercised through three English and three Thai system-contract scenarios, independent responsive browser checks, and repaired guardrail tests.
42
+
43
+ ## 60-second Quickstart
44
+
45
+ 1. Install Gridgeist through the primary channel for your agent.
46
+
47
+ For Codex, add the Git marketplace and install the plugin:
48
+
49
+ ```powershell
50
+ codex plugin marketplace add ohmiler/gridgeist
51
+ codex plugin add gridgeist@gridgeist
52
+ ```
53
+
54
+ For Claude Code, Cursor, Gemini CLI, GitHub Copilot, OpenCode, and other compatible agents, use the universal installer:
55
+
56
+ ```powershell
57
+ npx skills add ohmiler/gridgeist -g
58
+ ```
59
+
60
+ **Manual fallback:** If neither installer is available, continue to [Manual installation](#manual-installation).
61
+ 2. Start a new agent session in your web project and paste:
62
+
63
+ ```text
64
+ Use the Gridgeist skill to review this interface without editing it yet. Give me a one-line verdict, prioritized findings with evidence, and one coherent redesign direction. Preserve the product's behavior and brand.
65
+ ```
66
+
67
+ Agents that support explicit skill invocation can use `$gridgeist` in the prompt. Continue to [Installation](#installation) for product-specific details and more examples.
68
+
69
+ ## Use cases
70
+
71
+ - Create a distinctive landing page, dashboard, documentation site, portfolio, or learning platform.
72
+ - Redesign an existing interface without breaking its behavior or brand.
73
+ - Review a draft and prioritize hierarchy, composition, responsiveness, accessibility, and implementation quality.
74
+ - Adapt technical, editorial, image-led, playful, utilitarian, or visible-grid direction without erasing the brand.
75
+
76
+ ## Installation
77
+
78
+ ### Codex plugin
79
+
80
+ This repository is packaged as a Codex plugin through [`.codex-plugin/plugin.json`](.codex-plugin/plugin.json). The plugin points to the same `skills/gridgeist/` directory used by the other channels, so all installations share one source of truth.
81
+
82
+ Add the Gridgeist marketplace, then install the plugin:
83
+
84
+ ```powershell
85
+ codex plugin marketplace add ohmiler/gridgeist
86
+ codex plugin add gridgeist@gridgeist
87
+ ```
88
+
89
+ Start a new Codex session after installation so the bundled skill is discovered.
90
+
91
+ ### Universal installer
92
+
93
+ For Claude Code, Cursor, Gemini CLI, GitHub Copilot, OpenCode, and other compatible agents, install Gridgeist with the [open agent skills CLI](https://github.com/vercel-labs/skills):
94
+
95
+ ```powershell
96
+ npx skills add ohmiler/gridgeist -g
97
+ ```
98
+
99
+ The installer discovers `skills/gridgeist/` and prompts you to choose the target agents. To select one directly, pass its agent name; for example:
100
+
101
+ ```powershell
102
+ npx skills add ohmiler/gridgeist -g -a claude-code
103
+ ```
104
+
105
+ ### Manual installation
106
+
107
+ Use manual copying only when the plugin and universal installer are unavailable:
108
+
109
+ ```powershell
110
+ git clone https://github.com/ohmiler/gridgeist.git
111
+ Copy-Item -Recurse .\gridgeist\skills\gridgeist "$HOME\.agents\skills\gridgeist"
112
+ ```
113
+
114
+ For a different agent, copy `skills/gridgeist/` to that product's skills directory. The agent must support the Agent Skills `SKILL.md` convention. Discovery and invocation behavior can differ between products. Start a new agent session after copying the directory.
115
+
116
+ ## Updating
117
+
118
+ Gridgeist releases do not update silently. Use the command for the channel that installed the skill, then start a new agent session.
119
+
120
+ ### Codex plugin
121
+
122
+ Refresh the Git-backed marketplace snapshot, then reinstall the plugin version exposed by that release:
123
+
124
+ ```powershell
125
+ codex plugin marketplace upgrade gridgeist
126
+ codex plugin add gridgeist@gridgeist
127
+ ```
128
+
129
+ Confirm the installed version with `codex plugin list`. If the current session still uses older instructions, start a new thread or restart the Codex app.
130
+
131
+ ### Universal installer
132
+
133
+ Update a global Gridgeist installation:
134
+
135
+ ```powershell
136
+ npx skills update gridgeist -g -y
137
+ ```
138
+
139
+ For a project-scoped installation, use `npx skills update gridgeist -p -y` instead.
140
+
141
+ ### Git clone or manual copy
142
+
143
+ Run `git pull --ff-only` in an existing clone, then reinstall from `skills/gridgeist/`. Manual copies do not retain source or version metadata, so replace the complete skill directory from a tagged release. Prefer the Codex plugin or universal installer when future updates matter.
144
+
145
+ ## Example prompts
146
+
147
+ Invoke Gridgeist directly with `$gridgeist` and include four essentials:
148
+
149
+ 1. The product and its audience.
150
+ 2. The mode: create, redesign, or review.
151
+ 3. What must be preserved, such as behavior, brand color, or content.
152
+ 4. What must be verified, such as desktop, mobile, keyboard, and accessibility.
153
+
154
+ ```text
155
+ Use $gridgeist to redesign this Next.js course landing page. Preserve all behavior and the blue brand color, but replace the generic SaaS cards with an editorial grid and verify desktop and mobile layouts.
156
+ ```
157
+
158
+ ```text
159
+ Review this dashboard with $gridgeist. Give me a one-line verdict, prioritized findings with evidence, and a coherent replacement direction before editing.
160
+ ```
161
+
162
+ ```text
163
+ Use $gridgeist to create a technical documentation homepage where real API examples and navigation structure carry the visual identity.
164
+ ```
165
+
166
+ ### Brief for a closer match
167
+
168
+ For a more precise result, provide these details when they are relevant:
169
+
170
+ - **Product and audience** — what the product does and who uses it.
171
+ - **Primary task** — the most important thing the user must accomplish.
172
+ - **Direction** — the intended character, such as warm editorial, precise
173
+ technical, or playful tactile.
174
+ - **Authentic material** — product UI, data, prose, imagery, artwork, code, or a
175
+ workflow that should carry visual weight.
176
+ - **Preserved constraints** — brand signals, content, routes, behavior, components,
177
+ privacy, or platform requirements that must not change.
178
+ - **Exclusions** — visual language or behavior that would be wrong for the product.
179
+ - **Flows and states** — the important default, loading, empty, error, success,
180
+ disabled, and destructive paths.
181
+ - **Verification** — representative viewports, keyboard, touch, focus, overflow,
182
+ reduced motion, and primary flows to exercise.
183
+
184
+ When the direction is already clear, state it and let Gridgeist proceed without
185
+ another aesthetic questionnaire. When several materially different directions are
186
+ still credible, ask Gridgeist to inspect first, offer two or three grounded options
187
+ with trade-offs and a recommendation, and wait for alignment before editing.
188
+
189
+ Copy and adapt this template:
190
+
191
+ ```text
192
+ Use $gridgeist to [create / redesign / review] [page or product surface].
193
+
194
+ Product and audience:
195
+ [What it does and who uses it]
196
+
197
+ Primary task:
198
+ [The most important user outcome]
199
+
200
+ Direction:
201
+ [A confirmed direction, or: Inspect first, propose two or three grounded
202
+ directions with trade-offs and a recommendation, and do not edit until I choose.]
203
+
204
+ Authentic material that should lead:
205
+ [Product UI / data / prose / imagery / artwork / code / workflow]
206
+
207
+ Preserve:
208
+ [Brand, content, routes, behavior, components, and constraints]
209
+
210
+ Avoid:
211
+ [Visual language or behavior that would be wrong]
212
+
213
+ Important flows and states:
214
+ [Primary flow and applicable default/loading/empty/error/success/disabled states]
215
+
216
+ Verify:
217
+ [Viewports, keyboard, touch, focus, overflow, reduced motion, and primary flow]
218
+
219
+ Inspect the repository and rendered interface before taking action.
220
+ ```
221
+
222
+ Describe outcomes and genuine constraints rather than prescribing a CSS recipe.
223
+ Unless they are established brand requirements, leave font sizes, spacing, radii,
224
+ shadows, and column counts for Gridgeist to derive as one coherent system.
225
+
226
+ If a project already contains a `DESIGN.md`, theme, token set, or component
227
+ library, Gridgeist inspects it alongside the implementation and rendered interface
228
+ instead of assuming the sources agree. `DESIGN.md` is optional interoperability,
229
+ not a dependency: Gridgeist should not create or update one unless you request a
230
+ portable design-system artifact or explicitly include durable system documentation
231
+ in the work.
232
+
233
+ Gridgeist also allows implicit invocation when the agent recognizes a matching web-interface task.
234
+
235
+ ## Working with companion skills
236
+
237
+ Gridgeist works best as the sole owner of product and visual direction, with optional companion skills supplying context, technical review, or rendered evidence. The lightest recommended workflow for most projects is:
238
+
239
+ ```text
240
+ Gridgeist -> Playwright
241
+ ```
242
+
243
+ Gridgeist defines the interface thesis, hierarchy, system, and implementation direction. Playwright then checks the rendered result across representative viewports and interactions; it can also provide repeatable [visual comparisons](https://playwright.dev/docs/test-snapshots).
244
+
245
+ | Situation | Recommended workflow | Division of responsibility |
246
+ | --- | --- | --- |
247
+ | Most web projects | `Gridgeist -> Playwright` | Design and implementation, then rendered verification |
248
+ | Figma is the source of truth | `Figma -> Gridgeist -> Playwright` | Extract components, variables, and layout context; adapt them to the product and codebase; verify the result. See the [Figma MCP server](https://developers.figma.com/docs/figma-mcp-server/). |
249
+ | React or Next.js | `Gridgeist -> Vercel React Best Practices -> Playwright` | Own the interface direction; review framework performance; verify behavior. See [Vercel Agent Skills](https://github.com/vercel-labs/agent-skills). |
250
+ | Pre-release quality audit | `Gridgeist -> Web Quality Audit -> Playwright` | Review hierarchy and brand fit; audit accessibility, performance, SEO, and web quality; confirm the live result. See [Web Quality Skills](https://github.com/addyosmani/web-quality-skills). |
251
+ | Original imagery is required | `Gridgeist -> image generation -> Gridgeist -> Playwright` | Establish the thesis before generating assets, compose with the selected assets, then verify the interface. |
252
+
253
+ Treat these as optional workflows, not dependencies. Add only the companion that answers a real need, and keep another broad frontend-design or art-direction skill out of the same design phase; competing visual priors can weaken a coherent result. Companion skill names and availability vary between agents.
254
+
255
+ Example:
256
+
257
+ ```text
258
+ Use $gridgeist to redesign this interface while preserving its behavior and brand.
259
+ After implementation, use Playwright to verify representative desktop and mobile
260
+ viewports, keyboard interaction, overflow, and the primary user flow.
261
+ ```
262
+
263
+ ## Repository layout
264
+
265
+ ```text
266
+ .codex-plugin/
267
+ plugin.json Codex plugin manifest
268
+ skills/gridgeist/ Installable skill
269
+ SKILL.md Trigger conditions and core workflow
270
+ agents/openai.yaml Agent-facing interface metadata
271
+ references/ Design language and review checklist
272
+ evals/prompts.md Repeatable manual behavior checks
273
+ docs/ Design and implementation records
274
+ ```
275
+
276
+ ## Case studies
277
+
278
+ [Tracefield](https://ohmiler.github.io/tracefield/) applies Gridgeist to a working developer-observability dashboard. Its [repository](https://github.com/ohmiler/tracefield) preserves the generic baseline, exact prompt, evaluation rubric, tested trace domain, and responsive final interface.
279
+
280
+ [Ledgerline](https://ohmiler.github.io/ledgerline/) tests the same skill on dense payment API documentation. Its [repository](https://github.com/ohmiler/ledgerline) preserves a conventional baseline, exact prompt, six-part rubric, deterministic API content, four viewport checks, and the responsive final interface.
281
+
282
+ [Morrow](https://ohmiler.github.io/morrow-portfolio/) stress-tests brand adaptation with a fictional image-led creative portfolio. Its [repository](https://github.com/ohmiler/morrow-portfolio) preserves shared AI-generated artwork, a conventional baseline, exact prompts, a six-part rubric, four viewport checks, and a final interface deliberately unlike the technical case studies.
283
+
284
+ [Doodlewood](https://ohmiler.github.io/doodlewood/) tests playful interaction design with a fictional, privacy-preserving children's drawing studio. Its [repository](https://github.com/ohmiler/doodlewood) preserves the generic baseline, exact prompt, six-part rubric, local drawing engine, four viewport checks, and explicit limits around child safety and real-user evidence.
285
+
286
+ Together, the four self-produced case studies cover data-heavy, content-heavy, image-led, and playful interactive surfaces. Further validation should now prioritize independent users, agents, and projects rather than adding another first-party visual category.
287
+
288
+ ## Limitations
289
+
290
+ - Output quality depends on the agent inspecting the actual repository and rendered interface.
291
+ - Automated checks do not replace visual inspection at representative viewport sizes.
292
+ - The suggested defaults are starting points, not a mandatory preset for every brand.
293
+ - Model outputs are not deterministic. Re-run evaluations when the skill or target agent changes.
294
+
295
+ ## Validation
296
+
297
+ Validate the installable skill structure:
298
+
299
+ ```powershell
300
+ python -X utf8 "$HOME\.codex\skills\.system\skill-creator\scripts\quick_validate.py" .\skills\gridgeist
301
+ ```
302
+
303
+ Check release metadata and bilingual documentation without external dependencies:
304
+
305
+ ```powershell
306
+ python -X utf8 .\scripts\validate_release.py
307
+ ```
308
+
309
+ Exercise clean installation and updates through the live Codex marketplace and universal installer. This check requires Codex, Node.js, npm, Git, and network access; it uses temporary homes and does not modify your existing installations.
310
+
311
+ ```powershell
312
+ python -X utf8 .\scripts\smoke_test_install.py
313
+ ```
314
+
315
+ Behavioral evaluation prompts are in [`evals/prompts.md`](evals/prompts.md).
316
+
317
+ ## Contributing
318
+
319
+ Keep `SKILL.md` concise and place detailed, conditionally loaded guidance in `references/`. For behavior changes, update an evaluation scenario and record what failed before changing the skill. Open an issue or pull request with the motivating prompt and observed output.
320
+
321
+ ## License
322
+
323
+ [MIT](LICENSE)