광고[ For iPhone / iPad ] 🔥 Nugget의 믿을 수 없는 인터랙티브 월페이퍼. 이런 것은 본 적이 없을 것입니다!
skills.homes logoskills.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
0

frontend-responsive

Create responsive, mobile-first user interfaces that adapt seamlessly across all device sizes using modern CSS techniques and responsive design patterns. Use this skill when implementing layouts, breakpoints, fluid typography, responsive images, or any UI that needs to work across mobile, tablet, and desktop viewports. Apply this skill when using CSS media queries, container queries, responsive utility classes (Tailwind's sm:, md:, lg:), flexible grid/flexbox layouts, relative units (rem, em, vw, vh), or when optimizing touch interactions for mobile devices. This skill ensures mobile-first development approach, consistent breakpoint usage, proper viewport configuration, touch-friendly target sizes (44x44px minimum), readable typography across all screen sizes, and optimized performance on mobile networks with responsive images and lazy loading.

overtimepog
overtimepog
development
open
frontend
0

ux-polish

Define UI tokens, accessibility rules, and consistent component behavior for the Astro frontend, plus empty/loading/error states and light hover/focus transitions. Use when adding or refining frontend UX polish and documentation under frontend/ in this repo.

cdryampi
cdryampi
development
open
frontend
0

javascript-interactive-design

Add interactivity and dynamic behavior to web designs using vanilla JavaScript. Handles animations, user interactions, form validation, DOM manipulation, event handling, and progressive enhancement without frameworks.

FAeN399
FAeN399
development
open
frontend
0

scaffolding-components

Scaffold new React components with proper file structure, CSS modules, audio integration, and Storybook stories. Use when creating new components, scaffolding UI, or when user says "create component", "new component", "scaffold", "generate component", or "add component".

sorfeb
sorfeb
development
open
frontend
0

nextjs-game-components

Build interactive React components for the quiz game UI using Next.js 16, React 19, TypeScript, and Tailwind CSS v4. Use when creating game lobby, question display, scoreboard, player standings, and game result components.

violabg
violabg
development
open
frontend
0

data-fetching

Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.

moonLight-7k
moonLight-7k
development
open
frontend
0

zaui-ui-builder

Builds UI for Zalo Mini App using zmp-ui (ZaUI) components. Use when asked to create pages, components, forms, modals, or any UI for ZMP projects.

tienchinh21
tienchinh21
development
open
frontend
0

context-pattern

Provides a React Context implementation pattern using useSyncExternalStore, with types, hooks, and examples. Be specific about capabilities and when to use the skill.

trae-op
trae-op
development
open
frontend
0

design-system

RemoteViewer.Client design system with spacing, colors, typography, and components. Use when building UI, styling components, or working with Avalonia XAML.

haefele
haefele
development
open
frontend
0

typescript-async-patterns

Use when typeScript async patterns including Promises, async/await, and async iterators with proper typing. Use when writing asynchronous TypeScript code.

knopki
knopki
development
open
frontend
0

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. Contains 45 rules across 8 categories, prioritized by impact. ALWAYS load when working with React/Next.js code: - Writing new React components or Next.js pages - Implementing data fetching (client or server-side) - Reviewing code for performance issues - Refactoring existing React/Next.js code - Optimizing bundle size or load times - Working with async operations and Promise handling - Implementing Suspense boundaries or streaming Keywords: React, Next.js, performance, optimization, bundle, async, Promise, waterfall, rerender, memo, useMemo, useCallback, Suspense, RSC, server components, client components, SWR, data fetching, cache Do NOT load for: - Non-React projects (Vue, Angular, Svelte, etc.) - Backend-only code without React integration - Pure CSS/styling work (use frontend-design-fundamentals) Works with other skills: - frontend-design-fundamentals: For UI/styling best practices - quality-code-check:

phananhtuan09
phananhtuan09
development
open
frontend
0

css-styling

MotoRent CSS styling patterns using mr-* prefixed classes for consistent UI components, gradients, and theme support.

erymuzuan
erymuzuan
development
open
frontend
0

rimitive-view

Build Rimitive views with el, map, and match. Use when building UI components, rendering reactive content, handling events, or creating reusable view elements.

hejhi
hejhi
development
open
frontend
0

chartjs-integrations

This skill should be used when the user asks "Chart.js React", "react-chartjs-2", "Chart.js Vue", "vue-chartjs", "Chart.js Angular", "ng2-charts", "Chart.js Rails", "Chart.js Rails 8", "Chart.js importmaps", "Chart.js Stimulus", "Chart.js Turbo", "Chart.js Hotwire", "Chart.js SSR", "Chart.js Next.js", "Chart.js Nuxt", or needs help integrating Chart.js v4.5.1 with frontend frameworks.

sjnims
sjnims
development
open
frontend
0

portfolio-frontend-design

Frontend design system dla projektu portfolio Pawla Lipowczana (React 19 + Vite 7 + Tailwind CSS 3 + Framer Motion 12). Uzyj przy tworzeniu nowych komponentow, stron, sekcji lub modyfikacji UI w portfolio. Zawiera palete kolorow (green accent

plipowczan
plipowczan
development
open
frontend
0

route-generator

Adds new routes to TanStack Router in src/router.tsx. Creates route definitions following project patterns. Use when adding new pages or sections.

eug-subscription
eug-subscription
development
open
frontend
0

roblox-animation

Roblox animation: TweenService, AnimationController, keyframes, easing. Use when animating objects or characters.

taozhuo
taozhuo
development
open
frontend
0

manage-client-state

クライアント状態をグローバル/URL状態で型安全に管理します。サイドバーやフィルタはuseSWRImmutable、ページネーションはnuqs。

nayukata
nayukata
development
open
frontend
0

api-pattern

Provides Vue component structure templates for Composition API and Options API. Used when generating .vue components and views to match user's selected API pattern preference.

sayali-ingle-pdl
sayali-ingle-pdl
development
open
frontend
0

progressive-enhancement

HTML-first development with CSS-only interactivity patterns. Use when building features that work without JavaScript, using native HTML elements, CSS pseudo-classes, and the View Transitions API.

ProfPowell
ProfPowell
development
open
frontend
0

ui-components

React UI component specialist with Tailwind CSS and shadcn/ui for building responsive, accessible interfaces

marthaya-putra
marthaya-putra
development
open
frontend
0

zod

Quy ước dùng Zod trong repo (schemas folder, Vietnamese messages, integration với react-hook-form và server actions).

HuynhSang2005
HuynhSang2005
development
open
frontend
0

styling-with-tailwind-cva

Use when creating design systems or styling components with Tailwind CSS v4 and Class Variance Authority (CVA) - provides type-safe component variants with CSS variables for design tokens

bryonjacob
bryonjacob
development
open
Previous
Page 104 / 107
Next