Frontend Developer (TypeScript, Stencil.js & Design Systems)

📍 Job Overview

Job Title: Frontend Developer (TypeScript, Stencil.js & Design Systems)

Company: Demo Datos

Location: Barcelona, Catalonia, Spain

Job Type: Permanent Employee (Full-time)

Category: Frontend Development / Design Systems

Date Posted: June 11, 2026

Experience Level: Mid-Level (2-5 years)

Remote Status: Hybrid

🚀 Role Summary

• Contribute to the development and evolution of a scalable Design System, enabling consistent user experiences across multiple digital products.

• Build, maintain, and document reusable, accessible, and high-quality web components using Stencil.js and TypeScript.

• Collaborate closely with cross-functional teams, including designers and developers, to translate UI/UX designs into robust frontend implementations.

• Champion best practices in responsive design, accessibility, and code quality within an Agile development framework.

📝 Enhancement Note: This role is positioned as a mid-level Frontend Developer, focusing specifically on the creation and maintenance of a Design System. The emphasis on Stencil.js, Web Components, and collaboration with designers via Figma indicates a specialized role within frontend engineering, directly impacting product consistency and development efficiency.

📈 Primary Responsibilities

• Develop and maintain reusable, responsive, and accessible web components using Stencil.js and TypeScript.

• Actively contribute to the ongoing evolution and adoption of the Design System across various digital products.

• Translate Figma designs into high-quality, pixel-perfect frontend implementations, ensuring seamless integration.

• Create and maintain comprehensive component documentation, usage guidelines, and best practices within Storybook.

• Ensure high code quality, reliability, and maintainability through rigorous testing, including unit and end-to-end tests.

• Participate actively in Agile ceremonies, including sprint planning, daily stand-ups, sprint reviews, and retrospectives.

• Manage tasks, track progress, and collaborate effectively using Jira for workflow management.

• Promote and enforce consistency, scalability, and accessibility standards across all frontend applications.

• Collaborate closely with product teams to understand requirements and deliver integrated solutions.

📝 Enhancement Note: The responsibilities highlight a deep dive into component-based development and Design System management. The explicit mention of Storybook, Figma, Agile ceremonies, and Jira indicates a structured development environment where collaboration and process adherence are crucial.

🎓 Skills & Qualifications

Education: While no specific degree is mandated, a Bachelor's degree in Computer Science, Engineering, or a related field, or equivalent practical experience, is typically expected for roles of this nature.

Experience: Minimum of 2-5 years of professional frontend development experience, with a significant portion dedicated to building and maintaining component libraries or Design Systems.

Required Skills:

• Strong proficiency in TypeScript and modern JavaScript (ES6+).

• Hands-on experience developing with Stencil.js for creating Web Components.

• Proven experience in building, maintaining, or contributing to Design Systems or Component Libraries.

• Expertise in using Storybook for component development, testing, and documentation.

• Experience collaborating effectively with UI/UX designers, particularly using Figma for design handoffs.

• Solid understanding and practical application of responsive design principles.

• Deep knowledge of web accessibility standards (WCAG) and their implementation.

• Proficiency with version control systems, specifically Git, and modern development workflows (e.g., Gitflow).

• Professional-level fluency in written and spoken English.

• Demonstrated ability to work effectively in a collaborative, international, and Agile team environment. Preferred Skills:

• Experience with other JavaScript frameworks/libraries such as React.js and/or Svelte.

• Familiarity with Node.js environments and associated tooling for build processes and backend integration.

• Experience with automated testing frameworks like Playwright or Selenium for end-to-end testing.

• Previous experience working on enterprise-scale digital products, understanding their unique challenges.

• Experience contributing to frontend architecture discussions and component strategy development.

📝 Enhancement Note: The requirements emphasize specialized frontend skills, particularly in Stencil.js and Design Systems. The preferred skills suggest a desire for candidates with broader frontend exposure and an understanding of backend integration and advanced testing methodologies, indicative of a growing and evolving tech stack.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Showcase a minimum of 2-3 significant projects demonstrating expertise in building reusable UI components or contributing to a Design System.

• Projects should highlight the use of TypeScript and modern JavaScript frameworks/libraries.

• Include detailed explanations of the design and development process for each project, focusing on challenges and solutions.

• Demonstrate proficiency in implementing responsive design and accessibility best practices within the showcased components.

• Evidence of using tools like Storybook for component documentation and development should be clearly visible. Process Documentation:

• For each portfolio project, provide a brief overview of the workflow used, from design handoff to final implementation.

• Detail how component testing (unit and end-to-end) was integrated into the development process.

• Explain the approach taken to ensure scalability and maintainability of the components.

• Describe any collaboration processes with designers or other developers that were critical to the project's success.

📝 Enhancement Note: Given the role's focus on Design Systems and component libraries, a strong portfolio is critical. The emphasis should be on demonstrating practical application of Stencil.js, TypeScript, and adherence to design and accessibility standards, rather than just theoretical knowledge.

💵 Compensation & Benefits

Salary Range: Based on the location (Barcelona, Spain), experience level (Mid-Level, 2-5 years), and the specialized skillset (Stencil.js, Design Systems), the estimated annual gross salary range for this role is €40,000 - €55,000. This estimate is derived from market data for similar frontend developer roles in major Spanish tech hubs, considering the demand for expertise in component libraries and design systems.

Benefits:

• Permanent employment contract with a competitive salary package.

• Hybrid work model offering flexibility between remote work and in-office collaboration in Barcelona.

• Opportunity to work with modern technologies and contribute to a scalable Design System.

• Collaborative and international work environment with opportunities for professional growth.

• Contribution to the design and implementation of user interfaces used across multiple products.

• Potential for professional development through training and participation in industry events.

• Standard Spanish employment benefits, typically including paid time off, social security contributions, and potential for performance-based bonuses.

Working Hours: The standard working hours are approximately 40 hours per week, with a hybrid arrangement allowing for flexibility in how these hours are structured and where they are performed, balancing in-office collaboration with remote productivity.

📝 Enhancement Note: Salary is estimated based on typical market rates for mid-level frontend developers in Barcelona, with a premium for specialized skills in Design Systems and Stencil.js. The hybrid work model and focus on professional growth are key selling points for attracting talent.

🎯 Team & Company Context

🏢 Company Culture

Industry: Technology Consulting (Microsoft Partner) - Pasiona Consulting specializes in designing, developing, and implementing custom software solutions for clients across various sectors. This context means the frontend team likely works on diverse projects for different clients, requiring adaptability and a strong understanding of client needs.

Company Size: While not explicitly stated, Pasiona Consulting is a technology consultancy, suggesting a size that allows for specialized teams while maintaining agility. This implies a culture that values collaboration, client-centricity, and technical expertise.

Founded: Pasiona Consulting was founded with a mission to provide bespoke software solutions, indicating a history of innovation and client partnership. This foundational principle likely translates into a culture that encourages problem-solving and delivering high-quality, tailored outcomes.

Team Structure:

• The Frontend team is responsible for building and evolving a scalable Design System, suggesting a specialized unit focused on UI consistency and reusability.

• This team likely collaborates closely with other development teams, UI/UX designers, and product managers across various client projects.

• Reporting structures are expected to be clear within an Agile framework, with team leads or architects providing technical guidance. Methodology:

• The team operates within an Agile framework, emphasizing iterative development, collaboration, and continuous improvement.

• Emphasis is placed on building robust, reusable components and maintaining high standards for code quality, accessibility, and responsiveness.

• Data-driven insights are likely used to inform design decisions and component development, ensuring the Design System meets the needs of multiple digital products.

Company Website: https://pasiona.com/

📝 Enhancement Note: As a technology consultancy, Pasiona Consulting's culture likely balances client demands with internal innovation. The Design System team plays a crucial role in ensuring quality and efficiency across client projects, requiring a blend of technical mastery and collaborative spirit.

📈 Career & Growth Analysis

Operations Career Level: This role is classified as a Mid-Level Frontend Developer (2-5 years of experience). It signifies an individual contributor role with a focus on technical execution within the Design System domain. The expectation is for the developer to be proficient in core technologies and capable of independent work on component development and documentation.

Reporting Structure: The developer will likely report to a Frontend Lead, Design System Manager, or a Technical Project Manager. They will collaborate closely with UI/UX designers, backend developers, and potentially product owners or client stakeholders.

Operations Impact: The Frontend Developer’s impact is directly tied to enhancing user experience consistency, improving development efficiency across multiple products, and ensuring brand integrity through a well-maintained Design System. Their work enables faster product iteration and reduces UI development overhead for client projects.

Growth Opportunities:

• Specialization: Deepen expertise in Design Systems, Web Components, and frontend architecture, potentially leading to a Senior or Lead Design System Engineer role.

• Skill Expansion: Gain experience with other frontend frameworks (React, Svelte) or backend technologies (Node.js) through project involvement or company-provided training.

• Leadership: Transition into a team lead role, mentoring junior developers, and contributing more significantly to architectural decisions and frontend strategy.

• Client Engagement: Develop stronger client-facing skills by presenting UI solutions and technical approaches during project engagements.

📝 Enhancement Note: The growth path for this role centers on becoming a subject matter expert in Design Systems and component-based architecture, with opportunities to broaden technical skills or move into leadership positions within the consultancy.

🌐 Work Environment

Office Type: The company offers a hybrid work model, indicating a blend of remote work flexibility and in-office collaboration. This suggests a modern office setup designed to facilitate teamwork and knowledge sharing when employees are on-site.

