frontend
4
vendix-frontend
Angular 20 + NgRx patterns for Vendix frontend. Trigger: When editing files in apps/frontend/, creating components, or working with NgRx store.
Rzyfront
development
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
frontend
4
glassmorphism
Creates frosted glass UI elements with blur, transparency, and subtle borders. Use when building overlays, floating controls, tooltips, or any element that should appear elevated with a translucent background.
ainergiz
development
frontend
4
custom-hooks-patterns
Reactカスタムフックの設計・抽出・合成・テストの実務指針を提供するスキル。 再利用性と保守性を高めるための判断基準を整理する。 Anchors: • Learning React / 適用: フック設計の基本 / 目的: 再利用可能な設計 • React公式ドキュメント / 適用: フックルール / 目的: 安全な実装 • Refactoring / 適用: 抽出判断 / 目的: 重複削減と責務分離 Trigger: Use when designing custom React hooks, extracting reusable logic, composing hooks, or validating hook usage patterns. custom hooks, hook composition, hook extraction, hook testing, hook design
daishiman
development
frontend
4
react-patterns
This skill should be used for React hooks, components, state management, performance, frontend TypeScript, Next.js, JSX/TSX, web UI components
Zate
development
frontend
4
stacked-cards
Creates horizontally fanned/cascading card stacks with proper z-index ordering and hover lift animations. Use when building album browsers, card fans, stacked previews, or any overlapping card collection.
ainergiz
development
frontend
4
state-lifting
Reactにおける状態リフティングと状態配置判断を支援するスキル。 兄弟コンポーネント間の状態共有、Prop Drilling削減、Context導入判断、 Compound Componentパターンまで、React状態管理の全体像を扱う。 Anchors: • React Documentation (Lifting State Up) / 適用: 共有状態の配置判断 / 目的: 最小責務での共有設計 • Thinking in React / 適用: 状態配置の判断フロー / 目的: 最適な状態配置の特定 • Kent C. Dodds (Colocation) / 適用: 状態と利用箇所の距離 / 目的: 保守性とパフォーマンスの両立 Trigger: Use when lifting state between components, sharing state across siblings, reducing prop drilling, deciding on Context usage, or implementing compound components. state lifting, prop drilling, context api, state placement, compound component, react state, colocation
daishiman
development
frontend
4
gpui-elements
UI element creation and composition with GPUI. Use when building element trees, creating custom components, implementing layouts, or working with conditional rendering.
cnwzhu
development
frontend
4
react-classlist
Organize long or disorganized className attributes in React components into semantic groups using cn() or className
ahkohd
development
frontend
4
expandable-card
Creates expandable/collapsible cards using CSS grid-rows animation with smooth transitions. Use when building accordions, expandable panels, collapsible sections, or show/hide card content.
ainergiz
development
frontend
4
angular-best-practices
Angular 21 development with modern best practices including signals, standalone components, reactive patterns, and accessibility. Use when creating Angular components, services, templates, or performing any Angular frontend development work. Covers TypeScript strict typing, signal-based state management, reactive forms, lazy loading, ng-icon setup, and Tailwind styling.
Boise-State-Development
development
frontend
4
headless-ui-principles
ヘッドレスUIアーキテクチャとスタイル非依存コンポーネント設計の専門知識。Radix UI、Headless UI、React Aria等を活用し、アクセシビリティを確保しながら完全なスタイル制御を実現。 Anchors: • Don't Make Me Think (Steve Krug) / 適用: シンプルで直感的なUI設計 / 目的: ユーザビリティ最適化 • Inclusive Components (Heydon Pickering) / 適用: アクセシビリティ駆動設計 / 目的: WCAG準拠コンポーネント実装 • Atomic Design (Brad Frost) / 適用: コンポーネント階層設計 / 目的: 再利用可能な設計システム構築 Trigger: Use when implementing headless UI components, building accessible custom components, selecting UI libraries, or designing component architecture with full style control. headless ui, radix ui, react aria, accessibility, wcag, aria patterns, compound components, render props, style-agnostic
daishiman
development
frontend
4
styling-with-stylex
StyleX styling patterns using design tokens, breakpoints, and custom css prop. Use when working with styles, CSS, design tokens, breakpoints, responsive design, themes, styling components, css prop, stylex.create, or when the user mentions StyleX, tokens.stylex, controlSize, color tokens, or breakpoints.
QingqiShi
development
frontend
4
component-variants
Creates light and dark mode component variants with consistent color token mapping. Use when building dual-theme components, creating light/dark UI pairs, or implementing theme-aware designs.
ainergiz
development
frontend
4
i18n-setup-wizard
Sets up complete internationalization infrastructure for React, Vue, Next.js, or vanilla JS with framework config, translation files, and language switching. Use when user asks to "setup i18n", "add translations", "multi-language support", or "internationalization setup".
Dexploarer
development
frontend
4
data-fetching-strategies
Reactアプリのデータフェッチ、キャッシュ、エラーハンドリング、楽観的更新を整理するスキル。 ライブラリ選定から設計・実装・検証までの実務フローを提供する。 Anchors: • Stale-While-Revalidate Pattern / 適用: キャッシュ戦略 / 目的: サーバー状態の一貫性確保 • React Query vs SWR / 適用: ライブラリ選定 / 目的: 要件に最適な選択 • MSW / 適用: テスト環境構築 / 目的: API依存の排除 Trigger: Use when implementing data fetching patterns, cache strategies, error handling, optimistic updates, or choosing between SWR and React Query. data fetching, cache strategy, swr, react query, optimistic updates, error handling
daishiman
development
frontend
4
error-boundary
ReactのError Boundary実装とエラーハンドリング戦略を専門とするスキル。 堅牢なエラー処理とユーザーフレンドリーなフォールバックUIを実現する。 Anchors: • The Pragmatic Programmer / 適用: エラー処理の実践原則 / 目的: 品質維持と堅牢性向上 • React Error Boundary / 適用: クラッシュ回復UI実装 / 目的: 予期しない障害対応 Trigger: Use when implementing error boundaries, creating crash recovery UI, designing async error handling, or setting up error monitoring. error boundary, componentDidCatch, getDerivedStateFromError, fallback UI, error reporting
daishiman
development
frontend
4
tailwind-v4-shadcnui
Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Includes component composition patterns, accessibility guidelines, and React Hook Form integration. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui dark mode, composing/extending components, implementing forms, ensuring accessibility, or fixing colors not working, theme not applying, CSS variables broken, tw-animate-css errors, or migrating from v3.
blockmatic
development
frontend
4
internationalizing-components
Internationalization (i18n) patterns for server and client components using getTranslations and useTranslations. Use when working with translations, locales, multilingual content, translation files, TranslationContextProvider, locale switching, or when the user mentions i18n, translations, getTranslations, useTranslations, or translation.json files.
QingqiShi
development
frontend
4
state-management
フロントエンドの状態管理戦略、ライブラリ選定、非同期状態設計、正規化と最適化を支援するスキル。 状態のスコープ整理から実装・検証までを一貫して支援する。 Anchors: • Learning React / 適用: Hooks基礎 / 目的: 状態分類と責務分離 • Redux Essentials / 適用: Redux Toolkit運用 / 目的: 予測可能な状態管理 • Vue 3 Composition API / 適用: Vue状態管理 / 目的: Composition API活用 • Domain-Driven Design / 適用: 状態モデリング / 目的: ドメイン境界の整合 Trigger: Use when selecting a state management approach, designing global/local state, handling async state, or optimizing state structure. state management, redux, zustand, context api, async state
daishiman
development
frontend
4
component-composition-patterns
コンポーネント合成パターンを用いた再利用可能なUI構造設計を支援するスキル。 Compound Components、Polymorphic Components、Slot Pattern の選定と設計手順を整理する。 Anchors: • Don't Make Me Think / 適用: UI設計・ユーザビリティ / 目的: 再利用性と保守性向上 • Atomic Design / 適用: コンポーネント階層設計 / 目的: 構造の一貫性確保 • React Patterns / 適用: 合成設計 / 目的: APIの一貫性 Trigger: Use when designing component composition patterns, selecting compound/polymorphic/slot patterns, or validating reusable UI structures. component composition patterns, compound components, polymorphic components, slot pattern, reusable UI
daishiman
development
frontend
4
add-component
Add a new component following Next.js 15 and shadcn/ui best practices
gregsantos
development
frontend
4
react-hooks-advanced
React Hooksの高度な使用パターンと最適化技術を専門とするスキル。 useEffect依存配列、メモ化戦略、カスタムフック設計、useReducerパターンを提供し、 予測可能で効率的な状態管理を実現。 Anchors: • React公式ドキュメント（Meta）/ 適用: Hooks設計 / 目的: 公式パターン準拠 • 『Learning React』（Banks/Porcello）/ 適用: コンポーネント設計 / 目的: 実践的なHooks活用 • Dan Abramovのブログ / 適用: useEffect思想 / 目的: 依存配列の完全性原則 Trigger: Use when optimizing React hooks, designing custom hooks, implementing useReducer patterns, fixing useEffect dependency issues, or applying memoization strategies. react hooks, useEffect, useCallback, useMemo, useReducer, custom hook, dependency array, memoization
daishiman
development