docs: surface MDCMS Skills Pack as the AI-agent setup path#104
Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 1 minutes and 56 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughThis PR adds AI agent documentation and integration instructions while enhancing the studio's theme system. Documentation updates introduce a new Skills Pack installable via Changes
Sequence DiagramsequenceDiagram
participant Browser as Browser Environment
participant Studio as Studio Component
participant Hook as useResolvedShellTheme()
participant Shell as StudioShellFrame
participant DOM as DOM (data-mdcms-theme)
rect rgba(100, 150, 255, 0.5)
Note over Browser,DOM: Initial Theme Resolution
Studio->>Hook: Initialize on first render
Hook->>Hook: Check if browser env
Hook->>Browser: readStoredThemePreference()
Browser-->>Hook: theme value or null
Hook->>Browser: matchMedia("(prefers-color-scheme: dark)")
Browser-->>Hook: system preference
Hook->>Hook: resolveAppliedTheme(stored, system)
Hook-->>Studio: shellTheme = "light" | "dark"
end
rect rgba(150, 200, 100, 0.5)
Note over Browser,DOM: Render with Theme
Studio->>Shell: pass shellTheme prop
Shell->>DOM: set data-mdcms-theme attribute
end
rect rgba(255, 150, 100, 0.5)
Note over Browser,DOM: OS Preference Change
Browser->>Hook: prefers-color-scheme change event
Hook->>Hook: resolveAppliedTheme(stored, new system)
Hook->>Studio: setState(newTheme)
Studio->>Shell: re-render with updated shellTheme
Shell->>DOM: update data-mdcms-theme attribute
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/studio/src/lib/studio-component.tsx (1)
643-691: Well-structured hook with SSR safety and legacy browser support.Good implementation details:
- SSR guard prevents hydration mismatch
- Synchronous initial state avoids theme flash
- Legacy
addListener/removeListenerfallback for Safari <14 compatibilityOne consideration: the hook doesn't listen for
storageevents, so theme changes from another tab won't propagate. This is likely acceptable since the shell is only visible during loading/error states (brief window), but worth noting if cross-tab sync becomes desirable later.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/studio/src/lib/studio-component.tsx` around lines 643 - 691, The hook useResolvedShellTheme currently updates on system color-scheme changes but doesn't respond to cross-tab theme updates; add a storage event listener that calls the existing recompute function so changes to the stored theme in other tabs propagate. Inside the useEffect in useResolvedShellTheme (where mediaQuery and storage are defined), attach window.addEventListener('storage', recompute) after recompute() and remove it in the cleanup; ensure you guard for typeof window !== "undefined" as already done and reuse the same recompute closure so mediaQuery.matches and readStoredThemePreference(storage) are used consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/studio/src/lib/studio-component.tsx`:
- Around line 643-691: The hook useResolvedShellTheme currently updates on
system color-scheme changes but doesn't respond to cross-tab theme updates; add
a storage event listener that calls the existing recompute function so changes
to the stored theme in other tabs propagate. Inside the useEffect in
useResolvedShellTheme (where mediaQuery and storage are defined), attach
window.addEventListener('storage', recompute) after recompute() and remove it in
the cleanup; ensure you guard for typeof window !== "undefined" as already done
and reuse the same recompute closure so mediaQuery.matches and
readStoredThemePreference(storage) are used consistently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 1ad3b50c-05a2-470f-92c8-1149cce17ced
📒 Files selected for processing (11)
README.mdapps/docs/agent-instructions.mdxapps/docs/agent-skills.mdxapps/docs/docs.jsonapps/docs/guide/quickstart.mdxpackages/studio/src/lib/remote-studio-app.tsxpackages/studio/src/lib/runtime-ui/adapters/next-themes.test.tspackages/studio/src/lib/runtime-ui/components/layout/page-header.test.tsxpackages/studio/src/lib/runtime-ui/components/layout/page-header.tsxpackages/studio/src/lib/studio-component.tsxpackages/studio/src/lib/studio.test.ts
Add a dedicated agent-skills page to the docs site, link to it from the quickstart and agent-instructions pages, and call it out in the root README so agent users discover `npx skills add Blazity/mdcms` before reaching for copy-paste prompts.
iipanda
force-pushed
the
docs-skills-setup-promotion
branch
from
45c76e7 to
26be37a
Compare
1 participant
Summary
apps/docs/agent-skills.mdxpage covering install vianpx skills add Blazity/mdcms, the 9-skill table, and when to use skills vs. copy-paste prompts.docs.json(Introduction group, beforeagent-instructions).<Tip>onagent-instructions.mdxandguide/quickstart.mdxpointing AI-agent users to the installable pack.## Quick Startin the rootREADME.mdlinking toskills/README.md.No behavior changes; docs-only. The skills themselves and
skills/README.mdalready exist — this just makes the setup path discoverable from the main README and docs site.Test plan
bun run format:checkpasses (verified locally)./agent-skillsrenders, appears in the Introduction sidebar betweenguide/conceptsandagent-instructions, and that the<Tip>callouts link to it correctly.skills/README.mdlink resolves.Summary by CodeRabbit
New Features
Documentation