القائمة
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.