@olegkoval/agent-skills 1.57.0 → 1.58.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/.github/prompts/frontend-direction.prompt.md +14 -3
- package/.kiro/steering/frontend-direction.md +14 -3
- package/.windsurf/rules/frontend-direction.md +14 -3
- package/adapters/claude/olko-product/skills/frontend-direction/SKILL.md +14 -3
- package/adapters/cursor/olko-product/skills/frontend-direction/SKILL.md +14 -3
- package/adapters/grok/olko-product/skills/frontend-direction/SKILL.md +14 -3
- package/docs/assets/frontend-direction-comparison-2026-10-19.png +0 -0
- package/docs/frontend-direction-evaluation-2026-10-19.md +30 -0
- package/package.json +1 -1
- package/plugins/olko-apple-kit/.claude-plugin/plugin.json +1 -1
- package/plugins/olko-creative/.claude-plugin/plugin.json +1 -1
- package/plugins/olko-garmin-kit/.claude-plugin/plugin.json +1 -1
- package/plugins/olko-git-tools/.claude-plugin/plugin.json +1 -1
- package/plugins/olko-github-pr/.claude-plugin/plugin.json +1 -1
- package/plugins/olko-obsidian/.claude-plugin/plugin.json +1 -1
- package/plugins/olko-product/.claude-plugin/plugin.json +1 -1
- package/plugins/olko-product/skills/frontend-direction/README.md +2 -2
- package/plugins/olko-product/skills/frontend-direction/SKILL.md +14 -3
- package/plugins/olko-reflection/.claude-plugin/plugin.json +1 -1
- package/plugins/olko-release/.claude-plugin/plugin.json +1 -1
- package/plugins/olko-skill-meta/.claude-plugin/plugin.json +1 -1
- package/plugins/olko-web-ops/.claude-plugin/plugin.json +1 -1
|
@@ -18,11 +18,22 @@ For a new page or substantial redesign, use the workflow below. For a small fix,
|
|
|
18
18
|
|
|
19
19
|
Read the relevant application instructions, stack, existing components and visual conventions. Inspect the current screen when available. Infer the audience, primary action, content density and constraints from the task. Ask only when a missing decision materially changes the result; otherwise state the assumption and proceed within the user's authorization.
|
|
20
20
|
|
|
21
|
-
##
|
|
21
|
+
## State the direction and component choices before coding
|
|
22
|
+
|
|
23
|
+
For a new page or substantial redesign, make a visible pre-code decision record before the first UI implementation edit. Put it in the existing task plan or in the response; when neither exists, state it in the response. This is a required workflow checkpoint, not a request for user approval: state the choice, then continue autonomously unless the user asked to review it first.
|
|
24
|
+
|
|
25
|
+
The record must name:
|
|
26
|
+
|
|
27
|
+
- the chosen composition and why it serves the task;
|
|
28
|
+
- the visual anchors: hierarchy, typography, palette, density, image treatment, and motion purpose;
|
|
29
|
+
- the component or pattern for the primary UI roles, with a source URL or local path and any dependency or licensing cost;
|
|
30
|
+
- one relevant alternative considered and why it was rejected.
|
|
31
|
+
|
|
32
|
+
Do not create or edit UI implementation files until this record is present. If the user requests immediate implementation, include the record immediately before making the first UI edit. For an existing task plan, update it instead of creating another document. Keep the record compact and skip details that do not apply.
|
|
22
33
|
|
|
23
34
|
For an open-ended brief, consider two or three genuinely different compositions and choose the strongest fit. A color swap is not a different direction. A buyer comparing evidence may need an inspection workspace; a photographer may need an image-led editorial sequence. Avoid defaulting every product to a centered hero followed by identical cards.
|
|
24
35
|
|
|
25
|
-
|
|
36
|
+
Respect supplied designs and existing systems. Do not require approval for an ordinary direction choice unless the user requested a design checkpoint or the choice would change their scope or brand.
|
|
26
37
|
|
|
27
38
|
Define the visual anchors: layout and hierarchy, typography roles, palette, density, image treatment, and motion purpose. Reuse tokens where possible. Choose one or two signature treatments for emphasis, such as an annotated comparison rail or an editorial image sequence. Keep frequent controls familiar. Treat these as a default attention budget, not a prohibition on expressive briefs.
|
|
28
39
|
|
|
@@ -36,7 +47,7 @@ Inspect the exact official component page and available source before copying or
|
|
|
36
47
|
|
|
37
48
|
Prefer one primary component family per surface. Borrow an isolated interaction from another source only when it can share the same typography, spacing, radius, color and motion conventions. Never add a framework merely to use a decorative component. If browsing fails, label references unverified, use local primitives, and continue without claiming live checks.
|
|
38
49
|
|
|
39
|
-
|
|
50
|
+
In the pre-code record, use a compact table for the component decisions when there are multiple UI roles:
|
|
40
51
|
|
|
41
52
|
| UI role | Chosen component or pattern | Source or local path | Why it fits | Adaptation and cost |
|
|
42
53
|
| --- | --- | --- | --- | --- |
|
|
@@ -17,11 +17,22 @@ For a new page or substantial redesign, use the workflow below. For a small fix,
|
|
|
17
17
|
|
|
18
18
|
Read the relevant application instructions, stack, existing components and visual conventions. Inspect the current screen when available. Infer the audience, primary action, content density and constraints from the task. Ask only when a missing decision materially changes the result; otherwise state the assumption and proceed within the user's authorization.
|
|
19
19
|
|
|
20
|
-
##
|
|
20
|
+
## State the direction and component choices before coding
|
|
21
|
+
|
|
22
|
+
For a new page or substantial redesign, make a visible pre-code decision record before the first UI implementation edit. Put it in the existing task plan or in the response; when neither exists, state it in the response. This is a required workflow checkpoint, not a request for user approval: state the choice, then continue autonomously unless the user asked to review it first.
|
|
23
|
+
|
|
24
|
+
The record must name:
|
|
25
|
+
|
|
26
|
+
- the chosen composition and why it serves the task;
|
|
27
|
+
- the visual anchors: hierarchy, typography, palette, density, image treatment, and motion purpose;
|
|
28
|
+
- the component or pattern for the primary UI roles, with a source URL or local path and any dependency or licensing cost;
|
|
29
|
+
- one relevant alternative considered and why it was rejected.
|
|
30
|
+
|
|
31
|
+
Do not create or edit UI implementation files until this record is present. If the user requests immediate implementation, include the record immediately before making the first UI edit. For an existing task plan, update it instead of creating another document. Keep the record compact and skip details that do not apply.
|
|
21
32
|
|
|
22
33
|
For an open-ended brief, consider two or three genuinely different compositions and choose the strongest fit. A color swap is not a different direction. A buyer comparing evidence may need an inspection workspace; a photographer may need an image-led editorial sequence. Avoid defaulting every product to a centered hero followed by identical cards.
|
|
23
34
|
|
|
24
|
-
|
|
35
|
+
Respect supplied designs and existing systems. Do not require approval for an ordinary direction choice unless the user requested a design checkpoint or the choice would change their scope or brand.
|
|
25
36
|
|
|
26
37
|
Define the visual anchors: layout and hierarchy, typography roles, palette, density, image treatment, and motion purpose. Reuse tokens where possible. Choose one or two signature treatments for emphasis, such as an annotated comparison rail or an editorial image sequence. Keep frequent controls familiar. Treat these as a default attention budget, not a prohibition on expressive briefs.
|
|
27
38
|
|
|
@@ -35,7 +46,7 @@ Inspect the exact official component page and available source before copying or
|
|
|
35
46
|
|
|
36
47
|
Prefer one primary component family per surface. Borrow an isolated interaction from another source only when it can share the same typography, spacing, radius, color and motion conventions. Never add a framework merely to use a decorative component. If browsing fails, label references unverified, use local primitives, and continue without claiming live checks.
|
|
37
48
|
|
|
38
|
-
|
|
49
|
+
In the pre-code record, use a compact table for the component decisions when there are multiple UI roles:
|
|
39
50
|
|
|
40
51
|
| UI role | Chosen component or pattern | Source or local path | Why it fits | Adaptation and cost |
|
|
41
52
|
| --- | --- | --- | --- | --- |
|
|
@@ -16,11 +16,22 @@ For a new page or substantial redesign, use the workflow below. For a small fix,
|
|
|
16
16
|
|
|
17
17
|
Read the relevant application instructions, stack, existing components and visual conventions. Inspect the current screen when available. Infer the audience, primary action, content density and constraints from the task. Ask only when a missing decision materially changes the result; otherwise state the assumption and proceed within the user's authorization.
|
|
18
18
|
|
|
19
|
-
##
|
|
19
|
+
## State the direction and component choices before coding
|
|
20
|
+
|
|
21
|
+
For a new page or substantial redesign, make a visible pre-code decision record before the first UI implementation edit. Put it in the existing task plan or in the response; when neither exists, state it in the response. This is a required workflow checkpoint, not a request for user approval: state the choice, then continue autonomously unless the user asked to review it first.
|
|
22
|
+
|
|
23
|
+
The record must name:
|
|
24
|
+
|
|
25
|
+
- the chosen composition and why it serves the task;
|
|
26
|
+
- the visual anchors: hierarchy, typography, palette, density, image treatment, and motion purpose;
|
|
27
|
+
- the component or pattern for the primary UI roles, with a source URL or local path and any dependency or licensing cost;
|
|
28
|
+
- one relevant alternative considered and why it was rejected.
|
|
29
|
+
|
|
30
|
+
Do not create or edit UI implementation files until this record is present. If the user requests immediate implementation, include the record immediately before making the first UI edit. For an existing task plan, update it instead of creating another document. Keep the record compact and skip details that do not apply.
|
|
20
31
|
|
|
21
32
|
For an open-ended brief, consider two or three genuinely different compositions and choose the strongest fit. A color swap is not a different direction. A buyer comparing evidence may need an inspection workspace; a photographer may need an image-led editorial sequence. Avoid defaulting every product to a centered hero followed by identical cards.
|
|
22
33
|
|
|
23
|
-
|
|
34
|
+
Respect supplied designs and existing systems. Do not require approval for an ordinary direction choice unless the user requested a design checkpoint or the choice would change their scope or brand.
|
|
24
35
|
|
|
25
36
|
Define the visual anchors: layout and hierarchy, typography roles, palette, density, image treatment, and motion purpose. Reuse tokens where possible. Choose one or two signature treatments for emphasis, such as an annotated comparison rail or an editorial image sequence. Keep frequent controls familiar. Treat these as a default attention budget, not a prohibition on expressive briefs.
|
|
26
37
|
|
|
@@ -34,7 +45,7 @@ Inspect the exact official component page and available source before copying or
|
|
|
34
45
|
|
|
35
46
|
Prefer one primary component family per surface. Borrow an isolated interaction from another source only when it can share the same typography, spacing, radius, color and motion conventions. Never add a framework merely to use a decorative component. If browsing fails, label references unverified, use local primitives, and continue without claiming live checks.
|
|
36
47
|
|
|
37
|
-
|
|
48
|
+
In the pre-code record, use a compact table for the component decisions when there are multiple UI roles:
|
|
38
49
|
|
|
39
50
|
| UI role | Chosen component or pattern | Source or local path | Why it fits | Adaptation and cost |
|
|
40
51
|
| --- | --- | --- | --- | --- |
|
|
@@ -20,11 +20,22 @@ For a new page or substantial redesign, use the workflow below. For a small fix,
|
|
|
20
20
|
|
|
21
21
|
Read the relevant application instructions, stack, existing components and visual conventions. Inspect the current screen when available. Infer the audience, primary action, content density and constraints from the task. Ask only when a missing decision materially changes the result; otherwise state the assumption and proceed within the user's authorization.
|
|
22
22
|
|
|
23
|
-
##
|
|
23
|
+
## State the direction and component choices before coding
|
|
24
|
+
|
|
25
|
+
For a new page or substantial redesign, make a visible pre-code decision record before the first UI implementation edit. Put it in the existing task plan or in the response; when neither exists, state it in the response. This is a required workflow checkpoint, not a request for user approval: state the choice, then continue autonomously unless the user asked to review it first.
|
|
26
|
+
|
|
27
|
+
The record must name:
|
|
28
|
+
|
|
29
|
+
- the chosen composition and why it serves the task;
|
|
30
|
+
- the visual anchors: hierarchy, typography, palette, density, image treatment, and motion purpose;
|
|
31
|
+
- the component or pattern for the primary UI roles, with a source URL or local path and any dependency or licensing cost;
|
|
32
|
+
- one relevant alternative considered and why it was rejected.
|
|
33
|
+
|
|
34
|
+
Do not create or edit UI implementation files until this record is present. If the user requests immediate implementation, include the record immediately before making the first UI edit. For an existing task plan, update it instead of creating another document. Keep the record compact and skip details that do not apply.
|
|
24
35
|
|
|
25
36
|
For an open-ended brief, consider two or three genuinely different compositions and choose the strongest fit. A color swap is not a different direction. A buyer comparing evidence may need an inspection workspace; a photographer may need an image-led editorial sequence. Avoid defaulting every product to a centered hero followed by identical cards.
|
|
26
37
|
|
|
27
|
-
|
|
38
|
+
Respect supplied designs and existing systems. Do not require approval for an ordinary direction choice unless the user requested a design checkpoint or the choice would change their scope or brand.
|
|
28
39
|
|
|
29
40
|
Define the visual anchors: layout and hierarchy, typography roles, palette, density, image treatment, and motion purpose. Reuse tokens where possible. Choose one or two signature treatments for emphasis, such as an annotated comparison rail or an editorial image sequence. Keep frequent controls familiar. Treat these as a default attention budget, not a prohibition on expressive briefs.
|
|
30
41
|
|
|
@@ -38,7 +49,7 @@ Inspect the exact official component page and available source before copying or
|
|
|
38
49
|
|
|
39
50
|
Prefer one primary component family per surface. Borrow an isolated interaction from another source only when it can share the same typography, spacing, radius, color and motion conventions. Never add a framework merely to use a decorative component. If browsing fails, label references unverified, use local primitives, and continue without claiming live checks.
|
|
40
51
|
|
|
41
|
-
|
|
52
|
+
In the pre-code record, use a compact table for the component decisions when there are multiple UI roles:
|
|
42
53
|
|
|
43
54
|
| UI role | Chosen component or pattern | Source or local path | Why it fits | Adaptation and cost |
|
|
44
55
|
| --- | --- | --- | --- | --- |
|
|
@@ -20,11 +20,22 @@ For a new page or substantial redesign, use the workflow below. For a small fix,
|
|
|
20
20
|
|
|
21
21
|
Read the relevant application instructions, stack, existing components and visual conventions. Inspect the current screen when available. Infer the audience, primary action, content density and constraints from the task. Ask only when a missing decision materially changes the result; otherwise state the assumption and proceed within the user's authorization.
|
|
22
22
|
|
|
23
|
-
##
|
|
23
|
+
## State the direction and component choices before coding
|
|
24
|
+
|
|
25
|
+
For a new page or substantial redesign, make a visible pre-code decision record before the first UI implementation edit. Put it in the existing task plan or in the response; when neither exists, state it in the response. This is a required workflow checkpoint, not a request for user approval: state the choice, then continue autonomously unless the user asked to review it first.
|
|
26
|
+
|
|
27
|
+
The record must name:
|
|
28
|
+
|
|
29
|
+
- the chosen composition and why it serves the task;
|
|
30
|
+
- the visual anchors: hierarchy, typography, palette, density, image treatment, and motion purpose;
|
|
31
|
+
- the component or pattern for the primary UI roles, with a source URL or local path and any dependency or licensing cost;
|
|
32
|
+
- one relevant alternative considered and why it was rejected.
|
|
33
|
+
|
|
34
|
+
Do not create or edit UI implementation files until this record is present. If the user requests immediate implementation, include the record immediately before making the first UI edit. For an existing task plan, update it instead of creating another document. Keep the record compact and skip details that do not apply.
|
|
24
35
|
|
|
25
36
|
For an open-ended brief, consider two or three genuinely different compositions and choose the strongest fit. A color swap is not a different direction. A buyer comparing evidence may need an inspection workspace; a photographer may need an image-led editorial sequence. Avoid defaulting every product to a centered hero followed by identical cards.
|
|
26
37
|
|
|
27
|
-
|
|
38
|
+
Respect supplied designs and existing systems. Do not require approval for an ordinary direction choice unless the user requested a design checkpoint or the choice would change their scope or brand.
|
|
28
39
|
|
|
29
40
|
Define the visual anchors: layout and hierarchy, typography roles, palette, density, image treatment, and motion purpose. Reuse tokens where possible. Choose one or two signature treatments for emphasis, such as an annotated comparison rail or an editorial image sequence. Keep frequent controls familiar. Treat these as a default attention budget, not a prohibition on expressive briefs.
|
|
30
41
|
|
|
@@ -38,7 +49,7 @@ Inspect the exact official component page and available source before copying or
|
|
|
38
49
|
|
|
39
50
|
Prefer one primary component family per surface. Borrow an isolated interaction from another source only when it can share the same typography, spacing, radius, color and motion conventions. Never add a framework merely to use a decorative component. If browsing fails, label references unverified, use local primitives, and continue without claiming live checks.
|
|
40
51
|
|
|
41
|
-
|
|
52
|
+
In the pre-code record, use a compact table for the component decisions when there are multiple UI roles:
|
|
42
53
|
|
|
43
54
|
| UI role | Chosen component or pattern | Source or local path | Why it fits | Adaptation and cost |
|
|
44
55
|
| --- | --- | --- | --- | --- |
|
|
@@ -20,11 +20,22 @@ For a new page or substantial redesign, use the workflow below. For a small fix,
|
|
|
20
20
|
|
|
21
21
|
Read the relevant application instructions, stack, existing components and visual conventions. Inspect the current screen when available. Infer the audience, primary action, content density and constraints from the task. Ask only when a missing decision materially changes the result; otherwise state the assumption and proceed within the user's authorization.
|
|
22
22
|
|
|
23
|
-
##
|
|
23
|
+
## State the direction and component choices before coding
|
|
24
|
+
|
|
25
|
+
For a new page or substantial redesign, make a visible pre-code decision record before the first UI implementation edit. Put it in the existing task plan or in the response; when neither exists, state it in the response. This is a required workflow checkpoint, not a request for user approval: state the choice, then continue autonomously unless the user asked to review it first.
|
|
26
|
+
|
|
27
|
+
The record must name:
|
|
28
|
+
|
|
29
|
+
- the chosen composition and why it serves the task;
|
|
30
|
+
- the visual anchors: hierarchy, typography, palette, density, image treatment, and motion purpose;
|
|
31
|
+
- the component or pattern for the primary UI roles, with a source URL or local path and any dependency or licensing cost;
|
|
32
|
+
- one relevant alternative considered and why it was rejected.
|
|
33
|
+
|
|
34
|
+
Do not create or edit UI implementation files until this record is present. If the user requests immediate implementation, include the record immediately before making the first UI edit. For an existing task plan, update it instead of creating another document. Keep the record compact and skip details that do not apply.
|
|
24
35
|
|
|
25
36
|
For an open-ended brief, consider two or three genuinely different compositions and choose the strongest fit. A color swap is not a different direction. A buyer comparing evidence may need an inspection workspace; a photographer may need an image-led editorial sequence. Avoid defaulting every product to a centered hero followed by identical cards.
|
|
26
37
|
|
|
27
|
-
|
|
38
|
+
Respect supplied designs and existing systems. Do not require approval for an ordinary direction choice unless the user requested a design checkpoint or the choice would change their scope or brand.
|
|
28
39
|
|
|
29
40
|
Define the visual anchors: layout and hierarchy, typography roles, palette, density, image treatment, and motion purpose. Reuse tokens where possible. Choose one or two signature treatments for emphasis, such as an annotated comparison rail or an editorial image sequence. Keep frequent controls familiar. Treat these as a default attention budget, not a prohibition on expressive briefs.
|
|
30
41
|
|
|
@@ -38,7 +49,7 @@ Inspect the exact official component page and available source before copying or
|
|
|
38
49
|
|
|
39
50
|
Prefer one primary component family per surface. Borrow an isolated interaction from another source only when it can share the same typography, spacing, radius, color and motion conventions. Never add a framework merely to use a decorative component. If browsing fails, label references unverified, use local primitives, and continue without claiming live checks.
|
|
40
51
|
|
|
41
|
-
|
|
52
|
+
In the pre-code record, use a compact table for the component decisions when there are multiple UI roles:
|
|
42
53
|
|
|
43
54
|
| UI role | Chosen component or pattern | Source or local path | Why it fits | Adaptation and cost |
|
|
44
55
|
| --- | --- | --- | --- | --- |
|
|
Binary file
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# Frontend direction evaluation
|
|
2
|
+
|
|
3
|
+
Date: 2026-10-19. This evaluation tests the released v1.57.0 skill. The pre-code checkpoint added in the current PR has not yet been behaviorally re-tested.
|
|
4
|
+
|
|
5
|
+
## Runtime results
|
|
6
|
+
|
|
7
|
+
| Agent | Skill discovery | Frontend build | Direction and component choices before first UI edit | Small UI fix |
|
|
8
|
+
| --- | --- | --- | --- | --- |
|
|
9
|
+
| Codex | Passed; transcript read installed skill | Passed | Passed | Passed; changed only the requested 8px to 12px spacing |
|
|
10
|
+
| Claude Code | Passed; skill invoked | Passed | Not demonstrated; direction was reported after first UI edit | Passed; changed only the requested 8px to 12px spacing |
|
|
11
|
+
| Pi | Passed; native loader found the skill | Deferred; no authenticated provider | Unknown | Deferred |
|
|
12
|
+
| Hermes | Passed; native skill index found the skill | Deferred; no connected provider | Unknown | Deferred |
|
|
13
|
+
|
|
14
|
+
Pi and Hermes model trials were explicitly deferred pending provider authentication. Their discovery checks do not establish behavior during a model run.
|
|
15
|
+
|
|
16
|
+
## Controlled comparison
|
|
17
|
+
|
|
18
|
+
The paired pages use the same fictional coffee storefront brief, content, tool permissions, model (`claude-sonnet-5-5`), medium effort, and run limits. The intended difference is skill availability. Neither generated page was hand-polished.
|
|
19
|
+
|
|
20
|
+

