skills.rest
Superreal-io
Superreal-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

Componentes One-Pager del Planner - Movistar

Provides verified CSS components for Maia Planner HTML one-pagers including Gantt calendars and support-load cards.

1|Updated Jun 29, 2026
Search Tags:#html#responsive design#css#campaign planning#one-pager#gantt chart#movistar
One-click install
npx skills add https://github.com/Superreal-io/maia-campaign-skills --skill componentes-one-pager-del-planner-movistar-superreal-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Componentes One-Pager del Planner - Movistar
Source: https://github.com/Superreal-io/maia-campaign-skills/tree/main/planner-onepager-components-movistar
Command: npx skills add https://github.com/Superreal-io/maia-campaign-skills --skill componentes-one-pager-del-planner-movistar-superreal-io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? The Maia Planner previously had no versioned CSS source for its 8 HTML one-pagers, so the model rewrote styles from scratch on every ticket with inconsistent class names, letting layout bugs (overlapping Gantt bars, clipped text, unreadable stream badges) ship undetected. This Skill fixes that by providing a single verified CSS implementation. ## Core Features & Use Cases - Shared base styles: Header, subtitle, legend, stream badges, media chips, and footer CSS shared across all 8 one-pagers, with a documented fix for the specificity bug that rendered badge labels gray on saturated backgrounds. - Gantt calendar component: Table-based Gantt CSS with table-layout: fixed, horizontal scroll wrapper, and overflow-wrap so long bar labels wrap instead of overlapping row headers. - Support-load cards: Grid layouts using minmax(0, 1fr) and overflow: visible so metric text wraps instead of being clipped at 100% zoom. - Responsive breakpoints: Media queries at 1024/768/480px aligned with the Maia Storyteller layout, plus print styles. - Use Case: When generating calendario_canales_global_v3.html, copy the base and Gantt CSS blocks verbatim, replace {{SCOPE}} with the file's isolation prefix, and get output matching the verified production layout without reinventing class names. ## Quick Start Ask the Planner to generate a Gantt calendar one-pager using this skill's verified CSS, replacing the scope placeholder with the file's unique prefix.

Frequently Asked Questions about Componentes One-Pager del Planner - Movistar

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

FAQPage Schema
How do I use this CSS when generating a Planner one-pager?▼

Copy the base CSS block plus the block for your specific one-pager verbatim, then replace every {{SCOPE}} placeholder with that file's unique isolation prefix (e.g., ag-s2-cal). Do not rename classes or invent new selectors for components already defined here.

Why does grid-template-columns use minmax(0, 1fr) instead of 1fr?▼

Plain 1fr means minmax(auto, 1fr), so columns cannot shrink below their content width and long text overflows. minmax(0, 1fr) lets columns shrink so text wraps, which fixes the clipped-text bug found in the support-load one-pager.

Why was the stream badge label showing gray on colored backgrounds?▼

The selector .legend-text span had higher specificity than .stream-badge, so its gray color overrode the badge's white text. The fix gives the secondary text its own class (.legend-label) instead of targeting the span element type.

Does this skill define the territory and stream colors?▼

No. All hex color values live only in 02-planner.md as the single source of truth. This skill is the implementation layer and deliberately does not duplicate color definitions to avoid two conflicting sources.

Which one-pagers are covered and which are not?▼

The shared base, Gantt calendar, and support-load components are verified against real output. The Brief Canales one-pager is not yet covered because no real output fixture exists to verify it against.

What happens if this skill is unavailable when the Planner runs?▼

The Maia Planner falls back gracefully to the prose descriptions in 02-planner.md, generating CSS from scratch as before. The skill is an optional implementation layer, not a hard dependency.

Related Skills

Explore More Design & Creative Skills→
shalhevetvardishalhevetvardi

brand-pdf-generator

Generate branded PDFs from structured content using fpdf2 or reportlab.

Community
Intermediate
sicktasticsicktastic

sales-enablement

Create persona- and stage-specific sales collateral using documented frameworks.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-typography

Detect typography defects in web interfaces via browser DOM inspection.

Community
Intermediate
grimmolfgrimmolf

Frontend CSS

Apply standardized CSS practices to resolve inconsistent frontend styling.

Community
Basic