Front-End Engineer: React Library & Design System

Manulife Financial; Waterloo; Hybrid; CAD 86,000 - 136,000; Full time

Benefits offered by this job

Health benefits

Dental benefits

Mental health benefits

Vision benefits

Short-term disability

Long-term disability

Life insurance

AD&D insurance

Adoption/surrogacy benefits

Wellness benefits

Employee/family assistance plans

Retirement plans with pension

Global share ownership plan

Paid time off

Job summary

Manulife Financial Corporation in Waterloo, Ontario, is hiring a Front-End Engineer to design, build, and maintain accessible React components within a shared design system. You will drive API design, AI tooling adoption, and cross-platform expansion across web and mobile, collaborating with designers and product teams.

The role emphasizes accessibility, reusable libraries, and modern frontend practices in a hybrid work setting with strong community engagement and a focus on enterprise-scale

Qualifications

• 5 or more years building production front-end applications or shared libraries.
• Deep hands-on expertise in React and TypeScript, plus modern CSS.
• Practical accessibility experience: semantic HTML, ARIA, focus and keyboard management, and testing with assistive technology.
• Experience building reusable libraries, design systems, or shared platforms consumed by other engineers.
• Testing discipline across unit, integration, visual regression, and automated accessibility checks.
• Familiarity with monorepos, CI/CD, release automation, and semantic versioning.
• Strong communication and ability to articulate technical vision to engineers and leadership.
• Familiarity with agile and DevOps principles, TDD, and CI.

Responsibilities

• Build the libraries: Design, build, and maintain accessible, well-tested React components, design tokens, and tooling that align to and support the enterprise design system.
• Own accessibility: Strive to achieve WCAG 2.2 AA level. Implement ARIA authoring practices, keyboard interaction, and assistive technology support so that every consuming team inherits compliance by default.
• Design APIs that last: Shape component APIs used by hundreds of applications. Think in terms of backwards compatibility, semantic versioning, deprecation paths, and migration guidance — not just the next release.
• Enable adoption: Extend our Next.js documentation platform, live code sandbox, examples, and Figma Code Connect integration so teams can learn, adopt, and stay current with minimal friction.
• Advance AI-native tooling: Contribute to our MCP server, Copilot agent skills, LLM-friendly documentation endpoints, and generative UI guardrails so AI agents produce accessible, on-brand interfaces that stay inside our design system rather than around it.
• Think beyond React: Help evolve a shared headless component core so component logic is built once and shipped across web, mobile, and future platforms.
• Support the community: Triage issues, review external contributions, and unblock delivery teams. Our support channel is one of the largest active engineering communities in the company.
• Collaborate with designers, architects, and product teams: Partner across disciplines in an agile delivery model to identify pain points and accelerate delivery of new business value.

Skills

React

TypeScript

CSS

Accessibility

Design systems

Reusable libraries

Testing

Monorepos

CI/CD

Agile/DevOps

Communication

Job description

Manulife Financial Corporation in Waterloo, Ontario, is hiring a Front-End Engineer to design, build, and maintain accessible React components within a shared design system. You will drive API design, AI tooling adoption, and cross-platform expansion across web and mobile, collaborating with designers and product teams.

The role emphasizes accessibility, reusable libraries, and modern frontend practices in a hybrid work setting with strong community engagement and a focus on enterprise-scale