Don't Use Next.js Without These 7 Skills - CourtneyR.dev's 2nd Brain

Don't Use Next.js Without These 7 Skills ![rw-book-cover](https://img.youtube.com/vi/gv7KrPTCW_8/maxresdefault.jpg) 🔗 **Source:** [Don't Use Next.js Without These 7 Skills](https://www.youtube.com/watch?v=gv7KrPTCW_8) > [!note]+ Document Notes > > [!info] Generated analysis — not the author's words. Sections below are machine-written > > from the captured source. Only text inside `> [!quote]` blocks is verbatim from the author. > > Do not quote or attribute any other line to the named author. > > --- > tags: [nextjs, ai-agent-skills, developer-tools, supabase, react-development] > author: [MISSING] > source: YouTube > reference: https://www.youtube.com/watch?v=gv7KrPTCW_8 > date created: 2026-08-10 > > --- > > # 🏷️ Title: Don't Use Next.js Without These 7 Skills >  ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [skills.sh](https://skills.sh) — Vercel-built leaderboard tracking AI agent skills - [Next.js repository (GitHub)](https://github.com/vercel/next.js) - Supabase agent skills (referenced, not linked in transcript) - Impeccable design skill (referenced, not linked in transcript) ## 📝 Summary - A developer walks through the emerging "AI agent skills" ecosystem for React/Next.js work: markdown-based, on-demand context files that an AI coding agent loads only when relevant, rather than bloating every prompt with static context. - He surveys skills.sh (Vercel's public leaderboard tracking 1M+ skill installs) and picks out roughly seven he considers must-haves for a Next.js/React/Supabase stack in 2026. - Core Next.js-specific skills covered: next dev loop (browser-based visual + MCP runtime verification), a cached-components adoption skill (guides the `use cache` directive + Suspense migration), an optimizer skill (maximizes the static shell), and a partial pre-fetching skill (Next.js 16.3+, avoids over-fetching link targets). - Non-Next.js-specific but stack-relevant skills: a React best-practices/composition-patterns skill (partially redundant now that `agents.md` ships bundled docs with `create-next-app`), Supabase's own agent skills (RLS/security checklist bundled inline to avoid the agent skipping an external docs fetch), and design-quality skills (Impeccable for AI-slop detection/variation generation, shadcn UI for component-library discipline). - Key stakeholders: Next.js/Vercel DevRel (skill authorship + the leaderboard), Supabase DevRel (partnered segment in the video), and individual full-stack developers deciding which skills to install. - Risk/tradeoff noted explicitly: skills only help if the agent actually loads them — MCP tool access alone is not sufficient (Supabase's own data shows ~60% success with MCP-only vs. much higher with MCP + skill), and skill authors are advised to put critical info inline in `skill.md` because "agents are lazy about reading reference files." - Bottom line: the presenter frames the bottleneck as context delivery, not model capability — skills are a cheap, composable way to route the right guardrails into the agent's context at the right moment, and this particular stack (Next.js cached components + Supabase + design QA) is moving fast enough that this list will likely need revisiting. ## 📖 Main Content - The video's framing device is skills.sh, a public leaderboard (built by Vercel) ranking AI agent skills by install/download volume. A "skill" is described as a small folder of markdown files describing a workflow or domain that an agent can dynamically pull into context based on the skill's name/description — the alternative to permanently bloating the system prompt. - Skills discussed are grouped by function: (1) verification/QA skills that give the agent eyes on a running app, (2) migration/adoption skills for advanced or breaking Next.js features, (3) performance-optimization skills, (4) database/backend skills (Supabase), and (5) design-quality skills (Impeccable, shadcn UI). - A recurring theme is that documentation-only skills are becoming less necessary because Next.js now bundles `agents.md`/`claude.md` (pointing at bundled docs) directly into `npx create-next-app` scaffolds — so a skill whose only job is "inject the docs" is partially redundant, though the presenter still leans toward keeping composition-pattern-style skills that encode judgment, not just reference text. - The Supabase segment is the most evidence-backed claim in the video: Supabase's own internal data (per the presenter, sourced from Supabase, this is a sponsored/partnered segment) shows MCP tool access alone yields roughly 60% success at things like correct RLS policy generation, but pairing the MCP with the skill (which inlines a security checklist and nudges the agent to verify against current docs rather than trained-in knowledge) raises that rate "significantly." The stated mechanism: agents often skip an available "search docs" MCP tool because they assume their training data is current, so the skill's job is as much behavioral nudge as it is information source. ### 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=gv7KrPTCW_8&t=0) skills.sh and the on-demand context model - skills.sh is a Vercel-built leaderboard tracking 1M+ skill installs/downloads. - A skill = a small set of markdown files about a topic (e.g. front-end design) the agent loads into context only when relevant — avoids bloating every prompt. - Loading is decision-based mostly on the skill's name/description metadata, not a forced always-on include. - Next.js's own GitHub repo now ships several first-party skills. #### ⏱️ [01:22](https://www.youtube.com/watch?v=gv7KrPTCW_8&t=82) Skill 1 — next dev loop (browser + MCP verification) - Solves: "if your agent changes your app, how does it know it did a good job?" - Two verification channels: (1) Next.js exposes MCP tools giving the agent runtime introspection — routes, server logs, compilation errors; (2) an agent-controlled browser that can screenshot the running UI, read the DOM/console/network/React tree. - Demoed live: the agent built a landing-page hero animation, then autonomously opened a Chrome window, navigated the app, took screenshots, resized the viewport to check mobile responsiveness, and caught a real polish issue (muted/light-gray copy with insufficient contrast) — a defect that passes every build/type check but is only visible by looking. - Presenter's characterization: "a step change improvement in the quality of Next.js apps," used for a week prior on a canvas application with pan/zoom self-verification. - Requires installing a separate "agent browser" package alongside the skill. #### ⏱️ [07:38](https://www.youtube.com/watch?v=gv7KrPTCW_8&t=458) Skill 2 — cached components adoption - Context: newer Next.js versions unify caching under a `use cache` directive (page-level or function-level), enabled via a `cacheComponents` config flag. - Turning the flag on can surface actionable errors when async/await data-fetching components block the rest of a page from being statically rendered — the fix pattern is wrapping those components in `<Suspense>` so the static shell renders immediately and dynamic content streams in later. - This is architectural, not a simple toggle, so the skill exists specifically to read the flag-on errors, propose fixes, and hand off to the next dev loop skill for a visual check that the static shell still renders correctly. - Analogy given: an e-commerce product page has static content (images, copy) served from CDN identically to every visitor, plus personalized dynamic content (recommended products) that must stream in without blocking the static shell — formerly called "partial pre-rendering," now folded into "cached components." #### ⏱️ [10:44](https://www.youtube.com/watch?v=gv7KrPTCW_8&t=644) Skill 3 — optimizer (maximize the static shell) - Follow-on step after cached components is adopted: find dynamic-looking content that's actually static-for-everyone (e.g. a "recommended products" block that's really keyed off the current product, not the viewer) and pull it into the static shell. - Goal is framed around instant navigation — the bigger the static shell, the more the user sees immediately on page load/route change. The skill walks the app route by route looking for these opportunities. #### ⏱️ [11:44](https://www.youtube.com/watch?v=gv7KrPTCW_8&t=704) Skill 4 — partial pre-fetching (Next.js 16.3+) - Problem case: a footer with ~100 links used to risk over-fetching if Next.js pre-fetched all 100 link targets. - Fix: "partial" pre-fetching — only pre-fetch the static shell around a link target rather than the full dynamic payload, smarter than all-or-nothing. - The skill walks a developer through adopting this behavior in an existing app. #### ⏱️ [12:40](https://www.youtube.com/watch?v=gv7KrPTCW_8&t=760) React best practices / composition patterns — questioned but still useful - Notes that `npx create-next-app` now bundles `agents.md`/`claude.md` pointing at bundled Next.js docs, making pure "inject the docs" skills less necessary than before. - Still recommends a composition-patterns-style skill because agents "still create quite messy components" — judgment/pattern guidance isn't fully covered by reference docs alone. #### ⏱️ [15:32](https://www.youtube.com/watch?v=gv7KrPTCW_8&t=932) Skill 5/6 — Supabase agent skills + Postgres best practices - Supabase shipped two skills: a Postgres-specific best-practices skill and a Supabase-product skill, both installed together in the demo. - Design choice mirrors Next.js: bundle critical info (a security checklist covering auth/session security, API key/client exposure, RLS) directly in `skill.md` so the agent doesn't have to make (and potentially skip) an external docs fetch. - Cited internal Supabase data: MCP-tool-only agents succeed roughly 60% of the time on tasks like correct RLS handling; adding the skill on top of the MCP raises success "significantly." Stated reasons: agents default to (possibly stale) training data even when a search-docs MCP tool is available, and skills/workflows are what steer agents to verify against current docs. - Framed conclusion: "the bottleneck is context, not capability." - Aside for skill authors: keep essentials directly inside `skill.md` rather than in separate reference files, because agents are described as lazy about reading reference files. #### ⏱️ [19:04](https://www.youtube.com/watch?v=gv7KrPTCW_8&t=1144) Skill 7a — Impeccable (anti AI-slop design) - A design-quality skill/tool combo: recognizes common "AI slop" UI patterns so the agent can avoid or remove them, plus a widget that lets a developer select a page element and generate multiple visual variations directly in the running dev server. - On acceptance, the chosen variation is sent back to the coding agent to permanently apply in code. - Also scaffolds `design.md` (colors, fonts, border-radius — effectively a style guide) and `product.md` (product context) files for the project. #### ⏱️ [20:59](https://www.youtube.com/watch?v=gv7KrPTCW_8&t=1259) Skill 7b — shadcn UI skill - Presenter's view: even though agents are "pretty good" at shadcn UI from training data alone, they still sometimes substitute Radix UI, hardcode colors outside the design system, fail to reuse existing shadcn components, or build a component from scratch instead of picking an available one — so the skill is still worth keeping as a corrective. ## 📚 References - [skills.sh](https://skills.sh) - [Next.js on GitHub](https://github.com/vercel/next.js) - Supabase (agent skills + Postgres best-practices skill; sponsor/partner of this video segment, no direct URL given in transcript) - Impeccable (AI-slop design detection/variation tool, no direct URL given in transcript) ## 🗣️ Paraphrase - Opening: nearly everyone is now adding AI agent "skills" to improve coding-agent output; this video focuses specifically on which ones matter for React/Next.js, using Vercel's skills.sh leaderboard as the map. - A skill is just markdown text the agent loads on demand based on relevance, keeping the base context lean. - Skill 1 (next dev loop) gives the agent a way to actually verify its own UI work — MCP runtime introspection plus an automated browser that screenshots the app, checks responsiveness, and catches visual defects like low-contrast text that no build/type check would flag. - Skill 2 (cached components adoption) helps migrate an app onto Next.js's unified `use cache` caching model, fixing the Suspense-boundary errors that appear once the feature flag is turned on. - Skill 3 (optimizer) goes further, hunting for content that looks dynamic but is actually static-for-everyone so it can be folded into the static shell for faster loads. - Skill 4 (partial pre-fetching) fixes an over-fetching problem where every link on a page (e.g., a big footer) used to get fully pre-fetched; now only the static shell around each link pre-fetches. - A React best-practices/composition skill is only partly necessary now that Next.js bundles docs via `agents.md`, but component "messiness" still justifies keeping it. - Supabase's own agent skills bundle a security checklist inline (RLS, auth, key exposure) because agents often skip external doc-fetch tools and fall back on stale training data; Supabase's data shows MCP-only success around 60%, rising substantially once the skill is added — the presenter's takeaway is "the bottleneck is context, not capability." - Two design-focused skills close the list: Impeccable (detects AI-slop UI patterns, generates on-page design variations, scaffolds design.md/product.md) and the shadcn UI skill (keeps the agent from drifting into Radix UI, hardcoded colors, or reinvented components). ## 📰 Newsletter - Quick dev-tooling roundup: if you're shipping Next.js + Supabase with an AI coding agent, there's now a small, opinionated stack of "skills" worth installing rather than hoping your agent's training data covers it. The standout is **next dev loop** — it gives the agent an actual browser to screenshot and inspect its own UI work, catching things like low-contrast text that no test suite flags. Pair it with the **cached components** and **optimizer** skills if you're migrating onto Next.js's `use cache` model, and don't skip **Supabase's own agent skills** — their internal numbers show MCP tool access alone gets roughly 60% success on things like RLS policies, and the skill (not just the tool) is what pushes that up. If your team cares about design polish, **Impeccable** and the **shadcn UI** skill are worth a look too. Leaderboard for browsing more: [skills.sh](https://skills.sh). ## ✅ Action Items #### DevRel - Developer advocacy: n/a — no direct product ownership by Courtney/WPOCC/FAIR surfaced here; general awareness item only. - Education: consider a short internal write-up on the "skills = on-demand context, not always-on context" model for teams evaluating AI coding agents, since the concept transfers beyond Next.js. - Developer experience: n/a for WordPress-specific tooling. - Developer marketing: n/a. - Community management: n/a. - Internal/external/cross-project: n/a. #### OSPO - Not applicable to this source — no open-source governance, licensing, or SBOM content discussed. #### Community - Not applicable to this source — no maintainer/contributor/sponsor community content discussed. #### WordPress - Not applicable to this source (Next.js/React/Supabase tutorial, not WordPress) — mostly n/a across all 21+ subteams. One tangential note for **Core / Core AI**: the "skills = on-demand context injection" pattern and the "agents default to stale training data unless nudged to fetch current docs" finding could inform how WordPress-adjacent AI tooling (e.g. an eventual Playground or Core AI agent skill) is designed. #### The WPOCC - Not applicable to this source — no funding, fellowship, or governance content discussed. #### FAIR - Not applicable to this source — no federated/decentralized governance content discussed. ## 🧪 Hypotheses - H1: Coding agents given a security-checklist skill inline (vs. relying on an external MCP docs-fetch tool alone) will show measurably fewer RLS/security policy errors, consistent with Supabase's cited ~60%-vs-higher figure. - H2: Agents will skip calling an available "search docs" MCP tool more often when their training data plausibly (even if incorrectly) covers the topic, than when the topic is clearly outside training data. - H3: Visual/browser-based verification (next dev loop style) will catch a class of UI defects (contrast, spacing, responsive breakage) at a materially higher rate than build/type-check-only verification. - H4: Adoption-guide skills for breaking/architectural features (like cached components) reduce the error rate an agent introduces when a feature flag is first enabled, compared to no skill. - H5: Design-QA skills (Impeccable-style) reduce subjective "AI slop" ratings of agent-generated UI compared to baseline agent output. - H6: Skills whose essential content is inlined directly in `skill.md` are followed more consistently by agents than skills that defer to separate reference files. ## 📊 Methodology - The video itself is a live product/tool walkthrough, not a controlled study — claims are demonstrated via screen-recorded examples (e.g., one landing-page build, one Supabase config pass) rather than statistically sampled trials. - The one quantitative claim (MCP-only ~60% success vs. higher with skill+MCP) is attributed to Supabase's internal data; the transcript gives no sample size, task definition, or measurement methodology — it should be treated as a vendor-reported figure from a partnered/sponsored segment, not independently verified research. - To actually test the hypotheses above, a rigorous approach would need: a fixed task set (e.g., N RLS-policy-generation prompts), agent condition randomization (no skill / MCP only / MCP + skill), a blinded rubric for correctness and UI quality, and a held-out sample of tasks not represented in the skill's own text (to separate "skill recall" from genuine capability transfer). ## ❓ Questions - What exactly counts as "success" in Supabase's ~60% MCP-only figure — task completion, absence of a security flaw, or something else? - How much of the next dev loop skill's improvement comes from the browser/screenshot loop specifically vs. simply having more inference/verification passes in general (i.e., is this a visual-grounding effect or a "give the agent more tries" effect)? - Do skills degrade in effectiveness as a codebase's context window fills with other skills — is there a practical ceiling on how many skills one project should stack? - How do first-party skills (Next.js, Supabase) get maintained/versioned as the underlying APIs change, and what happens to agent behavior when a skill goes stale? - Is the skills.sh leaderboard measuring genuine developer adoption, or download/install counts that include automated CI or duplicate installs? ## 🔮 Future Research - A framework-agnostic comparison of "skill" ecosystems (Next.js/Vercel, Supabase, others) for consistency of format and whether a shared open standard would reduce fragmentation across tools. - Empirical study of the "bottleneck is context, not capability" claim across other frameworks (e.g., does the same MCP-only vs. MCP+skill gap show up for, say, a WordPress REST API skill?). - Longitudinal tracking of skill install counts on skills.sh against actual agent success-rate outcomes, to see if popularity correlates with effectiveness. - Investigation into whether design-QA skills like Impeccable measurably change end-user perception (not just developer perception) of AI-generated UI quality. ## 💡 Implications - **Practice:** Teams building on Next.js + Supabase with AI coding agents have a fairly concrete, low-cost starter kit of skills to install; the visual-verification pattern (next dev loop) generalizes as a QA technique beyond this specific stack. - **Policy:** None surfaced directly, though the RLS/security-checklist emphasis is a reminder that AI-assisted database work still needs human review gates, not just an agent skill, for anything security-sensitive. - **Security:** The stated failure modes (agents skipping RLS policies on exposed schemas, hallucinating CLI commands, creating views that bypass RLS) are a concrete list worth checking against manually even when a skill is installed. - **Education:** The "agents are lazy about reading reference files, put critical knowledge where they can't miss it" guidance is broadly useful for anyone authoring internal documentation meant to be consumed by an AI agent, not just skill authors. - **Funding models:** Not directly discussed, though this is a sponsored/partnered video (Supabase), which should be weighed when evaluating the quantitative claim. ## 🧠 Learning Styles Assessment - Reading level estimate: approximately Flesch-Kincaid grade 8-9 (conversational spoken-transcript register, technical vocabulary offset by informal phrasing and self-correction typical of unscripted narration). #### 👀 Visual learners - Present: the video itself is screen-recorded, showing the skills.sh UI, GitHub skill files, and live agent-browser screenshots — strong visual grounding in the original medium, though this text transcript strips that away. - Improve: this notes document would benefit from embedded screenshots of the skills.sh leaderboard, the cached-components error message, and the Impeccable variation-picker UI. #### 🔊 Aural learners - Present: source is a narrated video/audio walkthrough. - Improve: a 2-3 minute audio summary of just the 7 skills and what each solves would serve quick review. #### 🗣️ Verbal learners - Present: analogies used throughout (e.g., the e-commerce static-shell/dynamic-content example, the footer-links over-fetching example). - Improve: a short glossary of the newer Next.js terms (cache components, static shell, partial pre-fetching, MCP) would help readers unfamiliar with 2026-era Next.js. #### 🧩 Kinesthetic learners - Present: the video is itself a live install-and-demo walkthrough for several skills. - Improve: a companion checklist ("install skill X, run this prompt, verify Y") would turn the narration into a repeatable lab exercise. #### 🧠 Logical learners - Present: the skills are presented in a rough dependency order (verify → adopt cached components → optimize → refine pre-fetching), which reads as a causal pipeline. - Improve: an explicit decision tree ("if your app already uses cache components, skip to skill 3") would make the logical structure more scannable. #### 🧑‍🤝‍🧑 Social learners - Present: the video references other creators' skills (Matt Pocock's "grill me") and a companion video series with Supabase. - Improve: a discussion prompt or team retro question ("which of these 7 skills would our stack actually benefit from?") would suit a team review session. #### 🧘‍♀️ Solitary learners - Present: skill-by-skill breakdown supports self-paced, sequential reading. - Improve: a self-check quiz ("can you name what problem each of the 7 skills solves?") would reinforce retention. #### 🌿 Naturalistic learners - Present: no direct sustainability/ecosystem framing in the source. - Improve: could tie the "context bloat vs. on-demand loading" idea to token/compute-efficiency framing as a lightweight sustainability angle. ## 📊 Accessibility Assessment #### Screen reader semantics - Present: this notes document uses heading hierarchy and descriptive link text. - Improve: the original video would benefit from a proper transcript page with heading landmarks per topic (this deep-read partially supplies that). #### Keyboard navigation - Present: not assessable from a video source; the demoed dev-server design tool (Impeccable) is browser-based and its keyboard accessibility isn't discussed in the transcript. - Improve: if evaluating Impeccable/shadcn tooling directly, verify their selection UI supports full keyboard operation. #### Contrast and readability - Present: notably, the video itself demonstrates a real-world contrast bug (muted copy text too light) being caught and fixed — an implicit endorsement of contrast-checking as part of any dev workflow. - Improve: this deep-read note keeps body text unstyled/high-contrast by default (markdown), consistent with WCAG 1.4.3. #### Text resizing and reflow - Present: markdown notes reflow naturally at any zoom level. - Improve: n/a beyond standard Obsidian/markdown rendering. #### Media and captions - Present: the source video has machine-generated captions/transcript (this is how the deep-read was produced) — WCAG 1.2.2 relevant. - Improve: creator could publish a human-corrected transcript/caption file, since auto-captions include the missing-punctuation/run-on issues visible in the raw transcript pulled here. #### Forms and interactions - Present: not applicable — no forms present in this content; the design tool's variation-picker UI is described but not evaluated for accessibility in the source. - Improve: n/a from available source. #### Standards reference - Gaps identified above map to WCAG 2.2 AA 1.2.2 (Captions), 1.4.3 (Contrast Minimum), and 2.1.1 (Keyboard) as the most relevant criteria for the underlying video/tools discussed. ## 🌍 DEIB Assessment #### Cultural breadth - Not applicable to this source in any substantive way — content is a technical tool walkthrough with no international/cultural case studies. One indirect note: multiple named tools/companies (Vercel, Supabase) are US-based; no non-US perspectives are represented. #### Inclusive language - Present: gender-neutral, plain technical language throughout; no exclusionary phrasing identified. - Improve: n/a — no issues found. #### Neurodiversity support - Present: content is chunked by skill/topic, aiding scannability. - Improve: the raw transcript (as auto-captioned) is a dense run-on without punctuation breaks; this deep-read's segmented Notes section addresses that gap. #### Representation - Not applicable to this source — no people, identities, or roles are represented or discussed; content is purely technical/tool-focused. #### Psychological safety - Present: tone is even-keeled and encouraging ("highly recommend you try this out"), no fear-based or urgency-driven framing. - Improve: n/a — no issues found. ## ✅ Logical Validity #### Strong reasoning - Inductive: the presenter generalizes "this is a step change improvement" from personal use over "the past week" on one project (a canvas application) — reasonable as a personal testimonial, weak as generalized evidence, and the video is transparent that it's personal experience rather than a study. - Causal: the explanation of why MCP-only tools underperform (agents skip an available docs-fetch tool because they assume training data is current) is a plausible, mechanistically stated causal claim, though it rests on Supabase's unstated internal methodology. - Analogical: the e-commerce static-shell/dynamic-content analogy and the footer over-fetching example are effective, concrete illustrations of otherwise abstract caching concepts — these strengthen comprehension without overclaiming. #### Fallacies - **Appeal to authority (mild), located in the Supabase segment ("Superbase came up with a solution for this, and that is these agent skills... the data they have on how much this skill can improve your setup"):** the ~60%-vs-higher success-rate claim is presented as settled evidence without disclosing methodology, sample size, or independent verification, and the segment is explicitly a paid/partnered collaboration. Fix: state the figure as "per Supabase's reported internal data (partnered segment, unverified independently)" rather than presenting it as an established fact. - **Hasty generalization (mild), located in the next dev loop endorsement ("I've been using it for the past week or so... it feels like a step change improvement"):** one week on one project is a small evidence base for a strong claim ("biggest improvements... we've seen in quite some time"). Fix: qualify as a personal impression pending broader use, which the presenter does partially do by using hedging language ("I would say," "my personal experience"). #### Tone of voice - Conversational, enthusiastic, hands-on demo tone; frequent first-person hedges ("I think," "my personal experience," "my guess is") that signal opinion rather than settled fact — this self-awareness is a mitigating factor against the fallacies noted above. ## 🛡️ DARVO Analysis - Not applicable to this source — this is a technical product/tool tutorial with no interpersonal conflict, accusation, or defensive rhetoric present. DARVO (Deny, Attack, Reverse victim-offender) requires an accusation-response dynamic that does not occur anywhere in this transcript. ## 🎯 Conclusion - The video argues that AI coding agents benefit substantially from small, composable "skill" files loaded on demand, and walks through seven it considers must-haves for a 2026-era Next.js + Supabase stack: next dev loop (browser/MCP self-verification), cached-components adoption, an optimizer skill, a partial pre-fetching skill, a React composition-patterns skill, Supabase's agent skills (with a partnered, vendor-reported success-rate claim), and design-QA skills (Impeccable, shadcn UI). - Practical next step for a reader: install next dev loop first (highest-confidence, most concretely demonstrated benefit), then layer in the Supabase skill if using that stack, treating the specific success-rate percentages as vendor-reported rather than independently verified. ## 🔄 Refactor Appendix — Don't Use Next.js Without These 7 Skills > Density: 2–5 Literature atoms (H3), 0–3 Permanent candidates (H4). > Defaults: 3 Literature, 1 Permanent. Resonance filter: if you can't > articulate in one line why a claim matters, drop it. > > Konik claim-header rules: present tense, declarative, ≤10 words when > possible, searchable, unique, mirrors annotation focus if present. > > Atomicity: one declarative sentence per atom. "and"/"also" → split. > > Tag pool: #bmf · #addendum · #xref · #articleseed · #storystem · #share · #aphorisms ### 📚 Literature Atoms (H3) #### [H1] Skills load context on demand, not always-on > [!quote] ID:rw_gv7KrPTCW_8_skill_definition > A skill is basically just a few files with some text about a particular topic, so that if you prompt your AI agent... it can load that text into the context. **Context & use**: - ~0:22, opening framing for the whole video. - Core reusable mental model: this is the "why" behind every skill discussed afterward, and it generalizes past Next.js to any AI-agent-skill design decision. **Tags**: #xref **Highlight**: [view highlight](readwise://)  #### [H2] Browser-based agent verification catches contrast bugs code checks miss > [!quote] ID:rw_gv7KrPTCW_8_contrast_catch > The browser check caught one real polish issue. The muted copy was a little too light. **Context & use**: - ~1:22-7:00 segment, next dev loop skill demo. - Concrete evidence that visual/browser verification finds a defect class (contrast, layout) that build/type checks structurally cannot — directly useful for any WordPress-adjacent AI QA tooling discussion. **Tags**: #xref #addendum **Highlight**: [view highlight](readwise://)  #### [H3] MCP tools alone underperform skills for correct behavior > [!quote] ID:rw_gv7KrPTCW_8_context_not_capability > MCP alone is not enough without workflows or guidelines, which is often described in skills... So, the bottleneck is context, not capability. **Context & use**: - ~15:32-17:00, Supabase agent-skills segment. - Vendor-reported (Supabase, partnered segment) but mechanistically plausible claim — agents skip available docs-fetch tools and default to stale training data unless a skill nudges them otherwise. **Tags**: #xref **Highlight**: [view highlight](readwise://)  #### [H4] Skill authors should inline essentials, not defer to reference files > [!quote] ID:rw_gv7KrPTCW_8_inline_essentials > They do recommend keeping the essentials directly inside skill.md. The agents are lazy about reading reference files. Put critical knowledge where they can't miss it. **Context & use**: - ~17:00-18:00, closing note on the Supabase segment, framed as general skill-authoring advice. - Directly actionable for anyone authoring internal docs/skills meant for AI agent consumption — a design constraint, not just a Next.js fact. **Tags**: #xref #aphorisms **Highlight**: [view highlight](readwise://)  ### 🧠 Permanent Candidates (H4) #### [P1] Write agent-facing docs assuming the agent won't fetch the reference file **Claim** (one sentence, Courtney's voice): When writing documentation meant for an AI agent to consume mid-task, I put the critical instruction inline at the point of use rather than trusting the agent to follow a link to a separate reference file. **Evidence pointer**: [[#H4]] **Scope & conditions**: Holds for skill files, CLAUDE.md-style instructions, and any agent-facing runbook; breaks down for genuinely large reference material (full API docs) that can't reasonably be inlined — there, at minimum inline the two or three highest-risk gotchas. **Links** (≥1 with annotation): - [[Credit operating model]] — because applies-in the routing/skill-design work already tracked in the credit-operating-model note  ### ✏️ Fleeting Queue - [F1] Check whether a "next dev loop"-style browser-verification pattern (screenshot + DOM/console read-back after every UI change) is worth adopting for any Claude Code agent workflow touching WordPress block-theme CSS, given it caught a real contrast bug here that no build check would. #xref - [F2] The Supabase MCP-vs-MCP+skill success-rate claim is vendor-reported and unverified — worth a skeptical eye if it resurfaces as a cited statistic elsewhere. #xref ### → Things 3 (max 2 actions) - [ ] Skim skills.sh for a WordPress/Playground-relevant agent skill worth installing — none surfaced directly in this video but the pattern (on-demand markdown context) is worth checking for WP tooling #things  📄 **Full text:** [[Full Document Contents/Articles/Don't Use Next.js Without These 7 Skills.md|Don't Use Next.js Without These 7 Skills by YouTube]] ## Highlights - popular ones globally. A skill is basically just a few files with some text about a particular topic, so that if you prompt your AI agent, for example, about front-end design, it can load that text into the context. So, ([View Highlight](https://read.readwise.io/read/01kzp1qgdhq23k2xbtcjr3zdrn)) - Note: Core definition: a skill is on-demand markdown context, not always-loaded context. - Tags: atom/literature/h1, xref - here actually caught another issue. The browser check caught one real polish issue. The muted copy was a little too light. Yeah, so in practice this also ([View Highlight](https://read.readwise.io/read/01kzp1qkrc7bcbec2bgzv0s8ym)) - Note: Evidence that browser-based agent verification catches defect classes (contrast) that build/type checks structurally cannot. - Tags: atom/literature/h2, xref, addendum - All right, so they learned here MCP alone is not enough without workflows or guidelines, which is often uh described in skills. So, without the skills, ([View Highlight](https://read.readwise.io/read/01kzp1qrprbpm0xm1heb6ean1x)) - Note: Vendor-reported (Supabase, partnered segment) claim: MCP tool access alone underperforms MCP + skill. - Tags: atom/literature/h3, xref - information that's part of the skill. So, the bottleneck is context, not capability. ([View Highlight](https://read.readwise.io/read/01kzp1qxnqrvzbj88g1padps6j)) - Note: The video's core thesis stated directly. - Tags: atom/literature/h3, xref - information about that. They do recommend keeping the essentials directly inside skill.md. The agents are lazy about reading reference files. Put critical knowledge where they can't miss it. So, I think this is a really useful ([View Highlight](https://read.readwise.io/read/01kzp1r0bxzgd36nr638vz3drk)) - Note: Skill-authoring guidance: inline essentials, don't defer to reference files agents won't read. - Tags: aphorisms, xref, atom/literature/h4