BEEQ

Guide BEEQ component selection, integration, and styling across web frameworks.

160|24|Updated Feb 22, 2023
One-click install
npx skills add https://github.com/Endava/BEEQ --skill beeq
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: BEEQ
Source: https://github.com/Endava/BEEQ/tree/main/apps/beeq-docs
Command: npx skills add https://github.com/Endava/BEEQ --skill beeq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you answer BEEQ UI questions without guessing, so you can choose the right component, wrapper, token, or theme setting and avoid API mistakes.

Core Features & Use Cases

  • Component guidance: Select and use the right BEEQ components for buttons, forms, overlays, navigation, and data display.
  • Framework integration: Adapt examples for HTML web components, React, Angular, Vue, and Next.js.
  • Styling and review: Check tokens, CSS custom properties, shadow parts, events, accessibility, and implementation details against the docs and source.
  • Use case: Review a button or select example, confirm the correct prop names and events, then generate code that fits a specific stack.

Quick Start

Ask for the BEEQ component, framework, and outcome you want, and request a source-backed example that matches the current documentation.

Frequently Asked Questions about BEEQ

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

FAQPage Schema
How do I integrate BEEQ web components into a React or Angular project?

To integrate BEEQ web components into React or Angular, you adapt the HTML web component examples using framework-specific wrappers. This ensures correct prop binding, event handling, and slot usage while maintaining the native component API.

How do I style BEEQ components using CSS custom properties and shadow parts?

Styling BEEQ components involves targeting exposed CSS custom properties and shadow parts defined in the official documentation. This approach ensures style encapsulation is respected without breaking the component's internal structure.

How do I select the right BEEQ component for forms, overlays, or navigation?

Selecting the right BEEQ component for forms, overlays, or navigation requires checking documented props, events, and slots against the source. This verifies the component matches the UI pattern and accessibility requirements before implementation.

Does BEEQ support theming and design tokens for consistent web UI implementation?

BEEQ supports theming and design tokens for consistent web UI implementation. You configure theme settings by referencing the documented token system and CSS custom properties to standardize visual styles across your application.

Why does my BEEQ component behavior differ across Vue and Next.js?

BEEQ component behavior differs across Vue and Next.js if framework-specific wrappers are applied incorrectly or props and events mismatch the documentation. Reviewing the source-backed examples for your specific stack resolves these integration inconsistencies.

What is the best way to troubleshoot BEEQ UI accessibility and implementation issues?

The best way to troubleshoot BEEQ UI accessibility and implementation issues is auditing documented props, methods, and events against the source. This validates that component interactions and shadow DOM structures meet accessibility standards.