skills.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

216

daisyui

Complete guide for building UIs with daisyUI v5 and Tailwind CSS — components, forms, theming, and responsive design. Use when building any user interface with daisyUI or Tailwind CSS, implementing UI components (buttons, cards, modals, tables, navbars), creating forms (inputs, selects, textareas, validation), configuring themes, or migrating from daisyUI v4 to v5. Also use when the user mentions daisyUI class names like btn, card, fieldset, input, select, or any daisyUI component patterns.

natelandau

development

frontend

215

web-browser

Interact with web pages using agent-browser CLI. MUST run 'browser connect 9222' FIRST to use existing browser with authenticated sessions.

megalithic

development

frontend

214

code-architecture-tailwind-v4-best-practices

Guides Tailwind CSS v4 patterns for buttons and components. Use this skill when creating components with variants, choosing between CVA/tailwind-variants, or configuring Tailwind v4's CSS-first approach.

flpbalada

development

frontend

214

css-container-queries

Apply CSS container queries for component-based responsive design. Use when implementing responsive components that adapt to their container size rather than viewport size.

flpbalada

development

frontend

214

nextjs-image-art-direction

Implement art direction for Next.js images using getImageProps(). Use when showing different images for different viewport sizes, such as homepage carousels with mobile vs desktop assets, different cropping/composition, or when mobile and desktop images differ completely.

flpbalada

development

frontend

214

react-key-prop

Guides proper usage of the key prop in React lists. Use this skill when rendering lists, mapping arrays to components, or troubleshooting list-related state bugs.

flpbalada

development

frontend

214

react-use-callback

Guides proper usage of the useCallback hook in React. Use this skill when optimizing function references, passing callbacks to memoized components, or preventing unnecessary re-renders.

flpbalada

development

frontend

214

react-useeffect-avoid

Guides when NOT to use useEffect and suggests better alternatives. Use when reviewing React code, troubleshooting performance, or considering useEffect for derived state or form resets.

flpbalada

development

frontend

214

tailwind-v4-configuration

Configure Tailwind CSS v4 with CSS-first approach. Use when installing, migrating from v3, setting up build tools (Vite/PostCSS/CLI), customizing themes with @theme, or configuring plugins.

flpbalada

development

frontend

214

typescript-interface-vs-type

Guides when to use interface vs type in TypeScript. Use this skill when defining object types, extending types, or choosing between interface and type aliases.

flpbalada

development

frontend

214

react-server-components

Review React code for proper Server/Client Component boundaries based on Next.js and React documentation. Identifies misplaced 'use client' directives and suggests optimal component splitting.

ryoppippi

development

frontend

214

you-might-not-need-an-effect

Review React code for unnecessary useEffect usage based on react.dev guidelines. Analyses code for useEffect anti-patterns and optionally applies fixes. Use when reviewing React code quality or refactoring effects.

ryoppippi

development

frontend

208

jsf-ajax

JSF AJAX update rules for the HMIS project. Use when working on AJAX updates, p:commandButton update attributes, PrimeFaces AJAX callbacks, partial page rendering, or debugging AJAX update failures. Also covers JSF navigation patterns: why f:viewAction must not be used on @SessionScoped beans, and how initialization belongs in navigation methods. Critical rules to prevent silent AJAX failures and refresh/back-button state corruption.

hmislk

development

frontend

208

ui-guidelines

HMIS UI development guidelines for JSF/XHTML pages. Use when creating or modifying XHTML pages, PrimeFaces components, page layouts, forms, buttons, panels, datatables, or any frontend/UI work. Covers page structure, layout patterns, panel best practices, form inputs, button styling, responsive design, and accessibility rules.

hmislk

development

frontend

205

tailwind-css-patterns

Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

giuseppe-trisciuoglio

development

frontend

205

react-code-review

Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility compliance, and TypeScript integration. Use when reviewing React code changes, before merging pull requests, after implementing new features, or for component architecture validation. Triggers on "review React code", "React code review", "check my React components".

giuseppe-trisciuoglio

development

frontend

205

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.

giuseppe-trisciuoglio

development

frontend

205

add-utils-function

Add or modify utility functions in fe-tools. Use when the user asks to add a new utility/helper/validator (e.g., "新增utils函数", "add utility function", "新增SQL语句校验功能") or to extend existing utils in @fe-tools/utils, @fe-tools/web-utils, @fe-tools/node-utils, @fe-tools/canvas-utils, or @fe-tools/ai-utils.

MichealWayne

development

frontend

205

fe-tools-template-recommender

Recommend the most suitable project template or initialization path from fe-tools project-templates based on product, framework, runtime, and delivery constraints. Use when the user asks which frontend or backend template to start from, how to bootstrap a React/Vue/Node/TypeScript project, or wants comparisons such as React admin template choices, Vite vs Webpack, or Koa2 vs Fastify vs NestJS.

MichealWayne

development

frontend

203

tsh-writing-hooks

Custom hook and composable patterns — naming, composition, stable return shapes, lifecycle cleanup, and testing strategies. Use when writing reusable logic units (React hooks, Vue composables), refactoring logic into hooks, debugging hook behavior, or reviewing hook implementations.

TheSoftwareHouse

development

frontend

202

svelte-runes

Svelte runes guidance. Use for reactive state, props, effects, attachments, or migration. Covers $state, $derived, $effect, @attach. Prevents reactivity mistakes.

spences10

development

frontend

202

svelte-components

Svelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.

spences10

development

frontend

201

effect-best-practices

Enforces Effect-TS patterns for services, errors, layers, and atoms. Use when writing code with Effect.Service, Schema.TaggedError, Layer composition, or effect-atom React components.

elianiva

development

frontend

199

dotnet-advisor

Routes .NET/C# requests to the correct domain skill and loads coding standards as baseline for all code paths. Determines whether the task needs API, UI, testing, devops, tooling, or debugging guidance based on prompt analysis and project signals, then invokes skills in the right order. Always invoked after [skill:using-dotnet] detects .NET intent. Do not use for deep API, UI, testing, devops, tooling, or debugging implementation guidance.

novotnyllc

development

Page 35 / 107