daybreak-components

Defines Flutter widget recipes for NearlyStop screens using Daybreak design tokens.

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/zakariaf/NearlyStop --skill daybreak-components-zakariaf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: daybreak-components
Source: https://github.com/zakariaf/NearlyStop/tree/main/.claude/skills/daybreak-components
Command: npx skills add https://github.com/zakariaf/NearlyStop --skill daybreak-components-zakariaf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building UI for an audience aged 60-80 who open the app daily for years means every screen must survive 200% text scale, grayscale, RTL, and dark mode. This Skill removes guesswork by specifying a closed set of accessible Flutter component recipes so screens never contain raw colors, ad-hoc layout methods, or inaccessible state signals. ## Core Features & Use Cases - Component recipes: Specifies the dose hero card with sunrise gradient and arc CustomPainter, four day-state rows signaled by shape rather than color, block headers replacing calendar grids, and a button ladder with an 88px Taken action. - Token-only enforcement: Bans hex values, raw radii, durations, and fontSize in feature widgets, requiring every value to read from Daybreak token slots. - Accessibility contracts: Mandates const widget classes, Semantics roles, 44px minimum targets, degradation orders for dense components, and selection states combining glyph, weight, and shape. - Use Case: When building the Schedule screen, use this Skill to render days grouped under pinned BlockHeader slivers with shape-coded state markers instead of a forbidden 7-column month grid. ## Quick Start Use the daybreak-components skill to build the Today screen dose hero card following the Daybreak token and accessibility rules.

Frequently Asked Questions about daybreak-components

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

FAQPage Schema
How do I build an accessible Flutter dose card for elderly users?

Build it as a named const widget class reading only design token slots, with the numeral at display size, weight 800, and tabular figures that never shrink. Add a Semantics container label, verify text contrast against both gradient endpoints, and define a degradation order that drops decoration before content at high text scale.

How should Flutter list items show state without relying on color?

Pair each state with a distinct shape, glyph, and localized text label alongside its color. For example use a filled dot for taken, hollow ring for missed, ring with core for today, and dashed circle for upcoming, so grayscale, invertColors, and screen readers still convey the state.

Why avoid calendar grid widgets for schedule screens in Flutter?

A 7-column month grid cannot fit a state shape, label, and 200% text in one cell, and it teaches the wrong mental model for non-weekly schedules. Group days under pinned SliverPersistentHeader block headers in a SliverList instead of using GridView or table_calendar.

Can a CustomPainter read Theme.of(context) inside paint()?

No. Snapshot the colors and values into painter fields at the widget layer and implement shouldRepaint against those fields. This keeps paint() allocation-free and testable without a MaterialApp or BuildContext.

What is the minimum tap target size for Flutter accessibility?

Every tap target should be at least 44x44 logical pixels and single-tap, per WCAG 2.2 target size guidance. The primary daily action in this design system is 88 logical pixels tall and full-bleed within its card margins.