finalcut-design

Étoiles0

Forks0

Mis à jour18 mai 2026 à 20:40

Use when working on Final Cut customer-facing Nuxt/Vue UI, visual polish, component design, accessibility, layout, icons, tokens, or brand expression under frontend/.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

ABilenduke

ABilenduke/final-cut

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

SKILL.md

readonly

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/.

Final Cut Design

This skill applies to customer-facing work under frontend/.

Canonical Sources

Tokens and utilities: frontend/app/assets/css/tokens.css, typography.css, utilities.css, and layouts.css.
UI primitives: frontend/app/components/ui/*.vue.
Layout shell: frontend/app/components/layout/*.vue.
Feature components: frontend/app/components/{movie,booking,calendar,account,home,content}/*.vue.
Icons: frontend/app/components/ui/icons.ts with CvIcon.vue.
Design docs: docs/design-system/DESIGN_SYSTEM.md, DESIGN_SYSTEM_STRUCTURE.md, and DESIGN_SYSTEM_IMPLEMENTATION.md.

Rules

Compose existing Vue primitives before creating new ones.
Use project tokens; do not ship parallel CSS systems.
primary / #FFB4A8 is text-on-dark only.
primary_container / #550000 is the fill/accent token for buttons, active states, and hero accents.
Use rem units for spacing and sizing except borders, shadows, and sub-pixel technical cases.
Keep the brand cinematic, dark, sparse, and intentional.
Avoid generic gradient SaaS styling, nested cards, decorative icon grids, fake metrics, and noisy chrome.
Customer-facing UI must meet WCAG 2.1 AA.

Verification

Run make test-frontend for frontend changes.
Run make e2e when changing user-facing flows.
For visual work, inspect responsive behavior and confirm text does not overlap or overflow.

Plus depuis ce dépôt

même dépôt

finalcut-design

ABilenduke/final-cut

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.

2026-06-200

finalcut-admin-design

ABilenduke/final-cut

Use when working on Final Cut Filament admin panel design, resource UI, widgets, custom admin pages, badges, notifications, table styling, or admin theme CSS.

2026-05-180

finalcut-admin-design

ABilenduke/final-cut

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.

2026-04-270

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/.

Final Cut Design

This skill applies to customer-facing work under frontend/.

Canonical Sources

Tokens and utilities: frontend/app/assets/css/tokens.css, typography.css, utilities.css, and layouts.css.
UI primitives: frontend/app/components/ui/*.vue.
Layout shell: frontend/app/components/layout/*.vue.
Feature components: frontend/app/components/{movie,booking,calendar,account,home,content}/*.vue.
Icons: frontend/app/components/ui/icons.ts with CvIcon.vue.
Design docs: docs/design-system/DESIGN_SYSTEM.md, DESIGN_SYSTEM_STRUCTURE.md, and DESIGN_SYSTEM_IMPLEMENTATION.md.

Rules

Compose existing Vue primitives before creating new ones.
Use project tokens; do not ship parallel CSS systems.
primary / #FFB4A8 is text-on-dark only.
primary_container / #550000 is the fill/accent token for buttons, active states, and hero accents.
Use rem units for spacing and sizing except borders, shadows, and sub-pixel technical cases.
Keep the brand cinematic, dark, sparse, and intentional.
Avoid generic gradient SaaS styling, nested cards, decorative icon grids, fake metrics, and noisy chrome.
Customer-facing UI must meet WCAG 2.1 AA.

Verification

Run make test-frontend for frontend changes.
Run make e2e when changing user-facing flows.
For visual work, inspect responsive behavior and confirm text does not overlap or overflow.