@cubis/foundry 0.3.69 → 0.3.71

package/workflows/workflows/agent-environment-setup/platforms/claude/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/claude/skills/playwright-e2e/SKILL.md

@@ -4,7 +4,7 @@ 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
 ---
 
@@ -12,7 +12,7 @@ compatibility: Claude Code, Codex, GitHub Copilot
 
 ## 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
 
@@ -20,6 +20,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
 
@@ -29,6 +30,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.
@@ -52,9 +66,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
 
@@ -64,3 +78,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"

package/workflows/workflows/agent-environment-setup/platforms/claude/skills/playwright-e2e/references/locator-trace-flake-checklist.md

@@ -50,3 +50,31 @@ Check these in order:
 - Upload traces for failed or retried tests.
 - Shard only after local determinism is solid.
 - Separate smoke-critical browser flows from broad exploratory suites.
+
+## MCP workflow patterns
+
+When Playwright MCP upstream is configured in the Cubis Foundry gateway:
+
+### Interactive test development
+
+1. Use `browser_navigate` to open the target page.
+2. Use `browser_snapshot` to capture the accessibility tree and discover locator targets.
+3. Interact with elements via `browser_click`, `browser_type`, `browser_select_option` using accessibility refs from the snapshot.
+4. Use `browser_generate_playwright_test` to produce test code from the recorded interactions.
+5. Refine generated tests with proper assertions, fixtures, and isolation.
+
+### Snapshot-based debugging
+
+- Take `browser_snapshot` at the failing step to compare the DOM state against expected locators.
+- Use `browser_console_messages` to capture console errors tied to the flow.
+- Use `browser_network_requests` to verify API calls and mocked routes.
+
+### Tab and navigation workflow
+
+- Use `browser_tab_new` and `browser_tab_select` to manage multi-tab flows (OAuth popups, payment redirects).
+- Use `browser_go_back` and `browser_go_forward` to test browser history behavior.
+
+### When to use MCP vs test runner
+
+- **MCP tools**: Interactive exploration, locator discovery, test code generation, debugging live pages during development.
+- **Test runner (`npx playwright test`)**: Execution, CI, parallel sharding, retries, reporting, and deterministic assertions.