skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-13 06:36:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add strategy-band contrast alert and expand design context fields.

Browse Source 
Mirror the screen 02 neutral contrast badge on the strategy strip, share alert
painting between both strips, and render richer PRODUCT.md context in the
design document with matching visual-cues schema guidance.

AI-assisted commit.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Abdul Wahab
2026-09-01 10:02:40 +05:00
co-authored by Cursor
parent ae1c632594
commit 60130bcea9
6 changed files with 237 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
picker/scripts/design-context.js
+76 -12
View File
@@ -168,10 +168,10 @@ const defs = (items) => `
<div class="dcx-def"><dt>${dt}</dt><dd>${dd}</dd></div>`).join('')}
</dl>`;
const callout = (name, body, accent = false) => `
const callout = (name, body, accent = false, extra = '') => `
<div class="dcx-callout${accent ? ' dcx-callout--accent' : ''}">
<p class="dcx-callout-name">${escapeHtml(name)}</p>
<p>${body}</p>
<p>${body}</p>${extra}
</div>`;
const list = (items) => `
@@ -278,11 +278,28 @@ function buildAudience(s, name) {
parts.push(block('Who they are', who.length
? defs(who)
: fromChat('The primary and secondary user read was confirmed', '<code>PRODUCT.md &middot; Users</code>')));
if (audience.emotion) {
parts.push(block('Emotional state', callout('On arrival', escapeHtml(audience.emotion), true)));
/* Arrival-only context keeps the old single-callout block; a leaving line
widens it into the two-beat journey, side by side. */
if (audience.emotion || audience.leaving) {
const arrival = audience.emotion ? callout('On arrival', escapeHtml(audience.emotion), true) : '';
const leaving = audience.leaving ? callout('Leaving with', escapeHtml(audience.leaving), true) : '';
if (arrival && leaving) {
parts.push(block('Emotional journey', `<div class="dcx-callout-pair">${arrival}${leaving}</div>`));
} else {
parts.push(block(arrival ? 'Emotional state' : 'Emotional journey', arrival || leaving));
}
}
if (Array.isArray(audience.needs) && audience.needs.length) {
parts.push(block('Needs', list(audience.needs.map(escapeHtml))));
/* Needs and trust triggers share a two-column row when both exist; either
alone keeps the full measure. The nested blocks keep their data-label,
which is what the expander subnav is built from. */
const needsBlock = Array.isArray(audience.needs) && audience.needs.length
? block('Needs', list(audience.needs.map(escapeHtml))) : '';
const trustBlock = Array.isArray(audience.trust) && audience.trust.length
? block('Trust triggers', list(audience.trust.map(escapeHtml))) : '';
if (needsBlock && trustBlock) parts.push(`<div class="dcx-cols">${needsBlock}${trustBlock}</div>`);
else if (needsBlock || trustBlock) parts.push(needsBlock || trustBlock);
if (Array.isArray(audience.inclusion) && audience.inclusion.length) {
parts.push(block('Who must not be excluded', list(audience.inclusion.map(escapeHtml))));
}
return parts.join('');
}
@@ -301,12 +318,36 @@ function surfaceCards(s, body) {
</article>`).join('')}</div>`;
}
/* Display labels for the PRODUCT.md platform value; an unrecognized value
renders as written rather than being dropped. */
const PLATFORM_LABELS = { web: 'Web', ios: 'iOS', android: 'Android', adaptive: 'Adaptive' };
function buildProduct(s, name) {
const product = s.context?.product || {};
const parts = [heading(2, 'Product', 'Purpose, surfaces, use cases, what must be clear first.', name)];
parts.push(block('Purpose', product.purpose
? callout(product.name || name || 'This product', escapeHtml(product.purpose))
: fromChat('The purpose and success definition were confirmed', '<code>PRODUCT.md &middot; Product Purpose</code>')));
const purposeCallout = product.purpose
? callout(product.name || name || 'This product', escapeHtml(product.purpose), false,
product.success ? `\n <p class="dcx-callout-success">${escapeHtml(product.success)}</p>` : '')
: fromChat('The purpose and success definition were confirmed', '<code>PRODUCT.md &middot; Product Purpose</code>');
const platform = typeof product.platform === 'string' && product.platform.trim()
? `<span class="dcx-chip dcx-platform-pill">${escapeHtml(PLATFORM_LABELS[product.platform.trim()] || product.platform.trim())}</span>`
: '';
parts.push(block('Purpose', platform
? `<div class="dcx-purpose"><div class="dcx-purpose-main">${purposeCallout}</div>${platform}</div>`
: purposeCallout));
if (product.positioning && (product.positioning.not || product.positioning.this)) {
const cells = [
product.positioning.not && callout('Not this', escapeHtml(product.positioning.not)),
product.positioning.this && callout('This', escapeHtml(product.positioning.this), true),
].filter(Boolean).join('');
parts.push(block('Positioning', `<div class="dcx-callout-pair">${cells}</div>`));
}
if (Array.isArray(product.clarities) && product.clarities.length) {
parts.push(block('What must be clear first', list(product.clarities.map(escapeHtml))));
}
if (product.operatingContext) {
parts.push(block('Operating context', `<p class="dcx-prose">${escapeHtml(product.operatingContext)}</p>`));
}
parts.push(block('Surfaces', surfaceCards(s, (surface) => `
<p class="dcx-surface-goal">${surface.goal ? escapeHtml(surface.goal) : ''}</p>
${surface.examples.length ? chips(surface.examples) : ''}`)
@@ -318,15 +359,38 @@ function buildBrand(s, name) {
const brand = s.context?.brand || {};
const interview = s.context?.interview || {};
const parts = [heading(3, 'Brand', 'Identity, voice, references, taste boundaries.', name)];
/* Personality: the confirmed sentence when the agent passed it; the three
words alone over the pointer to the durable copy when only they arrived;
the plain pointer otherwise. */
parts.push(block('Personality', brand.personality
? callout(brand.words?.join(' · ') || 'Voice', escapeHtml(brand.personality), true)
: fromChat('Three words, voice, and tone were confirmed', '<code>PRODUCT.md &middot; Brand Personality</code>')));
: (Array.isArray(brand.words) && brand.words.length
? callout(brand.words.join(' · '), 'Three words, voice, and tone were confirmed in chat, before the browser questionnaire. <code>PRODUCT.md &middot; Brand Personality</code> is the durable copy.', true)
: fromChat('Three words, voice, and tone were confirmed', '<code>PRODUCT.md &middot; Brand Personality</code>'))));
if (Array.isArray(brand.commitments) && brand.commitments.length) {
parts.push(block('Commitments', list(brand.commitments.map(escapeHtml))));
}
if (Array.isArray(interview.references) && interview.references.length) {
parts.push(block('Named references', chips(interview.references)
/* Q4 references arrive as plain strings from old cues.json files and as
{ name, takeaway } objects from new ones; a mixed list renders each
entry in its own form. Strings stay the bare pills they were. */
const cards = interview.references.filter((ref) => ref && typeof ref === 'object' && ref.name);
const plain = interview.references.filter((ref) => typeof ref === 'string');
const inner = (cards.length ? `<div class="dcx-ref-cards">${cards.map((ref) => `
<article class="dcx-ref-card">
<h3 class="dcx-ref-name">${escapeHtml(ref.name)}</h3>${ref.takeaway ? `
<p class="dcx-ref-takeaway">${escapeHtml(ref.takeaway)}</p>` : ''}
</article>`).join('')}</div>` : '') + (plain.length ? chips(plain) : '');
parts.push(block('Named references', inner
+ note('Q4 of the seed interview: brands, products, printed objects &mdash; not adjectives.')));
}
if (interview.antiReference) {
parts.push(block('Anti-reference', callout('Not this', escapeHtml(interview.antiReference))
/* Q5 stays a bare string in old files and gains a why as { name, why }. */
const anti = typeof interview.antiReference === 'object'
? callout('Not this', `<strong>${escapeHtml(interview.antiReference.name || '')}</strong>${
interview.antiReference.why ? ` &middot; ${escapeHtml(interview.antiReference.why)}` : ''}`)
: callout('Not this', escapeHtml(interview.antiReference));
parts.push(block('Anti-reference', anti
+ note('Q5 of the seed interview. A hard constraint on every palette and pair that followed.')));
}
if (Array.isArray(s.context?.assets) && s.context.assets.length) {
picker/scripts/palette-picker.js
+23 -9
View File
@@ -1186,23 +1186,29 @@ function setActiveRole(role) {
}
/* The contrast alert: a danger badge on the neutral swatch, with its
explanation in the sibling tooltip. Re-read from renderPreview() on
every render, so every path that can change which color sits in the
neutral slot (inputs, tints, rings, card switch, reset, reorder)
lands here. One block-level line per failed check, mid-tone first. */
explanation in the sibling tooltip. Both strips carry one. This strip's
badge is re-read from renderPreview() on every render, so every path
that can change which color sits in the neutral slot (inputs, tints,
rings, card switch, reset, reorder) lands here; the strategy strip's
badge is re-read by paintStrategyBands() against the committed fields
that strip is painted from. One block-level line per failed check,
mid-tone first. */
const alertBadge = $('[data-contrast-alert]', panel);
const alertTip = $('[data-contrast-tip]', panel);
function syncNeutralAlert() {
const issues = cards.length ? neutralContrastIssue(state().colors) : [];
alertBadge.hidden = issues.length === 0;
alertTip.replaceChildren(...issues.map((text) => {
function paintContrastAlert(badge, tip, issues) {
badge.hidden = issues.length === 0;
tip.replaceChildren(...issues.map((text) => {
const line = document.createElement('span');
line.textContent = text;
return line;
}));
}
function syncNeutralAlert() {
paintContrastAlert(alertBadge, alertTip, cards.length ? neutralContrastIssue(state().colors) : []);
}
function setColor(role, hex, detached = true) {
const itemState = state();
itemState.colors[role] = hex.toUpperCase();
@@ -1526,7 +1532,14 @@ function recommitPalette() {
/* The strategy screen's band is a reading of the committed palette rather than
of the deck, which is also what makes it correct after a reorder on either
screen: both end in the fields this paints from. */
screen: both end in the fields this paints from. Its neutral carries the
same contrast alert the editable strip does, judged against the same
committed colors this strip is painted from, so a reorder made here that
drags a mid-tone into the neutral slot is reported here, on the swatch
the visitor just dropped. */
const strategyAlertBadge = $('[data-contrast-alert]', strategyBands);
const strategyAlertTip = $('[data-contrast-tip]', strategyBands);
function paintStrategyBands() {
const committed = roleMap((role) => $(`[name="palette-${role}"]`).value);
if (Object.values(committed).some((hex) => !hex)) return;
@@ -1536,6 +1549,7 @@ function paintStrategyBands() {
band.style.setProperty('--band-ink', contrastInk(committed[role]));
$('output', band).textContent = committed[role];
}
paintContrastAlert(strategyAlertBadge, strategyAlertTip, neutralContrastIssue(committed));
}
/* Everything screen 03 spends on something other than the answer: the block's