finalcut-admin-design

Estrellas0

Forks0

Actualizado18 de mayo de 2026 a las 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.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

ABilenduke

ABilenduke/final-cut

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores de softwareOcupaciones informáticas y matemáticas·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.

Más de este repositorio

mismo repositorio

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.