- Project scope
- 10 tickets / 3 phases
- Total focused work estimate
- 22h 45m + setup
- Suggested stack
- React · TypeScript · Base UI · CSS Modules
Recommended next stepStart with CMODAL-101
Open the first ticket for its prerequisites, acceptance criteria, verification plan, and an editable task draft.
What the engineer takes away
Practice focus containment, dismissal and asynchronous feedback.
What the team gains
Inspect whether shared UI primitives protect users across many product flows.
Before you start
- Create synthetic settings forms and destructive-action stubs.
- Provide delayed success, rejection and removed-trigger cases.
Delivery agreement
Change one owned primitive at a time and record affected portal consumers.
AI tools are welcome during implementation. Record assumptions, review the result, and verify its behavior.
Delivery phases
- PHASE 1
Name dialogs and define dismissal.
- PHASE 2
Preserve focus and pending user work.
- PHASE 3
Support zoom and verify reusable behavior.
Specify overlay contracts
Name dialogs and define dismissal.
CMODAL-101Entry ticket; project setup still requiredEstimated field mix
- Accessibility80%
- Frontend20%
CMODAL-102Entry ticket; project setup still requiredEstimated field mix
- Accessibility70%
- Frontend30%
CMODAL-103Depends on CMODAL-101Estimated field mix
- Frontend60%
- Accessibility40%
Handle nested interactions
Preserve focus and pending user work.
CMODAL-104Depends on CMODAL-103Estimated field mix
- Accessibility70%
- Frontend30%
CMODAL-105Depends on CMODAL-103, CMODAL-104Estimated field mix
- Accessibility70%
- Frontend30%
CMODAL-106Depends on CMODAL-104Estimated field mix
- Frontend80%
- Accessibility20%
CMODAL-107Depends on CMODAL-105, CMODAL-106
Make feedback durable
Support zoom and verify reusable behavior.
CMODAL-108Depends on CMODAL-105Estimated field mix
- Accessibility60%
- Frontend40%
CMODAL-109Depends on CMODAL-102, CMODAL-107Estimated field mix
- Accessibility60%
- Frontend40%
CMODAL-110Depends on CMODAL-108, CMODAL-109Estimated field mix
- Accessibility60%
- Quality engineering40%
Use this project
CSV keeps grouping and dependency keys as descriptive fields. Import mapping depends on your tracker configuration.