Run any Skill in Manus with one click

finalcut-design

Stars0

Forks0

UpdatedMay 18, 2026 at 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

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

ABilenduke

ABilenduke/final-cut

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·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.

More from this repository

same repository

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.