skills.rest
LedgerHQ
LedgerHQOFFICIAL
Explore all skills by this author →
WebsiteGitHub

component-architecture

Guides component API design, layering, and composition patterns for Lumen React and React Native libraries.

23|5|Updated Apr 3, 2025
Search Tags:#code review#react#design system#react native#compound components#component api#controlled state
One-click install
npx skills add https://github.com/LedgerHQ/lumen --skill component-architecture-ledgerhq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-architecture
Source: https://github.com/LedgerHQ/lumen/tree/main/.claude/skills/component-architecture
Command: npx skills add https://github.com/LedgerHQ/lumen --skill component-architecture-ledgerhq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing or changing a component's public API in the Lumen design system requires consistent decisions about layering, prop naming, state management, and cross-platform parity. Without shared conventions, components drift into inconsistent vocabularies, duplicated logic, and mismatched web/native APIs. ## Core Features & Use Cases - Layering guidance: Defines when code belongs in core/, internal/ (Base* wrappers), primitives/ (React Native), or symbols/, with rules against premature abstraction. - Composition patterns: Prescribes createSafeContext for compound components, useControllableState for controlled/uncontrolled state, and BaseProps-to-public-Props type splits. - API design rules: Enforces established prop vocabulary (appearance not variant), positive booleans, JSDoc conventions, and cross-platform parity between libs/ui-react and libs/ui-rnative. - Use Case: When adding a new size prop to Button or converting Card into a compound component, load this skill to match the existing architecture and pass its review checklist. ## Quick Start Ask the assistant to design the public API and composition for a new component in libs/ui-react following the component-architecture conventions.

Frequently Asked Questions about component-architecture

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

FAQPage Schema
How do I design a compound component with shared context in React?▼

Build compound components like Card by exporting each sub-part from the folder barrel and sharing state through createSafeContext from @ledgerhq/lumen-utils-shared, not a hand-rolled createContext. Use contextRequired: false for sub-parts that may render standalone.

How to support controlled and uncontrolled state in a React component?▼

Use useControllableState with prop, defaultProp, and onChange arguments instead of hand-rolling a value ?? internalState fallback. Expose the trio on the public API, such as checked, defaultChecked, and onCheckedChange.

When should I create a Base component wrapper in a design system?▼

Create a Base* wrapper in internal/ only when a second public component shares the same chrome, variants, or behaviour, such as BaseButton backing Button and IconButton. Do not pre-abstract for a single consumer.

Should React and React Native components keep the same prop names?▼

Yes, matching prop names, defaults, and variant vocabulary should be kept across platforms so app authors do not relearn the API. Divergence is tolerated only for platform idioms, like Switch using checked on native versus selected on web.

When is React.memo appropriate in a component library?▼

Lumen does not blanket-memoize; React.memo is reserved for components with a measured re-render cost. useMemo and useCallback are used only where there is real work like layout math or expensive derived styles, not reflexively.

Related Skills

Explore More Software Engineering Skills→
adbertramadbertram

prowler-ui

Enforce Prowler UI component structure and styling with shadcn/ui and Tailwind.

Community
Intermediate
Asygnuz-S-A-SAsygnuz-S-A-S

tailwind-design-system

Build component libraries and design tokens with Tailwind CSS v4 CSS-first configuration.

Official
Intermediate
EndavaEndava
160

review-component

Review BEEQ StencilJS components against design system standards.

Official
Advanced
JewelsHovanJewelsHovan

shadcn-ui-best-practices

Enforce shadcn-ui best practices for React and TypeScript projects.

Community
Basic