@mmerterden/multi-agent-pipeline 10.2.0 → 10.3.0

package/CHANGELOG.md

@@ -14,6 +14,32 @@ Internal file-layout changes that don't affect the slash-command surface are sti
 
 ---
 
+## [10.3.0] - 2026-07-02
+
+Android (Jetpack Compose) parity for the interaction skills shipped in 10.2.0,
+plus two fixes from a review pass. The cross-cutting integration adapters are
+now genuinely dual-platform, honoring the figma-common "dispatched by both iOS
+and Android" contract.
+
+### Added
+
+- **Android (Jetpack Compose) sections** in `figma-navigation`, `figma-overlays`,
+  and `figma-bottom-sheets`. Same emit-intent / caller-owns rules and the same
+  `figma-config` `ui.*` hooks; native-first per platform (Navigation Compose;
+  Snackbar / AlertDialog / Dialog + state-driven loading; `ModalBottomSheet` +
+  `rememberModalBottomSheetState`). The Android orchestrator uses the Compose
+  section, the iOS orchestrator the SwiftUI section. `figma-evolve-component`
+  wording made platform-neutral (SwiftUI or Compose).
+
+### Fixed
+
+- **`animated-gradient-border` reference snippet** now animates the
+  `AngularGradient(angle:)` on a static shape instead of `rotationEffect` on the
+  stroked rounded-rect (which spun the whole shape — glitchy corners).
+- **Genericized the sheet corner-radius example token** (`.Radius.n12` →
+  `.CornerRadius.radius12`) so no app-specific token leaks into the generic
+  pipeline.
+
 ## [10.2.0] - 2026-07-02
 
 Generic SwiftUI interaction coverage for the figma-to-swiftui pipeline. Three

package/README.md

@@ -15,9 +15,9 @@
 | Copilot skills (dash-form `multi-agent-*`) | 34 |
 | Platforms (native: Claude Code, Copilot CLI · adapter: Cursor, Antigravity, VS Code Copilot Chat, Codex CLI) | 6 |
 | Store-compliance skills (`apple-archive-compliance`, `google-play-compliance`) | 2 |
-| Figma skills (iOS + Android + Common) | 37 |
+| Figma skills (iOS + Android + Common) | 41 |
 | External skill catalog (`shared/external/`) | 143 |
-| Total `SKILL.md` files across all groups | 217 |
+| Total `SKILL.md` files across all groups | 221 |
 | Smoke suites | 108 |
 | Golden-task fixtures (`pipeline/eval/golden-tasks/`) | 8 |
 | Eval-triage fixtures | 11 |
@@ -154,6 +154,8 @@ slows down the install.
 
 ## What's new
 
+- **v10.3.0** (2026-07-02) - Android (Jetpack Compose) parity for the 10.2.0 interaction skills: `figma-navigation` / `figma-overlays` / `figma-bottom-sheets` now carry both a SwiftUI and a Compose section (Navigation Compose; Snackbar/AlertDialog/Dialog + state-driven loading; `ModalBottomSheet`), same emit-intent rules and `ui.*` config hooks on both platforms. Plus a review pass: corrected the `animated-gradient-border` snippet (animate `AngularGradient(angle:)` on a static shape, not `rotationEffect`) and genericized the sheet corner-radius example token.
+- **v10.2.0** (2026-07-02) - Generic SwiftUI interaction coverage for figma-to-swiftui: three new cross-cutting integration skills (`figma-navigation`, `figma-overlays`, `figma-bottom-sheets`) + a reconcile-and-extend workflow (`figma-evolve-component`), all native-SwiftUI-first with an optional per-project `ui.*` config hook (so the same capabilities work on any SwiftUI codebase, no app-specific coupling). Phase 3D dev detection (§1.5.4) and Phase 4 review both consume them; `figma-to-swiftui` accessibility reference enriched with the VoiceOver-minimalism decision tree; new `animated-gradient-border` UI pattern. Figma-common skills 27 → 31, total figma skills 37 → 41.
 - **v10.1.0** (2026-06-20) - Fable 5 retired (no longer available): the five heavy agent personas plus Phase 1 / Phase 2 / Phase 4 reviewer-1 + triage and `--dev` fast mode now route to Opus (top available tier); fallback ladder is `opus -> sonnet`. Per-task cost guard (`costBudget`) now defaults on in warn mode. Token economy: Phase 4 shared cache prefix + single-repo diff cap, Phase 1 light Explore tier for small bugfixes, triage prior-art injection capped.
 - **v10.0.0** (2026-06-12) - quality major driven by a 10-category self-audit + competitive sweep: validator gates wired into phases 1/2/4 (fails closed), Phase 3 code-simplifier diff-shrink pass, Phase 4 lesson memory loop, Phase 2 cross-artifact consistency gate, skill frontmatter linter (repaired 31 SKILL.md), installer `--dry-run` + unknown-flag rejection, timeout-guarded smoke runner, adapter family deduplicated (~490 lines), CI hardening (blocking lint, npm audit, shellcheck), tag-driven npm release automation, CHANGELOG split (310KB -> 40KB).
 - **v9.10.2** (2026-06-11) - live per-phase token narration on completion; tracker mandates per-phase cost lines in the final report.

