菜单
Use when working on Final Cut customer-facing Nuxt/Vue UI, visual polish, component design, accessibility, layout, icons, tokens, or brand expression under frontend/.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use this skill to generate well-branded interfaces and assets for Final Cut, the cinematic theatre brand ("The Cinematic Void Framework"), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
Use when working on Final Cut Filament admin panel design, resource UI, widgets, custom admin pages, badges, notifications, table styling, or admin theme CSS.
Use this skill when designing, theming, or extending the Final Cut Filament admin panel — Resources, Resource viewSchema/infolists, custom Pages, Widgets, Notifications, badges, and Blade view overrides under `backend/app/Filament/` and `backend/resources/views/filament/`. Triggers on requests like "style this Filament resource", "add a dashboard widget", "the admin panel still looks like default Filament", "the booking status badge is the wrong color", or any work touching `AdminPanelProvider`, `viteTheme`, or the admin theme CSS. NOT for customer-facing work under `frontend/` — use the sibling `finalcut-design` skill for that. NOT the bundled `frontend-design` skill either — that one builds generic interfaces and doesn't know the Final Cut brand.
| name | finalcut-design |
| description | Use when working on Final Cut customer-facing Nuxt/Vue UI, visual polish, component design, accessibility, layout, icons, tokens, or brand expression under frontend/. |
This skill applies to customer-facing work under frontend/.
frontend/app/assets/css/tokens.css, typography.css, utilities.css, and layouts.css.frontend/app/components/ui/*.vue.frontend/app/components/layout/*.vue.frontend/app/components/{movie,booking,calendar,account,home,content}/*.vue.frontend/app/components/ui/icons.ts with CvIcon.vue.docs/design-system/DESIGN_SYSTEM.md, DESIGN_SYSTEM_STRUCTURE.md, and DESIGN_SYSTEM_IMPLEMENTATION.md.primary / #FFB4A8 is text-on-dark only.primary_container / #550000 is the fill/accent token for buttons, active states, and hero accents.rem units for spacing and sizing except borders, shadows, and sub-pixel technical cases.make test-frontend for frontend changes.make e2e when changing user-facing flows.