skills.rest
BanePlayss
BanePlayssCOMMUNITY
Explore all skills by this author →
GitHub

cupom-ux

Implements the exact betting card and coupon UI markup for the Primitivão app.

Updated May 6, 2026
Search Tags:#react#design system#jsx#dark theme#css classes#betting ui#coupon drawer
One-click install
npx skills add https://github.com/BanePlayss/primitivao --skill cupom-ux-baneplayss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cupom-ux
Source: https://github.com/BanePlayss/primitivao/tree/main/.claude/skills/cupom-ux
Command: npx skills add https://github.com/BanePlayss/primitivao --skill cupom-ux-baneplayss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Betting card and coupon interfaces built from memory or invented CSS classes repeatedly came back rejected for looking wrong. This Skill provides the exact JSX markup and class names (mk-bet-game, mk-bg-summary, mk-cupom-wrap, mk-betbar, golf-tabs) so the betting UI matches the existing design system on the first attempt. ## Core Features & Use Cases - Accordion match card: Copy the renderKoCard structure with summary odds preview, two-segment probability bar, and expandable market tabs. - Coupon drawer and bet bar: Build the .mk-cupom-wrap drawer using the app's card system (.card cupom, .quick, .payout-box, .modal-btns) plus the .mk-betbar that appears only when picks exist and the drawer is closed. - Dark theme and icon rules: Apply the light/dark inversion pattern for elements outside cards and use the correct Icon names instead of emojis. - Use Case: When adding a betting UI for a new championship (e.g., LoL), open MkBettingView/renderKoCard in apostas-app.jsx, copy the structure verbatim, and verify every tab in both SIMPLES and AVANÇADO modes in the preview. ## Quick Start Use the cupom-ux skill to build the betting card and coupon drawer for the new championship, copying the exact markup from renderKoCard in apostas-app.jsx.

Frequently Asked Questions about cupom-ux

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

FAQPage Schema
How do I build a betting card UI that matches an existing design system?▼

Copy the exact markup from the reference component (renderKoCard in apostas-app.jsx) instead of writing new classes. The card is an accordion: a summary with odds preview and probability bar, with market tabs shown only when expanded.

How should betting markets be displayed in a match card?▼

Show one market at a time using a tab row (golf-tabs) with a description line for the active market, never stacking all markets inside the card. When switching back to simple mode, fall back to the first available market if the current one disappeared.

Why does text disappear in dark mode on elements outside cards?▼

Elements sitting directly on the page background are dark in dark theme, so charcoal text becomes invisible. Use the light-on-dark default with an html:not(.pv-dark) inversion rule, and verify with getComputedStyle in the preview.

When should the bet bar (mk-betbar) be shown?▼

Show the bet bar only when there is at least one pick and the coupon drawer is closed. Without it, the drawer stays hidden at translateY(105%) and users cannot reach the coupon to place a bet.

When should FAV and ZEBRA tags appear on betting options?▼

Show FAV or ZEBRA only when the extreme odd is unique in the market. In an even matchup both sides tie on the highest odd, so tagging both as ZEBRA conveys no information.

Related Skills

Explore More Software Engineering Skills→
PuckAPIPuckAPI
2

edge-detection

Compare model probabilities against market odds to identify positive expected value bets.

Official
Advanced
ianallowayianalloway
4

kelly-criterion

Calculate optimal bet sizes using the Kelly Criterion formula.

Community
Intermediate
sports-data-hqsports-data-hq
1

playoff-simulation

Simulate NHL season outcomes to estimate playoff and championship probabilities.

Official
Advanced
dtyqdtyq
5.0k

generate-preset

Generates custom CSS and JS preset bundles for self-media card templates from style descriptions.

Official
Advanced