lynx-family
12 verified skills1,010 total stars
packages/lynx-ui-popover
# Lynx UI Popover SKILL `lynx-ui-popover` is a headless primitive for building accessible, positioned floating elements. It handles the complex logic of positioning, stacking context, and enter/exit animations via `usePresence`. ## 1. Core Capabilities - **Headless & Composable**: Provides raw functional components (`Root`, `Trigger`, `Positioner`, `Content`) that you compose to build custom UIs. - **Auto Positioning**: The `PopoverPositioner` automatically calculates coordinates to anchor th
development105
packages/lynx-ui-dialog
# lynx-ui-dialog SKILL `Dialog` is a dialog component, used to display important information or require user interaction, interrupting the current workflow. `lynx-ui-dialog` is a composite component built on `primitives`, offering high flexibility and customizability. ## 1. Core Capabilities - **Composite Component Structure**: Composed of `DialogRoot`, `DialogView`, `DialogBackdrop`, `DialogContent`, `DialogTrigger`, and `DialogClose`, allowing for free assembly of the dialog's structure. -
development105
packages/lynx-ui-sortable
# lynx-ui-sortable SKILL `Sortable` is a headless drag-to-reorder list primitive for ReactLynx. It performs reordering on the main thread for smooth, gesture-driven animations and exposes a composable `SortableRoot` / `SortableItem` / `SortableItemArea` API. For massive datasets, prefer `List` or `FeedList`; `Sortable` targets small to medium reorder-able lists. ## 1. Core Capabilities - **Headless Composition**: Three building blocks — `SortableRoot`, `SortableItem`, and (optional) `Sortable
development105
packages/lynx-ui-sheet
# lynx-ui-sheet SKILL ## What It Is `lynx-ui-sheet` is a headless Sheet primitive for ReactLynx. It supports bottom-sheet semantics and side-drawer semantics through the same composition model, state model, drag handling, backdrop, and snap-point APIs. Use it when a UI needs a dismissible panel that slides from an edge of the viewport and may be controlled by refs, external state, snap points, or drag gestures. ## Building Blocks - **`SheetRoot`**: Owns visibility state, side, snap points,
development105
packages/lynx-ui-feed-list
# lynx-ui-feed-list SKILL `FeedList` is a high-performance feed stream list component, built upon `List`. It encapsulates common feed scenarios such as **pull-to-refresh** and **load more**, allowing developers to quickly build feed list pages. Note: Use `FeedList` only when you need pull-to-refresh and load-more behaviors. For regular virtual lists without these features, prefer using `List` directly. ## 1. Core Capabilities - **High-Performance Virtual List**: Inherits all the performance
development97
packages/lynx-ui-list
# lynx-ui-list SKILL ## 1. Core Capabilities - **Virtual Scrolling**: **List** and **FeedList** is the **only two** scroll container that can only renders visible items, ensuring smooth scrolling performance even with **massive** amounts of data. If the count of children has more than 10 items, you **MUST** use **List** or **FeedList**. - **Multiple Layouts**: Supports three layout modes: `single` (single-column list), `flow` (multi-column grid layout), and `waterfall` (multi-column waterfall
data-ai97
packages/lynx-ui-scroll-view
# lynx-ui-scroll-view SKILL `ScrollView` is a general-purpose scroll container used to display content that exceeds the viewport in either vertical or horizontal direction. For massive datasets, prefer `List` or `FeedList` to ensure performance. ## 1. Core Capabilities - **Vertical and Horizontal Scrolling**: Supports vertical (`scrollOrientation = 'vertical'`) and horizontal (`scrollOrientation = 'horizontal'`) scrolling. - **BounceableOptions**: Supports edge rubber-band and bounce effects,
data-ai71
LazyComponent
Provide the information about the `<LazyComponent>`. Show the common use cases, basic usage, and critical development Advises.
development71
packages/lynx-ui-button
# lynx-ui-button SKILL `Button` is a member of the `lynx-ui` atomic library. It provides an unstyled, fully functional button "skeleton", focusing on handling interaction behaviors and accessibility. ## 1. Core Capabilities Unlike `lynx-ui-button`, which is a high-level component providing complete styling and multiple variants, the goal of `Button` is to: - **Provide core button behavior**: Encapsulates `onClick` events, `disabled` state, and the active state during press (`active` state).
tools71
packages/lynx-ui-slider
# lynx-ui-slider SKILL `lynx-ui-slider` is a primitives-first slider package for ReactLynx. It provides composable building blocks (`SliderRoot`, `SliderTrack`, `SliderIndicator`, `SliderThumb`). ## 1. Core Capabilities - **Primitives Composition**: Build slider UI with `SliderRoot` + `SliderTrack` + `SliderIndicator` + `SliderThumb`. - **Shared Base Props**: All primitives inherit `className` and `style` from `ComponentBasicProps`. - **Controlled & Uncontrolled Modes**: Use `value` + `onValu
development71
packages/lynx-ui-swiper
# lynx-ui-swiper SKILL `Swiper` is a high-performance, fully customizable carousel. It supports horizontal swiping, looping, auto-play, RTL, edge bounces, and both built-in and custom layouts/animations. This guide is written for AI code agents to generate correct, production-ready code with minimal back-and-forth. ## 1. Core Capabilities - Horizontal swipe with inertial paging and configurable `duration` and easing - Looping with `loop` and `loopDuplicateCount` - Auto Play with `autoPlay` an
development71
tools/make-new-component/template
# Skill Description of skills.
tools41