skills.rest
EliteGentro
EliteGentroCOMMUNITY
Explore all skills by this author →
GitHub

banorte-design-system

Enforces Banorte brand design tokens and component classes when building React UI components.

1|Updated May 25, 2026
Search Tags:#react#design system#brand guidelines#tailwind#ui components#css tokens#banorte
One-click install
npx skills add https://github.com/EliteGentro/LeRe_Portfolio --skill banorte-design-system-elitegentro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banorte-design-system
Source: https://github.com/EliteGentro/LeRe_Portfolio/tree/main/.agent/skills/banorte-design-system
Command: npx skills add https://github.com/EliteGentro/LeRe_Portfolio --skill banorte-design-system-elitegentro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents inconsistent styling in the cocoly-frontend by replacing hardcoded colors, spacing, and fonts with the canonical Banorte design tokens and shared component classes defined in src/index.css. ## Core Features & Use Cases - Design Token Reference: Provides the complete catalog of CSS custom properties for colors, typography, spacing, radius, shadows, and z-index layers. - Component Class Catalog: Documents shared classes like .btn-primary, .card, .input-field, and the .tx-* editorial module so components are never re-implemented inline. - Anti-Pattern Enforcement: Lists forbidden patterns (hex literals, Tailwind arbitrary values, magic z-index numbers) with their correct token-based replacements. - Use Case: When asked to build a new settings panel, the Skill ensures the developer uses .card containers, .btn-primary for the save action, var(--color-banorte-red) focus rings, and --spacing-* tokens instead of inventing ad-hoc styles. ## Quick Start Review this React component and fix any styles that violate the Banorte design system tokens and component classes.

Frequently Asked Questions about banorte-design-system

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

FAQPage Schema
How do I apply the Banorte design system to a React component?▼

Use the shared component classes from src/index.css such as .btn-primary, .card, and .input-field, and reference CSS custom properties like var(--color-banorte-red) for any custom styling. Never hardcode hex values or Tailwind arbitrary values like text-[#333].

What color should primary buttons use in Banorte branding?▼

Primary buttons use the brand red #EB0029 via the .btn-primary class or the shadcn Button with variant="default". Always reference var(--color-banorte-red) rather than writing the hex value directly.

Can I use Tailwind arbitrary values with this design system?▼

No, arbitrary values like bg-[#F4F7F8] are forbidden. Use the theme tokens exposed through @theme in src/index.css, such as bg-bg-2 or text-dark-gray, so all styling stays consistent with the token catalog.

Why is hardcoding z-index values discouraged in this project?▼

Hardcoded z-index values like 9999 break the layering scale and cause stacking bugs. The design system provides tokens from --z-base (0) to --z-toast (300) plus utility classes like .layer-modal to keep overlays predictable.

When should Banorte red be used as a background color?▼

Red is reserved for accents only: borders, icons, primary CTA fills, active states, links, and eyebrow labels. It must never be used as a full section background, body text color, or decorative fill on large surfaces.

Related Skills

Explore More Design & Creative Skills→
yugasunyugasun
1

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

Community
Advanced
Community-AccessCommunity-Access
387

design-system

Validate design system tokens for WCAG AA/AAA contrast, focus, and touch target compliance.

Official
Advanced
Ankish8Ankish8
2

Storybook Generator

Generate Storybook documentation with installation, design tokens, and usage examples.

Community
Intermediate
csim-sgcsim-sg

tailwindcss-advanced-design-systems

Build scalable Tailwind CSS design systems with design tokens and @theme configuration.

Community
Advanced