|
|
21
|
+
|
|
22
|
+
Both pages passed browser checks for filtering, bag count, keyboard focus, and 390px mobile overflow. The skill-assisted page uses a more editorial composition and horizontal coffee rows, with additional scrolling. This is one paired demonstration, not a benchmark or evidence that the treatment is universally better; no blinded human preference test was run.
|
|
23
|
+
|
|
24
|
+
The self-contained brief used no external assets or dependencies. This does not validate integration with an existing component library. Raw model transcripts are not included in the repository.
|
|
25
|
+
|
|
26
|
+
## Follow-up validation
|
|
27
|
+
|
|
28
|
+
- Re-run Claude against the updated skill and verify the required decision record appears before the first UI edit. An attempted rerun after this edit stopped immediately: the local Claude CLI returned `Not logged in` before generating a response or consuming model tokens.
|
|
29
|
+
- Run authenticated Pi and Hermes trials when providers are available.
|
|
30
|
+
- Repeat with a project that already uses a component library to assess source selection and compatibility.
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@ Give your coding agent a visual direction before it writes the frontend.
|
|
|
4
4
|
|
|
5
5
|
For new pages and substantial redesigns, this skill chooses a composition, selects compatible components, records the decisions and checks the rendered result. Small UI fixes stay within the existing design. The reference catalog includes the seven resources from [Nero's post](https://x.com/neropursue/status/2109514246853677192).
|
|
6
6
|
|
|
7
|
-
Status: experimental.
|
|
7
|
+
Status: experimental beta. Discovery passes in all four agents. Codex and Claude Code produced functional pages and passed the small-fix case; Codex stated its direction before coding, while Claude did not demonstrate that checkpoint before its first UI edit. This update makes the checkpoint explicit. Pi and Hermes model trials remain deferred because provider authentication is unavailable. See the [evaluation and controlled comparison](../../../../docs/frontend-direction-evaluation-2026-10-19.md). The updated checkpoint still needs a Claude rerun; the current Claude CLI returned `Not logged in` before generating a response.
|
|
8
8
|
|
|
9
9
|
## Install
|
|
10
10
|
|
|
@@ -30,7 +30,7 @@ Start a new session after installation. Explicit invocation avoids relying on th
|
|
|
30
30
|
|
|
31
31
|
For routine use, add this instruction to the project's active agent instructions: `AGENTS.md` for Codex and Pi, `CLAUDE.md` for Claude Code, and the active project context file for Hermes. Hermes can prioritize `.hermes.md` or `AGENTS.override.md` over `AGENTS.md`; put the rule in the file actually loaded.
|
|
32
32
|
|
|
33
|
-
> Before
|
|
33
|
+
> Before editing UI implementation files for a new page or substantial redesign, load and follow the installed frontend-direction skill. State the chosen composition, visual anchors, component choices and sources, and a relevant rejected alternative. Then continue without waiting for approval unless a design checkpoint was requested. For small UI fixes, use its lightweight path and preserve the existing design. If the skill is unavailable, report that and use the project's existing design guidance.
|
|
34
34
|
|
|
35
35
|
This is an instruction-level requirement, not a runtime enforcement hook. Check that the agent actually loads the skill and states a direction on the first frontend task. Do not assume discovery proves usage or visual quality. Installing the plugin does not modify project instructions.
|
|
36
36
|
|
|
@@ -19,11 +19,22 @@ For a new page or substantial redesign, use the workflow below. For a small fix,
|
|
|
19
19
|
|
|
20
20
|
Read the relevant application instructions, stack, existing components and visual conventions. Inspect the current screen when available. Infer the audience, primary action, content density and constraints from the task. Ask only when a missing decision materially changes the result; otherwise state the assumption and proceed within the user's authorization.
|
|
21
21
|
|
|
22
|
-
##
|
|
22
|
+
## State the direction and component choices before coding
|
|
23
|
+
|
|
24
|
+
For a new page or substantial redesign, make a visible pre-code decision record before the first UI implementation edit. Put it in the existing task plan or in the response; when neither exists, state it in the response. This is a required workflow checkpoint, not a request for user approval: state the choice, then continue autonomously unless the user asked to review it first.
|
|
25
|
+
|
|
26
|
+
The record must name:
|
|
27
|
+
|
|
28
|
+
- the chosen composition and why it serves the task;
|
|
29
|
+
- the visual anchors: hierarchy, typography, palette, density, image treatment, and motion purpose;
|
|
30
|
+
- the component or pattern for the primary UI roles, with a source URL or local path and any dependency or licensing cost;
|
|
31
|
+
- one relevant alternative considered and why it was rejected.
|
|
32
|
+
|
|
33
|
+
Do not create or edit UI implementation files until this record is present. If the user requests immediate implementation, include the record immediately before making the first UI edit. For an existing task plan, update it instead of creating another document. Keep the record compact and skip details that do not apply.
|
|
23
34
|
|
|
24
35
|
For an open-ended brief, consider two or three genuinely different compositions and choose the strongest fit. A color swap is not a different direction. A buyer comparing evidence may need an inspection workspace; a photographer may need an image-led editorial sequence. Avoid defaulting every product to a centered hero followed by identical cards.
|
|
25
36
|
|
|
26
|
-
|
|
37
|
+
Respect supplied designs and existing systems. Do not require approval for an ordinary direction choice unless the user requested a design checkpoint or the choice would change their scope or brand.
|
|
27
38
|
|
|
28
39
|
Define the visual anchors: layout and hierarchy, typography roles, palette, density, image treatment, and motion purpose. Reuse tokens where possible. Choose one or two signature treatments for emphasis, such as an annotated comparison rail or an editorial image sequence. Keep frequent controls familiar. Treat these as a default attention budget, not a prohibition on expressive briefs.
|
|
29
40
|
|
|
@@ -37,7 +48,7 @@ Inspect the exact official component page and available source before copying or
|
|
|
37
48
|
|
|
38
49
|
Prefer one primary component family per surface. Borrow an isolated interaction from another source only when it can share the same typography, spacing, radius, color and motion conventions. Never add a framework merely to use a decorative component. If browsing fails, label references unverified, use local primitives, and continue without claiming live checks.
|
|
39
50
|
|
|
40
|
-
|
|
51
|
+
In the pre-code record, use a compact table for the component decisions when there are multiple UI roles:
|
|
41
52
|
|
|
42
53
|
| UI role | Chosen component or pattern | Source or local path | Why it fits | Adaptation and cost |
|
|
43
54
|
| --- | --- | --- | --- | --- |
|