@cubis/foundry 0.3.69 → 0.3.71

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/deep-research/references/multi-round-research-loop.md

@@ -1,15 +1,80 @@
 # Multi-Round Research Loop
 
-Load this when the research task is broad, unstable, or likely to have conflicting public sources.
+Load this when the research task is broad, unstable, contested, or likely to have conflicting public sources — or when the user explicitly asks for deep or latest research.
 
-## Loop
+## The Core Principle
 
-1. Start with the narrowest question possible.
-2. Record what the first pass did not answer.
-3. Search directly for the missing facts or contradictions.
-4. Prefer primary or official sources when they exist.
-5. Keep a short evidence table: fact, source, confidence, open question.
+Your job is to find what is _missing_, not just summarize the first page of results. Stop when remaining uncertainty is low-impact or explicitly reported back to the user.
+
+---
+
+## The Loop
+
+### Round 1: Define and search broadly
+
+1. **Narrow the question** — State the most specific version of what you're trying to find. Vague questions produce vague results.
+2. **Search** — Run initial queries across the most likely sources (official docs, engineering blogs, GitHub repos, research papers as appropriate).
+3. **Record gaps** — What did this pass _not_ answer? What's contradictory? What's suspiciously absent?
+
+### Round 2: Target the gaps
+
+4. **Search directly for the missing facts** — Use specific, targeted queries (not broad topic queries). Prefer: official docs > primary source blog > authoritative community reference > general article.
+5. **Search for contradictions** — If two sources disagree, search specifically for why. Age, version differences, and context often explain it.
+6. **Seek counterexamples** — Actively search for "X doesn't work", "X is wrong", "problems with X" — not just confirmation.
+
+### Round 3: Corroborate and synthesize
+
+7. **Cross-verify** unstable claims against at least one independent source.
+8. **Rank sources** by directness (primary > secondary > tertiary), recency (newer > older for fast-moving topics), and authority (official > community > anecdotal).
+9. **Write the evidence table** — Track what you found, not just conclusions:
+
+| Fact    | Source       | Confidence          | Open question            |
+| ------- | ------------ | ------------------- | ------------------------ |
+| [Claim] | [URL or doc] | High / Medium / Low | [What's still uncertain] |
+
+---
 
 ## Stop Rule
 
-Stop only when the remaining uncertainty is either low-impact or explicitly reported back to the user.
+Stop when:
+
+- Remaining uncertainty is low-impact (won't change the recommendation)
+- OR the question is genuinely unresolvable from public sources (report this explicitly)
+- OR you've completed 3 rounds without new signal (diminishing returns — report what's known and what's not)
+
+Do NOT stop after one source when the claim is unstable, contested, or from a secondary source.
+
+---
+
+## Output Format
+
+Separate clearly:
+
+- **Sourced facts** — you have direct evidence
+- **Informed inference** — logically follows from evidence but not directly stated
+- **Unresolved gaps** — you searched and didn't find it; note what's unknown
+
+Do not present inference as fact. Do not present absence of evidence as evidence of absence.
+
+---
+
+## Common Research Failure Modes
+
+| Failure                               | Fix                                                |
+| ------------------------------------- | -------------------------------------------------- |
+| Stopping at first result              | Check at least 2-3 sources for any unstable claim  |
+| Only finding confirmation             | Actively search for counterexamples and criticisms |
+| Treating recent = correct             | Cross-check recency with authority and context     |
+| Vague queries returning vague results | Restate the question as a specific, narrow query   |
+| Reporting uncertainty as fact         | Use "inference" or "unknown" tags explicitly       |
+| Burying the answer in context         | Lead with the finding; evidence follows            |
+
+---
+
+## Sub-Agent Reader Test
+
+After completing research, if the output will be used by another agent or handed to a human without context:
+
+- Pass the research summary to a fresh sub-agent with no conversation history
+- Ask: "What is the main finding?", "What is still uncertain?", "What sources support the key claims?"
+- If the fresh reader gets it wrong, the synthesis has context bleed — revise before delivery

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/frontend-design/SKILL.md

@@ -31,9 +31,10 @@ Guide creation of distinctive, production-grade frontend interfaces that avoid g
 Before writing code, ask or infer:
 
 1. **Purpose** — What problem does this interface solve? Who uses it?
-2. **Tone** — Pick a bold aesthetic direction: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian. There are many flavors. Pick one and commit.
-3. **Constraints** — Technical requirements (framework, performance, a11y level, browser support).
-4. **Differentiation** — What makes this UNFORGETTABLE? What's the one thing someone will remember?
+2. **Brand** — Is there an existing brand system, style guide, or named brand (e.g. "Anthropic", client guidelines, hex palette) to follow? If yes, load `references/brand-presets.md` and use `/brand` to apply it before choosing aesthetic direction.
+3. **Tone** — If no brand system exists, pick a bold aesthetic direction: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian. There are many flavors. Pick one and commit.
+4. **Constraints** — Technical requirements (framework, performance, a11y level, browser support).
+5. **Differentiation** — What makes this UNFORGETTABLE? What's the one thing someone will remember?
 
 Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
 
@@ -166,40 +167,42 @@ Deliver:
 
 Load only what the current step needs.
 
-| File                               | Load when                                                                                            |
-| ---------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `references/typography.md`         | Task involves font selection, type scale, font loading, or text hierarchy decisions.                 |
-| `references/color-and-contrast.md` | Task involves palette selection, dark mode, OKLCH color, contrast ratios, or tinted neutrals.        |
-| `references/spatial-design.md`     | Task involves grid systems, spacing rhythm, container queries, or layout composition.                |
-| `references/motion-design.md`      | Task involves animation timing, easing curves, staggered reveals, or reduced motion support.         |
-| `references/interaction-design.md` | Task involves form design, focus management, loading states, or progressive disclosure patterns.     |
-| `references/responsive-design.md`  | Task involves mobile-first design, fluid layouts, container queries, or adaptive interfaces.         |
-| `references/ux-writing.md`         | Task involves button labels, error messages, empty states, or microcopy decisions.                   |
-| `references/ux-psychology.md`      | Task involves cognitive load, decision architecture, trust building, or emotional design principles. |
+| File                               | Load when                                                                                                                             |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `references/typography.md`         | Task involves font selection, type scale, font loading, or text hierarchy decisions.                                                  |
+| `references/color-and-contrast.md` | Task involves palette selection, dark mode, OKLCH color, contrast ratios, or tinted neutrals.                                         |
+| `references/spatial-design.md`     | Task involves grid systems, spacing rhythm, container queries, or layout composition.                                                 |
+| `references/motion-design.md`      | Task involves animation timing, easing curves, staggered reveals, or reduced motion support.                                          |
+| `references/interaction-design.md` | Task involves form design, focus management, loading states, or progressive disclosure patterns.                                      |
+| `references/responsive-design.md`  | Task involves mobile-first design, fluid layouts, container queries, or adaptive interfaces.                                          |
+| `references/ux-writing.md`         | Task involves button labels, error messages, empty states, or microcopy decisions.                                                    |
+| `references/ux-psychology.md`      | Task involves cognitive load, decision architecture, trust building, or emotional design principles.                                  |
+| `references/brand-presets.md`      | Task involves applying existing brand guidelines, a named brand system (e.g. Anthropic), or converting a hex palette into CSS tokens. |
 
 ## Commands
 
 17 specialized commands for targeted design operations. Each command focuses on a specific design concern and can be applied to a whole page or a specific element.
 
-| Command             | Purpose                                                                                   |
-| ------------------- | ----------------------------------------------------------------------------------------- |
-| `/audit`            | Run technical quality checks: accessibility, performance, responsive behavior             |
-| `/critique`         | UX design review: hierarchy, clarity, emotional resonance, user flow                      |
-| `/normalize`        | Align with design system standards: tokens, spacing, typography consistency               |
-| `/polish`           | Final pass before shipping: micro-details, alignment, visual refinement                   |
-| `/distill`          | Strip to essence: remove unnecessary complexity, simplify without losing character        |
-| `/clarify`          | Improve unclear UX copy: labels, instructions, error messages, empty states               |
-| `/optimize`         | Performance improvements: image sizes, render-blocking, bundle impact                     |
-| `/harden`           | Error handling, i18n readiness, edge cases, defensive UI patterns                         |
-| `/animate`          | Add purposeful motion: transitions, micro-interactions, state changes                     |
-| `/colorize`         | Introduce strategic color: palette refinement, accent placement, contrast fixes           |
-| `/bolder`           | Amplify timid designs: stronger hierarchy, more contrast, bigger gestures                 |
-| `/quieter`          | Tone down overwhelming designs: reduce noise, increase whitespace, simplify               |
-| `/delight`          | Add moments of joy: easter eggs, satisfying interactions, personality                     |
-| `/extract`          | Pull into reusable components: identify patterns, create component API                    |
-| `/adapt`            | Adapt for different devices: responsive breakpoints, touch targets, viewport optimization |
-| `/onboard`          | Design onboarding flows: first-run experience, empty states, progressive disclosure       |
-| `/teach-impeccable` | One-time setup: gather project design context, save preferences for future sessions       |
+| Command             | Purpose                                                                                                             |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `/audit`            | Run technical quality checks: accessibility, performance, responsive behavior                                       |
+| `/critique`         | UX design review: hierarchy, clarity, emotional resonance, user flow                                                |
+| `/normalize`        | Align with design system standards: tokens, spacing, typography consistency                                         |
+| `/polish`           | Final pass before shipping: micro-details, alignment, visual refinement                                             |
+| `/distill`          | Strip to essence: remove unnecessary complexity, simplify without losing character                                  |
+| `/clarify`          | Improve unclear UX copy: labels, instructions, error messages, empty states                                         |
+| `/optimize`         | Performance improvements: image sizes, render-blocking, bundle impact                                               |
+| `/harden`           | Error handling, i18n readiness, edge cases, defensive UI patterns                                                   |
+| `/animate`          | Add purposeful motion: transitions, micro-interactions, state changes                                               |
+| `/colorize`         | Introduce strategic color: palette refinement, accent placement, contrast fixes                                     |
+| `/bolder`           | Amplify timid designs: stronger hierarchy, more contrast, bigger gestures                                           |
+| `/quieter`          | Tone down overwhelming designs: reduce noise, increase whitespace, simplify                                         |
+| `/delight`          | Add moments of joy: easter eggs, satisfying interactions, personality                                               |
+| `/extract`          | Pull into reusable components: identify patterns, create component API                                              |
+| `/adapt`            | Adapt for different devices: responsive breakpoints, touch targets, viewport optimization                           |
+| `/onboard`          | Design onboarding flows: first-run experience, empty states, progressive disclosure                                 |
+| `/teach-impeccable` | One-time setup: gather project design context, save preferences for future sessions                                 |
+| `/brand`            | Apply or enforce a specific brand identity: convert guideline colors to CSS tokens, set typography, verify contrast |
 
 Usage: Most commands accept an optional argument to focus on a specific area (e.g., `/audit header`, `/polish checkout-form`).
 
@@ -211,3 +214,5 @@ Usage: Most commands accept an optional argument to focus on a specific area (e.
 - "/critique the checkout flow — is the hierarchy clear? Does it build trust?"
 - "/polish the hero section before we ship."
 - "I need a color system for a health tech app. No fintech blue, no AI purple."
+- "/brand anthropic — apply Anthropic's brand colors and typography to this interface."
+- "Here's our brand guide with hex values. Apply it to this dashboard — /brand"

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/frontend-design/commands/brand.md

@@ -0,0 +1,167 @@
+# /brand
+
+Apply or enforce a specific brand identity across a frontend. Works from uploaded brand guidelines, a style guide document, hex palettes, or a named brand system.
+
+## Usage
+
+```
+/brand                           → Prompt for brand context, then apply
+/brand anthropic                 → Apply Anthropic's brand system
+/brand <hex-palette>             → Build tokens from provided hex values
+/brand <element>                 → Apply brand to a specific component or section
+```
+
+## What It Does
+
+Converts brand guidelines into a living CSS token system and applies it consistently across the interface. Outputs production-ready tokens plus updated component styles.
+
+## Workflow
+
+### 1. Gather Brand Inputs
+
+Ask for (or detect from context):
+
+- **Color values** — Primary, secondary, accent hex codes (or link to brand guide)
+- **Typography** — Font families for headings and body. If not specified, choose a pairing that matches the brand's tone
+- **Named brand** — If the user says "Anthropic", "Stripe", "Linear", "Vercel" etc., load known reference patterns from `references/brand-presets.md`
+
+### 2. Convert to OKLCH Tokens
+
+Translate all hex values to OKLCH for perceptual uniformity. See `references/brand-presets.md` for the full conversion workflow.
+
+```css
+/* Pattern: convert every color to oklch */
+--brand-[name]: oklch(L% C H);
+```
+
+### 3. Build Semantic Token Layer
+
+Map raw brand tokens to semantic roles. Never reference raw tokens directly in components:
+
+```css
+:root {
+  /* Surfaces */
+  --color-bg: var(--brand-surface);
+  --color-bg-subtle: var(--brand-subtle);
+  --color-bg-elevated: var(--brand-elevated);
+
+  /* Text */
+  --color-text: var(--brand-ink);
+  --color-text-muted: var(--brand-mid);
+
+  /* Interactive */
+  --color-accent: var(--brand-primary-accent);
+  --color-accent-hover: oklch(
+    from var(--brand-primary-accent) calc(l - 0.05) c h
+  );
+
+  /* Borders */
+  --color-border: var(--brand-subtle);
+  --color-border-focus: var(--brand-primary-accent);
+}
+```
+
+### 4. Apply Typography
+
+Set font families from brand guidelines and load them via Google Fonts or system stack:
+
+```css
+@import url("https://fonts.googleapis.com/css2?family=DISPLAY_FONT&family=BODY_FONT&display=swap");
+
+:root {
+  --font-display: "Display Font", fallback, sans-serif;
+  --font-body: "Body Font", fallback, serif;
+}
+```
+
+Apply via element targeting:
+
+- Headings, labels, buttons, nav → `var(--font-display)`
+- Body copy, prose, descriptions → `var(--font-body)`
+
+### 5. Output Deliverables
+
+Deliver:
+
+1. **Complete token file** — `tokens.css` or `:root {}` block with all brand tokens + semantic layer
+2. **Typography setup** — Font import + application rules
+3. **Component overrides** — Button, card, link, input, badge in brand style
+4. **Dark mode** — Inverted/adapted token values for `prefers-color-scheme: dark`
+5. **Usage notes** — How to swap the brand accent, where NOT to use accent color, contrast verification
+
+---
+
+## Anthropic Brand Quick-Apply
+
+When the user requests Anthropic brand styling, use this preset directly:
+
+```css
+/* ========================================
+   ANTHROPIC BRAND TOKENS
+   Source: github.com/anthropics/skills
+   ======================================== */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap");
+
+:root {
+  /* Neutrals */
+  --brand-ink: oklch(10.5% 0.006 85);
+  --brand-cream: oklch(98.2% 0.008 85);
+  --brand-mid: oklch(72% 0.009 85);
+  --brand-subtle: oklch(92% 0.01 85);
+
+  /* Accents */
+  --brand-orange: oklch(65% 0.145 42);
+  --brand-blue: oklch(65% 0.09 235);
+  --brand-green: oklch(57% 0.09 130);
+
+  /* Semantic layer */
+  --color-bg: var(--brand-cream);
+  --color-bg-subtle: var(--brand-subtle);
+  --color-text: var(--brand-ink);
+  --color-text-secondary: var(--brand-mid);
+  --color-accent: var(--brand-orange);
+  --color-accent-secondary: var(--brand-blue);
+  --color-border: var(--brand-subtle);
+
+  /* Typography */
+  --font-display: "Poppins", Arial, sans-serif;
+  --font-body: "Lora", Georgia, serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: var(--brand-ink);
+    --color-bg-subtle: oklch(16% 0.008 85);
+    --color-text: var(--brand-cream);
+    --color-text-secondary: var(--brand-mid);
+    --color-border: oklch(22% 0.008 85);
+  }
+}
+```
+
+---
+
+## Accessibility Check After Applying
+
+After applying brand tokens, verify:
+
+1. **Text contrast**: `--color-text` on `--color-bg` must pass WCAG AA (4.5:1 normal, 3:1 large)
+2. **Accent on background**: `--color-accent` used as text or border must meet 3:1 minimum against its background
+3. **Focus states**: `--color-border-focus` must be visually distinct (3:1 against surrounding colors)
+
+For Anthropic's palette: cream `#faf9f5` on near-black `#141413` gives ~18:1 — passes AAA. Orange `#d97757` on cream gives ~3.2:1 — acceptable for large text and UI components, not for small body text.
+
+---
+
+## Tone Alignment
+
+After applying brand colors, make sure the _design choices_ match the brand character:
+
+| Brand character                      | Design implication                                                           |
+| ------------------------------------ | ---------------------------------------------------------------------------- |
+| Warm, editorial (Anthropic)          | Generous whitespace, serif body, soft borders, understated motion            |
+| Precise, minimal (Linear, Vercel)    | Tight spacing, geometric sans only, sharp edges, instant transitions         |
+| Bold, consumer (Spotify, Duolingo)   | Color-heavy, large type, playful shapes, expressive animation                |
+| Trustworthy, enterprise (Salesforce) | Blue-dominant, structured grids, conservative type, high information density |
+
+Color alone doesn't make a branded interface feel right — spacing, motion, and layout personality must match.

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/frontend-design/references/brand-presets.md

@@ -0,0 +1,228 @@
+# Brand Presets Reference
+
+Use this reference when building interfaces that must conform to an existing brand system — whether a client-supplied style guide, a design system handoff, or a well-documented brand like Anthropic's.
+
+## Receiving Brand Guidelines
+
+When a user hands over brand guidelines, extract these five things before writing any code:
+
+| Extract            | Ask or infer                                                                 |
+| ------------------ | ---------------------------------------------------------------------------- |
+| **Color palette**  | What are the primary, secondary, and accent hex values?                      |
+| **Neutral system** | Are neutrals warm, cool, or truly achromatic?                                |
+| **Typography**     | Specific font families for headings and body? Variable font available?       |
+| **Spacing DNA**    | Base unit? Tight/airy preference?                                            |
+| **Tone**           | Where on the spectrum between playful ↔ authoritative, minimal ↔ expressive? |
+
+## Hex → OKLCH Conversion Workflow
+
+Always convert brand hex colors to OKLCH for CSS. OKLCH gives you perceptual uniformity — colors with the same L value look equally bright, unlike hex or HSL.
+
+```css
+/* Conversion pattern:  hex → oklch via CSS Color 4 */
+/* Most modern browsers accept oklch() natively */
+/* Use https://oklch.com to find values, or compute: */
+
+/* L = perceived lightness 0–100% */
+/* C = chroma (colorfulness) 0–0.37ish */
+/* H = hue angle 0–360 */
+
+/* Example: #d97757 (warm orange) */
+--brand-orange: oklch(65% 0.145 42);
+
+/* Example: #faf9f5 (warm cream) */
+--brand-surface: oklch(98.2% 0.008 85);
+
+/* Example: #141413 (warm near-black) */
+--brand-ink: oklch(10.5% 0.006 85);
+```
+
+**Shorthand**: enter any hex at [oklch.com](https://oklch.com) to get the L/C/H values.
+
+## Semantic Token Mapping
+
+Once you have OKLCH values, map them to semantic tokens — never use raw hex or oklch values directly in components:
+
+```css
+:root {
+  /* --- RAW BRAND TOKENS (source of truth) --- */
+  --brand-ink: oklch(10.5% 0.006 85); /* near-black, warm */
+  --brand-surface: oklch(98.2% 0.008 85); /* cream white */
+  --brand-mid: oklch(72% 0.009 85); /* mid-range gray */
+  --brand-subtle: oklch(92% 0.01 85); /* light gray */
+  --brand-orange: oklch(65% 0.145 42); /* primary accent */
+  --brand-blue: oklch(65% 0.09 235); /* secondary accent */
+  --brand-green: oklch(57% 0.09 130); /* tertiary accent */
+
+  /* --- SEMANTIC TOKENS (what components use) --- */
+  --color-bg: var(--brand-surface);
+  --color-bg-subtle: var(--brand-subtle);
+  --color-text: var(--brand-ink);
+  --color-text-secondary: var(--brand-mid);
+  --color-accent: var(--brand-orange);
+  --color-accent-secondary: var(--brand-blue);
+  --color-accent-tertiary: var(--brand-green);
+  --color-border: var(--brand-subtle);
+}
+```
+
+## Anthropic Brand System
+
+Anthropic's brand (from [anthropics/skills](https://github.com/anthropics/skills/tree/main/skills/brand-guidelines)) is a useful reference implementation. It's a warm, editorial system — earthy neutrals with bold accent contrast.
+
+### Color Palette
+
+```css
+:root {
+  /* Neutrals — warm hue angle ~85 (yellow-brown direction) */
+  --anthropic-ink: oklch(10.5% 0.006 85); /* #141413 — body text, dark bg */
+  --anthropic-cream: oklch(
+    98.2% 0.008 85
+  ); /* #faf9f5 — light bg, text on dark */
+  --anthropic-mid: oklch(72% 0.009 85); /* #b0aea5 — secondary text */
+  --anthropic-subtle: oklch(92% 0.01 85); /* #e8e6dc — dividers, subtle bg */
+
+  /* Accents — arranged in visual temperature order */
+  --anthropic-orange: oklch(
+    65% 0.145 42
+  ); /* #d97757 — primary CTA, highlights */
+  --anthropic-blue: oklch(65% 0.09 235); /* #6a9bcc — secondary actions */
+  --anthropic-green: oklch(
+    57% 0.09 130
+  ); /* #788c5d — tertiary, success states */
+}
+```
+
+### Typography
+
+```css
+/* Load from Google Fonts */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap");
+
+:root {
+  --font-display: "Poppins", Arial, sans-serif; /* headings, nav, labels */
+  --font-body: "Lora", Georgia, serif; /* body text, long-form */
+}
+
+/* Application rules */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.label,
+.nav-item,
+.button,
+.badge {
+  font-family: var(--font-display);
+}
+
+p,
+blockquote,
+.prose,
+article {
+  font-family: var(--font-body);
+}
+```
+
+**Why this pairing works**: Poppins is geometric and structured — clear, modern authority. Lora is elegant serif — warm, readable, literary. Together they balance clarity with warmth, matching Anthropic's positioning between scientific rigor and approachability.
+
+### Spacing DNA
+
+The brand leans into generous negative space. Use a `8px` base unit with larger gaps between major sections:
+
+```css
+:root {
+  --space-1: 0.5rem; /* 8px  — tight groupings */
+  --space-2: 1rem; /* 16px — component padding */
+  --space-3: 1.5rem; /* 24px — between related elements */
+  --space-4: 2rem; /* 32px — section mini-gap */
+  --space-6: 3rem; /* 48px — between sections */
+  --space-8: 4rem; /* 64px — major section spacing */
+}
+```
+
+### Component Patterns
+
+```css
+/* Card — warm border, generous padding, no shadow */
+.card {
+  background: var(--anthropic-subtle);
+  border: 1px solid var(--anthropic-mid);
+  border-radius: 4px; /* subtle — not pill-shaped */
+  padding: var(--space-4);
+}
+
+/* Button — orange CTA */
+.button-primary {
+  background: var(--anthropic-orange);
+  color: var(--anthropic-cream);
+  font-family: var(--font-display);
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  border-radius: 4px;
+  padding: 0.625rem 1.5rem;
+  border: none;
+}
+.button-primary:hover {
+  background: oklch(60% 0.145 42); /* slightly darker orange */
+}
+
+/* Text link — uses orange, not blue */
+a {
+  color: var(--anthropic-orange);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+
+/* Code / monospace — uses ink on subtle bg */
+code {
+  background: var(--anthropic-subtle);
+  color: var(--anthropic-ink);
+  font-size: 0.875em;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+}
+```
+
+### Dark Mode
+
+Anthropic's palette inverts gracefully — the cream and ink swap, mid-tones pull slightly warmer:
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: var(--anthropic-ink);
+    --color-bg-subtle: oklch(16% 0.008 85); /* slightly elevated */
+    --color-text: var(--anthropic-cream);
+    --color-text-secondary: var(--anthropic-mid);
+    --color-border: oklch(22% 0.008 85);
+    /* Accents stay the same — they hold on both backgrounds */
+  }
+}
+```
+
+## Applying Other Brand Systems
+
+When adapting a different brand, follow this checklist:
+
+1. **Extract and convert** — Get all hex values, convert to oklch
+2. **Identify neutrals** — Are they warm, cool, or pure gray? Find the hue angle
+3. **Map the hierarchy** — Which color is dominant (60%), which secondary (30%), which accent (10%)?
+4. **Check contrast** — Use the WCAG APCa algorithm for text contrast. oklch makes this predictable
+5. **Find the typography voice** — Geometric sans = structured/modern; humanist sans = friendly; slab = authoritative; oldstyle serif = editorial; transitional serif = professional
+6. **Test the mood** — Show a prototype section in brand colors. Does it _feel_ like the brand in motion, not just color?
+
+## Common Brand Color Archetypes
+
+| Archetype                      | Neutrals                | Primary accent       | Feeling                           |
+| ------------------------------ | ----------------------- | -------------------- | --------------------------------- |
+| **Warm editorial** (Anthropic) | Cream / warm near-black | Orange / terracotta  | Thoughtful, approachable, premium |
+| **Cool tech**                  | True gray / white       | Electric blue / teal | Precise, efficient, modern        |
+| **Finance/enterprise**         | Navy / white            | Deep blue / gold     | Stable, trustworthy, conservative |
+| **Health/wellness**            | Off-white / dark green  | Sage green / amber   | Natural, calm, nurturing          |
+| **Startup/consumer**           | White / black           | Bold purple or coral | Energetic, fun, accessible        |
+| **Luxury**                     | White / true black      | Gold / burgundy      | Exclusive, refined, timeless      |
+
+When working with a brand that fits these archetypes, pull from the pattern — then make one unexpected choice to give it character.

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/playwright-e2e/SKILL.md

@@ -4,14 +4,14 @@ description: "Use when writing or reviewing browser end-to-end tests with Playwr
 license: MIT
 metadata:
   author: cubis-foundry
-  version: "1.0"
+  version: "2.0"
 compatibility: Claude Code, Codex, GitHub Copilot
 ---
 # Playwright E2E
 
 ## Purpose
 
-Use when writing or reviewing browser end-to-end tests with Playwright, debugging flaky UI automation, validating auth or checkout flows, or tightening CI evidence with traces and web-first assertions.
+Use when writing or reviewing browser end-to-end tests with Playwright, debugging flaky UI automation, validating auth or checkout flows, or tightening CI evidence with traces and web-first assertions. When Playwright MCP upstream is configured in Cubis Foundry, leverage browser automation tools for live page inspection, snapshot-based debugging, and interactive test development.
 
 ## When to Use
 
@@ -19,6 +19,7 @@ Use when writing or reviewing browser end-to-end tests with Playwright, debuggin
 - Debugging flaky E2E failures, locator instability, or auth state leakage in CI.
 - Choosing between fixtures, reusable helpers, and page-level abstractions.
 - Reviewing traces, screenshots, videos, and network activity to isolate browser failures.
+- Using Playwright MCP tools for live browser navigation, snapshot capture, and interactive element inspection during test development.
 
 ## Instructions
 
@@ -28,6 +29,19 @@ Use when writing or reviewing browser end-to-end tests with Playwright, debuggin
 4. Use web-first assertions, traces, and network evidence before calling a test flaky.
 5. Leave CI with artifacts that explain the failure path instead of screenshots alone.
 
+### Playwright MCP tools
+
+When the Playwright upstream is configured in the Cubis Foundry MCP gateway, these tool categories are available for interactive browser automation:
+
+- **Navigation**: `browser_navigate`, `browser_go_back`, `browser_go_forward`, `browser_wait` — open pages, navigate history, wait for network idle.
+- **Snapshots**: `browser_snapshot` — capture an accessibility-tree snapshot of the current page for element inspection and locator discovery.
+- **Interaction**: `browser_click`, `browser_type`, `browser_select_option`, `browser_hover`, `browser_drag` — interact with page elements using accessibility refs from snapshots.
+- **Keyboard & files**: `browser_press_key`, `browser_file_upload` — press keys or upload files.
+- **Tabs**: `browser_tab_list`, `browser_tab_new`, `browser_tab_select`, `browser_tab_close` — manage browser tabs.
+- **Utilities**: `browser_console_messages`, `browser_generate_playwright_test`, `browser_network_requests`, `browser_install` — read console logs, generate test code, inspect network, install browsers.
+
+Use MCP tools during development to inspect live pages and generate locator-accurate test code. Use the Playwright test runner and CI pipeline for execution.
+
 ### Baseline standards
 
 - Test user-visible behavior rather than component internals or CSS structure.
@@ -51,9 +65,9 @@ Provide implementation guidance, code examples, and configuration as appropriate
 
 Load on demand. Do not preload all reference files.
 
-| File | Load when |
-| --- | --- |
-| `references/locator-trace-flake-checklist.md` | You need a deeper checklist for locator choice, auth setup, trace-driven debugging, retries, CI artifacts, or flake triage. |
+| File                                          | Load when                                                                                                                                          |
+| --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `references/locator-trace-flake-checklist.md` | You need a deeper checklist for locator choice, auth setup, trace-driven debugging, retries, CI artifacts, flake triage, or MCP workflow patterns. |
 
 ## Scripts
 
@@ -63,3 +77,5 @@ No helper scripts are required for this skill right now. Keep execution in `SKIL
 
 - "Help me with playwright e2e best practices in this project"
 - "Review my playwright e2e implementation for issues"
+- "Use Playwright MCP to inspect the login page and generate test code"
+- "Check playwright upstream status and available browser tools"