frontend
0
navigation-menus
Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions
dylantarre
development
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
frontend
0
tailwind-4
Tailwind CSS 4.1+ patterns. Use when styling components, responsive design, container queries, masks, shadows, or animations. (project)
tirtza-weinfeld
development
frontend
0
tailwindcss-v4
Tailwind CSS v4.1 core features, @theme, directives, migration guide
fusengine
development
frontend
0
responsive-layout
Responsive layout considerations using CSS and Javascript. When Claude needs to build responsive, fluid layouts.
toddmoy
development
frontend
0
maplibre-react
MapLibre GL JS integration with React for tactical map displays. Covers map initialization, GeoJSON sources, clustering, custom layers, and incident markers. Use when working on map components or spatial visualization.
ohall
development
frontend
0
shadcn
Implement shadcn/ui components for PhotoVault with accessibility and theming. Use when working with UI components, forms, dialogs, buttons, cards, tables, Tailwind styling, or fixing accessibility issues. Includes PhotoVault theme system and established UI patterns.
nathanielcrowell12-spec
development
frontend
0
refactorreact
Refactor React and TypeScript code to improve maintainability, readability, and performance. This skill transforms complex React components into clean, well-structured code following modern React 19 patterns. It addresses component bloat, prop drilling, unnecessary re-renders, and improper hook usage. Leverages React 19 features including the React Compiler for automatic memoization, Actions for form handling, useOptimistic for immediate UI feedback, the use() hook for async data, and Server Components for optimal performance.
SnakeO
development
frontend
0
using-alignment-enums
ReactUMG 对齐/居中与可见性/显隐枚举值速查。在设置水平对齐、垂直对齐、HorizontalAlignment、VerticalAlignment、Visibility、隐藏/显示组件时激活。注意 Center=2（不是1）、Visible=0、Collapsed=1 等常见混淆点。
15195999826
development
frontend
0
fix-mobx-reactivity-issues
Diagnose and fix common MobX reactivity problems including components not updating, state changes not triggering re-renders, and async update issues. Use when UI doesn't respond to state changes, computed values don't recalculate, or observer components don't re-render.
biggs3d
development
frontend
0
frontend--components
Apply the Agent OS standard for frontend components.
tlabs-xyz
development
frontend
0
react-hook-form
Performant form management with React Hook Form. Covers form state, validation with Zod, field arrays, form submission, and error handling. Trigger: When building forms, when implementing form validation, when handling form submissions, when using Zod schema validation.
Dsantiagomj
development
frontend
0
composing-components
Teaches component composition patterns in React 19 including children prop, compound components, and render props. Use when designing component APIs, creating reusable components, or avoiding prop drilling.
djankies
development
frontend
0
smooth-scroll
Add smooth scrolling for same-page anchor links only. Uses JavaScript to handle
deomiarn
development
frontend
0
sanitizing-user-inputs
Sanitizing and validating user input to prevent XSS, injection attacks, and security vulnerabilities in TypeScript applications
djankies
development
frontend
0
view-transitions-generator
Implémente l'API View Transitions pour des transitions fluides entre pages et états. MANDATORY pour toutes navigations. À utiliser lors de navigation, page transitions, ou quand l'utilisateur mentionne "transition", "animation", "navigation", "smooth".
RomualdP
development
frontend
0
component-patterns
Build well-structured React components using variant patterns, pure components, and container patterns. Provides patterns for component organization, type safety, and separation of concerns. Use when: building components with multiple display modes, organizing component hierarchies, implementing container/presentational patterns, reducing component proliferation while maintaining clear APIs.
joshcox
development
frontend
0
frontend-accessibility
Build accessible user interfaces with semantic HTML, keyboard navigation, proper color contrast, ARIA attributes, and screen reader support. Use this skill when creating or modifying frontend UI components, HTML templates, JSX/TSX files, forms, interactive elements, modals, navigation menus, or any user-facing interface code. Use this when ensuring keyboard accessibility, adding ARIA labels and roles, providing alt text for images, managing focus states, implementing proper heading hierarchy, testing with screen readers, or ensuring sufficient color contrast ratios. Use this when working on .jsx, .tsx, .vue, .html, or component files that render UI elements.
Software-Design-Club
development