Front-End Engineer

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

Job summary

Manulife Financial is seeking a Front-End Engineer to help build accessible React components and tooling that power thousands of engineers across Canada and the US. You will design APIs, contribute to AI-native tooling, and extend our Next.js-based documentation and code examples.

This is a product engineering role where the library is the product and developers are the customers. The position sits in a hybrid environment with collaboration across product teams.

Qualifications

• 5+ 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, testing with assistive tech.
• 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.
• Movement to change the engineering culture of an enterprise.
• Strong communication to articulate technical vision and trade-offs.

Responsibilities

• Build accessible, well-tested React components, design tokens, and tooling that align with the enterprise design system.
• Own accessibility to WCAG 2.2 AA level and assistive tech support across teams.
• Design APIs with backward compatibility, semantic versioning, and migration guidance.
• Extend Next.js documentation platform, live code sandbox, examples, and Figma Code Connect integration to ease learning and adoption.
• Advance AI-native tooling and ensure UI remains within the design system.
• Help evolve a shared headless component core across web, mobile, and future platforms.
• Triage issues, review external contributions, and unblock delivery teams across the engineering community.
• Collaborate with designers, architects, and product teams in an agile delivery model.

Skills

React

TypeScript

Accessibility

Reusable libraries

Testing discipline

CI/CD

Agile

DevOps

Tools

Next.js

Figma Code Connect

Job description

Do you want to be part of a team that redefines how we get work done? We are changing the way we develop, and we want you to be part of it! We are growing, with the mandate to power world-class customer and employee experience through software and engineering skills.

The customer is at the focus of everything we do, and tens of thousands of end users rely on our products daily. We believe in the value of empowering engineers with resources to solve critical problems for the future of the business, which is why we need you.

Front-End Foundations is the enablement team behind our internal React component library that implements Manulife's design system. It powers 100+ active digital properties across our Canadian and US segments, is endorsed at the enterprise architecture level as our standard for React development and has an active engineering community of over 1,000 people. We solve common front-end problems once, then make those solutions available to every product team.

We are seeking a self-motivated Front-End Engineer to help build the components, tooling, documentation, and AI capabilities that thousands of Manulife engineers depend on daily. This is a product engineering role: the library is the product, and developers are the customers.

Position 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.

Required Qualifications:

• 5 or more yearsbuilding production front-end applications or shared libraries, ideally in complex enterprise environments
• Deep hands-on expertise inReact and TypeScript, plus modern CSS
• Practicalaccessibilityexperience: semantic HTML, ARIA, focus and keyboard management, and testing with assistive technology
• Experience buildingreusable libraries, design systems, or shared platforms consumed by other engineers, with genuine empathy for developer experience
• Testing discipline across unit, integration, visual regression, and automated accessibility checks
• Familiarity with monorepos, CI/CD, release automation, and semantic versioning
• movement to change the engineering culture of an enterprise
• Strong verbal and written communication, with the ability to articulate technical vision, trade-offs, and outcomes to both engineers and leadership
• Familiarity with agile and DevOps principles, test‑driven development, continuous integration, and other software engineering best practices

Preferred Qualifications:

• A capacity for constant learning from both success and failure, remaining open to change and continuous improvement
• An entrepreneurial spirit and comfort working within a rapidly changing environment; you love the challenge of working on a small team and being part of a larger
• Curiosity about AI‑assisted development and how agents consume design systems and structured component knowledge

When you join our team:

• We’ll empower you to learn and grow the career you want.
• We’ll recognize and support you in a flexible environment where well‑being and inclusion are more than just words.
• As part of our global team, we’ll support you in shaping the future you want to see.

#LI-Hybrid

The role being advertised is an existing vacancy.

マニュライフとジョン・ハンコックについて

マニュライフ・ファイナンシャル・コーポレーションは、「あなたの未来に、わかりやすさを」を提供する、国際的な大手金融サービスプロバイダーです。当社について詳しくは、 https://www.manulife.co.jp/をご覧ください。

マニュライフは機会均等を是とする雇用主です

マニュライフ/ジョン・ハンコックでは、多様性を受け入れます。私たちは、サービス提供先であるお客さまと同様に、多様な人材を引きつけ、育成し、定着させ、文化や個人の力を受け入れる包括的な職場環境を促進するよう努めています。当社は公正な採用、定着、昇進、報酬に努めています。当社のすべての慣行およびプログラムは、人種、祖先、出身地、肌の色、民族的出自、市民権、宗教または宗教的信念、信条、性別（妊娠および妊娠関連の状態を含む）、性的指向、遺伝的特徴、退役軍人としての地位、性自認、性に関する表明、年齢、婚姻状況、家族状況、障害、または適用法で保護されるその他の要因に対する一切の差別を行うことなく管理されます。

雇用への平等なアクセスを提供するために、障壁を取り除くことが当社の優先事項です。人事担当者は、応募者が応募プロセス中に合理的配慮を要求する場合に協力します。配慮要求のプロセス中に共有されるすべての情報は、適用される法律およびマニュライフ/ジョン・ハンコックのポリシーに準拠した方法で保存および使用されます。申請プロセスにおいて合理的配慮を要求するには、[e-mail]までご連絡をお願いします。

Referenced Salary Location

Waterloo, Ontario

Working Arrangement

ハイブリッド勤務

Salary range is expected to be between

$86,100.00 CAD - $136,100.00 CAD

Employees also have the opportunity to participate in incentive programs and earn incentive compensation tied to business and individual performance. The actual salary will vary depending on local market conditions, geography and relevant job-related factors such as knowledge, skills, qualifications, experience, and education/training. If you are applying for this role outside of the primary location, please contact [e-mail] for the salary range for your location.

Manulife offers eligible employees a wide array of customizable benefits, including health, dental, mental health, vision, short- and long-term disability, life and AD&D insurance coverage, adoption/surrogacy and wellness benefits, and employee/family assistance plans. We also offer eligible employees various retirement savings plans (including pension and a global share ownership plan with employer matching contributions) and financial education and counseling resources. Our generous paid time off program in Canada includes holidays, vacation, personal, and sick days, and we offer the full range of statutory leaves of absence. If you are applying for this role in the U.S., please contact [e-mail] for more information about U.S.-specific paid time off provisions.

We use data and analytics technologies, such as artificial intelligence (AI), and automated processing tools, to analyze and process the information you provide to us or third parties in the application process. For more information, please refer to our personal information collection statement.