Scan to join WeChat groupBrowse curated skills with source links, package snapshots, README assets and install signals in one calm, searchable catalog.
Translate PRDs into detailed UX specifications including user flows, screen descriptions, components, and interaction patterns. Use when a user has a PRD and needs to define the concrete UI/UX before …
Build clean, modern React components that apply common best practices and avoid common pitfalls like unnecessary state management or useEffect usage
Write clean, modern, and highly accessible HTML & JSX code, using semantically correct elements and attributes
Use when working with shadcn-svelte components, TanStack Table in Svelte 5, or Tailwind v4.1. Covers non-obvious reactivity bugs, library selection trade-offs, and migration pitfalls not in the offici…
Feature-Sliced Design (FSD) architecture for Nuxt 4+ projects. Use when deciding where to place new code, which layer a module belongs to, how to structure slices and segments, handle cross-slice comm…
-
Generate accessible color themes using @adobe/leonardo-contrast-colors. Use when the user needs help building contrast-based color palettes, checking WCAG accessibility, creating adaptive themes, or u…
Identify section boundaries and content sequences within a scraped webpage for AEM Edge Delivery Services import. Performs two-level analysis (sections, then sequences per section) and surveys availab…
Systematic usability evaluation using established heuristics (Nielsen's 10, Shneiderman's 8, or custom rubrics). Use when reviewing UI designs, screenshots, prototypes, or live products for usability …
Utilize built-in browser APIs (like Popover API, View Transitions etc) instead of building features manually via JavaScript
Comprehensive CSS skill covering modern CSS features, architecture methodologies (BEM, CSS Modules, Cascade Layers), SASS/preprocessors, accessibility patterns, responsive images, cross-browser compat…
Use when debugging TanStack Query / React Query issues: v4→v5 migration errors (gcTime, isPending, throwOnError), infinite refetch loops, SSR hydration mismatches, choosing between React Query vs SWR,…
React Portal modal implementation patterns for Dr. Sophia AI. Covers createPortal usage, AnimatePresence integration, z-index hierarchy (header always visible), dark mode styling, backdrop opacity. Us…
Inspect and interact with macOS UI elements using MacPilot accessibility APIs. Find buttons, text fields, labels, and other elements by role, label, or position, then click, read, or modify them.
Apply a Content Driven Development process to AEM Edge Delivery Services development. Use for ALL code changes - new blocks, block modifications, CSS styling, bug fixes, core functionality (scripts.js…
Generate structured HTML from authoring analysis for AEM Edge Delivery Services. Creates section structure, applies block tables, handles metadata, and manages images folder.
Build modern Next.js apps with App Router and best practices
Build clean, scalable UIs with Tailwind CSS using modern utilities and variants
Orchestrate full frontend development from a product goal to shipped UI. Establishes a shared product brief (goal, audience, aesthetic tone) as the north star, then coordinates frontend-design, ui-lay…
CRITICAL: Use for json-ui component rendering and development. Triggers on: json-ui, json render, component catalog, report render, HTML report, I18nString, i18n, bilingual, language switch, dual lang…
Use when performance requirements exist, when you suspect performance regressions, or when Core Web Vitals or load times need improvement. Use when profiling reveals bottlenecks that need fixing.
Opinionated constraints for building better interfaces with Anduril-style design.
Guide for implementing code changes in AEM Edge Delivery Services. Handles block development (new or modified), core functionality changes (scripts.js, styles, delayed.js, etc.), or both. Use this ski…
Analyze content sequences within a section and provide neutral descriptions for AEM Edge Delivery Services. Invoked per section during page import to identify breaking points between default content a…