@rockysoft/opencode-hybrid-workflow 1.0.1 → 1.1.1
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 +15 -0
- package/THIRD_PARTY_NOTICES.md +5 -0
- package/assets/integrations/impeccable/LICENSE +191 -0
- package/assets/integrations/impeccable/NOTICE.md +11 -0
- package/assets/integrations/impeccable/colorize.md +86 -0
- package/assets/integrations/impeccable/craft-floor.md +44 -0
- package/assets/integrations/impeccable/layout.md +84 -0
- package/assets/integrations/impeccable/polish.md +105 -0
- package/assets/integrations/impeccable/provenance.json +8 -0
- package/assets/integrations/impeccable/typeset.md +90 -0
- package/core/controller.mjs +1 -1
- package/core/design.mjs +5 -1
- package/core/plugin.mjs +6 -0
- package/docs/CHANGELOG.md +13 -0
- package/docs/images/22-design-guidance.png +0 -0
- package/docs/images/23-impeccable-saved.png +0 -0
- package/docs/impeccable.md +22 -0
- package/lib/config.mjs +1 -0
- package/lib/continuation-notice.mjs +5 -0
- package/lib/continuation.mjs +85 -0
- package/lib/impeccable.mjs +36 -0
- package/lib/native-result.mjs +31 -0
- package/lib/opencode-reviewer.mjs +3 -7
- package/lib/settings-rpc.mjs +1 -0
- package/lib/settings-service.mjs +8 -1
- package/package.json +1 -1
- package/sidebar/reader.mjs +6 -1
- package/sidebar/settings.mjs +5 -0
- package/tui.js +86 -70
package/README.md
CHANGED
|
@@ -4,6 +4,8 @@ Let your strongest models plan, design and review. Let your implementation model
|
|
|
4
4
|
|
|
5
5
|
One plugin. One or two reviewers. Configure everything inside OpenCode.
|
|
6
6
|
|
|
7
|
+
**Optional Impeccable guidance:** your design lead decides; your implementation model builds the approved design. Set it up below.
|
|
8
|
+
|
|
7
9
|
**Requirements:** OpenCode 2, Node.js 22+, Git and Python 3. Windows and Linux; experimental macOS support.
|
|
8
10
|
|
|
9
11
|
## 1. Install
|
|
@@ -114,6 +116,19 @@ Type **`/hybrid`** or click **Hybrid Workflow settings** whenever you want to ch
|
|
|
114
116
|
|
|
115
117
|
## Optional tools
|
|
116
118
|
|
|
119
|
+
<details>
|
|
120
|
+
<summary><strong>Use Impeccable design guidance</strong></summary>
|
|
121
|
+
|
|
122
|
+
Choose **/hybrid → Design guidance → Impeccable**. Nothing else needs installing.
|
|
123
|
+
|
|
124
|
+