package/docs/FIGMA_PIPELINE.md

@@ -8,6 +8,8 @@ End-to-end guide for generating production-ready UI components from Figma design
 - **Platform-agnostic orchestration** — classification happens once in Phase 0; the orchestrator picks the right code generator for iOS or Android based on `figmaConfig.project.platform`.
 - **Multi-repo aware** — components span multiple repos (tokens in `common`, view in `components`, docs in `wiki`). The orchestrator sequences writes correctly.
 - **Non-blocking side effects** — wiki generation + Jira sync run as augmentations; failures log and Phase 7 continues.
+- **Cross-cutting integration skills** — Phase 3D detects content patterns (`figma-form-integration`, `figma-price-integration`, `figma-ui-patterns`) and interaction patterns (`figma-navigation`, `figma-overlays`, `figma-bottom-sheets`) and dispatches the matching skill. All are **native-SwiftUI-first**; a project's own navigation/overlay/sheet system is used only when `figmaConfig.ui.{navigationSystem,overlaySystem,sheetSystem}` declares one (absent → stock SwiftUI: `NavigationStack`, `.alert`/`.sheet(item:)`, `.presentationDetents`). Generic across SwiftUI codebases.
+- **Evolve an existing component** — `figma-evolve-component` reconciles a shipped component against current Figma (drift-heal) and additively extends it for a new need, behind a mandatory human gate — distinct from a fresh build, `figma-mend` (rebuild), and `figma-fix` (review bug).
 
 ## How it runs
 
@@ -67,6 +69,16 @@ Minimum viable config:
 
 Android projects swap the `build` section to `{ "gradleModule": ":components:button", "variant": "debug" }` and set `project.platform` to `"android"`.
 
+**Optional `ui` block — UI interaction systems.** Consumed by the `figma-navigation` / `figma-overlays` / `figma-bottom-sheets` skills and Phase 4 review. Omit it (or set `mode: "native"`) and the pipeline generates stock SwiftUI (`NavigationStack`, `.alert`/`.sheet(item:)`, `.sheet`+`presentationDetents`). Set `mode: "custom"` to route to a project-supplied system by type name:
+
+```json
+"ui": {
+  "navigationSystem": { "mode": "custom", "router": "AppRouter", "routeEnum": "AppRoute", "sceneType": "SceneContent" },
+  "overlaySystem":    { "mode": "custom", "center": "OverlayCenter" },
+  "sheetSystem":      { "mode": "custom", "brandedModifier": "bottomSheet", "detentType": "SheetDetentType" }
+}
+```
+
 ## The issue → Jira → wiki triad
 
 When a GitHub issue triggers the pipeline and has no Jira link:

package/docs/features.md

