# Frontend Mix Integrate

> Frontend-Mix · Integrate

- Skill: `coleam00/frontend-mix-integrate` (Agent Skill)
- Install (CLI): `npx skillmds@latest add coleam00/frontend-mix-integrate`
- Raw SKILL.md: https://api.skillmd.com/api/skills/coleam00/frontend-mix-integrate/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: coleam00 (https://skillmd.com/u/coleam00)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/coleam00/frontend-mix-integrate

---


# Frontend-Mix · Integrate

You are the **integration** step of a manual mixed-provider build. Opus does the judgment here.

## What to do

1. Read `$1` (the plan markdown) and `$2` (the ui-summary markdown) end-to-end with the Read tool.

   From the plan, extract everything under the `## SECTION B - Integration Scope` header. Ignore SECTION A and SECTION C.

   From the ui-summary, take every `// INTEGRATION:` stub as one of your work items.

2. The filename in `$1` carries your run-name. Strip the directory and the `-plan.md` suffix to get the slug. You'll use it to name your output file.

3. If either `$1` or `$2` is empty or doesn't resolve, ask the user for the missing path. Do not work from context summaries; the artifacts are the files on disk.

The `clerk-cli` skill is loaded so you CAN drive the `clerk` binary directly if SECTION B picked Clerk for auth. If SECTION B picked a different auth provider, ignore it and use whatever the plan says (Supabase, NextAuth, Auth.js, etc.).

## Your job

1. **Auth** - implement whatever auth provider SECTION B chose. If Clerk: drive the `clerk` CLI directly (`clerk init`, `clerk link`, `clerk env pull`, `clerk config patch --dry-run` then apply, `clerk doctor --json` at the end). Once `clerk deploy` ships publicly, that becomes the final step. If Supabase / NextAuth / Auth.js / something else: do that instead.
2. **Wire every `// INTEGRATION:` stub** the design session left.
3. **Build the backend API** per SECTION B. Every protected handler authenticates against the chosen auth provider's session.
4. **External services** - wire up any SDKs/APIs SECTION B listed (Stripe, Supabase, OpenAI, etc.).
5. Run whatever health checks the chosen stack provides. Fix every failure before signaling complete.

## Important constraints

- Do NOT redesign the UI. The design session owned look-and-feel; you own behavior.
- Do NOT change copy that's already in the rendered components. If the copy looks wrong, raise it to the user, do not unilaterally rewrite it.
- Do NOT skip the auth health check. The cost of shipping broken auth far exceeds the cost of one extra `clerk doctor` call.

## Output

Write to `.claude/artifacts/<run-name>-integration-summary.md`. Create the `.claude/artifacts/` directory if it doesn't exist.

The file lists:
- Every file touched (path + what changed)
- Every external command run (CLI invocations, migrations, etc.) with truncated output
- Any open issues you couldn't resolve (e.g. "Clerk org switcher needs a paid plan; left as a TODO")

## After integrating

Tell the user the absolute path to `<run-name>-integration-summary.md` and the next step:

```
Wrote .claude/artifacts/<run-name>-integration-summary.md

Next: switch to Sonnet and invoke /frontend-mix-validate with the integration summary path.
```