Frontend
1,029 skills.
Browse
react-composition-patternssecondskyReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture.responsive-web-designsecondskyBuilds adaptive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach. Use when creating multi-device layouts, implementing flexible UI systems, or ensuring cross-browser compatibility.tanstack-routersecondskyTanStack Router type-safe file-based routing for React. Use for SPAs, TanStack Query integration, Cloudflare Workers, or encountering devtools, type safety, loader, Vite bundling errors.tanstack-tablesecondskyTanStack Table v8 headless data tables with server-side features for Cloudflare Workers + D1. Use for pagination, filtering, sorting, virtualization, or encountering state management, TanStack Query coordination, URL sync errors.threejssecondskyThree.js 3D graphics library - scene setup, geometry, materials, lighting, textures, animation, loaders, shaders, postprocessing, interaction. Use when building 3D web experiences, creating WebGL visualizations, working with GLTF models, implementing custom shaders, or adding interactive 3D elements to web applications.web-performance-auditsecondskyWeb performance audits with Core Web Vitals, bottleneck identification, optimization recommendations. Use for page load times, performance reviews, UX optimization, or encountering LCP, FID, CLS issues, resource blocking, render delays.web-performance-optimizationsecondskyOptimizes web application performance through code splitting, lazy loading, caching strategies, and Core Web Vitals monitoring. Use when improving page load times, implementing service workers, or reducing bundle sizes.sap-fiori-toolssecondskyDevelops SAP Fiori applications using SAP Fiori tools extensions for VS Code and SAP Business Application Studio. Use when: generating Fiori Elements or Freestyle SAPUI5 applications, configuring Page Editor for List Report or Object Page, working with annotations and Service Modeler, setting up deployment to ABAP or Cloud Foundry, creating adaptation projects, using Guided Development, previewing with mock data or live data, configuring SAP Fiori launchpad, or using AI-powered generation with Psap-sac-custom-widgetsecondskySAP Analytics Cloud (SAC) Custom Widget development. Use when building custom visualizations, extending SAC with Web Components, or creating Widget Add-Ons. Covers JSON metadata, JavaScript Web Components, lifecycle functions, data binding with feeds, styling/builder panels, property/event/method definitions, third-party library integration, hosting, security, performance, and debugging. Includes Widget Add-On feature (QRC Q4 2023+) and templates for widgets, charts, and KPI cards.sapui5secondskyThis skill should be used when developing SAP UI5 applications, including creating freestyle apps, Fiori Elements apps, custom controls, testing, data binding, OData integration, routing, and troubleshooting. Use when building enterprise web applications with SAP UI5 framework, implementing MVC patterns, configuring manifest.json, creating XML views, writing controllers, setting up data models (JSON, OData v2/v4), implementing responsive UI with sap.m controls, building Fiori Elements apps, writxstateseed-hypermediaUse when designing, implementing, reviewing, or migrating XState v5 state machines, statecharts, actors, invoked services, @xstate/react hooks, or Stately diagrams in TypeScript, especially in a codebase that already imports xstate or @xstate/react.naive-uisepushUse when working with naive-ui components, or troubleshooting naive-ui usage issues.frontend-react-best-practicessergiodxaReact performance optimization guidelines. Use when writing, reviewing, or refactoring React components to ensure optimal rendering and bundle patterns. Triggers on tasks involving React components, hooks, memoization, or bundle optimization.frontend-tailwind-best-practicessergiodxaTailwind CSS patterns and conventions for frontend apps. Use when writing component styles, layouts, or working with CSS classes.migrate-radix-to-baseshadcn-uiMigrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.shadcnshadcn-uiManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".migrate-radix-to-baseshadcnMigrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.shadcnshadcnManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".angularsickn33Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.angular-best-practicessickn33Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.angular-state-managementsickn33Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.angular-ui-patternssickn33Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.avalonia-layout-zafirosickn33Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.avalonia-viewmodels-zafirosickn33Optimal ViewModel and Wizard creation patterns for Avalonia using Zafiro and ReactiveUI.avalonia-zafiro-developmentsickn33Mandatory skills, conventions, and behavioral rules for Avalonia UI development using the Zafiro toolkit.claude-d3js-skillsickn33This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js.frontend-mobile-development-component-scaffoldsickn33You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, sfrontend-ui-dark-tssickn33A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.nextjs-app-router-patternssickn33Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.react-best-practicessickn33Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Use when writing new React components or Next.js pages, implementing data fetching (client or server-side), or reviewing code for performance issues.react-modernizationsickn33Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.react-state-managementsickn33Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.threejs-skillssickn33Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements.web-artifacts-buildersickn33To build powerful frontend claude.ai artifacts, follow these steps:quasar-skilldskilld-devBuild, configure, and debug apps with the Quasar framework (`quasar` npm package, v2.33.1). Use when writing, reviewing, or debugging code that imports "quasar" or "quasar/wrappers", configuring Quasar with Vite, Vitest, Storybook, UMD, or Quasar CLI, styling with Quasar Sass variables, or upgrading between Quasar v2 releases.hebrew-rtl-best-practicesskills-ilImplement right-to-left (RTL) layouts for Hebrew web applications. Use when user asks about RTL layout, Hebrew text direction, bidirectional (bidi) text, Hebrew CSS, "right to left", or needs to build a Hebrew web UI. Covers CSS logical properties, the :dir() pseudo-class, Tailwind RTL, React/Next.js RTL setup, icon mirroring, Hebrew typography, and font selection. Do NOT use for Arabic RTL (similar but different typography) unless user explicitly asks for shared RTL patterns, or for native mobimuisoftaworksMaterial-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.weapp-tailwindcsssonofmagic协调 weapp-tailwindcss 全端任务并提供当前安全基线。Use when 用户泛化地询问 weapp-tailwindcss、Tailwind CSS in mini-programs、Web CLI、React Native 或 ReactLynx，或尚未明确是接入、迁移、排障、运行时、自定义构建还是原生跨端集成；具体任务优先路由到对应专用 skill。livewire-developmentspatieDevelops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior; writing Livewire tests; or when the user mentions Livewire, component, counter, or reactive UI.auditing-performancespencerpaulyAudit and optimize application performance, including bundle size, rendering, database queries, and Core Web Vitals.svelte-componentsspences10Svelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.svelte-runesspences10Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.sveltekit-data-flowspences10SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().sveltekit-remote-functionsspences10SvelteKit remote functions guidance. Use for query(), form(), command(), and prerender() patterns in .remote.ts files.sveltekit-structurespences10SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.beuistarc007Pick and install beUI (@beui) animated React components through public MCP or 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 widgets.xstate-v5statelyaiDesign, implement, review, and migrate XState v5 state machines and statecharts in TypeScript using modern v5 patterns. Use this whenever the user mentions XState, actors, state machines, statecharts, guards, transitions, workflows, or Stately, or is modeling non-trivial UI/app/process logic in a codebase that uses XState. Prefer a short machine sketch before code when requirements are fuzzy. If the problem is too simple for a state machine, say so and recommend @xstate/store instead.developsubframeappImplement Subframe designs with business logic. Use after designing with /subframe:design or when given a Subframe URL/page ID.interactive-inputsugarforeverEnables rich interactive UI components in chat responses. When presenting questions that require structured input (multiple choice, true/false, forms), embed interactive blocks that compatible clients render as native UI elements. Use when user asks for quizzes, exercises, surveys, or any structured input scenario.solidjssuryavirkapurSolidJS framework development skill for building reactive web applications with fine-grained reactivity. Use when working with SolidJS projects including: (1) Creating components with signals, stores, and effects, (2) Implementing reactive state management, (3) Using control flow components (Show, For, Switch/Match), (4) Setting up routing with Solid Router, (5) Building full-stack apps with SolidStart, (6) Data fetching with createResource, (7) Context API for shared state, (8) SSR/SSG configur