# Headless Component Architecture

> Design components that provide logic and accessibility without prescribing UI styling.

- Skill: `majiayu000/headless-component-architecture` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/headless-component-architecture`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/headless-component-architecture/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/headless-component-architecture

---


# Headless Component Architecture

## Summary
Design components that provide logic and accessibility without prescribing UI styling.

## Key Capabilities
- Expose state and handlers via Render Props or Hooks.
- Ensure accessible aria attributes are correctly applied.
- Support total styling inversion by consumers.

## PhD-Level Challenges
- Design an API that supports all valid user interactions.
- Prevent internal state inconsistencies in controlled mode.
- Type-check slot props for type-safe consumption.

## Acceptance Criteria
- Provide a library of headless UI primitives.
- Demonstrate two distinct visual implementations of one primitive.
- Pass accessibility audits on both implementations.