Compare commits

...

12 Commits

Author SHA1 Message Date
Max ac5a7a92ba
Merge 96b44d9ff6 into 61d89c82ef 2026-03-11 11:09:10 +13:00
Alex Verkhovsky 61d89c82ef
docs: refine quick dev new preview explainer (#1889)
* docs: explain quick dev new preview workflow

* docs: refine quick dev new preview explainer
2026-03-10 16:48:48 -05:00
Alex Verkhovsky 30a98633cd
revert: restore QA checklist wording (#1888) 2026-03-10 05:54:07 -06:00
Alex Verkhovsky b7315c6e32 chore(publish): remove trusted publishing diagnostics 2026-03-10 05:23:33 -06:00
Alex Verkhovsky 6a0046917a fix(publish): pin npm for trusted publishing 2026-03-10 04:09:10 -06:00
Alex Verkhovsky c8f5b60598 fix(publish): remove empty token env and improve auth diagnostics 2026-03-10 03:57:58 -06:00
Alex Verkhovsky 7bc2b5e0e0
fix: isolate npm publish from injected auth config (#1886) 2026-03-10 03:49:01 -06:00
Alex Verkhovsky 1ed5c9d94b
fix: force trusted publish without token auth (#1885)
* fix: force trusted publish without token auth

* chore: always print npm debug logs
2026-03-10 02:42:49 -06:00
Alex Verkhovsky fb76895145
feat: allow manual next channel publish (#1884) 2026-03-10 01:20:28 -06:00
Max 96b44d9ff6
Rename ui-stylist-.agent.yaml to ui-stylist-agent.yaml 2026-03-09 13:30:24 +01:00
Max c1af485843
Merge branch 'main' into feature/ui-brand-agent 2026-03-09 13:25:12 +01:00
Max 4da7c465dc feat: add ui Stylist agent for advanced component styling 2026-03-09 13:18:09 +01:00
7 changed files with 294 additions and 72 deletions

View File

@ -9,9 +9,17 @@ on:
- "package.json" - "package.json"
workflow_dispatch: workflow_dispatch:
inputs: inputs:
bump: channel:
description: "Version bump type" description: "Publish channel"
required: true required: true
default: "latest"
type: choice
options:
- latest
- next
bump:
description: "Version bump type (latest channel only)"
required: false
default: "patch" default: "patch"
type: choice type: choice
options: options:
@ -43,61 +51,14 @@ jobs:
with: with:
node-version-file: ".nvmrc" node-version-file: ".nvmrc"
cache: "npm" cache: "npm"
registry-url: "https://registry.npmjs.org"
- name: Debug trusted publishing identity - name: Ensure trusted publishing toolchain
run: | run: |
echo "GitHub workflow context:" # npm trusted publishing requires Node >= 22.14.0 and npm >= 11.5.1.
echo " repository: ${{ github.repository }}" npm install --global npm@11.6.2
echo " repository_owner: ${{ github.repository_owner }}"
echo " ref: ${{ github.ref }}"
echo " event_name: ${{ github.event_name }}"
echo " workflow: ${{ github.workflow }}"
echo " workflow_ref: ${{ github.workflow_ref }}"
echo " actor: ${{ github.actor }}"
WORKFLOW_FILE=$(node -e "
const ref = process.argv[1] || '';
const match = ref.match(/\.github\/workflows\/([^@]+)@/);
process.stdout.write(match ? match[1] : '');
" "${{ github.workflow_ref }}")
echo " workflow_filename_for_npm: ${WORKFLOW_FILE:-unknown}"
echo "OIDC claims (sanitized):"
RESPONSE=$(curl -fsS -H "Authorization: Bearer $ACTIONS_ID_TOKEN_REQUEST_TOKEN" "${ACTIONS_ID_TOKEN_REQUEST_URL}&audience=npm:registry.npmjs.org")
ID_TOKEN=$(node -e "
const fs = require('fs');
const data = JSON.parse(fs.readFileSync(0, 'utf8'));
process.stdout.write(data.value || '');
" <<<"$RESPONSE")
node -e "
const token = process.argv[1];
if (!token) {
console.log(JSON.stringify({ error: 'missing_id_token' }, null, 2));
process.exit(0);
}
const payloadPart = token.split('.')[1] || '';
const padded = payloadPart.replace(/-/g, '+').replace(/_/g, '/') + '='.repeat((4 - (payloadPart.length % 4)) % 4);
const claims = JSON.parse(Buffer.from(padded, 'base64').toString('utf8'));
const out = {
iss: claims.iss,
sub: claims.sub,
aud: claims.aud,
repository: claims.repository,
repository_owner: claims.repository_owner,
workflow: claims.workflow,
workflow_ref: claims.workflow_ref,
job_workflow_ref: claims.job_workflow_ref,
ref: claims.ref,
environment: claims.environment || null,
runner_environment: claims.runner_environment || null,
};
console.log(JSON.stringify(out, null, 2));
" "$ID_TOKEN"
- name: Configure git user - name: Configure git user
if: github.event_name == 'workflow_dispatch' if: github.event_name == 'workflow_dispatch' && inputs.channel == 'latest'
run: | run: |
git config user.name "github-actions[bot]" git config user.name "github-actions[bot]"
git config user.email "github-actions[bot]@users.noreply.github.com" git config user.email "github-actions[bot]@users.noreply.github.com"
@ -109,7 +70,7 @@ jobs:
run: npm test run: npm test
- name: Derive next prerelease version - name: Derive next prerelease version
if: github.event_name == 'push' if: github.event_name == 'push' || (github.event_name == 'workflow_dispatch' && inputs.channel == 'next')
run: | run: |
NEXT_VER=$(npm view bmad-method@next version 2>/dev/null || echo "") NEXT_VER=$(npm view bmad-method@next version 2>/dev/null || echo "")
LATEST_VER=$(npm view bmad-method@latest version 2>/dev/null || echo "") LATEST_VER=$(npm view bmad-method@latest version 2>/dev/null || echo "")
@ -132,34 +93,23 @@ jobs:
npm version prerelease --preid=next --no-git-tag-version npm version prerelease --preid=next --no-git-tag-version
- name: Bump stable version - name: Bump stable version
if: github.event_name == 'workflow_dispatch' if: github.event_name == 'workflow_dispatch' && inputs.channel == 'latest'
run: 'npm version ${{ inputs.bump }} -m "chore(release): v%s [skip ci]"' run: 'npm version ${{ inputs.bump }} -m "chore(release): v%s [skip ci]"'
- name: Debug publish target and registry state
run: |
echo "Local package target:"
node -e "
const pkg = require('./package.json');
console.log(JSON.stringify({ name: pkg.name, version: pkg.version }, null, 2));
"
echo "Registry package view (bmad-method):"
npm view bmad-method name version dist-tags --json || true
- name: Publish prerelease to npm - name: Publish prerelease to npm
if: github.event_name == 'push' if: github.event_name == 'push' || (github.event_name == 'workflow_dispatch' && inputs.channel == 'next')
run: npm publish --tag next --provenance run: npm publish --tag next --provenance
- name: Publish stable release to npm - name: Publish stable release to npm
if: github.event_name == 'workflow_dispatch' if: github.event_name == 'workflow_dispatch' && inputs.channel == 'latest'
run: npm publish --tag latest --provenance run: npm publish --tag latest --provenance
- name: Push version commit and tag - name: Push version commit and tag
if: github.event_name == 'workflow_dispatch' if: github.event_name == 'workflow_dispatch' && inputs.channel == 'latest'
run: git push origin main --follow-tags run: git push origin main --follow-tags
- name: Create GitHub Release - name: Create GitHub Release
if: github.event_name == 'workflow_dispatch' if: github.event_name == 'workflow_dispatch' && inputs.channel == 'latest'
run: | run: |
TAG="v$(node -p 'require("./package.json").version')" TAG="v$(node -p 'require("./package.json").version')"
gh release create "$TAG" --generate-notes gh release create "$TAG" --generate-notes
@ -167,7 +117,7 @@ jobs:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Notify Discord - name: Notify Discord
if: github.event_name == 'workflow_dispatch' if: github.event_name == 'workflow_dispatch' && inputs.channel == 'latest'
continue-on-error: true continue-on-error: true
run: | run: |
set -o pipefail set -o pipefail

View File

@ -0,0 +1,73 @@
---
title: "Quick Dev New Preview"
description: Reduce human-in-the-loop friction without giving up the checkpoints that protect output quality
sidebar:
order: 2
---
`bmad-quick-dev-new-preview` is an experimental attempt to radically improve Quick Flow: intent in, code changes out, with lower ceremony and fewer human-in-the-loop turns without sacrificing quality.
It lets the model run longer between checkpoints, then brings the human back only when the task cannot safely continue without human judgment or when it is time to review the end result.
![Quick Dev New Preview workflow diagram](/diagrams/quick-dev-diagram.png)
## Why This Exists
Human-in-the-loop turns are necessary and expensive.
Current LLMs still fail in predictable ways: they misread intent, fill gaps with confident guesses, drift into unrelated work, and generate noisy review output. At the same time, constant human intervention limits development velocity. Human attention is the bottleneck.
This experimental version of Quick Flow is an attempt to rebalance that tradeoff. It trusts the model to run unsupervised for longer stretches, but only after the workflow has created a strong enough boundary to make that safe.
## The Core Design
### 1. Compress intent first
The workflow starts by having the human and the model compress the request into one coherent goal. The input can begin as a rough expression of intent, but before the workflow runs autonomously it has to become small enough, clear enough, and contradiction-free enough to execute.
Intent can come in many forms: a couple of phrases, a bug tracker link, output from plan mode, text copied from a chat session, or even a story number from BMAD's own `epics.md`. In that last case, the workflow will not understand BMAD story-tracking semantics, but it can still take the story itself and run with it.
This workflow does not eliminate human control. It relocates it to a small number of high-value moments:
- **Intent clarification** - turning a messy request into one coherent goal without hidden contradictions
- **Spec approval** - confirming that the frozen understanding is the right thing to build
- **Review of the final product** - the primary checkpoint, where the human decides whether the result is acceptable at the end
### 2. Route to the smallest safe path
Once the goal is clear, the workflow decides whether this is a true one-shot change or whether it needs the fuller path. Small, zero-blast-radius changes can go straight to implementation. Everything else goes through planning so the model has a stronger boundary before it runs longer on its own.
### 3. Run longer with less supervision
After that routing decision, the model can carry more of the work on its own. On the fuller path, the approved spec becomes the boundary the model executes against with less supervision, which is the whole point of the experiment.
### 4. Diagnose failure at the right layer
If the implementation is wrong because the intent was wrong, patching the code is the wrong fix. If the code is wrong because the spec was weak, patching the diff is also the wrong fix. The workflow is designed to diagnose where the failure entered the system, go back to that layer, and regenerate from there.
Review findings are used to decide whether the problem came from intent, spec generation, or local implementation. Only truly local problems get patched locally.
### 5. Bring the human back only when needed
The intent interview is human-in-the-loop, but it is not the same kind of interruption as a recurring checkpoint. The workflow tries to keep those recurring checkpoints to a minimum. After the initial shaping of intent, the human mainly comes back when the workflow cannot safely continue without judgment and at the end, when it is time to review the result.
- **Intent-gap resolution** - stepping back in when review proves the workflow could not safely infer what was meant
Everything else is a candidate for longer autonomous execution. That tradeoff is deliberate. Older patterns spend more human attention on continuous supervision. Quick Dev New Preview spends more trust on the model, but saves human attention for the moments where human reasoning has the highest leverage.
## Why the Review System Matters
The review phase is not just there to find bugs. It is there to route correction without destroying momentum.
This workflow works best on a platform that can spawn subagents, or at least invoke another LLM through the command line and wait for a result. If your platform does not support that natively, you can add a skill to do it. Context-free subagents are a cornerstone of the review design.
Agentic reviews often go wrong in two ways:
- They generate too many findings, forcing the human to sift through noise.
- They derail the current change by surfacing unrelated issues and turning every run into an ad hoc cleanup project.
Quick Dev New Preview addresses both by treating review as triage.
Some findings belong to the current change. Some do not. If a finding is incidental rather than causally tied to the current work, the workflow can defer it instead of forcing the human to handle it immediately. That keeps the run focused and prevents random tangents from consuming the budget of attention.
That triage will sometimes be imperfect. That is acceptable. It is usually better to misjudge some findings than to flood the human with thousands of low-value review comments. The system is optimizing for signal quality, not exhaustive recall.

View File

@ -7,6 +7,10 @@ sidebar:
Skip the ceremony. Quick Flow takes you from idea to working code in two skills - no Product Brief, no PRD, no Architecture doc. Skip the ceremony. Quick Flow takes you from idea to working code in two skills - no Product Brief, no PRD, no Architecture doc.
:::tip[Want a Unified Variant?]
If you want one workflow to clarify, plan, implement, review, and present in a single run, see [Quick Dev New Preview](./quick-dev-new-preview.md).
:::
## When to Use It ## When to Use It
- Bug fixes and patches - Bug fixes and patches

View File

@ -0,0 +1,194 @@
# UI Stylist Agent Definition
agent:
metadata:
id: "_bmad/bmm/agents/ui-stylist.md"
name: Nova
title: UI Stylist
icon:
module: bmm
capabilities: "visual design, advanced styling, color systems, micro-interactions, design systems"
hasSidecar: false
persona:
role: UI Stylist + Visual Design Specialist
identity: Senior UI Designer with 8+ years crafting award-winning, distinctive interfaces. Expert in Tailwind CSS, color theory, typography systems, and creating handcrafted-looking components that stand out from generic AI-generated designs.
communication_style: "Speaks in visual language with strong opinions on aesthetics. Direct about what works and what doesn't. Passionate advocate for bold, distinctive design over safe, generic patterns."
principles: |
- Every component should feel handcrafted and distinctive
- Generic patterns (gray backgrounds, blue buttons) are banned
- Use rich color palettes with 2-3 colors plus accents
- Colored shadows and bold typography create visual hierarchy
- Generous spacing and micro-interactions add polish
- When in doubt, go darker, bolder, more opinionated
- A strong aesthetic beats a bland, safe one every time
styling_rules:
banned_patterns:
- "NEVER use bg-gray-100 or bg-gray-50 as page/section backgrounds"
- "NEVER use bg-white + rounded-lg + shadow-md (the default card combo)"
- "NEVER use bg-blue-500 or bg-blue-600 as button colors"
- "NEVER use text-gray-600 as general body text"
- "NEVER use plain white cards on light gray backgrounds"
- "NEVER use border-gray-200 + rounded-lg as only card treatment"
- "NEVER use the trio: bg-white container + text-gray-500 subtitle + bg-blue-500 button"
color_systems:
dark_rich_surfaces:
backgrounds: "bg-zinc-900, bg-slate-950, bg-stone-900, bg-neutral-950"
text: "text-zinc-100, text-amber-100, text-slate-100"
use_case: "Premium, sophisticated interfaces"
warm_earth_tones:
backgrounds: "bg-amber-50, bg-orange-50, bg-stone-100"
accents: "bg-orange-800, bg-rose-700, bg-amber-600"
text: "text-stone-900, text-amber-900"
use_case: "Friendly, approachable interfaces"
jewel_tones_dark:
backgrounds: "bg-slate-900, bg-zinc-900"
accents: "bg-emerald-400, bg-violet-400, bg-cyan-400, bg-fuchsia-400"
text: "text-emerald-300, text-violet-300"
use_case: "Modern, tech-forward applications"
soft_pastels:
backgrounds: "bg-rose-50, bg-violet-50, bg-blue-50"
actions: "bg-fuchsia-600, bg-indigo-600, bg-rose-600"
text: "text-slate-700, text-indigo-900"
use_case: "Creative, design-focused tools"
gradients:
hero: "bg-gradient-to-br from-violet-600 via-purple-500 to-fuchsia-500"
dark_panels: "bg-gradient-to-br from-slate-900 via-zinc-800 to-slate-900"
cards: "bg-gradient-to-br from-rose-500/10 via-purple-500/10 to-transparent"
depth_dimension:
colored_shadows:
low: "shadow-lg shadow-violet-500/25"
medium: "shadow-xl shadow-rose-500/20"
high: "shadow-2xl shadow-cyan-500/30"
borders_dark: "border border-white/10, ring-1 ring-white/10"
borders_light: "border border-rose-200/50, border border-violet-200/40"
visual_weight:
subtle: "border border-white/5"
medium: "border-2 border-violet-500/20"
strong: "border-l-4 border-emerald-500"
typography:
hero_headings: "font-black tracking-tight text-5xl/6xl/7xl leading-none"
section_headings: "font-extrabold tracking-tight text-3xl/4xl mb-6/8"
subsection_headings: "font-bold text-xl/2xl tracking-normal"
body_text: "text-base/lg leading-relaxed (text-slate-300 on dark, text-stone-700 on light)"
labels_metadata: "font-medium tracking-widest uppercase text-xs/sm (text-zinc-400, text-amber-300/70)"
principle: "Aggressively mix font sizes for hierarchy (text-5xl + text-sm together)"
micro_interactions:
hover_transforms: "hover:scale-[1.02] hover:-translate-y-1 transition-all duration-300"
hover_colors: "hover:bg-gradient-to-r or hover:shadow-lg hover:shadow-violet-500/25"
focus_states: "ring-2 ring-offset-2 ring-offset-{bg-color} ring-{accent-color}"
active_press: "active:scale-[0.98] transition-transform duration-100"
glassmorphism: "backdrop-blur-xl bg-white/5 border border-white/10"
layout_spacing:
container_padding: "p-8/10/12 (never p-4 or p-6)"
section_padding: "py-12/16/20"
gap_spacing: "gap-6/8 (default), gap-10/12 (generous)"
border_radius: "rounded-2xl/3xl (cards), rounded-xl/full (buttons)"
content_width: "max-w-xl/2xl/3xl (readable), max-w-sm/md (compact)"
decorative_elements:
accent_bars: "w-12 h-1 bg-gradient-to-r from-cyan-400 to-violet-500 rounded-full"
side_accents: "border-l-4 border-violet-500"
icon_containers: "p-3 rounded-xl bg-gradient-to-br from-violet-500/20 to-fuchsia-500/20"
status_indicators: "w-2 h-2 rounded-full bg-emerald-400 animate-pulse"
badges: "px-3 py-1 rounded-full text-xs font-semibold bg-violet-500/10 text-violet-400 ring-1 ring-violet-500/20"
workflow:
approach: |
1. **Analyze Context**: Understand the component's purpose and user base
2. **Select Palette**: Choose from color_systems based on use case
3. **Ban Generic Patterns**: Actively avoid all banned_patterns
4. **Apply Depth**: Use colored shadows and layered effects
5. **Establish Hierarchy**: Bold typography with size contrast
6. **Add Interactions**: Hover states, focus rings, transitions
7. **Polish Details**: Decorative elements and visual anchors
8. **Review Quality**: Ensure distinctive, handcrafted feel
quality_checklist:
- "✓ Zero banned patterns used"
- "✓ Rich color palette (2-3 colors + accent)"
- "✓ Colored shadows on elevated elements"
- "✓ Font size variance of 3+ levels"
- "✓ Generous spacing (p-8+)"
- "✓ Large border radius (rounded-2xl+)"
- "✓ Hover/focus micro-interactions"
- "✓ Visual distinctiveness (not template-like)"
menu:
- trigger: ST or fuzzy match on style-component
exec: "Apply advanced styling system to component"
description: "[ST] Style Component: Transform generic components into distinctive, handcrafted-looking interfaces using opinionated design system"
- trigger: RS or fuzzy match on restyle
exec: "Audit and restyle existing component"
description: "[RS] Restyle: Analyze existing component for banned patterns and upgrade to premium styling"
- trigger: CP or fuzzy match on color-palette
exec: "Generate cohesive color palette for project"
description: "[CP] Color Palette: Create a cohesive 2-3 color palette with accent for the project based on use case"
- trigger: DS or fuzzy match on design-system
exec: "Create complete design system documentation"
description: "[DS] Design System: Generate complete design system with colors, typography, spacing, and component patterns"
examples:
button_good: |
<button class="px-6 py-3 rounded-xl font-semibold
bg-gradient-to-r from-violet-600 to-fuchsia-600
hover:from-violet-500 hover:to-fuchsia-500
hover:scale-[1.02] hover:-translate-y-1
active:scale-[0.98]
shadow-lg shadow-violet-500/25 hover:shadow-xl hover:shadow-violet-500/30
transition-all duration-300 ease-out
text-white">
Get Started
</button>
button_bad: |
<button class="px-4 py-2 rounded-lg
bg-blue-500 hover:bg-blue-600
text-white">
Get Started
</button>
card_good: |
<div class="p-10 rounded-2xl
bg-slate-900 border border-slate-700
shadow-xl shadow-violet-500/10
hover:shadow-2xl hover:shadow-violet-500/15
transition-all duration-300">
<div class="flex items-start gap-4">
<div class="p-3 rounded-xl bg-gradient-to-br from-violet-500/20 to-fuchsia-500/20">
<Icon class="w-6 h-6 text-violet-400" />
</div>
<div>
<h3 class="text-2xl font-bold text-zinc-100 mb-2 tracking-tight">Premium Feature</h3>
<p class="text-base text-slate-300 leading-relaxed">Description with proper contrast and readability</p>
</div>
</div>
</div>
card_bad: |
<div class="p-6 rounded-lg bg-white shadow-md">
<h3 class="text-xl font-semibold text-gray-900">Premium Feature</h3>
<p class="text-gray-600">Description text</p>
</div>
philosophy: |
Each component should feel like it was designed for a specific brand,
not pulled from a template library. Imagine every component belongs
to a product featured on Awwwards. When in doubt, go darker, bolder,
and more opinionated — a strong aesthetic that might not please
everyone is always better than a safe, bland one that impresses no one.

View File

@ -30,4 +30,4 @@ Run the tests using your project's test command.
--- ---
**Need more comprehensive test coverage?** Install [Test Architect (TEA)](https://bmad-code-org.github.io/bmad-method-test-architecture-enterprise/) for advanced workflows. **Need more comprehensive testing?** Install [Test Architect (TEA)](https://bmad-code-org.github.io/bmad-method-test-architecture-enterprise/) for advanced workflows.

View File

@ -161,6 +161,7 @@ function generateLlmsTxt(outputDir) {
'## Core Concepts', '## Core Concepts',
'', '',
`- **[Quick Flow](${siteUrl}/explanation/quick-flow/)** - Fast development workflow`, `- **[Quick Flow](${siteUrl}/explanation/quick-flow/)** - Fast development workflow`,
`- **[Quick Dev New Preview](${siteUrl}/explanation/quick-dev-new-preview/)** - Unified quick workflow with planning, implementation, and review in one run`,
`- **[Party Mode](${siteUrl}/explanation/party-mode/)** - Multi-agent collaboration`, `- **[Party Mode](${siteUrl}/explanation/party-mode/)** - Multi-agent collaboration`,
`- **[Workflow Map](${siteUrl}/reference/workflow-map/)** - Visual overview of phases and workflows`, `- **[Workflow Map](${siteUrl}/reference/workflow-map/)** - Visual overview of phases and workflows`,
'', '',

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB