flowglad-pricing-ui
A utility for building pricing interfaces, handling plan states, and formatting currency with Flowglad.
Install
mkdir -p .claude/skills/flowglad-pricing-ui && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3795" && unzip -o skill.zip -d .claude/skills/flowglad-pricing-ui && rm skill.zipInstalls to .claude/skills/flowglad-pricing-ui
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Build pricing pages, pricing cards, and plan displays with Flowglad. Use this skill when creating pricing tables, displaying subscription options, or building plan comparison interfaces.Key capabilities
- →Render pricing cards with billing interval toggle logic
- →Manage loading states for pricing model data fetching
- →Format raw currency values from integer cents
- →Highlight active user subscription plans via comparison logic
- →Filter pricing options based on selected billing cycles
How it works
It utilizes helper functions to transform pricing data models into stateful UI components that react to user interval selections.
Inputs & outputs
When to use flowglad-pricing-ui
- →Create pricing tables for SaaS products
- →Implement billing cycle interval toggles
- →Display subscription plan features
- →Build responsive pricing cards
About flowglad-pricing-ui
Provides helpers for rendering pricing models, managing loading states, and formatting pricing data from cents. It enables developers to implement billing interval toggles and highlight active subscriptions.
Build pricing pages, pricing cards, and plan displays with Flowglad. Use this skill when creating pricing tables, displaying subscription options, or building plan comparison interfaces.
When not to use it
- →Building static, non-SaaS billing pages
- →Backend logic for subscription processing
Prerequisites
Limitations
- →Requires data provided in the specific Flowglad model structure
- →Strict dependency on React-based component architecture
- →UI patterns are opinionated toward the Flowglad standard
How it compares
It provides pre-built logic for common billing patterns like monthly/annual toggles, preventing the need to write custom state management for price calculation.
Compared to similar skills
flowglad-pricing-ui side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| flowglad-pricing-ui (this skill) | 1 | 7mo | No flags | Beginner |
| ai-model-web | 1 | 4mo | Review | Intermediate |
| podcast-generation | 1 | 5mo | Review | Advanced |
| convex-realtime | 1 | 8mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by flowglad
View all by flowglad →You might also like
ai-model-web
TencentCloudBase
Use this skill when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities. Features text generation (generateText) and streaming (streamText) via @cloudbase/js-sdk. Built-in models include Hunyuan (hunyuan-2.0-instruct-20251111 recommended) and DeepSeek (deepseek-v3.2 recommended). NOT for Node.js backend (use ai-model-nodejs), WeChat Mini Program (use ai-model-wechat), or image generation (Node SDK only).
podcast-generation
microsoft
Generate AI-powered podcast-style audio narratives using Azure OpenAI's GPT Realtime Mini model via WebSocket. Use when building text-to-speech features, audio narrative generation, podcast creation from content, or integrating with Azure OpenAI Realtime API for real audio output. Covers full-stack implementation from React frontend to Python FastAPI backend with WebSocket streaming.
convex-realtime
waynesutton
Patterns for building reactive apps including subscription management, optimistic updates, cache behavior, and paginated queries with cursor-based loading
wagmi-development
wevm
Creates Wagmi features across all layers - core actions, query options, framework bindings. Use when adding new actions, hooks, or working across packages/core, packages/react, packages/vue.
query-layer
EpicenterHQ
Query layer patterns for consuming services with TanStack Query, error transformation, and runtime dependency injection. Use when implementing queries/mutations, transforming service errors for UI, or adding reactive data management.
rdc-setup
reactive
Install and set up @data-client/react or @data-client/vue in a project. Detects project type (NextJS, Expo, React Native, Vue, plain React) and protocol (REST, GraphQL, custom), then hands off to protocol-specific setup skills.