frontend
0
page-layout-patterns
Standardize page structure - always use MainLayout wrapper, space-y-32 for sections, px-8 py-16 for page padding, responsive grid patterns
JewelsHovan
development
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
frontend
0
frontend-css
Write maintainable, consistent CSS following the project's methodology (Tailwind, BEM, CSS modules, utility classes) with design tokens and performance optimization. Use this skill when writing CSS styles, styling UI components, implementing layouts, working with CSS files (.css, .scss, .sass, .less), writing Tailwind utility classes, implementing CSS modules, creating or updating design tokens, working with CSS-in-JS solutions, implementing responsive styles, writing custom CSS when framework utilities are insufficient, optimizing CSS for production, or working with styling in component files (styled-components, emotion, Vue scoped styles). Use when working with any styling approach including Tailwind, Bootstrap, BEM, CSS modules, styled-components, emotion, or traditional CSS.
tlabs-xyz
development
frontend
0
krammeconnect-modernize-legacy-angular-component
Use this Skill when working in the Connect monorepo and needing to modernize legacy Angular components.
Abildtoft
development
frontend
0
state-management
React Query and Zustand patterns for state management. Use when implementing data fetching, caching, mutations, or client-side state. Triggers on tasks involving useQuery, useMutation, Zustand stores, caching, or state management.
AsyrafHussin
development
frontend
0
write-component
Write React components following the Epic architecture patterns. Use when creating page components, UI components, or refactoring components to follow the three-layer architecture. Triggers on "create a component", "add a component", or "write a component for".
coeus-ventures
development
frontend
0
pythonista-nicegui
Use when building UI with NiceGUI, creating components, fixing styling issues. Triggers on "nicegui", "quasar", "tailwind", "ui.row", "ui.column", "ui.card", "ui.dialog", "gap", "spacing", "layout", "modal", "component", "styling", "flexbox", "chart", or when creating/editing UI code.
gigaverse-app
development
frontend
0
continuous-infinite
Use when building ongoing loop animations - loading states, ambient motion, background effects that run indefinitely without user fatigue
dylantarre
development
frontend
0
nextjs-pathname-id-fetch
Focused pattern for fetching data using URL parameters in Next.js. Covers creating dynamic routes ([id], [slug]) and accessing route parameters in server components to fetch data from APIs. Use when building pages that display individual items (product pages, blog posts, user profiles) based on a URL parameter. Complements nextjs-dynamic-routes-params with a simplified, common-case pattern.
mcclowes
development
frontend
0
feedback-design
Use when building loading states, progress indicators, success confirmations, or error messages. Covers feedback loops and patterns that feel satisfying.
bfmcneill
development
frontend
0
javascript-author
Write vanilla JavaScript for Web Components with functional core, imperative shell. Use when creating JavaScript files, building interactive components, or writing any client-side code.
ProfPowell
development
frontend
0
accessibility
Use when implementing accessible UI patterns - provides ARIA attributes, keyboard navigation, focus management, screen reader support, and a11y best practices for Vue components
Sebastiaaann
development
frontend
0
sikhaid-components
Use when creating, modifying, or understanding Svelte components in SikhAid project. Covers component naming conventions, file organization, component hierarchy, import patterns, and reusable UI patterns.
the-non-expert
development
frontend
0
writing-revealjs-presentations
Use when creating or editing reveal.js presentations, or when user mentions slides, presentations, reveal.js, code examples in slides, speaker notes, or slide design - enforces Tailwind CSS, proper code sizing, progressive reveal, semantic colors, and timing markers
ZempTime
development
frontend
0
tanstack-errors
This skill should be used when the user asks about "React Query error handling", "error boundaries with useQuery", "throwOnError", "global error callbacks", "onError callback", "query error state", "mutation error handling", or needs guidance on error handling strategies and patterns in TanStack Query.
salmanrrana
development
frontend
0
htmx-expert
This skill should be used when users need help with htmx development, including implementing AJAX interactions, understanding htmx attributes (hx-get, hx-post, hx-swap, hx-target, hx-trigger), debugging htmx behavior, building hypermedia-driven applications, or following htmx best practices. Use when users ask about htmx patterns, server-side HTML responses, or transitioning from SPA frameworks to htmx. (user) Triggers: "htmx", "htmx expert", "htmx help", "htmx patterns", "htmx debugging", "htmx best practices", "html ajax", "html interactivity", "html first".
czer323
development
frontend
0
headless-ui
Build headless UI hooks that encapsulate data fetching, state management, routing, and mutations without UI rendering. The presenter layer in MVP architecture. Use when: building page-level hooks, creating domain-specific data hooks, separating application concerns from presentation, implementing the presenter layer, composing multiple data sources.
joshcox
development
frontend
0
layout-navigation-components
Componentes de UI para layout e navegação seguindo o padrão de components do Easy Budget.
JoseApRJunior
development
frontend
0
frontend-design
UIコンポーネント、スタイリング、レイアウト、デザインシステムを作成する際にブランド一貫性のあるデザインガイドラインを適用する。フロントエンドコンポーネントの構築、デザイン実装、ビジュアル/UXに関する議論の際に使用。Nyatinte BlogのNord風ダークテーマ（Polar Night背景とFrostアクセント）への準拠を保証する。
nyatinte
development
frontend
0
rimitive-behavior
Create headless behaviors in Rimitive. Use when creating reusable state logic, hooks, or headless UI patterns like toggles, forms, disclosure, or any portable reactive logic.
hejhi
development
frontend
0
frontend-accessibility
Build accessible user interfaces following WCAG 2.2 standards with proper semantic HTML, ARIA attributes, keyboard navigation, and screen reader support. Use this skill when creating or modifying UI components, forms, interactive elements, navigation menus, modals, or any frontend code that users interact with. Apply this skill when implementing keyboard navigation, focus management, color contrast requirements, alternative text for images, form labels, ARIA roles and landmarks, or when ensuring components work with assistive technologies like screen readers. This skill is essential when working with React, Vue, or other framework components, HTML templates, JSX files, or any UI implementation to ensure inclusive design that serves users with visual, auditory, motor, or cognitive disabilities and meets legal compliance standards (ADA, WCAG 2.2 Level AA).
overtimepog
development
frontend
0
tailwind-v4
Use when working on Tailwind v4. Watch for deprecated utilities and updated configuration patterns.
rozwer
development
frontend
0
handling-animations
Define animations with @keyframes within @theme directive, use animate-{name} utilities, and implement entry animations with starting: variant. Use when creating custom animations or entry effects.
djankies
development
frontend
0
slice-factory
Zustand slice factory design. Use when creating new form input slices, understanding slice patterns, or asking about slice architecture.
hajimism
development
frontend
0
designer-agent
Design guardian and reviewer that ensures UI implementations align with Billboard's visual language and the Fireside Tribe design system
Atemndobs
development