@ryuenn3123/agentic-senior-core 3.0.48 → 3.0.49
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/.agent-context/prompts/bootstrap-design.md +8 -10
- package/.agent-context/rules/frontend-architecture.md +9 -13
- package/lib/cli/project-scaffolder/design-contract/validation.mjs +4 -0
- package/lib/cli/project-scaffolder/design-contract.mjs +4 -0
- package/lib/cli/project-scaffolder/prompt-builders.mjs +5 -1
- package/package.json +1 -1
- package/scripts/frontend-usability-audit.mjs +4 -0
|
@@ -56,9 +56,7 @@ If the expressive path needs a new motion, 3D, canvas, scroll, or interaction li
|
|
|
56
56
|
|
|
57
57
|
Only downshift ambition after naming the concrete blocker: product fit, content density, measured performance budget, accessibility, device support, package conflict, security risk, or missing runtime capability. A new dependency, package count, or vague performance concern is not a blocker by itself. Pair every downshift with a replacement interaction quality that still changes composition, hierarchy, feedback, or memorability.
|
|
58
58
|
## Design Flexibility Layer
|
|
59
|
-
`docs/design-intent.json` must separate locked outcomes from flexible expression. The machine contract keeps review invariants stable; it must not freeze exact aesthetic implementation unless repo evidence, accessibility validation, implementation constraints, or explicit user approval locks it.
|
|
60
|
-
|
|
61
|
-
Record `designFlexibilityPolicy`: lock user goals, runtime constraints, accessibility, production readiness, forbidden patterns, and approved continuity; keep exact palette primitives, font families, radius/shadow values, component-kit theme mapping, signature move implementation, literal anchor artifacts, and spatial metaphors flexible until validated or approved. Semantic roles are required; exact primitives are not automatically locked. Required experience outcomes are separate from candidate implementation moves. Libraries supply behavior, accessibility, primitives, and delivery speed; the project supplies final composition, theme, morphology, and visual language.
|
|
59
|
+
`docs/design-intent.json` must separate locked outcomes from flexible expression. The machine contract keeps review invariants stable; it must not freeze exact aesthetic implementation unless repo evidence, accessibility validation, implementation constraints, or explicit user approval locks it. Record `designFlexibilityPolicy`: lock user goals, runtime constraints, accessibility, production readiness, forbidden patterns, and approved continuity; keep exact palette primitives, font families, radius/shadow values, component-kit theme mapping, signature move implementation, literal anchor artifacts, and spatial metaphors flexible until validated or approved. Semantic roles are required; exact primitives are not automatically locked.
|
|
62
60
|
## External Inspiration Boundary
|
|
63
61
|
Using outside websites, benchmark apps, galleries, or component examples is useful for constraint discovery, interaction mechanics, and implementation options, but never as a style source to imitate. Extract why a pattern works, then translate it into a current-project rule. Do not copy layout rhythm, palette, component skin, visual metaphor, or brand posture from a reference unless the user explicitly approves that continuity and it passes product fit.
|
|
64
62
|
|
|
@@ -83,16 +81,16 @@ If rich motion or spatial UI is omitted, record the product, content-density, pe
|
|
|
83
81
|
If 3D or canvas is used, record product role, interaction model, fallback path, runtime/library choice, loading state, keyboard path, and reduced-motion behavior.
|
|
84
82
|
|
|
85
83
|
## Token Derivation Audit
|
|
86
|
-
Before implementation, `docs/design-intent.json` must include top-level `derivedTokenLogic`:
|
|
87
|
-
- `anchorReference`
|
|
88
|
-
- `colorDerivationSource`
|
|
89
|
-
- `spacingDerivationSource`
|
|
90
|
-
- `typographyDerivationSource`
|
|
91
|
-
- `motionDerivationSource`
|
|
92
|
-
- `validationRule`
|
|
84
|
+
Before implementation, `docs/design-intent.json` must include top-level `derivedTokenLogic`: `anchorReference`, `colorDerivationSource`, `spacingDerivationSource`, `typographyDerivationSource`, `motionDerivationSource`, `colorSpace`, `spatialBaseUnit`, `typeScaleMethod`, `motionBudget`, and `validationRule`.
|
|
93
85
|
|
|
94
86
|
Every semantic token role must trace to `anchorReference`. Exact primitive values stay flexible until repo evidence, accessibility validation, implementation constraints, or explicit user approval locks them. If the rationale is "looks good", "common practice", "modern default", or "framework default", derive the token again before UI code.
|
|
95
87
|
|
|
88
|
+
## Implementation Craft Layer
|
|
89
|
+
Before accepting the design contract, record explicit CSS craft decisions:
|
|
90
|
+
- Color/typography: prefer OKLCH tokens and tinted neutrals for new CSS when supported, preserve existing token formats, name color commitment level, and prefer fluid `clamp()` scales with explicit role contrast, `text-wrap: balance`, and numeric typography decisions.
|
|
91
|
+
- Spatial/motion: name `spatialBaseUnit`, major multiples, optical exceptions, and `motionBudget`; prefer transform/opacity choreography, explicit easing, bounded stagger, and reduced-motion behavior.
|
|
92
|
+
- Implementation anti-attractor: list three default CSS reflexes this task might trigger, reject the most likely one, and choose one distinctive implementation move tied to the product.
|
|
93
|
+
|
|
96
94
|
## Library Research Protocol
|
|
97
95
|
If web search is available:
|
|
98
96
|
- Verify each new UI-related library against current official docs.
|
|
@@ -19,19 +19,7 @@ Use this rule for UI, UX, page, screen, component, layout, landing, dashboard, f
|
|
|
19
19
|
|
|
20
20
|
## Required Design Contract
|
|
21
21
|
|
|
22
|
-
Before UI code, create or refine `docs/DESIGN.md` and `docs/design-intent.json`.
|
|
23
|
-
|
|
24
|
-
The contract must record:
|
|
25
|
-
- `motionPaletteDecision`
|
|
26
|
-
- `designFlexibilityPolicy`
|
|
27
|
-
- `conceptualAnchor`
|
|
28
|
-
- `derivedTokenLogic`
|
|
29
|
-
- `aiSafeUiAudit`
|
|
30
|
-
- `designExecutionPolicy`
|
|
31
|
-
- `designExecutionHandoff`
|
|
32
|
-
- `reviewRubric`
|
|
33
|
-
- `contextHygiene`
|
|
34
|
-
- `libraryResearchStatus` and `libraryDecisions[]`
|
|
22
|
+
Before UI code, create or refine `docs/DESIGN.md` and `docs/design-intent.json`. The contract must record `motionPaletteDecision`, `designFlexibilityPolicy`, `conceptualAnchor`, `derivedTokenLogic`, `aiSafeUiAudit`, `designExecutionPolicy`, `designExecutionHandoff`, `reviewRubric`, `contextHygiene`, `libraryResearchStatus`, and `libraryDecisions[]`.
|
|
35
23
|
|
|
36
24
|
## Anti-Generic UI Gate
|
|
37
25
|
|
|
@@ -71,6 +59,7 @@ If the user gives no current-task visual research or reference:
|
|
|
71
59
|
- Treat motion, 3D, WebGL, canvas, scroll choreography, and animation libraries as first-class options.
|
|
72
60
|
- Omit rich motion or spatial UI only after naming the product-fit reason and the replacement interaction quality.
|
|
73
61
|
- For new screens or broad redesigns, research the expressive implementation path instead of defaulting to static native CSS. Use native or already-installed tools only when they can still deliver the chosen ambition, or when a concrete blocker is documented. Do not downshift because adding a package feels inconvenient; downshift only for a concrete product-fit, accessibility, security, compatibility, device, maintenance, or measured performance reason.
|
|
62
|
+
- Prefer micro-interactions in 150-300ms, layout transitions in 300-500ms, transform/opacity for high-frequency motion, explicit easing, bounded stagger, and reduced-motion alternatives unless evidence changes the budget.
|
|
74
63
|
- Keep reduced-motion, keyboard, loading, performance, mobile, and non-3D fallbacks explicit.
|
|
75
64
|
- Use component kits or headless primitives for behavior and accessibility when they fit. Replace library-default visual language with project-specific composition, tokens, motion, state treatment, and morphology.
|
|
76
65
|
- Keep design-intent flexible: lock user goals, accessibility, production readiness, forbidden patterns, and approved continuity; keep exact palette primitives, font families, radius/shadow values, component skins, candidate signature moves, and external website inspiration flexible until evidence or approval locks them. Convert references into product-fit rules; do not copy layout, palette, component skin, brand posture, or visual metaphor.
|
|
@@ -92,6 +81,7 @@ Responsive quality is not scale-only.
|
|
|
92
81
|
- Tablet must regroup surfaces instead of shrinking desktop.
|
|
93
82
|
- Desktop may expose more context but must not become interchangeable admin chrome.
|
|
94
83
|
- At least one major surface must change position, grouping, priority, or disclosure strategy between mobile and desktop.
|
|
84
|
+
- Prefer container queries, dynamic viewport units, support-checked selectors, subgrid, popover, or disclosure primitives when they simplify recomposition and fallbacks are clear.
|
|
95
85
|
|
|
96
86
|
## Accessibility
|
|
97
87
|
|
|
@@ -100,6 +90,12 @@ Responsive quality is not scale-only.
|
|
|
100
90
|
- Hard checks include focus visibility, focus appearance, target size, keyboard access, accessible authentication, color-only meaning, and dynamic status/state access.
|
|
101
91
|
- Fix accessibility issues without flattening the UI into generic safe chrome unless no expressive safe option remains.
|
|
102
92
|
|
|
93
|
+
## CSS Production Hardening
|
|
94
|
+
|
|
95
|
+
- Plan overflow, wrapping, truncation, empty, loading, error, and extreme-content behavior before declaring a layout complete.
|
|
96
|
+
- Prefer `min()`, `max()`, `clamp()`, stable aspect ratios, container-relative sizing, OKLCH, and tinted neutrals for new tokens when supported; preserve existing design-system tokens.
|
|
97
|
+
- Treat recursive card nesting, uniform radius everywhere, shadow on every surface, arbitrary spacing, gray text on saturated color, and library-default skins as drift signals requiring product rationale.
|
|
98
|
+
|
|
103
99
|
## Implementation Boundaries
|
|
104
100
|
|
|
105
101
|
- Follow the shipped project stack and current repo patterns.
|
|
@@ -27,6 +27,10 @@ export function validateDesignContractCompleteness(designIntentContract) {
|
|
|
27
27
|
'spacingDerivationSource',
|
|
28
28
|
'typographyDerivationSource',
|
|
29
29
|
'motionDerivationSource',
|
|
30
|
+
'colorSpace',
|
|
31
|
+
'spatialBaseUnit',
|
|
32
|
+
'typeScaleMethod',
|
|
33
|
+
'motionBudget',
|
|
30
34
|
'validationRule',
|
|
31
35
|
]) {
|
|
32
36
|
if (!hasNonEmptyString(derivedTokenLogic[requiredFieldName])) {
|
|
@@ -334,6 +334,10 @@ function buildDesignIntentContractObject({
|
|
|
334
334
|
spacingDerivationSource: 'Explain spacing rhythm, density, and exceptions from anchorReference. Spacing grids are layout math, not decorative background lines.',
|
|
335
335
|
typographyDerivationSource: 'Explain display, body, metadata, and data roles from anchorReference.',
|
|
336
336
|
motionDerivationSource: 'Explain duration, easing, choreography, and reduced-motion from anchorReference.',
|
|
337
|
+
colorSpace: 'Prefer OKLCH for newly generated CSS tokens when supported; preserve existing design-system token formats and document fallback color space.',
|
|
338
|
+
spatialBaseUnit: 'Name the base spacing unit, major multiples, density exceptions, and optical exceptions before writing spacing values.',
|
|
339
|
+
typeScaleMethod: 'Prefer fluid clamp() type scales when supported; name ratio, role contrast, balance/wrap behavior, and numeric typography needs.',
|
|
340
|
+
motionBudget: 'Name micro, layout, entrance, easing, stagger, and reduced-motion budgets; prefer transform/opacity for high-frequency motion.',
|
|
337
341
|
validationRule: 'Every semantic token role must trace to anchorReference; keep exact primitive values flexible unless locked by repo evidence, accessibility validation, implementation constraints, or explicit user approval.',
|
|
338
342
|
},
|
|
339
343
|
motionPaletteDecision: {
|
|
@@ -245,10 +245,14 @@ export function buildDesignBootstrapPrompt({
|
|
|
245
245
|
'Use reduced-motion fallbacks instead of suppressing motion.',
|
|
246
246
|
'',
|
|
247
247
|
'## Token Derivation Audit',
|
|
248
|
-
'Before implementation, docs/design-intent.json must include derivedTokenLogic.anchorReference plus colorDerivationSource, spacingDerivationSource, typographyDerivationSource, motionDerivationSource, and validationRule.',
|
|
248
|
+
'Before implementation, docs/design-intent.json must include derivedTokenLogic.anchorReference plus colorDerivationSource, spacingDerivationSource, typographyDerivationSource, motionDerivationSource, colorSpace, spatialBaseUnit, typeScaleMethod, motionBudget, and validationRule.',
|
|
249
249
|
'Every semantic token role must be explainable from anchorReference. If the rationale is only looks good, common practice, modern default, or framework default, derive the token again before UI code.',
|
|
250
250
|
'Keep exact primitive values flexible until repo evidence, accessibility validation, implementation constraints, or explicit user approval locks them.',
|
|
251
251
|
'',
|
|
252
|
+
'## Implementation Craft Layer',
|
|
253
|
+
'Record explicit CSS craft decisions before UI code: color space and commitment level, fluid typography method, spacing base unit, motion budget, and the default CSS reflex this project rejects.',
|
|
254
|
+
'Prefer OKLCH, tinted neutrals, clamp() type scales, transform/opacity motion, and responsive recomposition when supported by the stack; preserve existing design-system tokens and document fallbacks instead of forcing rewrites.',
|
|
255
|
+
'',
|
|
252
256
|
'## Library Research Protocol',
|
|
253
257
|
'If web search is available, verify every new UI, animation, scroll, 3D, canvas, chart, icon, styling, or primitive library against current official docs and record source URL, fetched date, stable compatible version, purpose, risk, and fallback.',
|
|
254
258
|
'If web search is unavailable or fails, set libraryResearchStatus to pending-verification, record LIBRARY_TO_VERIFY notes, and use native CSS, browser APIs, or already-present project dependencies only when they can preserve the intended ambition until verification is possible.',
|
package/package.json
CHANGED
|
@@ -74,9 +74,12 @@ const REQUIRED_FRONTEND_RULE_SNIPPETS = [
|
|
|
74
74
|
'Prefer visually exploratory, product-derived palettes while preserving WCAG contrast and status clarity.',
|
|
75
75
|
'## Responsive Mutation',
|
|
76
76
|
'Responsive quality is not scale-only.',
|
|
77
|
+
'container queries',
|
|
77
78
|
'## Accessibility',
|
|
78
79
|
'WCAG 2.2 AA is the hard floor.',
|
|
79
80
|
'APCA is advisory perceptual tuning only.',
|
|
81
|
+
'## CSS Production Hardening',
|
|
82
|
+
'overflow, wrapping, truncation',
|
|
80
83
|
'## Implementation Boundaries',
|
|
81
84
|
'Do not hardcode Zustand, React Query, smart/dumb component doctrine',
|
|
82
85
|
];
|
|
@@ -89,6 +92,7 @@ const REQUIRED_BOOTSTRAP_DESIGN_SNIPPETS = [
|
|
|
89
92
|
'repoEvidence.designEvidenceSummary',
|
|
90
93
|
'research current official docs',
|
|
91
94
|
'Responsive design means recomposition, not resizing.',
|
|
95
|
+
'Implementation Craft Layer',
|
|
92
96
|
'agent-chosen visual direction',
|
|
93
97
|
'viewport mutation rules',
|
|
94
98
|
'WCAG 2.2 AA is the hard floor',
|