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

component-styling

Applies cross-platform design-token styling rules to React and React Native components.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Styling components in a design system that ships to both web and React Native is error-prone: developers mix up platform mechanisms (Tailwind classes on RN files, useStyleSheet on web files), use raw values instead of design tokens, or break consumer style overrides with wrong merge order. This Skill enforces the correct styling conventions for each platform before code is written or reviewed. ## Core Features & Use Cases - Platform routing: Detects whether the touched file belongs to libs/ui-react or libs/ui-rnative and loads the matching styling reference (Tailwind + cva + cn for web, useStyleSheet + themeJS + lx for React Native). - Design token enforcement: Ensures colors, typography, spacing, and sizes come from the Lumen design system tokens rather than raw Tailwind palette classes or hardcoded literals. - Review checklist: Provides diff-verifiable checks such as dynamic classname concatenation, wrong data-attribute selectors for Base UI vs Radix primitives, and incorrect style merge order on React Native. - Use Case: When adding a new Button variant in libs/ui-react, load this Skill to declare the variant in cva with token-based classes instead of inline conditional strings. ## Quick Start Ask the assistant to style a new component in libs/ui-react or libs/ui-rnative following the Lumen component-styling conventions.

Frequently Asked Questions about component-styling

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

FAQPage Schema
How do I style a component in a React design system with Tailwind and cva?▼

Declare variant composition at the top of the file using cva with design-token classes, and merge conditional classes with the cn utility. Avoid raw Tailwind palette classes like text-gray-500 or arbitrary sizes like w-[108px]; use the design system's token utilities instead.

How do I style React Native components with a theme-based stylesheet?▼

Use useStyleSheet with a callback receiving the theme object t, which exposes colors, spacings, sizes, typographies, and border tokens. Extract large stylesheets into dedicated useXStyles hooks and merge conditional styles with StyleSheet.flatten.

What is the difference between Base UI and Radix data attributes for styling?▼

Base UI primitives use data-[open] and data-[closed] attributes, while Radix primitives use data-[state=open] and data-[state=checked]. Check the component's import source first, since applying the wrong attribute form is a consistency bug.

Can I use Tailwind classes in React Native components?▼

No. The React Native library has no Tailwind; it uses useStyleSheet with JS theme objects and the lx prop for layout overrides. Applying className to an RN file or useStyleSheet to a web file is always incorrect.

Why can't consumers override my React Native component styles?▼

The merge order is likely reversed. Internal styles must come first and the consumer's style prop last in StyleSheet.flatten([styles.root, style]), so the consumer wins. The reversed order silently blocks overrides.

When should I use cva versus inline classNames in React?▼

Use cva when there is variant composition or an element carries many classnames. For only one or two static classes, set them inline in the JSX rather than forcing a cva call.

Related Skills

Explore More Software Engineering Skills→
jaem1n207jaem1n207
18

tailwindcss

Set up and configure Tailwind CSS for responsive UI development.

Community
Intermediate
KajabiKajabi
26

sage-design-review

Enforce Sage design-system discipline on SCSS, tokens, and classnames.

Official
Intermediate
dylantarredylantarre
38

figma

Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.

Community
Intermediate
okatech-orgokatech-org

tailwind-styling

Apply Tailwind v3 styling patterns and design-system tokens across projects.

Community
Intermediate