skills.rest
jpmorgan-payments
jpmorgan-paymentsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

styling-guidelines

Enforce Tailwind CSS styling with mandatory `eb-` prefixes for embedded components.

18|8|Updated May 31, 2023
Search Tags:#css#styling#design tokens#tailwind#ui components#eb- prefix
One-click install
npx skills add https://github.com/jpmorgan-payments/embedded-finance --skill styling-guidelines-jpmorgan-payments
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styling-guidelines
Source: https://github.com/jpmorgan-payments/embedded-finance/tree/main/.github/skills/styling-guidelines
Command: npx skills add https://github.com/jpmorgan-payments/embedded-finance --skill styling-guidelines-jpmorgan-payments

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures consistent and conflict-free styling across embedded components by enforcing mandatory Tailwind CSS class prefixes and established design patterns.

Core Features & Use Cases

  • Mandatory eb- Prefix: Guarantees all Tailwind classes start with eb- to prevent style collisions.
  • Responsive Design Patterns: Provides guidance on mobile-first and breakpoint usage.
  • Design Token Usage: Encourages the use of semantic color tokens for consistency.
  • Loading States: Mandates skeleton components over text for loading indicators.
  • Use Case: When developing new UI components for the embedded finance library, use this Skill to ensure all styles adhere to the project's eb- prefix rule and utilize approved design tokens, maintaining a cohesive look and feel.

Quick Start

Apply the eb- prefix to all Tailwind CSS classes in your component's className attribute.

Frequently Asked Questions about styling-guidelines

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

FAQPage Schema
How do I prevent Tailwind CSS style conflicts in embedded components?▼

To prevent Tailwind CSS style conflicts in embedded components, apply a mandatory `eb-` prefix to all utility classes. This naming convention isolates your styles and ensures conflict-free rendering across the embedded finance library.

What is the best way to use design tokens with Tailwind CSS for UI consistency?▼

The best way to use design tokens with Tailwind CSS for UI consistency is to apply semantic color tokens within your component classes. This practice maintains a cohesive look and feel while adhering to established styling patterns.

How do I implement loading states in embedded UI components?▼

To implement loading states in embedded UI components, use skeleton components instead of plain text indicators. This approach mandates a consistent visual placeholder structure while data is loading.

Does styling for embedded components require mobile-first responsive design patterns?▼

Yes, styling for embedded components requires mobile-first responsive design patterns. You must follow specific breakpoint usage guidelines to ensure layouts adapt correctly across all device sizes.

Why does my embedded component styling break without the eb- prefix?▼

Embedded component styling breaks without the `eb-` prefix because the prefix is mandatory to prevent style collisions. Omitting it violates the established component composition best practices and causes styling conflicts.

Related Skills

Explore More Software Engineering Skills→
iliaaliliaal
30

ia-tailwind-css

Apply Tailwind CSS v4 CSS-first configuration and correct class patterns.

Community
Intermediate
hakushunhakushun

tailwind-design-system

Creates scalable design systems with Tailwind CSS v4 and semantic tokens.

Community
Advanced
ducnm-mimhusducnm-mimhus

frontend-development

Standardize React and Polaris frontend patterns for embedded Shopify admin apps.

Community
Intermediate
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic