skills.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

4

tailwind-css-patterns

Tailwind CSS のユーティリティ設計とパターン化を支援するスキル。レイアウト・状態・レスポンシブ対応を整理し、再利用可能なUIパターンを構築する。 Anchors: • Tailwind CSS Documentation / 適用: ユーティリティ設計 / 目的: 公式ベストプラクティス準拠 • Responsive Web Design / 適用: ブレークポイント設計 / 目的: モバイルファーストの整理 • Class Variance Authority (CVA) / 適用: バリアント設計 / 目的: 状態と組み合わせの整理 Trigger: Use when designing Tailwind UI patterns, reducing utility bloat, or standardizing responsive and state styles. tailwind css, utility classes, responsive design, component patterns, class variance

daishiman

development

frontend

4

vendix-frontend-component

Angular component structure rules.

Rzyfront

development

frontend

4

responsive-design

レスポンシブWebデザインのベストプラクティスを提供する専門スキル。モバイルファースト、フルードグリッド、メディアクエリ、ブレークポイント設計、画像最適化、タイポグラフィのスケーリング、タッチターゲット設計を包括的にサポートする。プロジェクト固有のTailwind CSS設計システム、8pxグリッド、Electron対応を含む。 Anchors: • Responsive Web Design (Ethan Marcotte) / 適用: フルードグリッド・メディアクエリ設計 / 目的: デバイス横断的なUI設計の基礎 • Mobile First (Luke Wroblewski) / 適用: モバイルファースト設計手法 / 目的: 制約駆動設計とプログレッシブエンハンスメント • 16-ui-ux-guidelines.md / 適用: プロジェクト固有のデザインシステム / 目的: Tailwind CSS・Electron対応・WCAG準拠 Trigger: Use when implementing responsive layouts, designing breakpoints, creating mobile-first styles, optimizing images for multiple viewports, or ensuring cross-device compatibility. breakpoint, media query, mobile first, fluid grid, viewport, responsive layout, adaptive design, flexible images, srcset, clamp, レスポンシブ, ブレークポイント, Tailwind

daishiman

development

frontend

4

gpui-styling

Styling GPUI elements with Tailwind-like utility methods. Use when applying styles, layouts, colors, spacing, or creating responsive designs.

cnwzhu

development

frontend

4

state-management

Manage client-side state with Zustand. Use when building shopping cart, user preferences, theme toggle, UI state, or any cross-component shared state with localStorage persist.

xmark168

development

frontend

3

ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

bemindlabs

development

frontend

3

form-ux-patterns

UX patterns for complex forms including multi-step wizards, cognitive chunking (5-7 fields max), progressive disclosure, and conditional fields. Use when building checkout flows, onboarding wizards, or forms with many fields.

Bbeierle12

development

frontend

3

design

Use when building UI components, styling pages, or making visual/interaction decisions. Guides design thinking, anti-patterns, CSS architecture, and responsive patterns.

heyJordanParker

development

frontend

3

breakpoints

Generates responsive breakpoint tokens for media queries and container queries. Use when setting up responsive design, mobile-first layouts, or viewport-based styling. Outputs CSS, Tailwind, or JSON.

dylantarre

development

frontend

3

polaris-fundamentals

Core Polaris Web Components fundamentals including component library structure, design tokens, responsive patterns, and SSR compatibility. Auto-invoked when working with Polaris components.

sarojpunde

development

frontend

3

tailwind

Tailwind CSS v4 best practices, CSS-first configuration and modern patterns. Use when writing styles, configuring themes or migrating from v3.

helpermedia

development

frontend

3

react-modal-patterns

Modal and form patterns for Orient dashboard frontend. Use when creating modals, dialogs, forms, notifications, or any UI components in packages/dashboard-frontend. The dashboard uses plain HTML/CSS with Tailwind - NOT shadcn/ui, Radix, or other component libraries. Reference this skill before creating any modal, form, or notification component.

orient-bot

development

frontend

3

storybook

Documents components with Storybook using CSF 3.0, controls, and MDX. Use when creating component catalogs, interactive examples, visual testing setups, or design system documentation sites.

dylantarre

development

frontend

3

enhancing-progressively

CSS-first approach - use CSS before JavaScript. Use when implementing layouts, animations, or toggles, or when user mentions レイアウト, スタイル, 位置, アニメーション, 表示/非表示, トグル, レスポンシブ, CSS Grid, Flexbox, transforms, transitions, CSSのみ, JavaScript不要, シンプル

thkt

development

frontend

3

shadcn-ui-setup

Add Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.

andrelandgraf

development

frontend

3

react-component-library-usage

Guidelines for using the Commonplace Design System in React components

jakewaldrip

development

frontend

3

shadcn-ui-setup

Add Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.

andrelandgraf

development

frontend

3

wp-interactivity-api

Use when building or debugging WordPress Interactivity API features: data-wp-* directives, @wordpress/interactivity store/state/actions, block viewScriptModule integration, performance, hydration, and directive behavior.

vapvarun

development

frontend

3

compound-components

Builds accessible composable components using Radix/Headless UI patterns. Use when creating Select, Dialog, Tabs, Accordion, Menu, or Dropdown components with proper ARIA, keyboard navigation, and focus management.

dylantarre

development

frontend

3

notification-ui

Renders notification bell icon with unread count badge, pulse animations for new notifications, and dropdown panel (320px × max 400px) displaying notification items with purple theme for VERY IMPORTANT tasks. Includes mark-as-read interaction and empty state handling.

Syedaashnaghazanfar

development

frontend

3

z-index-scale

Generates systematic z-index tokens for layering management. Use when organizing stacking contexts, modal/dropdown z-index, tooltip layers, or fixing z-index conflicts. Outputs CSS, Tailwind, or JSON.

dylantarre

development

frontend

3

gsap-scrolltrigger

Scroll-based animations using GSAP ScrollTrigger plugin including pinning, scrubbing, snap points, and parallax effects. Use when creating scroll-driven animations, sticky sections, progress indicators, or parallax scrolling experiences.

Bbeierle12

development

frontend

3

layout-primitives

Builds composable layout components (Stack, Cluster, Grid, Sidebar, Center, Cover). Use when creating layout systems, spacing compositions, or Every Layout-style intrinsic design patterns that adapt without breakpoints.

dylantarre

development

frontend

3

framer

Integrates design tokens with Framer for prototyping and production sites. Use when adding CSS custom properties to Framer projects, creating code components, or building Framer sites with design systems.

dylantarre

development

Page 59 / 107