frontend
0
web-motion-design
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
dylantarre
development
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
frontend
0
event-delegation
Guidelines for implementing the Event Delegation pattern in React to reduce prop drilling, improve performance, and handle dynamic or frequently changing content. Includes examples, best practices, common pitfalls, and an implementation checklist.
trae-op
development
frontend
0
using-gsap-with-react
Best practices for integrating GSAP animations in React applications using the @gsap/react hook.
ban12-project
development
frontend
0
tailwindcss-layout
Layout utilities Tailwind CSS v4.1. Flexbox (flex, justify, items, gap), Grid (grid-cols, grid-rows, place), Position (absolute, relative, fixed, sticky, inset, z-index), Container queries (@container).
fusengine
development
frontend
0
create-component
CareMatch용 React 컴포넌트 생성. 고령자 친화적 접근성 규칙이 적용된 shadcn/ui 기반 컴포넌트를 생성합니다. 사용법 - "컴포넌트 생성해줘", "JobCard 컴포넌트 만들어줘"
saintgo7
development
frontend
0
frontend-components-standards
Design reusable, composable UI components following single responsibility principle with clear interfaces, encapsulation, and minimal props. Use this skill when creating or modifying frontend components in any framework (React, Vue, Svelte, web components) or component files. Apply when working with .jsx, .tsx, .vue, .svelte files in component directories (components/, src/components/, ui/, lib/), defining component props and interfaces, implementing component composition patterns, managing component-level state, creating reusable UI elements (buttons, forms, cards, modals), documenting component APIs, or refactoring components for better reusability and maintainability.
DennisToma
development
frontend
0
new-component
Create a new React component following project patterns. Use when creating reusable components. Invoke with "/new-component [name] [description]".
abdoulayesow
development
frontendmarketplace
0
typescript-basics
TypeScript patterns for React including interfaces, type annotations, generics, null handling, and utility types. Use when writing type-safe React code.
Joshua-Palamuttam
development
frontend
0
creating-client-component
Creates interactive React Client Components with hooks and event handlers. Input: Component name, purpose, required interactivity. Output: Client component file with proper structure and tests.
Simplereally
development
frontend
0
vueuse-composables
Find and use VueUse composables for common functionality like mouse tracking, local storage, element detection, breakpoints, and browser APIs. Use when users need reactive utilities beyond basic Vue.
zatkniz
development
frontend
0
design-frontend-component
Use when creating React/Vue components or adding UI features. Enforces composition patterns and state management best practices.
JackSmack1971
development
frontend
0
framer-motion
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
dylantarre
development
frontend
0
zustand-patterns
Zustand state management patterns. Use when implementing client-side state with Zustand.
IvanTorresEdge
development
frontend
0
typography-text-effects
Enhance headers, buttons, and text with readable typography and micro-animations.
abdulmateen5251
development
frontend
0
typescript-author
Write TypeScript for Web Components and Node.js with strict typing. Use when adding types to JavaScript projects, building type-safe APIs, or creating generic utilities.
ProfPowell
development
frontend
0
next-cache-patterns
Next.js caching and data fetching patterns including cacheLife, PPR, revalidation strategies, and cache invalidation. Use when optimizing data fetching, implementing ISR, or configuring cache behavior.
Naw3
development
frontend
0
using-cache-lifecycle-apis
Teach cache lifecycle APIs in Next.js 16 - cacheLife(), cacheTag(), updateTag(), refresh(), revalidateTag(). Use when managing cache invalidation, setting cache policies, or implementing cache tags.
djankies
development
frontend
0
frontend-design
Tạo giao diện frontend đẹp, độc đáo, production-grade. Tránh "AI slop" aesthetics. Dùng khi user yêu cầu build components, pages, UI.
HuynhSang2005
development
frontend
0
date-time-implementation
Guide for implementing date/time operations using dayjs with unix timestamps and Polish locale. Use when adding date handling to components or API endpoints.
teocrafters
development
frontend
0
data-attributes
Using data-* attributes as the HTML/CSS/JS bridge for state, variants, and configuration. Use when managing element state, styling variants, or configuring behavior without JavaScript classes.
ProfPowell
development
frontend
0
styling-patterns
Tailwind CSS styling with CVA variants, data-slots, layout patterns, and z-index management
griffnb
development
frontend
0
add-dialog-component
Create React dialog components with forms for the dealflow-network project using Radix UI, tRPC mutations, and proper state management. Use when adding create/edit dialogs, modals, or form-based UI components.
betterbrand
development
frontend
0
hover-interactions
Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.
dylantarre
development