Frontend skills

This skill guides adding or modifying Next.js experimental feature flags end-to-end, covering type declarations, zod schemas, build-time injection, and runtime

This skill guides implementing oRPC contract-first API patterns in the Dify frontend, from contract creation to router registration and typed service hooks.

This skill helps reduce frontend component complexity by extracting hooks, subcomponents, and data logic for maintainable, testable React code.

This skill helps you review frontend code efficiently by inspecting pending changes or targeted files using a comprehensive checklist for quality, performance,

This skill helps you manage and apply shadcn/ui components and presets across projects, providing docs, usage examples, and consistent styling.

This skill helps you write fast, reliable tests with Vitest by leveraging Vite, Jest-compatible API, and smart coverage.

This skill runs Playwright e2e tests for the Studio app from the e2e/studio directory, enabling targeted and repeatable UI verification.

This skill helps you automate local web app testing with Playwright, manage servers, capture screenshots, and inspect dynamic pages for reliable UIs.

This skill helps you build complex Claude AI HTML artifacts using React, Tailwind, and shadcn/ui with bundling into a single reusable file.

This skill helps you create original algorithmic art with seeded randomness and interactive parameter exploration using p5.js.

This skill helps you design production-grade frontend interfaces with bold aesthetics and polished code for components, pages, and apps.

This skill guides data fetching architecture using a service layer, Zustand store, and SWR to optimize API calls and state management.

This skill guides you to implement and open imperative modals with createModal from @lobehub/ui, boosting modal UX consistency.

This skill helps you design efficient Zustand stores by separating list and detail data, using maps for details, and defining clear type boundaries.

This skill helps you efficiently access and manage recently used topics, resources, and pages with session-store guidance and type-safe patterns.

This skill helps you explore a TypeScript monorepo by summarizing project structure, architecture, and key components for quick onboarding.

This skill guides adding keyboard shortcuts and hotkeys, helping implement, register, and document keyboard interactions across features.

This skill helps you implement and manage Electron desktop features, IPC handlers, and windowing by following clear architectural patterns.

This skill guides you through i18n tasks using react-i18next in React/TypeScript, helping create keys, manage locales, and implement translations.

This skill guides Zustand state management for store code, actions, and slices, improving state reliability and developer productivity.

This skill guides React component development using @lobehub/ui, routing tactics, and style decisions to accelerate frontend features.