UI 组件
基于代码的 UI 组件生成与样式实现
frontend-design
Project-N-E-K-O
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Vanilla JS UI Race Conditions (VRM vs Live2D)
Project-N-E-K-O
Dealing with delayed DOM generation, lazy loading, and optimistic state synchronization in vanilla JavaScript without a reactive framework.
🎨 UI 设计规范
Project-N-E-K-O
Project N.E.K.O. 胶囊化 UI、品牌蓝视觉系统规范
jazz-permissions-security
garden-co
Use this skill when designing data schemas, implementing sharing workflows, or auditing access control in Jazz applications. It covers the hierarchy of Groups, Accounts, and CoValues, ensuring data is private by default and shared securely through cascading permissions and invitations.
marp-slides
Mathews-Tom
'Author MARP markdown slide decks exportable to PDF, PPTX, and HTML via marp-cli. Covers Marpit directives, custom CSS themes, SVG chart recipes, and dashboard components. Triggers on: "marp", "marp deck", "markdown slides", "slides from markdown", "marp-cli", "pdf from markdown", "pptx from markdown".'
remotion-video
Mathews-Tom
'Create motion graphics and videos using Remotion (React) with audio sync, web fonts, and TailwindCSS. Triggers on: "create a Remotion video", "React video", "motion graphics", "branded video", "product demo video", "video with voiceover". NOT for math animations, use concept-to-video.'
md-to-pdf
Mathews-Tom
'Convert Markdown to styled PDFs with Mermaid diagrams, LaTeX/KaTeX math, tables, and code highlighting. Triggers on: "convert markdown to pdf", "make a pdf from this md", "export markdown as pdf", "pdf from markdown with equations".'
html-presentation
Mathews-Tom
'Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and multiple themes. Triggers on: "create a presentation", "slide deck", "pitch deck", "HTML presentation", "web-based slides", "reveal.js deck", "convert document into slides".'
static-web-artifacts-builder
Mathews-Tom
'Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics. Pure HTML5+CSS3+inline SVG, zero toolchain. Triggers on: "interactive HTML", "open in browser", "HTML artifact", "visual dashboard", "HTML infographic". NOT for PNG/SVG output, use concept-to-image.'
product-surface-areas
inkeep
Consolidated dependency graph of Inkeep customer-facing surface areas (UIs, CLIs, SDKs, APIs, protocols, config formats). Example use: as a prd-time (planning/brainstorming phase) or post-change checklist to understand the full scope of side-effects or what making one change to the product means for the rest. Use whenever you need to understand the "ripple" out effects of any change.
frontend-design
jjyaoao
Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.
gift-evaluator
jjyaoao
The PRIMARY tool for Spring Festival gift analysis and social interaction generation. Use this skill when users upload photos of gifts (alcohol, tea, supplements, etc.) to inquire about their value, authenticity, or how to respond socially. Integrates visual perception, market valuation, and HTML card generation.
phoenix-github
Arize-ai
Manage GitHub issues, labels, and project boards for the Arize-ai/phoenix repository. Use when filing roadmap issues, triaging bugs, applying labels, managing the Phoenix roadmap project board, or querying issue/project state via the GitHub CLI.
accessibility-checklist
inkeep
Accessibility review checklist for React/Next.js components built on Radix UI / shadcn/ui. Covers component library misuse, form accessibility, accessible names, keyboard interaction, focus management, and dynamic content. Loaded by pr-review-frontend.
next-best-practices
inkeep
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
css
Mindrally
Best practices for CSS development including modern layout techniques, naming conventions, theming, and maintainable stylesheet architecture
cheerio-parsing
Mindrally
Expert guidance for HTML/XML parsing using Cheerio in Node.js with best practices for DOM traversal, data extraction, and efficient scraping pipelines.
angular
Mindrally
Expert in Angular TypeScript development with scalable, high-performance patterns
bootstrap
Mindrally
Bootstrap development guidelines for responsive layouts, components, and utility-first styling.
blazor
Mindrally
Guidelines for Blazor development including component lifecycle, state management, and performance optimization
convex
Mindrally
Guidelines for developing with Convex backend-as-a-service platform, covering queries, mutations, actions, and real-time data patterns
c-sharp
Mindrally
Guidelines for C# development including Blazor, Unity game development, and .NET backend best practices
android-development
Mindrally
Android development guidelines for Kotlin with clean architecture, MVI pattern, Material Design, and best practices for building robust mobile applications
deep-learning
Mindrally
Comprehensive deep learning guidelines for neural network development, training, and optimization.