Styling Guidelines Skill

Styling Guidelines

Tailwind CSS styling patterns with mandatory eb- prefix for embedded components. This skill ensures consistent styling and prevents style conflicts when components are embedded in other applications.

When to Apply

Reference these patterns when:

Applying Tailwind CSS classes to components
Creating responsive layouts
Working with design tokens
Implementing loading states
Creating accessible UI components

⚠️ CRITICAL: eb- Prefix Requirement

ALL Tailwind CSS classes MUST be prefixed with eb-. This is mandatory for the embedded components library to avoid style conflicts when embedded in other applications.

Quick Reference

Essential Rules

✅ Always use eb- prefix - No exceptions
✅ Mobile-first - Start with mobile, add breakpoints
✅ Use semantic colors - Prefer eb-bg-primary over eb-bg-blue-500
✅ Skeleton components - Never use "Loading..." text
✅ Design tokens - Use semantic color tokens from theme

Common Patterns

// Layout
className="eb-flex eb-items-center eb-gap-4"

// Responsive
className="eb-text-sm md:eb-text-base lg:eb-text-lg"

// Semantic colors
className="eb-bg-primary eb-text-primary-foreground"

How to Use

For detailed instructions, examples, and patterns:

Full guide: AGENTS.md - Complete styling documentation

References

See embedded-components/DESIGN_TOKENS.md for design system
See embedded-components/tailwind.config.js for configuration
See AGENTS.md for complete styling documentation

Agent Skills: Styling Guidelines

Install this agent skill to your local

Skill Files