Office Location(s): The primary office location is in Barcelona, Spain, specifically at C/Nicaragua 137, 08029. This location in Barcelona provides access to a vibrant tech community and talent pool.

Workspace Context:

• The hybrid model allows for personalized work arrangements, balancing focused individual work at home with collaborative sessions in the office.

• The office environment is expected to be equipped with the necessary tools and technology to support collaborative development, including meeting rooms for design reviews and team sync-ups.

• Opportunities for informal interaction with designers and fellow developers will be available during office days, fostering a strong sense of team cohesion.

Work Schedule: The standard work schedule is approximately 40 hours per week. The hybrid nature of the role provides flexibility in managing daily work hours, allowing for effective task completion while maintaining work-life balance.

📝 Enhancement Note: The hybrid setup in Barcelona is a key feature, catering to professionals who value both autonomy and in-person collaboration. This environment is conducive to the iterative and communicative nature of Design System development.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A brief call with HR or a recruiter to assess basic qualifications, cultural fit, and interest in the role.

• Technical Interview 1 (Coding Challenge): Typically involves a live coding exercise or a take-home assignment focused on TypeScript, Stencil.js, or component development principles. Emphasis will be on code quality, problem-solving, and adherence to best practices.

• Technical Interview 2 (Design System Focus): A deeper dive into your experience with Design Systems, Web Components, Storybook, and Figma. Expect questions about your approach to accessibility, responsiveness, and component architecture.

• Team/Hiring Manager Interview: Discussion about your experience, how you collaborate, and your understanding of Agile methodologies. This stage assesses cultural fit and your ability to integrate into the existing team.

• Final Interview (Optional): May involve a discussion with senior leadership or a client stakeholder, depending on project involvement.

Portfolio Review Tips:

• Curate Strategically: Select 2-3 strong projects that directly showcase your Stencil.js, TypeScript, and Design System experience. Prioritize quality over quantity.

• Showcase Process: For each project, clearly outline the problem, your approach, the technologies used (especially Stencil.js and TypeScript), design/collaboration process (mentioning Figma), and the outcomes.

• Highlight Key Skills: Explicitly demonstrate your understanding of responsive design, accessibility, and component documentation (Storybook). Use code snippets or links to live examples where possible.

• Quantify Impact: If possible, describe the impact of your work on development efficiency, user experience consistency, or product adoption.

• Be Prepared to Discuss: Be ready to walk through your portfolio in detail, explain your design choices, and answer technical questions about your implementations.

Challenge Preparation:

• Master Stencil.js Fundamentals: Review Stencil.js core concepts, lifecycle methods, and best practices for creating re-usable components.

• Practice TypeScript: Ensure you are comfortable with advanced TypeScript features, interfaces, and types relevant to frontend development.

• Design System Concepts: Refresh your knowledge on Design System principles, atomic design, and common patterns for component libraries.

• Accessibility & Responsiveness: Prepare to discuss and demonstrate how you implement WCAG standards and create responsive layouts.

• Storybook & Figma: Familiarize yourself with common Storybook features for documentation and testing, and be prepared to discuss your workflow with Figma designs.

📝 Enhancement Note: The interview process is designed to rigorously assess technical skills, practical application of Design System principles, and collaborative capabilities. A well-prepared portfolio is paramount for demonstrating competence in the core technologies and methodologies required for this role.

🛠 Tools & Technology Stack

Primary Tools:

• Stencil.js: The core framework for developing reusable Web Components. Proficiency is essential.

• TypeScript: The primary language for development, ensuring type safety and code maintainability.

• Web Components: The underlying technology for building framework-agnostic components.

• Storybook: The tool for developing, documenting, and showcasing UI components in isolation.

Analytics & Reporting:

• Jira: Used for task management, sprint planning, and workflow tracking within the Agile process.

• Figma: The design tool used for UI/UX mockups and design handoffs, requiring close collaboration.

CRM & Automation:

• Git: Essential for version control, code collaboration, and managing development workflows.

• Node.js: Likely used for build processes, tooling, and potentially backend integrations.

📝 Enhancement Note: The technology stack is highly specialized, focusing on a modern approach to frontend development with a strong emphasis on component-based architecture and Design Systems. Familiarity with this specific stack is crucial for success in this role.

👥 Team Culture & Values

Operations Values:

• Collaboration: A strong emphasis on working together across design, development, and product teams to achieve shared goals.

• Quality & Craftsmanship: A commitment to building robust, well-tested, and accessible components that uphold high standards.

• Efficiency & Scalability: Driving consistency and reducing development time across multiple products through a well-defined Design System.

• Continuous Learning: Encouraging exploration of new technologies and methodologies to stay at the forefront of frontend development.

• Client Focus: Understanding and delivering solutions that meet client needs and contribute to their business objectives.

Collaboration Style:

