headless-api-design

Design accessible headless component APIs following QDS conventions for Qwik.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/kunai-consulting/qwik-design-system --skill headless-api-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: headless-api-design
Source: https://github.com/kunai-consulting/qwik-design-system/tree/main/.ruler/skills/headless-api-design
Command: npx skills add https://github.com/kunai-consulting/qwik-design-system --skill headless-api-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a standardized approach to designing accessible, composable headless component APIs, ensuring consistency and maintainability across the Qwik Design System.

Core Features & Use Cases

  • API Design Conventions: Follows established patterns for compound components, state management, event naming, and accessibility.
  • Consistency Enforcement: Ensures new components align with QDS principles for signal-based APIs, semantic events, and accessibility-first design.
  • Use Case: When creating a new Accordion component, use this Skill to guide the design of its props, events, and internal structure to match existing components like Checkbox or Modal.

Quick Start

Design the API for a new Toggle component following QDS headless conventions.

Frequently Asked Questions about headless-api-design

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

FAQPage Schema
How do I design accessible headless component APIs for Qwik?

Design accessible headless component APIs by following QDS conventions for compound components, state management with useBindings, semantic event naming, and signal-based props. This ensures consistency and maintainability across the Qwik Design System.

What are headless components and when do I need them for design systems?

Headless components handle state management, accessibility, and behavior logic while delegating visual rendering to the consumer. You need them to build composable, accessible design systems that separate structural logic from styling.

How do I manage state in Qwik headless components?

Manage state in Qwik headless components using the useBindings pattern and signal-based APIs. This approach aligns with QDS conventions for handling component state, ensuring predictable data flow and semantic event naming.

Does this API design approach support form integration and accessibility best practices?

Yes, the API design approach supports form integration via the Field component and enforces accessibility best practices. It ensures new headless components align with QDS principles for semantic events and accessibility-first design.

What is the best way to structure props for a new Qwik component?

The best way to structure Qwik component props is to follow established QDS patterns for signal-based and value-based APIs. This ensures your component's API design matches existing components like Checkbox or Modal.

Why does my new Qwik component break Qwik Design System consistency?

Your Qwik component breaks design system consistency if it deviates from QDS conventions for compound components, semantic event naming, and context patterns. Aligning with signal-based APIs and accessibility-first design resolves this.