How does it improve component flexibility?

It promotes 'composition over configuration,' encouraging the use of slots and children rather than a long list of rigid attributes or properties.

What frameworks does the Component Authoring skill support?

This skill is framework-agnostic and applies to any UI technology including React, Vue, HEEX (Phoenix), Web Components, and Svelte.

Can this skill help refactor existing components?

Yes, it acts as a design reviewer to identify ambiguous sources of truth, simplify deep hierarchies, and surface hidden constraints in your current code.

Why does it emphasize 'intent' over 'implementation'?

Focusing on intent (e.g., 'watch-toggle' vs 'red-button') ensures that your component API remains stable and semantically clear even if the visual style changes.

Component Architecture & Design

Name: Component Architecture & Design
Author: nocksock

bynocksock

•

Design Tools

Applies robust architectural principles to create composable, flexible, and maintainable UI components across any frontend framework.

This skill guides the creation of UI components by prioritizing semantic intent over implementation details. It enforces industry best practices such as composition over configuration, explicit ownership of layout and state, and the strict separation of content slots from state attributes. By treating Claude as a design reviewer, it helps developers build scalable design systems that avoid common pitfalls like deep nesting, leaky abstractions, or ambiguous sources of truth, resulting in cleaner and more predictable codebases.

Key Features

011 GitHub stars

02Pattern enforcement for composition over complex configuration

03Event design focused on consumer intent rather than mechanical triggers

04Intent-based naming strategies to improve API semantics

05Strict separation between authored content (slots) and state/logic (attributes)

06Guidance for creating controlled components and deterministic rendering

Use Cases

01Designing robust API boundaries for React, HEEX, or Web Component libraries

02Refactoring monolithic UI components into small, composable primitives

03Building a cross-framework design system with consistent and reusable API patterns

Key Features

011 GitHub stars

02Pattern enforcement for composition over complex configuration

03Event design focused on consumer intent rather than mechanical triggers

04Intent-based naming strategies to improve API semantics

05Strict separation between authored content (slots) and state/logic (attributes)

06Guidance for creating controlled components and deterministic rendering

Use Cases

01Designing robust API boundaries for React, HEEX, or Web Component libraries

02Refactoring monolithic UI components into small, composable primitives

03Building a cross-framework design system with consistent and reusable API patterns