LedgerHQ/lumen

LedgerHQ-Profil

Letzte erfasste Quellaktivität: 9. Oktober 2026 um 07:54

SkillsMP-Katalog aktualisiert: 26. Oktober 2026 um 11:37

gesammelte Skills: 17

GitHub-Stars: 23
GitHub-Forks: 5

README des Repositorys

README-Quelldatei: README.md

README-Quelldatei lesen

Vollständige README anzeigen

# Ledger Design System <h3 align="center">A cross-platform design system for React and React Native applications</h3> <p align="center"> <a href="https://ldls.vercel.app" target="_blank">📚 View Storybook</a> | <a href="https://github.com/LedgerHQ/lumen/releases">📋 Changelog</a> </p> --- ## 👩‍💻 Using Lumen in Your Project Lumen is a comprehensive design system that provides consistent UI components for both web and mobile applications. ### Quick Start 1. Install the packages and their peer dependencies: ```bash # Install the UI Kit and required peer dependencies npm install @ledgerhq/lumen-ui-react @ledgerhq/lumen-design-core class-variance-authority ``` 2. Configure Tailwind: In your main stylesheet, import Lumen's stylesheet alongside Tailwind. It registers Lumen's compiled components as a Tailwind source, so the utilities our components rely on end up in your CSS: ```css @import 'tailwindcss'; @import '@ledgerhq/lumen-ui-react/tailwind.css'; @config '../tailwind.config.ts'; ``` Then point your config at your own files and add the preset: ```typescript import type { Config } from 'tailwindcss'; import { ledgerLivePreset } from '@ledgerhq/lumen-design-core'; const config = { content: ['./src/**/*.{js,ts,jsx,tsx}'], // Your project's files presets: [ledgerLivePreset], // the installed tailwind preset } satisfies Config; export default config; ``` 3. Use components: ```bash # Install peer dependency related to the button component npm install @radix-ui/react-slot ``` `@radix-ui/react-slot`: This dependency is used internally by the Button component to enable flexible composition patterns. It allows the Button to merge its props with child elements when needed. ```tsx import { Button } from '@ledgerhq/lumen-ui-react'; function App() { return <Button appearance='accent'>Get Started</Button>; } ``` ### 🤖 AI Assistant Support Lumen includes AI rules to help assistants (Cursor, Claude, VS Code Copilot, etc.) suggest correct usage patterns. **For Cursor users**, add to your `.cursorrules`: ``` @node_modules/@ledgerhq/lumen-ui-react/ai-rules/RULES.md ``` **For other AI tools**, see our [AI Rules README](./libs/ui-react/ai-rules/README.md). The rules help with: - ✅ Correct import paths and package usage - ✅ Lumen design tokens instead of Tailwind defaults - ✅ Proper Tailwind configuration - ✅ Figma-to-code token mapping [View the rules →](./libs/ui-react/ai-rules/) --- ## 🛠 Contributing to Lumen Lumen is built with Nx, supporting both React and React Native development. Here's how to get started with development: ### Setup Development Environment 1. Clone and install dependencies: ```bash npm install --legacy-peer-deps ``` 2. Start development environment: ```bash # Start React Storybook npx nx run @ledgerhq/lumen-ui-react:serve:storybook # Build all libraries npx nx run-many --target=build --all ``` ### Project Structure ``` lumen/ ├── libs/ │ ├── ui-react/ # React components │ ├── ui-rnative/ # React Native components │ ├── design-core/ # Design tokens and themes │ ├── utils-shared/ # Shared utilities │ └── lint-plugin/ # ESLint and oxlint presets ├── internals/ # Dev-only Nx projects, never published │ └── sync-figma/ # Figma sync: tokens, symbols, code-syntax └── apps/ ├── app-sandbox-rnative # Demo React-Native application └── app-sandbox-react # Demo React application ``` ### Development Workflow 1. Create a new branch from main 2. Make your changes 3. Add tests and stories 4. Submit a pull request ### Learn More About Contributing - [🔧 Development Guide](./CONTRIBUTING.md) - Detailed development setup and guidelines - [📝 Coding Standards](./CONTRIBUTING.md#coding-standards) - Our coding conventions - [🧪 Testing Guide](./CONTRIBUTING.md#testing) - How to write and run tests - [📚 Documentation Guide](./CONTRIBUTING.md#documentation) - How to document your changes --- ## 📄 License This project is licensed under the MIT License - see the [LICENSE.md](./LICENSE.md) file for details. --- <p align="center"> Built with ❤️ by the LDS Team </p>

README des Repositorys wird geladen…

Skills in diesem Repository

Softwareentwickler Allgemeine Bürokräfte Netzwerk- und Computersystemadministratoren

3 Berufskategorien · 47% klassifiziert

Skill

Beruf

Beschreibung

Aktualisiert

