Render Flowglad subscription pricing plans in a responsive grid.
npx skills add https://github.com/flowglad/skills --skill flowglad-pricing-ui
Please help me install this Agent Skill. Skill: flowglad-pricing-ui Source: https://github.com/flowglad/skills/tree/main/skills/pricing-ui Command: npx skills add https://github.com/flowglad/skills --skill flowglad-pricing-ui
This Skill helps teams quickly build and maintain user-facing pricing interfaces for Flowglad subscriptions, reducing manual UI wiring and ensuring consistent pricing presentation across marketing and product experiences.
Use case: Marketing pages show a pricing grid to compare plans, while product dashboards validate plan configurations.
Install and wire up the pricing UI in your Flowglad app, then fetch pricingModel data and render pricing cards using the provided helpers.
High-intent search queries and answers about installing and using this skill.
To build a responsive pricing page UI for React subscription plans, you can use this skill to render pricing cards displaying products, prices, intervals, and features in a grid layout. It provides transform utilities to convert raw pricing data into UI-ready plans with display prices and slugs.
Handling monthly and annual billing interval toggles in a pricing grid requires state management to switch pricing views. This skill provides built-in interval toggle functionality that updates and reflects the correct subscription prices when users switch between billing cycles.
To highlight a user's current subscription plan and disable upgrade actions in React, this skill provides current plan awareness features. It automatically identifies the active plan within the pricing data model and disables corresponding upgrade buttons on the pricing cards.
Managing loading and empty states for subscription pricing data in a React dashboard is handled by the skill's built-in state management. It processes the pricing data fetch lifecycle to properly render loading indicators and empty messages before the pricing grid populates.
Yes, this pricing UI skill works without external React component dependencies. The metadata indicates an empty dependencies array, meaning the subscription pricing rendering logic and display helpers are self-contained for direct integration into your application.
flowgladImplement Flowglad checkout sessions for subscriptions and products.
Scheune10-codingConnect Stripe Checkout, subscriptions, and webhooks to a Supabase backend.
nonputtipongDevelop React components and responsive layouts with Next.js and TypeScript.
HouseGarofaloDesign responsive dashboards with KPI cards and data tables using React and Tailwind CSS.
