菜单
Keep the two course surfaces visually identical. Use whenever you change the design/CSS (or shared JSX layout) of the custom-course view (app/course/[slug]) OR the main 12-week course (app/shadow-work) — a change to one MUST be mirrored to the other, or the two drift apart.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Wikipedia-style structure, sizing, and spacing for guide article pages. Use when editing the layout, typography, headings, dividers, or spacing of guide articles (app/home/guides/[slug]), the GuideBody renderer, or when normalizing guide body content stored in the guides table. Also covers the walkthrough trigger placement and overlay behavior on guide pages.
Blue character spec — the autonomous daemon agent at the center of Mental Wealth Academy. Use when writing her dialogue, quest reviews, in-world lore, narrative content, or any text spoken AS her. Also use when designing product moments where she appears (review screens, reward distribution, survey prompts).
Mental Wealth Academy editorial voice + copy review. Use when writing or reviewing landing copy, app strings, marketing prose, blog posts, social posts, error messages, empty states, or any user-visible text. Enforces the EDITORIAL.md brand book (v4.0).
Mental Wealth Academy production backend operations. Use when changing contracts, Supabase schema, Next.js API routes, CRE workflows, the Eliza-backed Blue agent, or the Kalshi market integration. Covers the production stack we are transitioning into.
Use this skill when writing visual novel scenes, image prompts, or story beats for MWA — especially when adapting curriculum content (like weekly lessons) into narrative form with Azura/Blue as the protagonist. Also trigger for narrative analysis (theme/message/premise) of any film, book, show, or story. If the user mentions scenes, dialogue, visual novel, storyboard, image prompts, or adapting content into story format, use this skill immediately.
Guardrails and invariants for the guides knowledge DAG. Use before ANY change to guides, guide_edges, prerequisites, walkthroughs, levels, the knowledge map, guide rewards, verification panels, or guide content in the database — schema, queries, API routes, scripts, or seed data. Protects acyclicity, computed levels, the published-only contract, and the diamond reward money path.
基于 SOC 职业分类
| name | course-design-parity |
| description | Keep the two course surfaces visually identical. Use whenever you change the design/CSS (or shared JSX layout) of the custom-course view (app/course/[slug]) OR the main 12-week course (app/shadow-work) — a change to one MUST be mirrored to the other, or the two drift apart. |
| version | 1.0.0 |
| user-invocable | true |
MWA renders course content through two separate pages that intentionally share one design system. They are not wired together in code, so a design change to one silently leaves the other behind. This skill is the checklist that keeps them in lockstep.
| Custom courses (VIP / Blue-built) | Main course ("Creative Healing") | |
|---|---|---|
| Page | app/course/[slug]/page.tsx | app/shadow-work/page.tsx |
| Base layout CSS | app/course/page.module.css (courseStyles) | app/shadow-work/page.module.css (self-contained) |
| View-specific CSS | app/course/[slug]/page.module.css (styles) | same file (merged into page.module.css) |
Current source of truth: the custom-course files are AHEAD. When in doubt, app/course/page.module.css wins and app/shadow-work/page.module.css gets updated to match.
Any change to a shared class or shared layout structure on one surface must be applied to the other in the same commit.
Shared classes (same names in both files, must stay identical):
pageLayout · bgViz · content · contentDesktop · leftCol · rightPanel
controlPanel · popupCard · panelBanner · panelBody · panelAvatarWrap · panelAvatar
panelHeader · panelTitle · panelTitleDivider · panelDescription · panelDivider
weekNav · weekNavArrow · weekNavDots · weekDot(+Active/Sealed/Loading)
weekContent(+SwipeLeft/Right) · readingCard(+Active) · readingAccent · readingThumb(+Img)
readingInfo · readingCategory · readingTitle · readingArrow · missionsHeadingRow/Divider/Heading
inlineReader · inlineReaderInner · inlineReaderBack/Header/Category/Title/Body · backBtn
skeletonBlock + all *Skeleton* classes
Plus every :global([data-theme="dark"]) override for the classes above.
.panelBanner background-image — shadow-work hard-codes a themed image; the custom course sets its cover via an inline style (coverImageUrl). Different by design.WEEKLY_READINGS, hard-coded "Creative Healing", etc.).<WeekTasksView>; the custom course renders a missionGrid of ComponentRenderer tiles. The missionGrid/missionTile/detailCard/seal/confirm* classes only actually render on the custom course. Keep them consistent if you touch them, but they are not what makes the two pages look the same day-to-day.diff the shared base to find what drifted:
diff <(sed -n '1,849p' app/course/page.module.css) app/shadow-work/page.module.css
< (present only in the custom base) that belong to a shared class are the drift — port them into app/shadow-work/page.module.css. Ignore the large shadow-work-only block (mission/detail/seal/confirm) and the .panelBanner image line.controlPanel/weekNav/readingCard/rightPanel markup), mirror that too — both pages hand-roll the same tree.Both pages use a two-column desktop grid (contentDesktop = leftCol + rightPanel). The right panel is position: sticky and owns its own scroll area so the reading/task detail can scroll without moving the left mission list:
.rightPanel {
position: sticky;
top: calc(72px + 24px);
max-height: calc(100vh - 72px - 48px);
overflow-y: auto;
overscroll-behavior: contain; /* don't chain scroll to the page */
scrollbar-width: thin;
}
/* Below the desktop grid the panel is normal flow — no inner scroll box. */
@media (max-width: 1023px) {
.rightPanel { position: static; max-height: none; overflow: visible; }
}
Keep this block identical in both page.module.css files.