Frontend
1,029 skills.
Browse
no-use-effectalejandrobailoALWAYS ACTIVE. Enforces a strict no-direct-useEffect rule in React and React Native code. Never write useEffect directly — use derived state, event handlers, useMemo, useSyncExternalStore, data-fetching libraries, key-based resets, or useMountEffect instead. Triggers on all React component code: writing new components, editing existing ones, reviewing code, fixing bugs, or refactoring. Also triggers when user mentions useEffect, side effects, data fetching, state sync, or component lifecycle.angular-best-practices-materialalfredoperezAngular Material and CDK best practices. Covers selective imports, M3 theming, CDK utilities, and component test harnesses. Activates when working with @angular/material and @angular/cdk. Do not use for PrimeNG, Spartan UI, or other component libraries. Install alongside angular-best-practices for full coverage.angular-best-practices-ngrxalfredoperezNgRx state management best practices for Angular. Covers pure reducers, action groups, entity adapter, selectors, and signal-based selection. Activates when working with @ngrx/store, @ngrx/effects, and @ngrx/entity. Do not use for Akita, NGXS, or standalone signal-based state. Install alongside angular-best-practices for full coverage.angular-best-practices-primengalfredoperezPrimeNG best practices for Angular. Covers tree-shaking imports, lazy-loaded tables, and the Aura/Lara theme system with design tokens. Activates when working with primeng components. Do not use for Angular Material, Spartan UI, or other component libraries. Install alongside angular-best-practices for full coverage.angular-best-practices-signalstorealfredoperezNgRx SignalStore best practices for Angular. Covers shared state, computed state, entity management, and RxJS integration with rxMethod. Activates when working with @ngrx/signals and @ngrx/signals/entities. Do not use for NgRx Store or class-based state services. Install alongside angular-best-practices for full coverage.senior-frontendalirezarezvaniFrontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.vercel-react-best-practicesam-willReact 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 improvements.rechartsandy-spikeBuild composable, responsive React charts with Recharts library. Use when creating data visualizations including line charts, area charts, bar charts, pie charts, scatter plots, and composed charts. Handles chart customization, responsive sizing, tooltips, legends, axes configuration, performance optimization, and accessibility.reference-signal-formsangularExplains the mental model and architecture of the code under `packages/forms/signals`. You MUST use this skill any time you plan to work with code in `packages/forms/signals`antv-g6-graphantvisUse this skill whenever the user wants to create, customize, or troubleshoot G6 v5 graph/network visualizations. Triggers include: any mention of 'G6', 'antv g6', '@antv/g6', 'G6 graph', 'G6 图', '网络图', '关系图', '拓扑图', '树形图', '流程图', '思维导图', '鱼骨图', '力导向图', 'force graph', 'network visualization', 'node-edge diagram', 'graph layout', 'tree layout', 'dagre layout', 'mindmap', 'social network', or requests about G6 node styles, edge types, behaviors, plugins, layouts, combos, or data structures. Also usantv-x6-editorantvisUse this skill whenever the user wants to create, customize, or troubleshoot X6 v3 graph editor diagrams. Triggers include: any mention of 'X6', 'antv x6', '@antv/x6', 'X6 editor', 'X6 图编辑', '流程图', 'DAG', 'ER图', '实体关系图', '血缘图', '组织架构图', 'UML类图', 'flowchart', 'DAG diagram', 'ER diagram', 'lineage graph', 'org chart', 'network topology', 'stencil', 'drag-and-drop editor', 'port connection', 'node port edge', 'graph editor', 'diagram editor', or requests about X6 node/edge styling, plugins (Selectifrontend-slides-editablearchlizhengUse when the user wants a single-file HTML presentation that stays editable in the browser after generation, or needs object-level layout editing, slide reordering, local save/export, or PPT/PDF-to-web conversion with continued editing.elementsassistant-uiInstalls and customizes assistant-ui elements, the styled shadcn-style component catalog served from the r.assistant-ui.com registry through `npx assistant-ui@latest add <item>`. Use when adding a prebuilt chat surface or widget (Thread, ThreadList, AssistantModal, AssistantSidebar, ToolFallback, ToolGroup, MarkdownText, Reasoning, Sources, Attachment, ModelSelector, Voice orb, McpConfig) or one of the 120 standalone elements (approval card, agent plan, code diff, data table, chart, and so on), generative-uiassistant-uiLets the model compose interfaces at runtime from a component vocabulary instead of one hand-written component per tool, and covers every generative UI pattern in the framework. Use for the model-driven present tool: JSONGenerativeUI, defaultGenerativeUILibrary, and present({ display }) from @assistant-ui/react-generative-ui, registered through AuiConfig({ tools: Tools({ toolkit }) }). Also covers the backend-driven MessagePrimitive.GenerativeUI primitive and its component allowlist, the Slack Binkassistant-uiBuilds terminal chat UIs with @assistant-ui/react-ink and ANSI markdown with @assistant-ui/react-ink-markdown. Use when scaffolding `create --ink`, mounting `AssistantRuntimeProvider` around `useChatRuntime`, composing `ThreadPrimitive`, `ComposerPrimitive`, `MessagePrimitive`, `LoadingPrimitive`, `TextInput`, thread history, attachments, notifications, and terminal keyboard navigation, or when a chat needs grapheme safe editing, multiline display columns, an absolute backend URL, local file stotool-uiassistant-uiFind, install, configure, and integrate Tool UI components in React apps using shadcn registry entries, compatibility checks, scaffolded runtime wiring, toolkit setup with assistant-ui, and troubleshooting workflows. Use when developers ask to add one or more Tool UI components, choose components for a use case, verify compatibility, wire a toolkit in a codebase, or integrate Tool UI payloads into assistant-ui or an existing chat/runtime stack.state-managementasyrafhussinReact Query and Zustand patterns for state management. Use when implementing data fetching, caching, mutations, or client-side state. Triggers on tasks involving useQuery, useMutation, Zustand stores, caching, or state management.tailwind-best-practicesasyrafhussinTailwind CSS patterns and conventions. Use when writing responsive designs, implementing dark mode, creating reusable component styles, configuring Tailwind, or migrating from v3 to v4. Triggers on tasks involving Tailwind classes, responsive design, dark mode, CSS styling, or "migrate to Tailwind v4".typescript-react-patternsasyrafhussinTypeScript best practices for React development. Use when writing typed React components, hooks, events, refs, or generic components. Triggers on tasks involving TypeScript errors, type definitions, props typing, or type-safe React patterns.css-nativeathevonZero-dependency animations and visual techniques - scroll-driven, View Transitions, @starting-style, modern CSS.framer-motionathevonFramer Motion / Motion sub-skill - AnimatePresence, layout animations, gestures, motion values.gsapathevonGSAP animation engine sub-skill - core, timeline, ScrollTrigger, plugins.threejs-r3fathevonThree.js and React Three Fiber sub-skill - 3D scenes, shaders, postprocessing.wp-block-themesautomatticUse when developing WordPress block themes: theme.json (global settings/styles), templates and template parts, patterns, style variations, and Site Editor troubleshooting (style hierarchy, overrides, caching).figma-codegenawdr74100Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a Figma design turned into code — e.g. 'code this design', 'implement this frame', 'build this screen/component', 'turn this Figma into React/Vue', 'convert this design to code' — or wMake Bot UIbacknotpropUse when building a custom UI (page, dashboard, buttons) that should wake a Grok Bot over a webhook, when the user must provide a webhook sender key, or when exposing that UI on Tailscale.gsap-reactbbeierle12GSAP integration with React including useGSAP hook, ref handling, cleanup patterns, and context management. Use when implementing GSAP animations in React components, handling component lifecycle, or building reusable animation hooks.gsap-scrolltriggerbbeierle12Scroll-based animations using GSAP ScrollTrigger plugin including pinning, scrubbing, snap points, and parallax effects. Use when creating scroll-driven animations, sticky sections, progress indicators, or parallax scrolling experiences.ss-feedbackbitjaruAdd appropriate user feedback states (loading, success, error, empty) to a component or pagebklit-playgroundbklitDEPRECATED — use bklit-studio instead. Local /playground is no longer the chart development workflow for bklit-ui contributors.bklit-shipbklitbklit-ui monorepo contributors only — ship a chart or component from Studio prototype to production in packages/ui with docs and registry.bklit-studiobklitbklit-ui monorepo contributors only. Use automatically when building or editing charts, tuning props/animation, or prototyping in Studio (/studio). Replaces the deprecated local /playground route.bklit-studio-chart-performancebklitReusable Studio chart performance audit and fix workflow. Use when a chart feels sluggish in /studio (pan, slider ticks, legend hover) but siblings like pie-chart feel fine.bklit-uibklitBklit 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.ratatui-tuiblacktopBuild terminal UIs with ratatui following 2026 Rust best practices. Use when: (1) Creating new TUI apps, (2) Adding widgets/layouts, (3) Keyboard navigation/state management, (4) Image integration via ratatui-image, (5) Async event handling, (6) Shimmer/loading animations via tui-shimmer, (7) Reviewing TUI code, (8) Release optimization. Covers v0.30.1 API, Elm Architecture, StatefulWidget, color-eyre.w-debug-browserblockmaticReproduce and resolve an authorized browser issue using runtime evidence.w-formblockmaticBuild a Next.js form using the app's existing mutation path, not a second stack.w-shadcnblockmaticInstall shadcn/w-ui primitives in the shared UI package using monorepo import paths.daisyuibobmatnycTailwind CSS component library providing semantic class names for 50+ components with built-in themes, dark mode, and customization for rapid UI development.sveltekitbobmatnycSvelteKit - Full-stack Svelte framework with file-based routing, SSR/SSG, form actions, and adapters for deploymenttanstack-querybobmatnycTanStack Query (React Query) for asynchronous server-state management with automatic caching, background refetching, optimistic updates, and pagination in React applications.web-performance-optimizationbobmatnycOptimize web performance using Core Web Vitals, modern patterns (View Transitions, Speculation Rules), and framework-specific techniqueswordpress-block-editor-fsebobmatnycModern WordPress block development and Full Site Editing with theme.json, block themes, and custom blocks for WordPress 6.7+zustandbobmatnycMinimal, unopinionated state management library for React with simple hook-based API, no providers, and minimal boilerplate for global state without Redux complexity.angular-best-practicesboise-state-developmentAngular 21 development with modern best practices including signals, standalone components, reactive patterns, and accessibility. Use when creating Angular components, services, templates, or performing any Angular frontend development work. Covers TypeScript strict typing, signal-based state management, reactive forms, lazy loading, ng-icon setup, and Tailwind styling.animejsbowtiedswanComprehensive skill for Anime.js v4 - a fast and flexible JavaScript animation library. This skill should be used when implementing web animations, creating timelines, working with SVG animations, scroll-based animations, draggable elements, staggered effects, or any JavaScript-based animation on the web. Triggers on: "anime.js", "animejs", "animate elements", "CSS animation with JS", "timeline animation", "stagger animation", "SVG morphing", "motion path", "scroll animation", "draggable", "spriframer-motion-gesturesc-jerilOfficial Framer Motion skill for gesture animations — drag, pan, tap, hover, focus, touch animations. Use when building interactive elements with drag, pan, tap, hover, or touch gestures, or when asking about Framer Motion drag constraints, gesture handlers, or interactive animations.framer-motion-layoutc-jerilOfficial Framer Motion skill for layout animations — shared layout transitions, layoutId, exit animations, AnimatePresence. Use when building shared element transitions, layout animations, reorderable lists, or when asking about Framer Motion layout, layoutId, or shared transitions.framer-motion-reactc-jerilOfficial Framer Motion skill for React integration — AnimatePresence, motion components, useAnimation, layout animations. Use when building React animations, using AnimatePresence, Framer Motion with Next.js, or when asking about Framer Motion React patterns, cleanup, or SSR.framer-motion-scrollc-jerilOfficial Framer Motion skill for scroll-linked animations — useScroll, useTransform, scroll-triggered animations, parallax. Use when building scroll-driven animations, parallax effects, progress indicators, or when asking about Framer Motion scroll, useScroll, or scroll-linked animations.