pr-review

nicht klassifiziert

Review a PR or the current branch for a Lumen design-system change — routes each changed file to React (web/Tailwind) or React Native (useStyleSheet) guidelines, checks the Nx version plan, and reports a flat, severity-scored finding list. Use when the user…

Quellsprache: Englisch

2026-10-09

release-plan

nicht klassifiziert

Use when generating or editing an Nx version plan in .nx/version-plans/ — the bump type must always be `patch`, one package per file.

Quellsprache: Englisch

2026-10-09

code-connect

nicht klassifiziert

Creates and maintains Figma Code Connect files (`*.figma.tsx`) that map Figma components to code via the parser-based `figma.connect()` API. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update…

Quellsprache: Englisch

2026-10-08

component-mdx

nicht klassifiziert

Use when writing or editing Storybook MDX docs (*.mdx) — the two-tab Overview/Implementation structure, story-backed `<Source>` examples, and doc table guidelines.

Quellsprache: Englisch

2026-10-01

component-stories

nicht klassifiziert

Use when creating or editing Storybook stories (*.stories.tsx, React or React Native) — story layout, docs source type, controls, and export naming conventions.

Quellsprache: Englisch

2026-10-01

lumen-adoption-report

nicht klassifiziert

Use when asked to check Lumen version adoption across consumer repos, generate the Lumen adoption report, or find which repos are behind on a Lumen package version, or who owns those repos.

Quellsprache: Englisch

2026-09-30

component-styling

nicht klassifiziert

Use when building or styling a component in libs/ui-react or libs/ui-rnative — the cross-platform styling principles, plus routing to the platform mechanics: Tailwind + cva + cn on web, useStyleSheet + themeJS + lx on React Native. Load this before writing…

Quellsprache: Englisch

2026-09-24

component-testing

nicht klassifiziert

Use when writing or editing component tests in libs/ui-react or libs/ui-rnative — shared structure and coverage conventions, plus the per-platform runner: Vitest + React Testing Library on web, Jest + React Native Testing Library on RN. Load this before…

Quellsprache: Englisch

2026-09-24

figma-token-sync

nicht klassifiziert

Sync processed CSS design tokens with JavaScript theme objects for React Native. Use when aligning tokens after Figma sync, checking token consistency, or updating JS theme files manually.

Quellsprache: Englisch

2026-09-24

component-anatomy

Softwareentwickler

Use when creating, naming, or placing a file or folder in libs/*, or when modifying or adding a file to an existing component (even when the barrel isn't touched) — component vs utility naming, the one-responsibility-per-file layout, when a folder needs an…

Quellsprache: Englisch

2026-09-04

component-architecture

Softwareentwickler

Use when designing or changing a component's public API, its composition, or its state model in libs/ui-react or libs/ui-rnative — layering (core vs internal vs primitives), BaseProps/Props splits, converting a component to compound / changing its composition…

Quellsprache: Englisch

2026-09-02

figma-to-code

Softwareentwickler

Use when implementing or updating a component from a Figma link — how to turn the Figma design variables into code tokens, on both platforms: Tailwind classnames for libs/ui-react and themeJS (`t.*`) paths for libs/ui-rnative. For the full token catalogues…

Quellsprache: Englisch

2026-08-20

nx

Netzwerk- und Computersystemadministratoren

Nx workspace commands and guidelines for running tasks, generators, and using Nx MCP tools

Quellsprache: Englisch

2026-08-20

open-pr

Softwareentwickler

Open a PR from the current branch to `main`: commit if needed, ensure an Nx version plan exists, push, and create the PR with a filled-in description and testing steps. Run only when the user explicitly asks to open/create a PR.

Quellsprache: Englisch

2026-08-20

release-notes-slack

Allgemeine Bürokräfte

Turn raw Lumen release content (a dump of the LedgerHQ/lumen GitHub Releases page) into one minimalist Slack announcement, drafted to #lumen-releases. Use whenever the user pastes one or more `@ledgerhq/lumen-*` package releases, a chunk of the Releases page,…

Quellsprache: Englisch

2026-08-20

context7

Softwareentwickler

Use when researching external libraries/frameworks (React, Radix, Tailwind, etc.) — reach for the Context7 MCP to get up-to-date docs. Not for internal codebase or design-system-token questions.

Quellsprache: Englisch

2026-07-29

disabled-context

Softwareentwickler

Use when a component has a `disabled` state/variant, or when building a compound component that owns a disabled state — inherit/provide it via the shared disabled context so state flows from parent to sub-components.

Quellsprache: Englisch

2026-07-29

Es werden 17 von 17 gesammelten Skills angezeigt.

Mit einem KI-Assistenten installieren

Diesen Prompt kopieren und in den verwendeten KI-Assistenten einfügen.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/LedgerHQ/lumen.