Agent skill
headless-component-architecture
Design components that provide logic and accessibility without prescribing UI styling.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/headless-component-architecture
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?