@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.
@@ -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
- ## Choose the direction before the components
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
- Briefly state the choice and why it helps the primary task. Do not require approval unless the user requested a design checkpoint or the choice would change their scope or brand. Respect supplied designs and existing systems.
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
- Before substantial implementation, leave a compact decision record in the task's existing plan, or in the response if no plan exists:
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
- ## Choose the direction before the components
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
- Briefly state the choice and why it helps the primary task. Do not require approval unless the user requested a design checkpoint or the choice would change their scope or brand. Respect supplied designs and existing systems.
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
- Before substantial implementation, leave a compact decision record in the task's existing plan, or in the response if no plan exists:
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
- ## Choose the direction before the components
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
- Briefly state the choice and why it helps the primary task. Do not require approval unless the user requested a design checkpoint or the choice would change their scope or brand. Respect supplied designs and existing systems.
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
- Before substantial implementation, leave a compact decision record in the task's existing plan, or in the response if no plan exists:
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
- ## Choose the direction before the components
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
- Briefly state the choice and why it helps the primary task. Do not require approval unless the user requested a design checkpoint or the choice would change their scope or brand. Respect supplied designs and existing systems.
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
- Before substantial implementation, leave a compact decision record in the task's existing plan, or in the response if no plan exists:
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
- ## Choose the direction before the components
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
- Briefly state the choice and why it helps the primary task. Do not require approval unless the user requested a design checkpoint or the choice would change their scope or brand. Respect supplied designs and existing systems.
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
- Before substantial implementation, leave a compact decision record in the task's existing plan, or in the response if no plan exists:
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
- ## Choose the direction before the components
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
- Briefly state the choice and why it helps the primary task. Do not require approval unless the user requested a design checkpoint or the choice would change their scope or brand. Respect supplied designs and existing systems.
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
- Before substantial implementation, leave a compact decision record in the task's existing plan, or in the response if no plan exists:
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
  | --- | --- | --- | --- | --- |
@@ -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
+ ![Before and after frontend-direction comparison](assets/frontend-direction-comparison-2026-10-19.png)
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@olegkoval/agent-skills",
3
- "version": "1.57.0",
3
+ "version": "1.58.1",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "olko-apple-kit",
3
3
  "description": "Build and ship Apple platform apps: macOS menubar apps, App Store submissions.",
4
- "version": "1.57.0",
4
+ "version": "1.58.1",
5
5
  "author": {
6
6
  "name": "Oleg Koval"
7
7
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "olko-creative",
3
3
  "description": "Creative and personal projects: photo galleries, music players, listings, wiki editing.",
4
- "version": "1.57.0",
4
+ "version": "1.58.1",
5
5
  "author": {
6
6
  "name": "Oleg Koval"
7
7
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "olko-garmin-kit",
3
3
  "description": "Build, test and publish Garmin Connect IQ watch faces.",
4
- "version": "1.57.0",
4
+ "version": "1.58.1",
5
5
  "author": {
6
6
  "name": "Oleg Koval"
7
7
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "olko-git-tools",
3
3
  "description": "Everyday git and GitHub CLI operations: conventional commits, branch hygiene.",
4
- "version": "1.57.0",
4
+ "version": "1.58.1",
5
5
  "author": {
6
6
  "name": "Oleg Koval"
7
7
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "olko-github-pr",
3
3
  "description": "Drive GitHub pull requests to merge-ready: review-bot loops, CI fixes, descriptions, dependency triage.",
4
- "version": "1.57.0",
4
+ "version": "1.58.1",
5
5
  "author": {
6
6
  "name": "Oleg Koval"
7
7
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "olko-obsidian",
3
3
  "description": "Keep an Obsidian vault in sync with work: PR sync, task rollover, morning routine.",
4
- "version": "1.57.0",
4
+ "version": "1.58.1",
5
5
  "author": {
6
6
  "name": "Oleg Koval"
7
7
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "olko-product",
3
3
  "description": "Take a product idea to a shippable build: MVP passes, full-stack scaffolds, UX/UI quality loops, launch plans.",
4
- "version": "1.57.0",
4
+ "version": "1.58.1",
5
5
  "author": {
6
6
  "name": "Oleg Koval"
7
7
  },
@@ -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. Skill structure is validated; comparative visual-quality evaluation and end-to-end trials in all four agents are still pending.
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 implementing a frontend page or substantial UI redesign, load and follow the installed frontend-direction skill. State the chosen visual direction and component sources before coding. 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.
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
- ## Choose the direction before the components
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
- Briefly state the choice and why it helps the primary task. Do not require approval unless the user requested a design checkpoint or the choice would change their scope or brand. Respect supplied designs and existing systems.
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
- Before substantial implementation, leave a compact decision record in the task's existing plan, or in the response if no plan exists:
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
  | --- | --- | --- | --- | --- |
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "olko-reflection",
3
3
  "description": "Look back and improve: self-critique, retrospectives, performance review, rapid learning.",
4
- "version": "1.57.0",
4
+ "version": "1.58.1",
5
5
  "author": {
6
6
  "name": "Oleg Koval"
7
7
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "olko-release",
3
3
  "description": "Ship a release: semantic-release setup, changelogs, store listing copy, release-day routine.",
4
- "version": "1.57.0",
4
+ "version": "1.58.1",
5
5
  "author": {
6
6
  "name": "Oleg Koval"
7
7
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "olko-skill-meta",
3
3
  "description": "Author and maintain agent skills and the AI toolchain itself.",
4
- "version": "1.57.0",
4
+ "version": "1.58.1",
5
5
  "author": {
6
6
  "name": "Oleg Koval"
7
7
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "olko-web-ops",
3
3
  "description": "Operate a website: WAF rules, search console audits, analytics bootstrap, docs indexes.",
4
- "version": "1.57.0",
4
+ "version": "1.58.1",
5
5
  "author": {
6
6
  "name": "Oleg Koval"
7
7
  },