design

Enforce AXA Canopée editorial design system for cockpit UI screens.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/edupazogle/agentic_cockpit --skill design-edupazogle
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/edupazogle/agentic_cockpit/tree/main/.agents/skills/design
Command: npx skills add https://github.com/edupazogle/agentic_cockpit --skill design-edupazogle

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents generic, inconsistent UI styling by enforcing a single AXA Canopée editorial design language and layout/motion contracts for cockpit screens.

Core Features & Use Cases

  • Opinionated visual language for cockpit UI: serif/mono typographic hierarchy, AXA color/token constraints, and component naming conventions that keep screens recognizable across iterations.
  • Operational layout zone contract: deterministic, non-overlapping geometry for runhead/pan/activity/inspector regions to avoid collisions and preserve the cockpit chrome.
  • State-driven motion library: Railway-inspired animations constrained to short durations and reduced-motion compliance, used only when state changes (live/hitl/hazard/done).
  • Screen recipe guidance: chooses established layouts (Editorial long-form, Operational canvas, Three-column compose, Card grid) instead of inventing new page structures.

Quick Start

Use the design skill to produce a production-ready, AXA-aligned UI/CSS spec for a new cockpit screen with the correct layout recipe and state-driven animations.

Frequently Asked Questions about design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply a consistent design system to cockpit UI screens?

Apply a consistent design system to cockpit UI screens by enforcing a single AXA Canopée editorial language with named-token palette constraints, serif/mono typographic hierarchy, and deterministic layout zone contracts to prevent generic styling and collisions.

What is the best way to structure layout zones for operational cockpit interfaces?

Structure operational cockpit layout zones using deterministic, non-overlapping geometry for runhead, pan, activity, and inspector regions to avoid collisions and preserve the operational cockpit chrome across iterative screen builds.

How do I add state-driven motion to UI components with reduced-motion support?

Add state-driven motion to UI components using a railway-inspired animation library constrained to short durations and reduced-motion compliance, triggering animations only during state changes like live, hitl, hazard, and done.

Can I use established screen recipes instead of inventing new page structures for UI mockups?

Use established screen recipes like Editorial long-form, Operational canvas, Three-column compose, and Card grid to generate UI mockups and production-ready screens instead of inventing new page structures.

Does the AXA editorial design system support backend-only work?

The AXA editorial design system does not support backend-only work; it focuses exclusively on building new UI screens, restyling existing pages, producing mockups, and generating UI assets for cockpit interfaces.

Why use named CSS tokens and editorial typography for production UI?

Use named CSS tokens and editorial typography for production UI to satisfy strict AXA color constraints and maintain a recognizable serif/mono typographic hierarchy that keeps cockpit screens consistent across iterations.