skills.homescapability registry 搜尋

home/categories/development

domain cluster

Development

Frameworks, languages, and architectural tools.

23643 個技能all categories

sorting

stars

current ordering strategy

query

all entries

refine the visible subset

mobile

0

frontend-responsive

Implement mobile-first responsive designs with fluid layouts, breakpoints, relative units, and touch-friendly interfaces that work across all device sizes. Use this skill when writing or modifying React components (.tsx, .jsx files), when implementing CSS or Tailwind responsive utilities (sm:, md:, lg:, xl: breakpoints), when working on layout components, navigation menus, grid systems, when optimizing for mobile devices, tablets, or desktop screens, when implementing media queries, when ensuring touch-friendly UI elements, or when testing cross-device compatibility.

DevanB

development

frontend

0

client-state-management

Guide for implementing client-side state management in React applications. Use when building state architecture, selecting state libraries (Context, Zustand, Redux, Jotai), implementing caching strategies (React Query, SWR), optimistic updates, state persistence, or optimizing re-renders. Triggers on questions about global vs local state, state normalization, or selector patterns.

MUmerRazzaq

development

full-stack

0

nextjs-16-app-router-structure

Standard project structure, routing, and component patterns for Next.js 16 App Router applications, so that layouts, pages, and data fetching stay consistent across projects.

mub7865

development

frontend

0

nextjs-pathname-id-fetch

Focused pattern for fetching data using URL parameters in Next.js. Covers creating dynamic routes ([id], [slug]) and accessing route parameters in server components to fetch data from APIs. Use when building pages that display individual items (product pages, blog posts, user profiles) based on a URL parameter. Complements nextjs-dynamic-routes-params with a simplified, common-case pattern.

mcclowes

development

frontend

0

atomic-component-generator

Génère des composants React suivant l'Atomic Design avec décomposition maximale et pattern Smart/Dumb. MANDATORY pour tous composants. À utiliser lors de la création de composants, pages, ou quand l'utilisateur mentionne "component", "atomic", "smart", "dumb", "decompose", "React", "UI".

RomualdP

development

frontend

0

animation-library

Implement modern, performance-conscious animations using Framer Motion, CSS, and scroll-triggered effects. Use when adding page transitions, hover effects, scroll animations, or micro-interactions to websites.

deomiarn

development

frontend

0

sbox-ui-razor

Create UI in S&box using Razor (HTML/CSS/C# hybrid system). Use when building HUDs, menus, healthbars, inventory systems, or any in-game UI. Covers ScreenPanel vs WorldPanel, data binding, state management, BuildHash optimization, and interactive elements.

echohello-dev

development

frontend

0

react-component

React 컴포넌트 생성, shadcn/ui 통합 작업 시 사용. component, 컴포넌트, UI, shadcn 키워드에 자동 활성화.

IDEA-on-Action

development

frontend

0

custom-hook

Creates custom React hooks for SideDish. Use when the user asks to create a new hook, extract shared logic into a hook, or refactor component logic into reusable hooks. Includes TypeScript interfaces, memoization patterns, and index.ts export.

jhlee0409

development

mobile

0

adding-animations

Add micro-interactions and animations using Framer Motion and CSS. Use when user asks about animations, transitions, hover effects, loading states, or motion design. MANDATORY for every component.

fusengine

development

frontend

0

react-form-instructions

This guide describes the best practices for creating forms in React using modern hooks (useActionState, useFormStatus) with a component-based architecture that optimizes re-rendering and maintains clean separation of concerns. Use this when asked to create or update forms in "react".

trae-op

development

frontend

0

create-standard-component

표준 RNBT 컴포넌트를 생성합니다. 페이지가 GlobalDataPublisher로 데이터를 제어합니다.

JSKIM-90

development

full-stack

0

ssr-data-fetching

Guide through proper Server-Side Rendering compatible data fetching in Nuxt 4. Use when fetching data in components or implementing data-driven UI.

teocrafters

development

frontend

0

delontheme-integration

Implement ng-alain theming system with layout configuration, responsive design, menu management, and settings drawer for ng-events project

ac484

development

frontend

0

frontend-css

Write consistent, maintainable CSS following the project's methodology (Tailwind utility classes) while minimizing custom CSS and adhering to design system tokens. Use this skill when writing or editing CSS files, Tailwind classes in React components (.tsx, .jsx files), when implementing design system colors/spacing/typography, when using Tailwind utility classes, when deciding between framework utilities vs. custom CSS, when optimizing CSS for production with tree-shaking, when configuring Tailwind theme extensions, or when maintaining design consistency across the application.

DevanB

development

frontend

0

angular-material

Angular Material component library expertise for Angular 20+ applications. Use when implementing Material Design components (buttons, forms, dialogs, tables, navigation), theming, accessibility, or building Angular UI with pre-built Material components. Covers all Material modules, component APIs, and best practices.

7Spade

development

frontend

0

rxjs-patterns-for-angular

Implement RxJS patterns for reactive programming in Angular. Use this skill when working with Observables, operators, subscriptions, async data flows, and error handling. Covers common patterns like combineLatest, switchMap, debounceTime, catchError, retry logic, and integration with Angular Signals using toSignal() and toObservable(). Ensures proper subscription cleanup with takeUntilDestroyed().

ac484

development

mobile

0

ui-patterns

Best practices and patterns for building SwiftUI views and components. Use when creating or refactoring SwiftUI UI, designing tab architecture, composing screens, or needing component-specific guidance.

patrickserrano

development

frontend

0

page-transitions

Add elegant page transition overlay using 3 staggered color layers. Overlay covers screen during navigation and reveals once new page is loaded. Use during /init or standalone.

deomiarn

development

frontend

0

svelte-5-runes

Complete guide for Svelte 5 runes ($state, $derived, $effect, $props, $bindable). Use for any Svelte 5 project or when code contains $ prefixed runes. Essential for reactive state management, computed values, side effects, and component props. Covers migration from Svelte 4 reactive statements.

szweibel

development

frontend

0

handling-tarrays

ReactUMG TArray/数组属性处理指南。在传递数组给 UE 组件、使用 GridPanel 的 ColumnFill/RowFill、或遇到"不能用 JS 数组"问题时激活。必须用 UE.NewArray() 创建原生数组，包含 BuiltinFloat/String/Int 等类型常量。

15195999826

development

frontend

0

react-spring

Use when implementing Disney's 12 animation principles with React Spring's physics-based animations

dylantarre

development

full-stack

0

frontend-dev-guidelines

Frontend development guidelines for Quantum Skincare's Next.js 16 App Router application with React 19.2, Tailwind CSS v4, Clerk authentication, and TypeScript. Covers Server/Client Components, React 19.2 features (useEffectEvent, Activity component, cache signals, React Compiler auto-optimization), data fetching patterns, Tailwind styling, route groups, form validation, and performance optimization. Use when creating pages, components, API routes, styling, or working with frontend code.

ZeroGravitySkin-Ron

development

mobile

0

zustand

Minimalist state management with Zustand - Simple, fast state management for React. Trigger: When implementing global state, when managing client-side state, when creating stores, when using state management in React.

Dsantiagomj

development

Page 916 / 986