メニュー
Theme adaptation checklist for light/dark mode and UI component changes. Use when modifying colors, surfaces, dialogs, or theme infrastructure. Not for simple text changes.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Manage SublinkPro proxy subscriptions via its REST API — add/query nodes, build and share subscriptions, manage airports, templates (incl. AI template editing), tags, and view dashboard stats. Use when the user wants to operate their SublinkPro instance.
MANDATORY post-development workflow orchestrating validation, synchronization, and testing phases. Automatically invoked by AI agents after code changes. BLOCKING - work is incomplete without this.
MANDATORY pre-commit validation executor. Runs all required checks before any commit. NOT optional - must be invoked before every git add/commit/PR.
Cross-layer synchronization guide for backend, frontend, and documentation changes. Invoked by post-dev-workflow when changes affect multiple layers. Not for direct user invocation.
Documentation synchronization checklist for API, configuration, and feature changes. Invoked by post-dev-workflow when code affects documentation. Not for direct user invocation.
Performance review checklist for optimization, scalability, and resource usage. Use when changes affect queries, APIs, rendering, caching, or algorithms. Not for simple config changes.
| name | theme-check |
| description | Theme adaptation checklist for light/dark mode and UI component changes. Use when modifying colors, surfaces, dialogs, or theme infrastructure. Not for simple text changes. |
| version | 1.0.0 |
| author | SublinkPro Team |
| user-invocable | true |
Comprehensive checklist for frontend theme adaptation changes.
Use this skill when:
webs/src/themes/*, webs/src/utils/colorUtils.js)sx helpers or common dialog/card/panel stylesBefore running this checklist:
docs/frontend-theme-guidelines.md for complete theme rulesuseMediaQuery)Dialog component)Drawer component)Popover component)Menu component)Tooltip component)text.primary)text.secondary)code, pre)background.paperbackground.default or tinted surfacesdivider or alpha()/withAlpha()#fff, white, #000, black for large surfacesReactMarkdown contentisDark ? ... : ... magic numbers scattered in JSXdialogSurface, mutedPanelSurface, etc.)Document which existing patterns were followed:
NodePreviewDialog.jsx, NodePreviewCard.jsx, NodePreviewDetailsPanel.jsx)ChainProxyDialog.jsx, ChainPreviewDialog.jsx, MobileChainBuilder.jsx, ConditionBuilder.jsx)layout/MainLayout/Header/NotificationSection/index.jsx, views/dashboard/Default/index.jsx)views/airports/index.jsx, AirportMobileList.jsx, AirportFormDialog.jsx, AirportBatchEditDialog.jsx, components/CronExpressionGenerator.jsx)Before marking complete, the change summary must include:
If you do NOT have time to check all component variants (desktop, mobile, dialog, drawer, overlay, details panel), mark the work as partial coverage rather than claiming full theme adaptation.
✅ Can exit when:
❌ Cannot exit when: