calm-design-system

Enforces Odova's Calm design system layering, tokens, and anti-patterns in Flutter UI code.

Updated Sep 2, 2026
One-click install
npx skills add https://github.com/zakariaf/Odova --skill calm-design-system-zakariaf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: calm-design-system
Source: https://github.com/zakariaf/Odova/tree/main/.claude/skills/calm-design-system
Command: npx skills add https://github.com/zakariaf/Odova --skill calm-design-system-zakariaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Flutter feature code drifts from the design system: raw Material widgets, hardcoded hex values, monospace digits, siren-red overdue states, and sub-52px touch targets creep in and break the Calm visual language. This Skill defines the Calm design system rules, the three-layer architecture (lib/theme/calm/ → lib/ui/calm/ → feature code), and routes every UI task to the correct sibling skill. ## Core Features & Use Cases - Layering enforcement: Ships check_calm_layering.sh to fail builds where feature code uses raw Material widgets or imports Calm palette primitives directly. - Anti-brief gate: Ships check_calm_rejects.sh to reject monospace fonts, text under 13px, siren red colors, and touch targets under 52px across the whole tree. - Routing table: Directs each UI task (tokens, typography/RTL, components, due-state status, layout/motion, visual parity) to the correct specialized Calm skill. - Use Case: When building a new Home screen for the Odova car-maintenance app, follow the build-order reference to pick one primary surface, cap secondary cards, enumerate all states, and pass both lint scripts before opening a PR. ## Quick Start Ask the assistant to review a Flutter screen against the Calm design system and run the layering and rejects checks before submitting the PR.

Frequently Asked Questions about calm-design-system

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

FAQPage Schema
How do I build a new screen in the Calm design system?▼

Follow the build-order reference: write the one sentence the screen answers, oversize the primary surface, add at most two secondary cards plus a cap-and-link row, enumerate every state, then compose only Calm widgets from lib/ui/calm/. Finish with RTL, motion, and lint gate passes.

How do I check Flutter code for design system violations?▼

Run scripts/check_calm_layering.sh and scripts/check_calm_rejects.sh over the lib/ directory. The first fails raw Material widgets and palette imports outside lib/ui/calm/; the second fails monospace fonts, text under 13px, siren red colors, and touch targets under 52px.

Can feature code use Material widgets like Card or ElevatedButton?▼

No. Feature code must use the Calm* equivalents from lib/ui/calm/, which is the only layer allowed to wrap Material. Raw Material widgets in feature code fail the layering check because they bypass token-driven styling.

Why does the Calm system reject Colors.red for overdue states?▼

Overdue uses terracotta #B4573E (dark #E39172), at most once per screen, never Colors.red. Siren red reads as a system error rather than an actionable reminder, and alarm color trains users to dismiss the app's notifications.

Does the Calm design system support RTL languages?▼

Yes. Three of six shipping locales are RTL, so only directional properties like EdgeInsetsDirectional and AlignmentDirectional are allowed; left/right usage is a CI failure. Only directional icons flip, and Vazirmatn leads for Persian and Arabic text.

When should I add a new design token to the system?▼

Add a token only as a two-file commit: design/calm/odova.css plus the matching CalmColors, CalmSpace, CalmShapes, or CalmMotion field. A value added in Dart only is unapproved because the CSS specimen is what design review reads.