• Cross-functional Integration: Close partnerships with UI/UX designers to translate visual concepts into functional components and with other developers to ensure seamless integration into various applications.

• Agile Principles: Active participation in Agile ceremonies, valuing open communication, feedback exchange, and adaptability.

• Knowledge Sharing: A culture that encourages sharing best practices, code reviews, and insights to collectively improve the team's capabilities and the Design System's effectiveness.

📝 Enhancement Note: The team culture likely values technical excellence, collaborative problem-solving, and a proactive approach to improving the development process across client projects through the Design System.

⚡ Challenges & Growth Opportunities

Challenges:

• Adoption & Governance: Ensuring consistent adoption of the Design System across diverse digital products and managing version control and updates effectively.

• Balancing Innovation and Stability: Keeping the Design System up-to-date with new technologies while maintaining backward compatibility and stability for existing products.

• Cross-Team Communication: Facilitating clear communication and collaboration between the Design System team and multiple product development teams, who may have varying levels of technical expertise.

• Evolving Standards: Staying abreast of rapidly changing frontend technologies, accessibility guidelines, and design trends to keep the Design System relevant and effective.

Learning & Development Opportunities:

• Deep Dive into Design Systems: Becoming a subject matter expert in the principles and practices of large-scale Design Systems.

• Advanced Web Component Technologies: Exploring emerging features and best practices in Web Components and related frameworks.

• Frontend Architecture: Gaining exposure to more complex frontend architecture decisions and contributing to the strategic direction of the Design System.

• Cross-Framework Exposure: Opportunities to work with or learn about other popular frontend frameworks like React.js and Svelte, broadening your technical skillset.

📝 Enhancement Note: This role offers significant opportunities for specialization in a critical area of modern web development, with the potential to tackle complex challenges related to scalability, adoption, and technological evolution within a consultancy environment.

💡 Interview Preparation

Strategy Questions:

• "Describe your experience building and maintaining a Design System. What were the key challenges, and how did you address them?" (Focus on your Stencil.js, TypeScript, and Figma experience.)

• "How do you ensure accessibility and responsiveness in the components you build? Can you provide specific examples from your projects?" (Be ready to discuss WCAG standards and responsive design techniques.)

• "Walk me through your process for documenting and showcasing components using Storybook. What makes good component documentation?" (Highlight your experience with Storybook's features.)

• "How do you collaborate with designers to translate Figma mockups into functional UI components? What are common pitfalls, and how do you avoid them?" (Emphasize communication and problem-solving with designers.) Company & Culture Questions:

• "What interests you about working for a technology consultancy like Pasiona compared to a product company?" (Show understanding of the consulting model and client focus.)

• "How do you approach working in an Agile environment, and what is your experience with tools like Jira?" (Demonstrate familiarity with Agile ceremonies and task management.)

• "What are your thoughts on the importance of a Design System in a multi-product environment?" (Articulate the value proposition of Design Systems for efficiency and consistency.) Portfolio Presentation Strategy:

• Structure: Begin with a high-level overview of your chosen projects, then dive into the specifics of 1-2 key projects, detailing the problem, your solution (with code examples if possible), the technologies used (Stencil.js, TypeScript), and the impact.

• Visuals: Use screenshots, live demos, and Storybook links to illustrate your work effectively. Clearly highlight the components you developed.

• Storytelling: Frame your experience as a narrative – the challenge, your approach, the lessons learned, and the successful outcome.

• Technical Depth: Be prepared to answer in-depth technical questions about your implementation choices, trade-offs, and problem-solving strategies.

📝 Enhancement Note: Preparation should focus on demonstrating a clear understanding of Design System principles, practical application of Stencil.js and TypeScript, strong collaboration skills, and the ability to articulate technical solutions and their impact effectively.

---

📌 Application Steps

To apply for this Frontend Developer position:

• Submit your application through the provided application link on Pasiona's career portal.

• Customize Your Resume: Tailor your resume to highlight your experience with TypeScript, Stencil.js, Web Components, Design Systems, Storybook, and Figma. Quantify achievements where possible (e.g., "Reduced UI development time by X%," "Contributed to a Design System used by Y teams").

• Prepare Your Portfolio: Ensure your portfolio is up-to-date and clearly showcases your most relevant projects. Be ready to present and discuss your work, focusing on the process, technologies, and outcomes.

• Practice Technical Questions: Review common frontend interview questions, particularly those related to Stencil.js, TypeScript, accessibility, responsive design, and Design System best practices. Practice articulating your thought process and solutions.

• Research Pasiona Consulting: Understand the company's mission, values, and the types of clients they serve. This will help you tailor your responses and demonstrate genuine interest in their work and culture.

⚠️ Important Notice: This enhanced job description includes AI-generated insights and operations industry-standard assumptions. All details should be verified directly with the hiring organization before making application decisions.