frontend
1
jinja-roos-components
Create UI components using jinja-roos-components library. Use when building forms, buttons, modals, or any frontend elements in Wies templates.
RijksICTGilde
development
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
frontend
1
zustand-store
Create Zustand stores for IntelliFill with immer, persist, and devtools middleware. Use when adding state management for new features.
Intellifill
development
frontend
1
complex-state-management
Production patterns for managing complex application state in React without Redux, Zustand, or other state libraries. Includes multi-stage loading, command patterns, refs for performance, and parallel data fetching. Use when building complex UIs with interconnected states, need loading stages and progress tracking, or implementing command patterns.
vishalsachdev
development
frontend
1
frontend-error-handling
Provides error handling patterns for React applications. This skill should be used when implementing error boundaries, API error interceptors, error tracking, or user-friendly error messages.
allenlin90
development
full-stack
1
portal-component
Generate Next.js components for the portal app with proper patterns. Use when creating new pages, components, or features in apps/portal.
legacy3
development
frontend
1
using-ngx-gaia
Provides usage guidance for @vsn-ux/ngx-gaia Angular components (Gaia design system). Use when implementing UI with ga- prefixed elements, GaButtonModule, GaSelectModule, ga-form-field, gaInput directives, or when asking about Gaia components.
visma-software-nordic
development
frontend
1
fix-hardcoded-workspaceid-pages
Use when asked to remove hardcoded workspaceId values from client pages and replace them with useWorkspace() + friendly loading/error states.
CleanExpo
development
full-stack
1
react-project-scaffolder
Use PROACTIVELY when creating new React projects requiring modern tooling and best practices. Provides three modes - sandbox (Vite + React for quick experiments), enterprise (Next.js with testing and CI/CD), and mobile (Expo + React Native). Enforces TypeScript strict mode, Testing Trophy approach, and 80% coverage. Not for non-React projects or modifying existing applications.
cskiro
development
mobile
1
motion
Build sophisticated React animations with Motion (formerly Framer Motion) - declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, and SVG manipulation. Optimize bundle size with LazyMotion (4.6 KB) or useAnimate mini (2.3 KB). Use when: adding drag-and-drop interactions, creating scroll-triggered animations, implementing modal dialogs with transitions, building carousels with momentum, animating page/route transitions, creating parallax hero sections, implementing accordions with smooth expand/collapse, or optimizing animation bundle sizes. For simple list animations, use auto-animate skill instead (3.28 KB vs 34 KB). Troubleshoot: AnimatePresence exit not working, large list performance issues, Tailwind transition conflicts, Next.js "use client" errors, scrollable container layout issues, or Cloudflare Workers build errors (resolved Dec 2024).
JoaquimCassano
development
frontend
1
auto-animate
Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 10+ documented errors: SSR/Next.js imports, conditional parents, missing keys, flexbox width, table display, Jest/esbuild config, CSS position conflicts, Vue/Nuxt registration, Angular ESM. Use when: animating lists/accordions/toasts/forms, troubleshooting SSR animation errors, need accessible animations (auto prefers-reduced-motion), or want drop-in transitions without Motion overhead.
JoaquimCassano
development
frontend
1
ui-ux-guidelines
Implementation details for accessible, performant interfaces. Use alongside vercel-design-guidelines for detailed technical guidance on interactions, animations, and forms.
Tylerbryy
development
frontend
1
react-component-expert
Expert in creating React components for Obsidian plugins with proper TypeScript types and integration
jwplatta
development
frontend
1
jwc-ui-shadcn-workflow
packages/ui의 shadcn/ui + Tailwind v4 컴포넌트를 추가/수정할 때 기존 컴포넌트 재사용, cn()/cva 패턴, exports 영향, lint/typecheck 절차를 따릅니다.
OhMinsSup
development
frontend
1
ui-publishing
shadcn/ui와 Tailwind CSS를 사용한 UI 컴포넌트 생성 가이드. UI 컴포넌트 생성, 스타일링, PRD 화면 구현 시 사용.
Nexters
development
frontend
1
cursor-reactivity
Use when implementing cursor-based interactions like proximity effects, hover zones, or elements that react to mouse/touch position. Applies patterns for throttling, falloff, and mobile alternatives.
sreejithraman
development
frontend
1
totalaud-brand
Use when building UI for totalaud.io - enforces brand colours, typography, and calm aesthetic
totalaudiopromo
development
frontend
1
frontend-architect
Expert UI/UX engineer and frontend specialist. Enforces the ibelick/ui-skills standard (Tailwind, Framer Motion, Shadcn) to build premium, performant interfaces.
officebeats
development
frontend
1
vanilla-rails-hotwire
Use when writing Hotwire (Turbo/Stimulus) code in Rails - enforces dom_id helpers, morph updates, focused Stimulus controllers, and JavaScript private methods
ZempTime
development
frontend
1
next-data-rendering
Use when implementing rendering strategies like SSG, SSR, ISR, CSR, or managing caching and revalidation. Invoke for static generation, server-side rendering, incremental static regeneration, partial prerendering, or cache optimization.
zacharyr0th
development