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
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
JoaquimCassano
development
open
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
Tylerbryy
development
open
frontend
1

react-component-expert

Expert in creating React components for Obsidian plugins with proper TypeScript types and integration

jwplatta
jwplatta
development
open
frontend
1

jwc-ui-shadcn-workflow

packages/ui의 shadcn/ui + Tailwind v4 컴포넌트를 추가/수정할 때 기존 컴포넌트 재사용, cn()/cva 패턴, exports 영향, lint/typecheck 절차를 따릅니다.

OhMinsSup
OhMinsSup
development
open
frontend
1

ui-publishing

shadcn/ui와 Tailwind CSS를 사용한 UI 컴포넌트 생성 가이드. UI 컴포넌트 생성, 스타일링, PRD 화면 구현 시 사용.

Nexters
Nexters
development
open
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
sreejithraman
development
open
frontend
1

totalaud-brand

Use when building UI for totalaud.io - enforces brand colours, typography, and calm aesthetic

totalaudiopromo
totalaudiopromo
development
open
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
officebeats
development
open
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
ZempTime
development
open
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
zacharyr0th
development
open
frontend
1

tailwind-css-4

Tailwind CSS v4 patterns with CSS-first configuration, @theme directive, design system integration, and utility-first styling for Next.js applications.

JanSzewczyk
JanSzewczyk
development
open
frontend
1

violetconnect-patterns

Code patterns for implementing VioletConnect features - Redux, axiosWrapper, AppContext, API routes

violetio
violetio
development
open
frontend
1

react-hooks-patterns

Master React Hooks including useState, useEffect, useContext, useReducer, and custom hooks with production-grade patterns

pluginagentmarketplace
pluginagentmarketplace
development
open
frontend
1

create-component

Create CVA + DaisyUI components following Iridium patterns. Use when asked to create UI components, buttons, inputs, cards, modals, alerts, or any reusable UI element.

tech-with-seth
tech-with-seth
development
open
frontend
1

frontend-razor

Apply when working with Razor views, MVC layouts, partial views, and tag helpers

twofoldtech-dakota
twofoldtech-dakota
development
open
frontend
1

signal-state-management

Preact Signals for reactive state management, signal vs computed signal usage, batch updates for performance, action creator patterns, signal integration with React components, state management by domain (boards posts members), reactive patterns, and signal best practices for ree-board project

DW225
DW225
development
open
frontend
1

frontend-design

创建具有高品质设计、独特且适用于生产环境的 frontend 界面。当用户要求构建网页组件、页面、工件、海报或应用程序时(例如网站、着陆页、仪表板、React 组件、HTML/CSS 布局,或对任何网页 UI 进行样式化/美化时),使用这项技能。生成富有创意、精致且避免通用 AI 美学的代码和 UI 设计。

huminglong
huminglong
development
open
frontend
1

flow

ホバー効果、ローディング状態、モーダル遷移などのCSS/JSアニメーションを実装。UIに動きを付けたい、インタラクションを滑らかにしたい時に使用。

simota
simota
development
open
frontend
1

managing-react-localisation

Manage i18next translations and localisation in React with TypeScript. Use when adding translations, creating language files, implementing i18n, or when user mentions translations, localisation, i18next, languages, or multi-language support.

moonpixels
moonpixels
development
open
frontend
1

advanced-types

Advanced TypeScript types including generics, conditionals, and mapped types

pluginagentmarketplace
pluginagentmarketplace
development
open
frontend
1

add-caching

Add client-side caching with stale-while-revalidate strategy. Use when optimizing page load performance or reducing server requests.

tech-with-seth
tech-with-seth
development
open
frontend
1

jsgui3-ssr-activation-data-bridge

Understand and debug how jsgui3 SSR markup becomes activated client-side, including persisted fields (data-jsgui-fields) and ctrl_fields (data-jsgui-ctrl-fields), and where to patch/plugin.

metabench
metabench
development
open
frontend
1

frontend-accessibility

Implement accessible UI components following WCAG guidelines in Next.js and React applications. Use this skill when creating or modifying React components (*.tsx), working with Radix UI or Headless UI primitives, implementing keyboard navigation, adding ARIA attributes, managing focus states in modals/dialogs, creating form inputs with proper labels, building navigation menus, implementing skip links, or ensuring color contrast compliance. This includes files in apps/blog/src/components/, packages/ui/src/primitives/, packages/ui/src/components/, and any component using @headlessui/react or @radix-ui/* packages. Apply when working with interactive elements like buttons, links, dropdowns, dialogs, or any focusable elements.

imkdw
imkdw
development
open
Previous
Page 73 / 107
Next