FrontendLead

Manage the wlbl-bios project's Plans/Pricing portal with Next.js and Vitest.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/Ghabs95/agents --skill frontendlead
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: FrontendLead
Source: https://github.com/Ghabs95/agents/tree/main/wlbl-agents/.agent/skills/frontend_lead
Command: npx skills add https://github.com/Ghabs95/agents --skill frontendlead

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the need for a high-converting, performant, and user-friendly web experience for the Plans/Pricing portal, ensuring seamless integration with backend logic and a premium user interface.

Core Features & Use Cases

  • Performance Optimization: Ensures Next.js pages load instantly for improved conversion rates.
  • Backend Integration: Consumes Stripe logic from wlbl-cosmos for payment processing without reinventing logic.
  • UX Enhancement: Delivers a premium and transparent "Plans" selection experience.
  • Testing: Maintains component and integration tests using Vitest.

Quick Start

Ask the FrontendLead skill to optimize the loading speed of the Next.js pricing page.

Frequently Asked Questions about FrontendLead

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

FAQPage Schema
How do I optimize a Next.js pricing page for better conversion rates?

To optimize a Next.js pricing page for conversion, ensure pages load instantly and integrate backend payment logic seamlessly. This approach focuses on performance standards and premium UX to maximize revenue gateway conversions.

How do I integrate Stripe payment processing into a Next.js portal?

Integrating Stripe payment processing into a Next.js portal requires consuming backend logic without reinventing it. The system connects directly to backend payment APIs to handle transactions while maintaining a transparent user experience.

Does this approach require coordinating with backend and content teams?

Yes, optimizing this revenue gateway requires coordinating with backend roles for pricing APIs, content roles for visual parity, and privacy roles for data handling audits. This ensures seamless integration and comprehensive testing protocols.

What's the best way to maintain testing protocols for a pricing portal?

The best way to maintain testing protocols for a pricing portal is using Vitest for component and integration tests. This ensures the premium user experience remains stable and adheres to strict performance standards.

Why does my web performance optimization need to focus on the pricing portal?

Web performance optimization needs to focus on the pricing portal because it acts as a critical revenue gateway. Instant page loads directly impact conversion rates and deliver a premium user experience for plan selection.

Can I use this workflow to handle data compliance audits for a pricing page?

Yes, this workflow handles data compliance audits for a pricing page by coordinating with privacy roles for data handling. This ensures the premium user experience meets strict standards while maintaining transparent plan selection.