Run any Skill in Manus with one click

finalcut-admin-design

Stars0

Forks0

UpdatedMay 18, 2026 at 20:40

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

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-admin-design
description	Use when working on Final Cut Filament admin panel design, resource UI, widgets, custom admin pages, badges, notifications, table styling, or admin theme CSS.

Final Cut Admin Design

This skill applies to Filament admin work under backend/app/Filament/, backend/resources/views/filament/, and backend/resources/css/filament/.

Canonical Sources

Admin theme CSS: backend/resources/css/filament/admin/theme.css.
Token semantics: docs/design-system/DESIGN_SYSTEM.md.
Admin architecture and deployment notes: CLAUDE.md.
Existing Claude reference skill: .claude/skills/finalcut-admin-design/.

Rules

Use Filament 5 schema-first APIs (Filament\Schemas\Schema, Filament\Schemas\Components\Section).
Filament is a UI layer. Route invariant-bearing state changes through domain services/actions.
Do not directly persist lifecycle or permission-sensitive fields from resources when a domain action should own the transition.
Map Filament semantic colors to Final Cut tokens. Do not let stock success/warning/danger/info palettes drift from the brand.
primary / #FFB4A8 is text-on-dark only; primary_container / #550000 is the fill/accent token.
Use rem units for custom CSS except borders, shadows, and sub-pixel technical cases.
Keep admin copy plain, operator-focused, sentence case, and free of emoji.
Use line-style Heroicons where Filament icon choice is required.

Verification

Run make admin-test for admin behavior.
Run make admin-filament-assets after editing admin theme CSS.
Inspect admin UI for contrast, focus state, table density, and token-correct status colors.

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-design

ABilenduke/final-cut

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

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-admin-design
description	Use when working on Final Cut Filament admin panel design, resource UI, widgets, custom admin pages, badges, notifications, table styling, or admin theme CSS.

Final Cut Admin Design

This skill applies to Filament admin work under backend/app/Filament/, backend/resources/views/filament/, and backend/resources/css/filament/.

Canonical Sources

Admin theme CSS: backend/resources/css/filament/admin/theme.css.
Token semantics: docs/design-system/DESIGN_SYSTEM.md.
Admin architecture and deployment notes: CLAUDE.md.
Existing Claude reference skill: .claude/skills/finalcut-admin-design/.

Rules

Use Filament 5 schema-first APIs (Filament\Schemas\Schema, Filament\Schemas\Components\Section).
Filament is a UI layer. Route invariant-bearing state changes through domain services/actions.
Do not directly persist lifecycle or permission-sensitive fields from resources when a domain action should own the transition.
Map Filament semantic colors to Final Cut tokens. Do not let stock success/warning/danger/info palettes drift from the brand.
primary / #FFB4A8 is text-on-dark only; primary_container / #550000 is the fill/accent token.
Use rem units for custom CSS except borders, shadows, and sub-pixel technical cases.
Keep admin copy plain, operator-focused, sentence case, and free of emoji.
Use line-style Heroicons where Filament icon choice is required.

Verification

Run make admin-test for admin behavior.
Run make admin-filament-assets after editing admin theme CSS.
Inspect admin UI for contrast, focus state, table density, and token-correct status colors.