OpenSkillIndex← back to search
claude-code

Claude-skill-registry headless-component-architecture

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

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/headless-component-architecture" ~/.claude/skills/majiayu000-claude-skill-registry-headless-component-architecture && rm -rf "$T"
manifest: skills/data/headless-component-architecture/SKILL.md
source content

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.