@@ -238,6 +238,8 @@ Pipeline learns behavioral signals (feedback corrections, project constraints, e
 
 Full component generation pipeline from a Figma URL. Generates `{Name}Configuration.swift`, `{Name}View.swift`, `{Name}+Modifiers.swift`, `{Name}.figma.swift`, `FIGMA.md` with variant matrix. 14-item pre-commit checklist covers design tokens, accessibility, tests, Code Connect.
 
+Cross-cutting integration skills feed Phase 3D detection + Phase 4B implementation when the design triggers them — content: `figma-form-integration`, `figma-price-integration`, `figma-ui-patterns`; interaction: `figma-navigation`, `figma-overlays`, `figma-bottom-sheets`. Each is **native-SwiftUI-first** and reads project specifics (token namespaces, component paths, and UI systems) from `figma-config` — including the optional `ui.navigationSystem` / `ui.overlaySystem` / `ui.sheetSystem` hooks (absent → stock SwiftUI). So the same capabilities work on any SwiftUI codebase, not just one app. `figma-evolve-component` reconciles an existing component against current Figma (drift-heal) and additively extends it, behind a human gate.
+
 ### UI Bug Hunter + Audits
 
 Automated visual testing and compliance audits via direct Bash (no MCP server dependency):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmerterden/multi-agent-pipeline",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "description": "8-phase AI development pipeline with full orchestration on Claude Code, Copilot CLI, Cursor, Antigravity, and VS Code Copilot Chat. Analysis, planning, TDD, CLI-aware parallel review with consensus surfacing + Opus triage, default-FAIL evidence gates, secret + intent guards, per-phase cost ledger, persistent learnings memory, wiki generation, commit automation. Token-preserving uninstall.",
   "type": "module",
   "main": "index.js",

package/pipeline/skills/figma-android/README.md

@@ -16,7 +16,9 @@ Platform-specific skills for generating Jetpack Compose components from Figma de
 
 ## What's NOT here (yet)
 
-The platform-**agnostic** skills  -  `figma-commit`, `figma-iterate`, `figma-issue`, `figma-review`, `figma-setup`, `figma-validate`, `figma-utility`, `figma-fix`, `figma-mend`, `figma-ui-patterns`, `figma-remote-mcp-auth`, `figma-cli-*`, `performance-*`, etc.  -  live under [`pipeline/skills/figma-common/`](../figma-common/) (WS-7b ✓). Both iOS and Android orchestrators dispatch there without duplication.
+The platform-**agnostic** skills  -  `figma-commit`, `figma-iterate`, `figma-issue`, `figma-review`, `figma-setup`, `figma-validate`, `figma-utility`, `figma-fix`, `figma-mend`, `figma-evolve-component`, `figma-ui-patterns`, `figma-form-integration`, `figma-price-integration`, `figma-navigation`, `figma-overlays`, `figma-bottom-sheets`, `figma-remote-mcp-auth`, `figma-cli-*`, `performance-*`, etc.  -  live under [`pipeline/skills/figma-common/`](../figma-common/) (WS-7b ✓). Both iOS and Android orchestrators dispatch there without duplication.
+
+The cross-cutting **integration adapters** (`figma-form-integration`, `figma-price-integration`, `figma-navigation`, `figma-overlays`, `figma-bottom-sheets`) carry both an iOS (SwiftUI) and an Android (Jetpack Compose) section  -  the Android orchestrator uses the Compose section; the same emit-intent / caller-owns rules and the `figma-config` `ui.*` hooks apply on both platforms.
 
 ## Routing
 

package/pipeline/skills/figma-common/README.md

@@ -39,7 +39,7 @@ Shared skills that both `pipeline/skills/figma-ios/` (SwiftUI) and `pipeline/ski
 - `figma-form-integration`  -  Form protocol adapter (shared UX)
 - `figma-price-integration`  -  Price protocol adapter (shared UX)
 
-**Cross-cutting interaction adapters (native-SwiftUI-first; project system via `figma-config` `ui.*`):**
+**Cross-cutting interaction adapters (dual-platform: iOS SwiftUI + Android Jetpack Compose; native-first; project system via `figma-config` `ui.*`):**
 
 - `figma-navigation`  -  Navigation pattern: headless Output vs self-route; native `NavigationStack` or `ui.navigationSystem`
 - `figma-overlays`  -  Overlay pattern: toast/HUD/alert/data-modal; native `.alert`/`.sheet(item:)` or `ui.overlaySystem`

package/pipeline/skills/figma-common/figma-bottom-sheets/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: figma-bottom-sheets
-description: "Bottom-sheet / detent pattern integration for Figma-to-SwiftUI components — half-sheets, drawers, pinned bottom CTAs, resizable pull-up panels, content-sized sheets, and multi-step in-sheet flows. Native SwiftUI (.sheet + presentationDetents/dragIndicator/backgroundInteraction) by default; an optional project-supplied detent-sheet system when figma-config declares one. Reach for this when a design shows a bottom sheet, half-sheet, bottom drawer, snap points, a sticky footer button, or a wizard-in-a-sheet."
+description: "Bottom-sheet / detent pattern integration for Figma-to-UI components (iOS SwiftUI + Android Jetpack Compose) — half-sheets, drawers, pinned bottom CTAs, resizable pull-up panels, content-sized sheets, and multi-step in-sheet flows. Native by default (SwiftUI .sheet+presentationDetents; Compose ModalBottomSheet + rememberModalBottomSheetState); an optional project-supplied detent-sheet system when figma-config declares one. Reach for this when a design shows a bottom sheet, half-sheet, bottom drawer, snap points, a sticky footer button, or a wizard-in-a-sheet."
 user-invocable: true
 allowed-tools: Read, Glob, Grep
 status: wip-v5
@@ -74,7 +74,7 @@ When `figma-config.json` declares:
   "headlessModifiers": ["modalSheet", "dockedSheet", "expandableSheet", "detentNavigationSheet"],
   "detentType": "SheetDetentType",         // detent enum
   "backdropType": "Backdrop",              // backdrop enum
-  "cornerRadiusToken": ".Radius.n12"       // branded top-corner token
+  "cornerRadiusToken": ".CornerRadius.radius12"   // example: your branded top-corner radius token
 }}
 ```
 apply the SAME rules via the project's engine (names from config, do NOT hardcode):
@@ -86,6 +86,21 @@ apply the SAME rules via the project's engine (names from config, do NOT hardcod
 
 If `mode` is absent or `native`, use the native-first section.
 
+## Android (Jetpack Compose)
+
+Same rules, Compose vocabulary. Default is Material3; a project sheet engine is used only when `ui.sheetSystem.mode == "custom"`.
+
+- **Half / expandable / drawer:** `ModalBottomSheet(onDismissRequest = { showSheet = false }, sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)) { Content() }`. The caller owns `var showSheet by remember` and the `SheetState`; the Figma-authored composable is the **content**.
+- **Detents / snap points:** Material3 exposes partial + expanded (`skipPartiallyExpanded`, `SheetValue`); for finer snap points use an `AnchoredDraggable`-based sheet. Don't hard-code pixel heights  -  derive from content / fractions.
+- **Content-sized:** let the content wrap-height; the sheet grows to content then scrolls (inner `Column`/`LazyColumn` with `verticalScroll`).
+- **Pinned bottom CTA (part of the screen, not a sheet):** `Scaffold(bottomBar = { CTA() })`  -  reserves space, screen stays interactive. Not a `ModalBottomSheet`.
+- **Multi-step in-sheet flow:** host a nested `NavHost` (or step state) inside the sheet content, resizing per step; each step is a headless composable emitting events (see `/figma-navigation`).
+- **Overlays over the sheet:** show `Snackbar`/`AlertDialog` scoped to the sheet content (`/figma-overlays`), not the root.
+
+**Config hook:** `ui.sheetSystem.mode == "custom"` → use the project's `{brandedModifier}` / headless composables + `{detentType}` / `{backdropType}` and radius from `{cornerRadiusToken}`, resolved from config.
+
+Corner radius / grabber / insets from tokens (`MaterialTheme.shapes` / figma-config), not literals.
+
 ---
 
 ## Integration with Phase 3D

package/pipeline/skills/figma-common/figma-evolve-component/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: figma-evolve-component
-description: "On-demand reconcile-and-extend for an ALREADY-implemented SwiftUI component. Heals drift from current Figma (stale variants/props/structure, design-token drift, a detached/overridden deviation) AND extends the component non-destructively to cover a need the design can't express — always behind a mandatory human gate. Reach for this when an existing component drifted from its current design or doesn't cover a need. Not for building from scratch (figma-to-swiftui / figma-mend) or fixing one review bug (figma-fix)."
+description: "On-demand reconcile-and-extend for an ALREADY-implemented UI component (iOS SwiftUI or Android Jetpack Compose). Heals drift from current Figma (stale variants/props/structure, design-token drift, a detached/overridden deviation) AND extends the component non-destructively to cover a need the design can't express — always behind a mandatory human gate. Reach for this when an existing component drifted from its current design or doesn't cover a need. Not for building from scratch (figma-to-component / figma-mend) or fixing one review bug (figma-fix)."
 user-invocable: true
 argument-hint: <component | figma-url> [--report-only]
 allowed-tools: Task, Read, Glob, Grep, Bash, Edit, Write, AskUserQuestion

package/pipeline/skills/figma-common/figma-navigation/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: figma-navigation
-description: "Navigation pattern integration for Figma-to-SwiftUI components. Guides how a component reaches other screens, tabs, or deep links without coupling to a router — headless screens that emit a typed Output, native NavigationStack/navigationDestination by default, an optional project-supplied navigation system (router + route enum + scene container) when figma-config declares one. Reach for this when a design embeds a tab bar, nav bar / back button, a push/detail affordance, or a deep-link entry point."
+description: "Navigation pattern integration for Figma-to-UI components (iOS SwiftUI + Android Jetpack Compose). Guides how a component reaches other screens, tabs, or deep links without coupling to a router — headless screens that emit a typed Output/event, native NavigationStack (iOS) / Navigation Compose (Android) by default, an optional project-supplied navigation system when figma-config declares one. Reach for this when a design embeds a tab bar, nav bar / back button, a push/detail affordance, or a deep-link entry point."
 user-invocable: true
 allowed-tools: Read, Glob, Grep
 status: wip-v5
@@ -89,6 +89,20 @@ then apply the SAME rules, but express them in the project's vocabulary resolved
 
 If `mode` is absent or `native`, use the native-first section above. Resolve types via `tools/resource-utility` / repo grep only when the config points at real files.
 
+## Android (Jetpack Compose)
+
+Same rules, Compose vocabulary. Default is stock **Navigation Compose**; a project system is used only when `ui.navigationSystem.mode == "custom"`.
+
+- **Push/pop within a flow:** caller owns `NavHostController` + `NavHost`; the composable emits events via lambdas (`onSelect: (Id) -> Unit`), never calls `navController.navigate(...)` itself. Prefer type-safe routes (`@Serializable` route objects, `navigation-compose` 2.8+).
+- **Back:** system back / `navController.popBackStack()`; intercept only with `BackHandler { }` when the screen owns the gesture. A custom top-bar back emits `onBack` / calls the caller's pop.
+- **Tabs:** state-hoisted selection (`var selected by rememberSaveable`) bound to a `NavigationBar`; the composable reads/writes the hoisted state, never a global.
+- **Deep links:** `navDeepLink { uriPattern = ... }` on the destination, or the caller parses the URI → route and applies it to the same `NavController`. The composable never parses URIs.
+- **Present another screen modally:** caller-owned `var showX by remember` → `Dialog`/`ModalBottomSheet` (see `/figma-bottom-sheets`).
+
+**Config hook:** `ui.navigationSystem.mode == "custom"` → use the project's `{router}` / `{routeEnum}` (and a screen container if `{sceneType}` is set) resolved from config; cross-graph jumps go through the DI'd `{navigatorProtocol}`.
+
+Tokens/theme via `MaterialTheme` + the project's figma-config token patterns.
+
 ---
 
 ## Integration with Phase 3D

package/pipeline/skills/figma-common/figma-overlays/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: figma-overlays
-description: "Overlay pattern integration for Figma-to-SwiftUI components — toasts/snackbars, blocking loading HUDs, alert dialogs, and data-driven modal cards presented from anywhere without the component owning presentation. Native SwiftUI (.alert/.confirmationDialog/.overlay + a ref-counted loading + data-driven .sheet) by default; an optional project-supplied overlay center when figma-config declares one. Reach for this when a design shows a toast/snackbar, a spinner/HUD, an alert, or a modal card, or when giving post-action feedback (saved/deleted/error) from a view model."
+description: "Overlay pattern integration for Figma-to-UI components (iOS SwiftUI + Android Jetpack Compose) — toasts/snackbars, blocking loading HUDs, alert dialogs, and data-driven modal cards presented from anywhere without the component owning presentation. Native by default (SwiftUI .alert/.confirmationDialog/.overlay + ref-counted loading + .sheet; Compose Snackbar/AlertDialog/Dialog + state-driven loading); an optional project-supplied overlay center when figma-config declares one. Reach for this when a design shows a toast/snackbar, a spinner/HUD, an alert, or a modal card, or when giving post-action feedback (saved/deleted/error) from a view model."
 user-invocable: true
 allowed-tools: Read, Glob, Grep
 status: wip-v5
@@ -81,6 +81,20 @@ apply the SAME rules via the project's center (names from config, do NOT hardcod
 
 If `mode` is absent or `native`, use the native-first section.
 
+## Android (Jetpack Compose)
+
+Same rules, Compose vocabulary. Default is stock Compose/Material3; a project overlay system is used only when `ui.overlaySystem.mode == "custom"`.
+
+- **Toast/snackbar:** `SnackbarHostState` hoisted at a `Scaffold(snackbarHost = { SnackbarHost(state) })`; the composable emits an intent and the caller calls `snackbarHostState.showSnackbar(...)` from a coroutine. (Prefer an in-app `Snackbar` over the platform `android.widget.Toast`.)
+- **Loading:** a state-driven overlay — `if (uiState.isLoading) Box(Modifier.fillMaxSize()) { CircularProgressIndicator() }`; back the flag with a ref-count in the ViewModel + a min-show so it doesn't flash.
+- **Alert:** `AlertDialog(onDismissRequest, confirmButton, dismissButton)` — data-driven from state, proper confirm/dismiss roles.
+- **Modal card:** data-driven `Dialog { }` / `ModalBottomSheet { }` where a host maps the request value → a Material component (no arbitrary erased content passed through a "center").
+- **From a ViewModel:** expose events (`SharedFlow`/`Channel`) or state; the composable collects and shows the overlay. Keep the VM UI-framework-free.
+
+**Config hook:** `ui.overlaySystem.mode == "custom"` → inject/collect the project's `{center}` and render its Material host; keep it data-only.
+
+Rich/interactive content stays a local composable (`Dialog`/`ModalBottomSheet` declared at the owning composable), not routed through a center.
+
 ---
 
 ## Integration with Phase 3D

package/pipeline/skills/figma-common/figma-ui-patterns/patterns/animated-gradient-border.md

@@ -35,7 +35,7 @@ A self-contained native-SwiftUI recipe (no external package):
 
 1. **Overlay, don't replace.** Draw the stroke in an `.overlay` of a `RoundedRectangle` so the host keeps its own background/fill.
 2. **Angular gradient stroked along the shape.** `RoundedRectangle(cornerRadius:).stroke(AngularGradient(...), lineWidth:)`. The angular gradient's rotation is driven by an animated angle so the bright spot travels the perimeter.
-3. **Animatable progress 0→1.** Rotate the gradient with `.rotationEffect(.degrees(360 * progress))` on a masked stroke, or animate the `AngularGradient`'s `angle`. Start in `.onAppear` with `withAnimation(.linear(duration:).repeatForever(autoreverses:false)) { progress = 1 }`.
+3. **Animatable progress 0→1 drives the gradient's `angle`.** Animate the `AngularGradient(angle:)` on a **static** shape — `.degrees(360 * progress)` — so only the bright band travels. Do NOT `.rotationEffect` the stroked shape (that spins the whole rounded-rect). Start in `.onAppear` with `withAnimation(.linear(duration:).repeatForever(autoreverses:false)) { progress = 1 }`.
 4. **Halo shape** = the gradient stop distribution (a bright band with faded shoulders); keep the fade symmetric for the "snake" read.
 5. **Static shortcut.** `isAnimated == false` → render the same stroke frozen (or a single-color stroke).
 
@@ -65,15 +65,19 @@ struct AnimatedGradientBorder: ViewModifier {
     @State private var progress: CGFloat = 0
 
     func body(content: Content) -> some View {
+        // Animate the AngularGradient's `angle` on a STATIC shape — the bright
+        // band sweeps the perimeter. (Do NOT rotationEffect the shape: that spins
+        // the whole rounded-rect, corners and all.)
         content.overlay(
             RoundedRectangle(cornerRadius: cornerRadius)
                 .stroke(
-                    AngularGradient(gradient: Gradient(colors: colors + [colors.first ?? .clear]),
-                                    center: .center),
+                    AngularGradient(
+                        gradient: Gradient(colors: colors + [colors.first ?? .clear]),
+                        center: .center,
+                        angle: .degrees(isAnimated ? 360 * Double(progress) : 0)
+                    ),
                     lineWidth: lineWidth
                 )
-                .rotationEffect(.degrees(isAnimated ? 360 * Double(progress) : 0))
-                .mask(RoundedRectangle(cornerRadius: cornerRadius).stroke(lineWidth: lineWidth))
         )
         .onAppear {
             guard isAnimated else { return }