React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…
Bklit UI charts and data visualization for any project using the @bklit shadcn registry. Install, compose, theme, and animate charts correctly. Triggers when working with @bklitui/ui/charts, @bklit components, data visualization, dashboards, or chart theming. Also invoke manually for chart tasks.
Keep www-sacred's TypeScript fast to type-check and fast to run. Use when touching the ASCII/canvas animation components (the only real per-frame code here), tightening type-check wall-clock, or auditing a change for runtime or compiler regressions. Scoped to this repo — a React 19 / Next.js 16 component library plus…
Take a sacred React component (or a sacred screen that mirrors a Simulacrum CLI surface) and graft it into a foreign React codebase that already ships its own design system, build pipeline, and CSS toolchain — without breaking the host or polluting it with sacred-specific globals.
Use SDK with React, Vue, Svelte, Solid, Preact, and Web Components. sdkReady callback pattern, reactive props, and framework-specific setup. Load this skill when embedding LiveCodes in a framework application.
Choose, inspect, install, and compose licensed beUI Pro premium React blocks from the authenticated shadcn registry. Use when building or improving landing pages with beUI Pro, installing @beui-pro items, selecting premium heroes, features, pricing, social proof, CTAs, navigation, footers, or other page sections, or…
Pick and install beUI (@beui) animated React components from the shadcn registry. Use when building motion UI, agent/chat interfaces, toasts, docks, bottom sheets, drawers, popovers, sliders, loaders, 404 pages, or any beui.dev component. Maps user intent to exact @beui install slugs instead of inventing custom…
Set up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a…
Incrementally upgrade React Native Storybook across the supported migration paths. Use when upgrading @storybook/react-native projects from 5.3.x to 6.5.x, 6.5.x to 7.6.x, 7.6.x to 8.3.x, 8.x to 9.x, or 9.x to 10.x. Detect the currently installed Storybook version, choose only the next migration step, update…
Create and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native components, configuring Storybook addons (controls, actions, backgrounds, notes), setting up argTypes, decorators, parameters, or working with portable stories for…
Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion. Use when adding toast/notification UI to a React app (success/error/warning/info/promise toasts), or when the user mentions goey-toast / gooey toast.
Use to implement, configure, and troubleshoot Highcharts in React projects. Trigger for Highcharts-related chart or data visualization work — when in doubt, use this skill if Highcharts is a candidate.
A React coding guideline that avoids direct use of useEffect, a feature for responding to changes in data or the page. It recommends other patterns instead.
End-to-end SEED component implementation guide for React Web, Lynx, and cross-platform work. Use when adding or changing components across rootage, qvism, react/lynx packages, registry snippets, docs, examples, or when writing/refactoring docs/stories Storybook files. Story-only work follows a CSF Next fast path…
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…
Use this skill when the user is working with LyteNyte Grid (@1771technologies/lytenyte-pro or @1771technologies/lytenyte-core), a headless React data grid. Activate for tasks like: installing or licensing LyteNyte Grid, configuring columns or rows, building cell renderers or editors, adding filters or sort controls…
Use when working in the Cali repository or when you need to run, extend, or debug the Cali CLI for mobile React Native and Expo workflows. Covers Cali commands (qa, review, perf-review, dev), the shared cali-context.json contract, local mode selection, required local CLIs, provider setup, and CI integration patterns.
Build a full-stack TanStack Start app on Cloudflare Workers from scratch — SSR, file-based routing, server functions, D1+Drizzle, better-auth, Tailwind v4+shadcn/ui. Use whenever the user mentions TanStack Start, asks to scaffold a full-stack Cloudflare app with SSR, wants an SSR dashboard, or asks for a React 19 +…
Use when finishing a feature, fixing a bug, before committing React code, or when the user types /doctor, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.
MUST activate when the user wants to build, create, or generate a React application, React app, web application, single-page application (SPA), or frontend application — even if no project files exist yet. MUST also activate when the project contains a uiBundles//src/ directory or sfdx-project.json and the prompt says…