|
|
125
|
+
|
|
126
|
+
For one task, ask **“Use Impeccable to redesign this page”**, or use `/hybrid-impeccable polish the checkout`.
|
|
127
|
+
|
|
128
|
+
This supplies Impeccable's design guidance to your selected premium lead and reviewers. It does not run Impeccable's separate engine, hooks or audit commands. [Supported scope](https://cdn.jsdelivr.net/npm/@rockysoft/opencode-hybrid-workflow@1.1.0/docs/impeccable.md).
|
|
129
|
+
|
|
130
|
+
</details>
|
|
131
|
+
|
|
117
132
|
<details>
|
|
118
133
|
<summary><strong>Let reviewers inspect your app in a browser</strong></summary>
|
|
119
134
|
|
package/THIRD_PARTY_NOTICES.md
CHANGED
|
@@ -18,3 +18,8 @@ their respective files; the root license does not replace them. No user
|
|
|
18
18
|
credentials, project memories, session logs or runtime reports are included.
|
|
19
19
|
|
|
20
20
|
- Runtime dependency `diff` (jsdiff) 9.0.0, BSD-3-Clause, https://github.com/kpdecker/jsdiff. Its license is distributed with the dependency.
|
|
21
|
+
# Impeccable guidance
|
|
22
|
+
|
|
23
|
+
Selected unmodified Markdown references from Impeccable 4.8.0 by Paul Bakaus and contributors, commit `9fadc41729c38fd47d7ae622b501558653f9d2e9`, https://github.com/pbakaus/impeccable.
|
|
24
|
+
Licensed under Apache-2.0; full license and provenance are in `assets/integrations/impeccable/`. The upstream executable engine, hooks and command runner are not included.
|
|
25
|
+
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
4
|
+
|
|
5
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
6
|
+
|
|
7
|
+
1. Definitions.
|
|
8
|
+
|
|
9
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
10
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
11
|
+
|
|
12
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
13
|
+
the copyright owner that is granting the License.
|
|
14
|
+
|
|
15
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
16
|
+
other entities that control, are controlled by, or are under common
|
|
17
|
+
control with that entity. For the purposes of this definition,
|
|
18
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
19
|
+
direction or management of such entity, whether by contract or
|
|
20
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
21
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
22
|
+
|
|
23
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
24
|
+
exercising permissions granted by this License.
|
|
25
|
+
|
|
26
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
27
|
+
including but not limited to software source code, documentation
|
|
28
|
+
source, and configuration files.
|
|
29
|
+
|
|
30
|
+
"Object" form shall mean any form resulting from mechanical
|
|
31
|
+
transformation or translation of a Source form, including but
|
|
32
|
+
not limited to compiled object code, generated documentation,
|
|
33
|
+
and conversions to other media types.
|
|
34
|
+
|
|
35
|
+
"Work" shall mean the work of authorship, whether in Source or
|
|
36
|
+
Object form, made available under the License, as indicated by a
|
|
37
|
+
copyright notice that is included in or attached to the work
|
|
38
|
+
(an example is provided in the Appendix below).
|
|
39
|
+
|
|
40
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
41
|
+
form, that is based on (or derived from) the Work and for which the
|
|
42
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
43
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
44
|
+
of this License, Derivative Works shall not include works that remain
|
|
45
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
46
|
+
the Work and Derivative Works thereof.
|
|
47
|
+
|
|
48
|
+
"Contribution" shall mean any work of authorship, including
|
|
49
|
+
the original version of the Work and any modifications or additions
|
|
50
|
+
to that Work or Derivative Works thereof, that is intentionally
|
|
51
|
+
submitted to the Licensor for inclusion in the Work by the copyright
|
|
52
|
+
owner or by an individual or Legal Entity authorized to submit on
|
|
53
|
+
behalf of the copyright owner. For the purposes of this definition,
|
|
54
|
+
"submitted" means any form of electronic, verbal, or written
|
|
55
|
+
communication sent to the Licensor or its representatives, including
|
|
56
|
+
but not limited to communication on electronic mailing lists, source
|
|
57
|
+
code control systems, and issue tracking systems that are managed by,
|
|
58
|
+
or on behalf of, the Licensor for the purpose of discussing and
|
|
59
|
+
improving the Work, but excluding communication that is conspicuously
|
|
60
|
+
marked or otherwise designated in writing by the copyright owner as
|
|
61
|
+
"Not a Contribution."
|
|
62
|
+
|
|
63
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
64
|
+
on behalf of whom a Contribution has been received by Licensor and
|
|
65
|
+
subsequently incorporated within the Work.
|
|
66
|
+
|
|
67
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
68
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
69
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
70
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
71
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
72
|
+
Work and such Derivative Works in Source or Object form.
|
|
73
|
+
|
|
74
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
75
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
76
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
77
|
+
(except as stated in this section) patent license to make, have made,
|
|
78
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
79
|
+
where such license applies only to those patent claims licensable
|
|
80
|
+
by such Contributor that are necessarily infringed by their
|
|
81
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
|
82
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
83
|
+
institute patent litigation against any entity (including a
|
|
84
|
+
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
85
|
+
or a Contribution incorporated within the Work constitutes direct
|
|
86
|
+
or contributory patent infringement, then any patent licenses
|
|
87
|
+
granted to You under this License for that Work shall terminate
|
|
88
|
+
as of the date such litigation is filed.
|
|
89
|
+
|
|
90
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
91
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
92
|
+
modifications, and in Source or Object form, provided that You
|
|
93
|
+
meet the following conditions:
|
|
94
|
+
|
|
95
|
+
(a) You must give any other recipients of the Work or
|
|
96
|
+
Derivative Works a copy of this License; and
|
|
97
|
+
|
|
98
|
+
(b) You must cause any modified files to carry prominent notices
|
|
99
|
+
stating that You changed the files; and
|
|
100
|
+
|
|
101
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
102
|
+
that You distribute, all copyright, patent, trademark, and
|
|
103
|
+
attribution notices from the Source form of the Work,
|
|
104
|
+
excluding those notices that do not pertain to any part of
|
|
105
|
+
the Derivative Works; and
|
|
106
|
+
|
|
107
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
108
|
+
distribution, then any Derivative Works that You distribute must
|
|
109
|
+
include a readable copy of the attribution notices contained
|
|
110
|
+
within such NOTICE file, excluding those notices that do not
|
|
111
|
+
pertain to any part of the Derivative Works, in at least one
|
|
112
|
+
of the following places: within a NOTICE text file distributed
|
|
113
|
+
as part of the Derivative Works; within the Source form or
|
|
114
|
+
documentation, if provided along with the Derivative Works; or,
|
|
115
|
+
within a display generated by the Derivative Works, if and
|
|
116
|
+
wherever such third-party notices normally appear. The contents
|
|
117
|
+
of the NOTICE file are for informational purposes only and
|
|
118
|
+
do not modify the License. You may add Your own attribution
|
|
119
|
+
notices within Derivative Works that You distribute, alongside
|
|
120
|
+
or as an addendum to the NOTICE text from the Work, provided
|
|
121
|
+
that such additional attribution notices cannot be construed
|
|
122
|
+
as modifying the License.
|
|
123
|
+
|
|
124
|
+
You may add Your own copyright statement to Your modifications and
|
|
125
|
+
may provide additional or different license terms and conditions
|
|
126
|
+
for use, reproduction, or distribution of Your modifications, or
|
|
127
|
+
for any such Derivative Works as a whole, provided Your use,
|
|
128
|
+
reproduction, and distribution of the Work otherwise complies with
|
|
129
|
+
the conditions stated in this License.
|
|
130
|
+
|
|
131
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
132
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
133
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
134
|
+
this License, without any additional terms or conditions.
|
|
135
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
136
|
+
the terms of any separate license agreement you may have executed
|
|
137
|
+
with Licensor regarding such Contributions.
|
|
138
|
+
|
|
139
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
140
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
141
|
+
except as required for reasonable and customary use in describing the
|
|
142
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
|
143
|
+
|
|
144
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
145
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
146
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
147
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
148
|
+
implied, including, without limitation, any warranties or conditions
|
|
149
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
150
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
151
|
+
appropriateness of using or redistributing the Work and assume any
|
|
152
|
+
risks associated with Your exercise of permissions under this License.
|
|
153
|
+
|
|
154
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
155
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
156
|
+
unless required by applicable law (such as deliberate and grossly
|
|
157
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
158
|
+
liable to You for damages, including any direct, indirect, special,
|
|
159
|
+
incidental, or consequential damages of any character arising as a
|
|
160
|
+
result of this License or out of the use or inability to use the
|
|
161
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
162
|
+
work stoppage, computer failure or malfunction, or any and all
|
|
163
|
+
other commercial damages or losses), even if such Contributor
|
|
164
|
+
has been advised of the possibility of such damages.
|
|
165
|
+
|
|
166
|
+
9. Accepting Warranty or Additional Liability. While redistributing
|
|
167
|
+
the Work or Derivative Works thereof, You may choose to offer,
|
|
168
|
+
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
169
|
+
or other liability obligations and/or rights consistent with this
|
|
170
|
+
License. However, in accepting such obligations, You may act only
|
|
171
|
+
on Your own behalf and on Your sole responsibility, not on behalf
|
|
172
|
+
of any other Contributor, and only if You agree to indemnify,
|
|
173
|
+
defend, and hold each Contributor harmless for any liability
|
|
174
|
+
incurred by, or claims asserted against, such Contributor by reason
|
|
175
|
+
of your accepting any such warranty or additional liability.
|
|
176
|
+
|
|
177
|
+
END OF TERMS AND CONDITIONS
|
|
178
|
+
|
|
179
|
+
Copyright 2025 Paul Bakaus
|
|
180
|
+
|
|
181
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
182
|
+
you may not use this file except in compliance with the License.
|
|
183
|
+
You may obtain a copy of the License at
|
|
184
|
+
|
|
185
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
186
|
+
|
|
187
|
+
Unless required by applicable law or agreed to in writing, software
|
|
188
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
189
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
190
|
+
See the License for the specific language governing permissions and
|
|
191
|
+
limitations under the License.
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# Third-Party Notices
|
|
2
|
+
|
|
3
|
+
This project includes content derived from third-party work, used under the terms of its original license.
|
|
4
|
+
|
|
5
|
+
## Platform Design Skills
|
|
6
|
+
|
|
7
|
+
The `skill/reference/ios.md` and `skill/reference/android.md` platform reference files are distilled from ehmo's `platform-design-skills` (Apple Human Interface Guidelines and Material Design 3 rules), rewritten in Impeccable's voice.
|
|
8
|
+
|
|
9
|
+
**Original work:** https://github.com/ehmo/platform-design-skills
|
|
10
|
+
**Original license:** MIT
|
|
11
|
+
**Author:** ehmo
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
> **Additional context needed**: existing brand colors.
|
|
2
|
+
|
|
3
|
+
Introduce color as hierarchy, meaning, and atmosphere. Preserve confirmed brand and semantic conventions; do not replace a visual world under the guise of colorizing it.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Visitor mode
|
|
8
|
+
|
|
9
|
+
- **Persuade + Experience:** color may carry the voice and own large regions when the selected world calls for it.
|
|
10
|
+
- **Operate + Read:** color primarily encodes action, selection, status, wayfinding, and reading hierarchy. Rarity gives an accent force.
|
|
11
|
+
|
|
12
|
+
## Audit before choosing
|
|
13
|
+
|
|
14
|
+
Read DESIGN.md, tokens, assets, current themes, and representative states. Identify:
|
|
15
|
+
|
|
16
|
+
- which colors are confirmed brand commitments;
|
|
17
|
+
- current surface, text, action, and semantic roles;
|
|
18
|
+
- places where grayscale obscures hierarchy or state;
|
|
19
|
+
- contrast failures and color-only communication;
|
|
20
|
+
- light/dark or data-visualization requirements;
|
|
21
|
+
- whether the task asks for more color or a new identity.
|
|
22
|
+
|
|
23
|
+
If a new identity is required, use [new-work.md](new-work.md). Ask only when a binding brand decision cannot be inferred.
|
|
24
|
+
|
|
25
|
+
## Choose a strategy
|
|
26
|
+
|
|
27
|
+
Name the intended emotional temperature, dominant relationship, contrast range, and color dosage before editing. The strategy may be restrained or immersive; it must follow the brief and selected world rather than a fixed percentage rule.
|
|
28
|
+
|
|
29
|
+
Build roles, not a bag of swatches:
|
|
30
|
+
|
|
31
|
+
- canvas and elevated surfaces;
|
|
32
|
+
- primary and secondary text;
|
|
33
|
+
- action, focus, and selection;
|
|
34
|
+
- borders and separators;
|
|
35
|
+
- success, warning, error, and information;
|
|
36
|
+
- data categories or scales when needed.
|
|
37
|
+
|
|
38
|
+
Use the project's existing color space. For a new web palette, prefer OKLCH because lightness and chroma can be adjusted predictably. Choose hue from product meaning and visual direction, never from a default category association.
|
|
39
|
+
|
|
40
|
+
## Apply at system scale
|
|
41
|
+
|
|
42
|
+
- Let the strongest color own a deliberate region or role instead of scattering tiny accents.
|
|
43
|
+
- Keep the primary action easy to find; do not spend its color on decoration.
|
|
44
|
+
- Tint neutrals only when the brand hue genuinely creates cohesion. Neutral gray is valid when it serves the world.
|
|
45
|
+
- On colored surfaces, derive secondary text from the foreground or surface hue rather than using washed-out generic gray.
|
|
46
|
+
- Keep semantic meanings consistent, but respect platform and domain conventions instead of assuming fixed hues.
|
|
47
|
+
- For data, use distinct lightness, chroma, shape, label, or pattern so color is not the only code.
|
|
48
|
+
- In dark mode, design surface elevation and contrast explicitly; do not invert the light theme mechanically.
|
|
49
|
+
- Define primitive values and semantic tokens when the project has a token system. Theme changes should normally remap semantic roles.
|
|
50
|
+
|
|
51
|
+
Decoration without a relationship to hierarchy, state, content, or the visual world is not a color strategy.
|
|
52
|
+
|
|
53
|
+
## Contrast and perception
|
|
54
|
+
|
|
55
|
+
Verify computed foreground/background pairs:
|
|
56
|
+
|
|
57
|
+
| Content | WCAG AA minimum |
|
|
58
|
+
|---|---|
|
|
59
|
+
| body text | 4.5:1 |
|
|
60
|
+
| large text | 3:1 |
|
|
61
|
+
| controls, icons, focus indicators | 3:1 |
|
|
62
|
+
|
|
63
|
+
Do not rely on eyesight alone. Check interactive states, overlays, text on images, disabled content, and both themes. Simulate common vision deficiencies. Information conveyed by color also needs text, shape, iconography, or position.
|
|
64
|
+
|
|
65
|
+
When deriving OKLCH ramps, vary lightness and reduce chroma near white and black. Do not keep high chroma at extreme lightness merely to make the math uniform. Prefer explicit colors over chains of translucent overlays when alpha would make contrast context-dependent.
|
|
66
|
+
|
|
67
|
+
## Verify
|
|
68
|
+
|
|
69
|
+
- Every color has a stable role or a world-specific atmospheric purpose.
|
|
70
|
+
- Attention lands on the intended action, content, or state.
|
|
71
|
+
- The palette works across quiet, dense, interactive, error, and empty states.
|
|
72
|
+
- Light and dark themes are each composed, not mechanically inverted.
|
|
73
|
+
- Contrast and non-color cues pass in all relevant states.
|
|
74
|
+
- The result is recognizably this product, not a generic “colorful” treatment.
|
|
75
|
+
|
|
76
|
+
When the palette earns its place, hand off to `/impeccable polish` for the final pass.
|
|
77
|
+
|
|
78
|
+
## Live-mode signature params
|
|
79
|
+
|
|
80
|
+
When invoked from live mode, every variant declares a `color-amount` parameter. Author CSS against `var(--p-color-amount, 0.5)` so the user can move from neutral to the variant's full color strategy without regeneration.
|
|
81
|
+
|
|
82
|
+
```json
|
|
83
|
+
{"id":"color-amount","kind":"range","min":0,"max":1,"step":0.05,"default":0.5,"label":"Color amount"}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Add at most two variant-specific parameters, such as palette, temperature, or tint behavior. Follow [live.md](live.md)'s parameter contract.
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
# Craft floor
|
|
2
|
+
|
|
3
|
+
Load this after the direction is settled, and build without announcing the checklist. A pinned brief or the committed visual world overrides anything here except a line marked as a ban; your own habit does not. When the design hook is active it already enforces the mechanical checks below as you edit: act on its findings instead of re-auditing each rule.
|
|
4
|
+
|
|
5
|
+
## Verify
|
|
6
|
+
|
|
7
|
+
Each of these is a check on the built result, not an intention. Run them together in each batched look at the render, not as separate screenshot trips; the checks share one render.
|
|
8
|
+
|
|
9
|
+
- **Contrast:** body and placeholder text ≥4.5:1, large text ≥3:1. On colored surfaces tint secondary text from that hue or the foreground; never gray.
|
|
10
|
+
- **Depth:** shadows carry an offset and a soft blur. A zero-offset colored halo is decoration.
|
|
11
|
+
- **Spacing:** tight groups, generous separation, more space above a heading than below it. Read the computed values.
|
|
12
|
+
- **Type:** body measure 65–75ch, display max 6rem, tracking floor -0.04em, balanced headings, obvious scale and weight steps. Run the real copy at every breakpoint and fix what overflows.
|
|
13
|
+
- **Motion:** one authored moment, not scattered effects and not one identical entrance on every section. Exponential ease-out from an already-visible default. Reach past transform and opacity: blur, backdrop-filter, clip-path, mask, and shadow belong to the palette when they stay smooth.
|
|
14
|
+
- **States:** hover, disabled, loading, error, empty. Plus real content, working controls, responsive composition, keyboard focus.
|
|
15
|
+
- **Browser surfaces:** the parts you did not draw still carry the design. Text selection, the caret, custom scrollbars, focus rings, underline offset, and the numerals in tabular data all ship with browser defaults that belong to no design system. Theme them from the palette. This is the cheapest signal that a page was built rather than assembled, and the one models skip most reliably.
|
|
16
|
+
- **Copy:** the product's own language. Controls name their action; errors name the problem and the recovery.
|
|
17
|
+
- **Coverage:** every brief requirement present and findable within seconds.
|
|
18
|
+
|
|
19
|
+
## Refuse
|
|
20
|
+
|
|
21
|
+
These are the category's defaults, not bans: the brief's own words can earn any of them. Reaching for one when the axis is free means you were not deciding; recognizing that means rewriting the element, not softening it.
|
|
22
|
+
|
|
23
|
+
Page scaffolds:
|
|
24
|
+
|
|
25
|
+
- Same-size cards of icon plus heading plus text as the page structure. Cards are the lazy container; nested cards are always wrong.
|
|
26
|
+
- The hero-metric template: big number, small label, supporting stats, accent.
|
|
27
|
+
- A kicker or eyebrow above a heading. This one is a ban, not a default: no brief earns it back. The heading carries its own weight; delete the label and let the heading speak.
|
|
28
|
+
- Section numbers (01 / 02 / 03) unless the sequence itself carries information the reader needs.
|
|
29
|
+
- A modal for a task that needs neither interruption nor protected focus.
|
|
30
|
+
|
|
31
|
+
Surface habits:
|
|
32
|
+
|
|
33
|
+
- Gradient text. Emphasis comes from weight or size.
|
|
34
|
+
- Glass and blur as decoration rather than as a specific effect.
|
|
35
|
+
- A colored `border-left` or `border-right` above 1px on cards, list items, callouts, or alerts.
|
|
36
|
+
- Hard offset shadows (`box-shadow: 4px 4px 0`) outside a world that is actually neobrutalist. The zero-blur block shadow is a costume, not a depth system; a world that did not choose it never earns it as a default.
|
|
37
|
+
- Sparklines, progress rings, and soft-shadowed rounded rectangles standing in for content.
|
|
38
|
+
- Monospace as a costume for "technical" rather than for code, data, or measurement.
|
|
39
|
+
- A system display face (Impact, Arial Black, the platform sans) as the display voice of an own-world page. Source and self-host a face whose character matches the approved lettering; the closest installed font is a failure, not a fallback.
|
|
40
|
+
- Unicode glyphs or emoji standing in for an icon system. Icons are drawn, from a real library or authored SVG, in one consistent stroke and weight.
|
|
41
|
+
- Geometric masks standing in for organic contours. A circle, polygon, or radial-gradient cutout approximating a photographic subject's edge is the cheap version of the effect and reads worse than omitting it. Derive an alpha matte from the actual image, or produce a cut-out asset.
|
|
42
|
+
- Light or dark picked by category. Pick it from the use scene: who, where, under what ambient light.
|
|
43
|
+
|
|
44
|
+
The floor holds the mechanics; it never picks the direction. With every check green, spend the page on the committed world, and when torn between refined and committed, commit.
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
Layout turns product priority into reading order, grouping, rhythm, and usable space. Diagnose the structural problem before moving boxes.
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## Visitor mode
|
|
6
|
+
|
|
7
|
+
- **Persuade + Experience:** composition may be asymmetric, fluid, or intentionally disruptive when the selected world earns it.
|
|
8
|
+
- **Operate + Read:** predictable structure, stable density, and navigable linearity are affordances.
|
|
9
|
+
- **Native:** follow [ios.md](ios.md) or [android.md](android.md) for navigation, insets, adaptation, and touch targets.
|
|
10
|
+
|
|
11
|
+
Preserve the established visual world. A layout command changes structure inside it; identity replacement belongs to [new-work.md](new-work.md).
|
|
12
|
+
|
|
13
|
+
## Two isolated assessments
|
|
14
|
+
|
|
15
|
+
When a sub-agent tool is available and permitted, run these independently; otherwise run them yourself in this order.
|
|
16
|
+
|
|
17
|
+
1. **Layout assessment:** inspect representative states and viewports. Answer every question below with rendered or source evidence:
|
|
18
|
+
- **Reading order:** Apply the squint test. With detail blurred, can you still identify the primary element, the secondary element, and the major groups in order?
|
|
19
|
+
- **Grouping:** Are related items close and distinct groups separated, or are containers compensating for weak proximity?
|
|
20
|
+
- **Rhythm:** Do tight and generous intervals create a deliberate cadence, or is one spacing value repeated until everything has equal weight?
|
|
21
|
+
- **Structure:** Does the topology match the content and task? Are repeated cards, columns, or sections genuinely equivalent, or merely a framework default?
|
|
22
|
+
- **Density:** Does the amount of information per region fit use frequency, decision complexity, and visitor mode?
|
|
23
|
+
- **Adaptation:** At narrow, intermediate, wide, zoomed, and localized states, what reorders, collapses, wraps, scrolls, or remains fixed? Does DOM and focus order still agree with the visual order?
|
|
24
|
+
- **Extremes:** Do long content, empty states, overlays, sticky elements, safe areas, and small touch targets expose structural failures?
|
|
25
|
+
2. **Mechanical scan:** run:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
.opencode/skills/impeccable/scripts/impeccable detect --json --scope layout [target files or dirs]
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Also inspect arbitrary spacing, overflow, stacking, and container behavior the detector cannot resolve. Keep mechanical evidence out of the first assessment, then synthesize both passes before editing. A clean scan cannot prove hierarchy or rhythm.
|
|
32
|
+
|
|
33
|
+
## Set the spatial thesis
|
|
34
|
+
|
|
35
|
+
Before editing, name:
|
|
36
|
+
|
|
37
|
+
- the primary reading or task path;
|
|
38
|
+
- what belongs together and what must separate;
|
|
39
|
+
- which element leads and which supports;
|
|
40
|
+
- the intended density and spacing rhythm;
|
|
41
|
+
- how the structure changes across containers, viewports, input modes, and content extremes.
|
|
42
|
+
|
|
43
|
+
Choose the simplest structural model that expresses those relationships. Use layout primitives according to the relationships they control, and name reusable spacing and container roles semantically.
|
|
44
|
+
|
|
45
|
+
## Apply
|
|
46
|
+
|
|
47
|
+
- Group by meaning. Use proximity before adding containers or decoration.
|
|
48
|
+
- Create rhythm through deliberate contrast between tight and generous intervals.
|
|
49
|
+
- Use a documented spacing scale rather than one-off values. A 4-unit base usually provides the useful middle steps that an 8-only scale misses.
|
|
50
|
+
- Let hierarchy follow product priority, not framework defaults.
|
|
51
|
+
- Keep distinct content visually distinct without turning every group into an isolated component.
|
|
52
|
+
- Make responsive behavior structural: reorder, collapse, reflow, or reveal based on what remains important.
|
|
53
|
+
- Prefer container-aware components when the same component appears in different contexts.
|
|
54
|
+
- Use `gap` for sibling rhythm when it expresses the relationship more directly than child margins.
|
|
55
|
+
- Keep touch targets usable even when their visible marks are small.
|
|
56
|
+
- Use depth only when it clarifies state or hierarchy.
|
|
57
|
+
- Make optical corrections only after inspecting the rendered result.
|
|
58
|
+
|
|
59
|
+
Variation is not a goal by itself. Repetition should support recognition; break it only when content or priority changes.
|
|
60
|
+
|
|
61
|
+
## Verify
|
|
62
|
+
|
|
63
|
+
- The squint test still reveals the primary, secondary, and major groups in order.
|
|
64
|
+
- The reading and task path remains clear at every supported size.
|
|
65
|
+
- Related content groups naturally; unrelated content does not blur together.
|
|
66
|
+
- Tight and generous spacing create intentional rhythm instead of monotonous repetition.
|
|
67
|
+
- Density matches use frequency and content complexity.
|
|
68
|
+
- Long text, empty states, localization, zoom, and dynamic content do not break the structure.
|
|
69
|
+
- Keyboard, touch, and assistive-technology order agree with the visual order.
|
|
70
|
+
- The final mechanical scan has no unexplained findings.
|
|
71
|
+
|
|
72
|
+
Answer each item with rendered or source evidence, then rerun the scan. Do not substitute a bare “yes” for verification.
|
|
73
|
+
|
|
74
|
+
When the structure holds, hand off to `/impeccable polish`.
|
|
75
|
+
|
|
76
|
+
## Live-mode signature params
|
|
77
|
+
|
|
78
|
+
Every variant declares a coarse `density` parameter and authors spacing against `var(--p-density, 1)`.
|
|
79
|
+
|
|
80
|
+
```json
|
|
81
|
+
{"id":"density","kind":"range","min":0.6,"max":1.4,"step":0.05,"default":1,"label":"Density"}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Add one structural parameter only when the topology genuinely branches. Follow [live.md](live.md)'s parameter contract.
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
> **Additional context needed**: quality bar and shipping constraints.
|
|
2
|
+
|
|
3
|
+
Polish is refinement, never concealed redesign. Preserve the incumbent visual world, content, behavior, and everything outside scope. If the concept itself is wrong, say so and recommend redesign or `bolder` instead of smuggling in a replacement.
|
|
4
|
+
|
|
5
|
+
A detector result is defect evidence, not proof of quality. Inspect the rendered experience and real interaction path.
|
|
6
|
+
|
|
7
|
+
## 1. Establish the system
|
|
8
|
+
|
|
9
|
+
Read DESIGN.md and representative tokens, shared components, patterns, and neighboring flows. If no formal system exists, use coherent project conventions.
|
|
10
|
+
|
|
11
|
+
Classify each drift before fixing it:
|
|
12
|
+
|
|
13
|
+
- **missing token:** the system needs a reusable value;
|
|
14
|
+
- **one-off implementation:** an existing shared component or pattern should replace it;
|
|
15
|
+
- **conceptual mismatch:** the flow, information architecture, or hierarchy differs from comparable product areas;
|
|
16
|
+
- **local defect:** the implementation is simply incomplete or inconsistent.
|
|
17
|
+
|
|
18
|
+
Fix the cause at the narrowest correct level. Ask when a binding system principle cannot be inferred.
|
|
19
|
+
|
|
20
|
+
## 2. Gather the evidence
|
|
21
|
+
|
|
22
|
+
Use the feature yourself at the surface's representative sizes: desktop and mobile on the web; on a native platform (`ios` / `android` / `adaptive`), the shipped device classes on the simulator, emulator, or hardware, captured per the platform reference's Verifying the build section. Determine:
|
|
23
|
+
|
|
24
|
+
- whether the path is functionally complete;
|
|
25
|
+
- the intended quality bar and time available;
|
|
26
|
+
- known constraints or deliberately unfinished work;
|
|
27
|
+
- the states, content lengths, roles, and input methods users will actually encounter.
|
|
28
|
+
|
|
29
|
+
If a prior critique exists, use it as one input:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
.opencode/skills/impeccable/scripts/impeccable critique-storage latest "<resolved target>" --json
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Exit 0 returns JSON with the latest snapshot's `body` and an exact `snapshot_file` identity. Retain `snapshot_file` until the end of the pass. For a local file target, the helper compares the file's exact current content fingerprint with the fingerprint captured by critique. Unchanged staged, unstaged, or untracked content remains current; any byte change, deletion, or replacement with a non-file closes the backlog it identified while preserving its trend history and exits 2. A URL target has no local fingerprint and remains current until explicitly closed. When current, incorporate relevant P0/P1 findings from `body` and name the snapshot read. Exit 2 means none exists or the target changed. Perform an independent pass either way.
|
|
36
|
+
|
|
37
|
+
## 3. Triage
|
|
38
|
+
|
|
39
|
+
Separate functional defects from cosmetic ones and fix in this order:
|
|
40
|
+
|
|
41
|
+
1. broken or blocked tasks, data loss, misleading state, and inaccessible paths;
|
|
42
|
+
2. missing loading, empty, error, success, disabled, and permission states;
|
|
43
|
+
3. flow, hierarchy, responsive, and design-system drift;
|
|
44
|
+
4. visual and motion inconsistencies;
|
|
45
|
+
5. code and asset cleanup.
|
|
46
|
+
|
|
47
|
+
Do not perfect one corner while leaving the rest below the same quality bar.
|
|
48
|
+
|
|
49
|
+
## 4. Polish the whole path
|
|
50
|
+
|
|
51
|
+
### Flow and hierarchy
|
|
52
|
+
|
|
53
|
+
- Match neighboring mental models, terminology, disclosure, routing, save behavior, and optimistic or pessimistic patterns.
|
|
54
|
+
- Make the primary task and current state obvious without flattening every element to equal weight.
|
|
55
|
+
- Ensure arrival, transition, empty, and recovery paths connect instead of behaving as isolated screens.
|
|
56
|
+
|
|
57
|
+
### Layout and type
|
|
58
|
+
|
|
59
|
+
- Align to the project's grid and spacing scale; fix optical as well as mathematical alignment.
|
|
60
|
+
- Group related content tightly and separate distinct groups generously.
|
|
61
|
+
- Keep same-role typography consistent; test measure, wrapping, localization expansion, zoom, and font loading.
|
|
62
|
+
- Verify every supported viewport rather than correcting only the current screenshot.
|
|
63
|
+
|
|
64
|
+
### Color, imagery, and icons
|
|
65
|
+
|
|
66
|
+
- Use semantic tokens and stable color meanings across themes.
|
|
67
|
+
- Verify text, control, and focus contrast in every state.
|
|
68
|
+
- Keep icon families, stroke/weight, sizing, and optical alignment coherent.
|
|
69
|
+
- Prevent image layout shift; use correct aspect ratios, responsive sources, and useful alt text.
|
|
70
|
+
|
|
71
|
+
### Interaction and state
|
|
72
|
+
|
|
73
|
+
- Every control needs appropriate default, hover, focus, active, disabled, loading, error, and success behavior.
|
|
74
|
+
- Preserve visible keyboard focus, logical tab order, labels, and platform-appropriate touch targets.
|
|
75
|
+
- Keep motion coherent, interruptible, and performant. Do not add animation merely to make polish visible.
|
|
76
|
+
- Validate long, missing, localized, offline, slow, and permission-limited content where the product can encounter it.
|
|
77
|
+
|
|
78
|
+
### Content and code
|
|
79
|
+
|
|
80
|
+
- Keep terminology, capitalization, punctuation, and factual copy consistent. Ask before changing claims.
|
|
81
|
+
- Remove debug output, dead code, unused imports, obsolete styles, and polish-created duplication.
|
|
82
|
+
- Replace custom implementations with shared components where the system owns the pattern.
|
|
83
|
+
- Promote genuinely reusable values to tokens; do not create a system abstraction for one local exception.
|
|
84
|
+
|
|
85
|
+
## 5. Verify and finish
|
|
86
|
+
|
|
87
|
+
Walk the complete path again with mouse, keyboard, and touch where applicable. Check:
|
|
88
|
+
|
|
89
|
+
- mobile, intermediate, and wide layouts on the web; phone and tablet size classes in both supported orientations on native;
|
|
90
|
+
- loading, empty, error, success, disabled, long-content, and missing-content states;
|
|
91
|
+
- zoom, contrast, focus, semantics, and screen-reader names;
|
|
92
|
+
- console errors, layout shift, interaction latency, and image loading everywhere; supported browsers on the web; supported OS versions, runtime warnings, and dropped frames on native;
|
|
93
|
+
- agreement with DESIGN.md, neighboring features, and the user's scope.
|
|
94
|
+
|
|
95
|
+
Follow the quality guidance supplied by `impeccable context` and hooks, then run any other relevant QA commands. Context requests a manual scan only when no automatic detector is active; never add another detector pass. Fix real defects and document only narrow intentional exceptions. A clean scan does not replace visual judgment.
|
|
96
|
+
|
|
97
|
+
Finish with a source diff: remove accidental churn, orphaned code, redundant values, and temporary artifacts. Ship only when the feature is functionally complete and consistently finished across the path.
|
|
98
|
+
|
|
99
|
+
When this pass clears every Priority Issue it took from a snapshot, close that snapshot:
|
|
100
|
+
|
|
101
|
+
```bash
|
|
102
|
+
.opencode/skills/impeccable/scripts/impeccable critique-storage close "<resolved target>" "<snapshot_file returned by latest>"
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
This closes only the snapshot this pass actually processed; if a newer critique landed meanwhile, its backlog stays live. Do not close when no snapshot was read, when `snapshot_file` was not retained, or when Priority Issues remain.
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
{
|
|
2
|
+
"project": "Impeccable",
|
|
3
|
+
"license": "Apache-2.0",
|
|
4
|
+
"commit": "9fadc41729c38fd47d7ae622b501558653f9d2e9",
|
|
5
|
+
"scope": "Unmodified selected Markdown references; upstream executable engine and hooks are not bundled.",
|
|
6
|
+
"version": "4.8.0",
|
|
7
|
+
"source": "https://github.com/pbakaus/impeccable"
|
|
8
|
+
}
|