zustand: Use for Zustand stores: list/detail splits, state type sources, slices, actions, reducers, selectors, optimistic updates and class-action composition.; react: Use for TSX components, UI libraries, styling, state locality, layout, render performance and memoization.; typescript: Use for TypeScript style and type safety when editing TS/TSX/MTS, including imports, async code and error suppression.; drizzle: Use for Drizzle schemas and queries: tables, indexes, relations, joins and inferre…
Updated 2026-09-20 04:56:13 +08:00
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…
Updated 2026-09-19 07:11:22 +08:00
Build terminal UIs with OpenTUI. Covers Core, frameworks, components, application APIs, testing, extensions, integrations, deployment, and public API lookup.
Updated 2026-09-19 01:26:04 +08:00
heroui-react: HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing…; heroui-native: HeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when building mobile UIs with HeroUI Native — creating Buttons, Cards,…; heroui-migration: HeroUI v2 to v3 migration guide for agents. Use when migrating HeroUI v2 apps to v3, upgrading components, or accessing migration documentation.…
Updated 2026-09-18 18:55:01 +08:00
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand,…
Updated 2026-09-14 19:03:22 +08:00
hyperframes-cli: Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes,…; hyperframes: Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo,…; hyperframes-registry: Search, install, and wire registry blocks and components into HyperFrames compositions. Use BEFORE hand-building any named visua…
Updated 2026-09-14 15:47:29 +08:00
Use when the user's task involves Ant Design (antd) — writing antd components, debugging antd issues, querying antd APIs/props/tokens/demos, migrating between…
Updated 2026-09-14 15:04:36 +08:00
nuxt: Nuxt application development and maintenance. Use for project structure, pages and routing, data fetching, SSR-safe state, middleware, plugins, server routes,…; vue: Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best…; reka-ui: Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled…; nuxt-ui:…
Updated 2026-09-14 14:11:27 +08:00
react: React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating…; core: Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating…; codegen: Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for…; m…
Updated 2026-09-14 10:57:45 +08:00
chakra-ui-builder: Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable…; chakra-ui-refactor: Review, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for issues, convert plain HTML/CSS,…; chakra-ui-migrate: Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compo…
Updated 2026-09-14 08:42:06 +08:00
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices…
Updated 2026-09-14 05:20:28 +08:00
shadcn: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context,…; shadcn: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context,…; migrate-radix-to-base: Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix prim…
Updated 2026-09-12 21:26:35 +08:00
understand: Analyze a codebase to produce an interactive knowledge graph for understanding architecture, components, and relationships; understand-dashboard: Launch the interactive web dashboard to visualize a codebase's knowledge graph; understand-explain: Use when you need a deep-dive explanation of a specific file, function, or module in the codebase; understand-chat: Use when you need to ask questions about a codebase or understand code using a knowledge graph; understand-onboard: Use when…
Updated 2026-09-12 13:31:43 +08:00
Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and…
Updated 2026-09-12 03:59:33 +08:00
convex-quickstart: Get a barebones Convex + web template running from a one-sentence idea.; convex-create-component: Builds reusable Convex components with isolated tables and app-facing APIs. Use for new components, reusable backend modules, integrations, or component…; convex-performance-audit: Audits Convex performance for reads, subscriptions, write contention, and function limits. Use for slow features, insights findings, OCC conflicts, or read…; convex-setup-auth: Sets up Convex auth, ide…
Updated 2026-09-10 00:33:07 +08:00
Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering…
Updated 2026-09-10 00:05:35 +08:00
coss: Helps implement coss UI components correctly. Use when building UIs with coss primitives and patterns (buttons, dialogs, selects, forms, menus, tabs, segmented…; coss-particles: Index of all COSS UI particle examples. Use when implementing UI features to find copy-paste-ready component patterns built on coss primitives. Each particle…
Updated 2026-09-08 22:51:21 +08:00
Helps coding agents integrate and work with the Tiptap rich text editor. Use when building or modifying a rich text editor with Tiptap, installing Tiptap…
Updated 2026-09-08 15:43:14 +08:00
uniwind: Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames.…; migrate-nativewind-to-uniwind: Migrate a React Native project from NativeWind to Uniwind. Use when the user wants to replace NativeWind with Uniwind, upgrade from NativeWind, switch to…
Updated 2026-09-04 18:11:18 +08:00