web-design-guidelines

What it does

This skill provides Epicenter's official design system and guidelines to ensure frontend development aligns with brand standards. It offers a structured framework for creating consistent, accessible, and visually cohesive user interfaces across applications.

When to use it

• Building new Epicenter products or internal tools requiring strict adherence to brand identity.
• Refactoring existing codebases to match current design patterns and component libraries.
• Generating UI mockups or prototypes that need to be production-ready for the Epicenter ecosystem.
• Ensuring accessibility compliance within frontend projects managed by Epicenter teams.

Key capabilities

• Access to official Epicenter design tokens (colors, typography, spacing).
• Component library definitions for common UI elements like buttons, forms, and navigation.
• Style guide documentation for consistent implementation across the platform.
• Guidelines for responsive layouts and mobile-first design approaches.

Example prompts

• "Generate a login page using Epicenter's official web design guidelines."
• "Create a responsive navigation bar following the Epicenter frontend standards."
• "What are the recommended color palettes and typography rules for an Epicenter dashboard?"

Tips & gotchas

Ensure you have access to the latest version of the Epicenter design system, as guidelines may evolve with product updates. Always validate generated components against live documentation to confirm compatibility with current framework versions.