메뉴
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.