skills.homes logoskills.homescapability registry
home/categories/frontend
category focus

Frontend

UI frameworks, state management, and styling.

2566 स्किल्सall categories
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
frontend
266

app-renderer-systems

Guides creation and modification of domain feature systems organized under a systems/ directory. Covers directory layout, API service layer patterns, TanStack Query hooks (queries, mutations, optimistic updates), React context and XState store conventions, hook organization, and public API barrel exports. Use when adding a new domain system, extending an existing one, or fixing bugs in a system-layer codebase. Don't use for generic React component work, backend API implementation, or codebases not organized around a systems/ domain pattern.

pedronauck
pedronauck
development
open
frontend
266

motion-react

Build React animations with Motion (formerly Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG, exit animations, and motion values. Use when: building React animations, adding hover/tap/drag interactions, scroll-triggered effects, layout transitions, shared element animations, exit animations with AnimatePresence, or working with motion values and springs. Triggers: "animate", "motion component", "framer motion", "gesture", "drag", "scroll animation", "layout animation", "exit animation", "spring", "whileHover", "whileTap", "whileInView", "AnimatePresence", "layoutId", "useScroll", "useSpring", "useAnimate", "motion value", "reorder", "parallax".

pedronauck
pedronauck
development
open
frontend
266

react

Comprehensive React development guide covering component architecture, hooks, state management, TypeScript integration, useEffect patterns, and testing with Vitest. Use when creating React components, custom hooks, managing state, or any frontend React code. Essential for React 19+ development.

pedronauck
pedronauck
development
open
frontend
266

rivetkit-client-javascript

RivetKit JavaScript client guidance. Use for browser, Node.js, or Bun clients that connect to Rivet Actors with rivetkit/client, create clients, call actions, or manage connections.

pedronauck
pedronauck
development
open
frontend
266

rivetkit-client-react

RivetKit React client guidance. Use for React apps that connect to Rivet Actors with @rivetkit/react, create hooks with createRivetKit, or manage realtime state with useActor.

pedronauck
pedronauck
development
open
frontend
266

shadcn-ui

Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.

pedronauck
pedronauck
development
open
frontend
266

tailwindcss

Guide for Tailwind CSS v4 patterns and best practices. Use when styling components with Tailwind CSS, creating responsive layouts, working with Tailwind 4 features, or using tailwind-variants for component styling.

pedronauck
pedronauck
development
open
frontend
266

tanstack-router-best-practices

TanStack Router best practices for type-safe routing, data loading, search params, and navigation. Activate when building React applications with complex routing needs.

pedronauck
pedronauck
development
open
frontend
266

tanstack

Comprehensive guide for TanStack ecosystem in React - Query/DB for data fetching, Form for form handling, and Router for client-side routing. Use when working with collections, live queries, optimistic updates, forms, validation, routing, URL parameters, or navigation.

pedronauck
pedronauck
development
open
frontend
264

remotion

Best practices for Remotion - Video creation in React

dvlin-dev
dvlin-dev
development
open
frontend
264

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

dvlin-dev
dvlin-dev
development
open
frontend
261

maui-data-binding

Guidance for .NET MAUI XAML and C# data bindings — compiled bindings, INotifyPropertyChanged / ObservableObject, value converters, binding modes, multi-binding, relative bindings, fallbacks, and MVVM best practices. USE FOR: setting up compiled bindings with x:DataType, implementing INotifyPropertyChanged or CommunityToolkit ObservableObject, creating IValueConverter / IMultiValueConverter, choosing binding modes, configuring BindingContext, relative bindings, binding fallbacks, StringFormat, code-behind SetBinding with lambdas, and enforcing XC0022/XC0025 warnings. DO NOT USE FOR: CollectionView item templates and layouts (use maui-collectionview), Shell navigation data passing (use maui-shell-navigation), dependency injection (use maui-dependency-injection), or animations triggered by property changes (use .NET MAUI animation APIs).

managedcode
managedcode
development
open
frontend
261

dotnet-legacy-aspnet

Maintain classic ASP.NET applications on .NET Framework, including Web Forms, older MVC, and legacy hosting patterns, while planning realistic modernization boundaries.

managedcode
managedcode
development
open
frontend
261

dotnet-eslint

Use ESLint in .NET repositories that ship JavaScript, TypeScript, React, or other Node-based frontend assets. Use when a repo needs a configurable CLI lint gate for frontend correctness, import hygiene, unsafe patterns, or framework-specific rules.

managedcode
managedcode
development
open
frontend
261

dotnet-htmlhint

Use HTMLHint in .NET repositories that ship static HTML output or standalone frontend templates. Use when a repo needs a focused CLI lint gate for DOM structure, invalid attributes, and basic HTML correctness checks on static pages.

managedcode
managedcode
development
open
frontend
252

solidjs

SolidJS 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 configuration. Triggers: solid, solidjs, solid-js, solid start, solidstart, createSignal, createStore, createEffect.

fjrevoredo
fjrevoredo
development
open
frontend
248

shadcn-ui

shadcn/ui component library patterns. Covers CLI usage, installation, component categories, theming with CSS variables, dark mode setup, and integration with React Hook Form + Zod. Use when adding UI components, setting up design systems, or implementing forms with shadcn/ui.

MadAppGang
MadAppGang
development
open
frontend
248

ui-implementer

Implements UI components from scratch based on design references (Figma, screenshots, mockups) with intelligent validation and adaptive agent switching. Use when user provides a design and wants pixel-perfect UI implementation with design fidelity validation. Triggers automatically when user mentions Figma links, design screenshots, or wants to implement UI from designs.

MadAppGang
MadAppGang
development
open
frontend
248

tanstack-query

Use when managing server state with TanStack Query v5. Covers query key factories, data transformation, mutations, optimistic updates, authentication, testing with MSW, and best practices for async state management.

MadAppGang
MadAppGang
development
open
frontend
248

tailwindcss

TailwindCSS v4 patterns with CSS-first configuration using @theme, @source, and modern CSS features. Covers design tokens, CSS variables, container queries, dark mode, and Vite integration. Use when configuring Tailwind, defining design tokens, or leveraging modern CSS with Tailwind utilities.

MadAppGang
MadAppGang
development
open
frontend
248

design-references

Predefined design system references for UI reviews. Includes Material Design 3, Apple Human Interface Guidelines, Tailwind UI, Ant Design, and Shadcn/ui. Use when conducting design reviews against established design systems.

MadAppGang
MadAppGang
development
open
frontend
248

tanstack-query

Comprehensive TanStack Query v5 patterns for async state management. Covers breaking changes, query key factories, data transformation, mutations, optimistic updates, authentication, testing with MSW, and anti-patterns. Use for all server state management, data fetching, and cache invalidation tasks.

MadAppGang
MadAppGang
development
open
frontend
248

css-modules

CSS Modules with Lightning CSS and PostCSS for component-scoped styling. Covers *.module.css patterns, TypeScript integration, Vite configuration, and composition. Use when building complex animations, styling third-party components, or migrating legacy CSS.

MadAppGang
MadAppGang
development
open
frontend
248

shadcn-ui

Use when implementing UI components with shadcn/ui. Covers component installation, configuration with Vite/TanStack Router, CLI commands, and integration with Tailwind CSS.

MadAppGang
MadAppGang
development
open
Previous
Page 32 / 107
Next