UI Components
Code-based UI component generation and styling
engineer-skill-creator
by jamesrochabrun
Transform extracted engineer expertise into an actionable skill with progressive disclosure, allowing agents to find and apply relevant patterns for specific tasks.
math-teacher
by jamesrochabrun
Interactive math teacher that instantly generates playful, gamified learning experiences. Creates visual playgrounds, interactive artifacts, and engaging games for kids and adults to learn math concepts from basic arithmetic to advanced calculus.
figma-mcp
by tdimino
Convert Figma designs into production-ready code using MCP server tools. Use this skill when users provide Figma URLs, request design-to-code conversion, ask to implement Figma mockups, or need to extract design tokens and system values from Figma files. Works with frames, components, and entire design files to generate HTML, CSS, React, or other frontend code.
component-gallery
by tdimino
"Encyclopedic access to UI component patterns and design system implementations from component.gallery (60 components, 95 design systems, 2,676+ real-world examples). This skill should be used when researching how specific UI components are implemented across production design systems, comparing component patterns before building, finding alternative component names, or grounding frontend decisions in real-world precedent. Pairs with minoan-frontend-design for research-then-build workflows."
react-best-practices
by tdimino
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
material-3-to-material-2-theme-adapter
by rodydavis
Learn how to seamlessly integrate Material Design 3's styling into your Material Design 2 components using CSS variable overrides.
angular-module-design
by aj-geddes
Design Angular modules using feature modules, lazy loading, and dependency injection. Use when organizing large Angular applications with proper separation of concerns.
chuinb
by yizhiyanhua-ai
This skill transforms users into confident industry insiders through immersive, research-driven learning experiences. It should be used when users want to quickly master an unfamiliar industry, field, skill, or domain — whether for professional networking, investment decisions, career transitions, or pure curiosity. The skill combines Feynman Technique, First Principles thinking, and 80/20 analysis with deep web research to generate beautifully formatted, media-rich learning notes with interactive flashcards and quizzes. Triggers include: "help me understand [industry]", "I need to learn about [field] quickly", "make me an insider in [domain]", "行业速成", "快速掌握", "深度学习笔记", "/chuinb", "/master", or any request to rapidly acquire domain expertise.
skill-finder
by MooseGoose0701
"Helps users discover and install agent skills from the open skills ecosystem (skills.sh). Use when users ask 'how do I do X', 'find a skill for X', 'is there a skill that can...', want to search for tools/templates/workflows, or express interest in extending agent capabilities."
skill-finder
by MooseGoose0701
"Helps users discover and install agent skills from the open skills ecosystem (skills.sh). Use when users ask 'how do I do X', 'find a skill for X', 'is there a skill that can...', want to search for tools/templates/workflows, or express interest in extending agent capabilities."
clearshot
by udayanwalvekar
"Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text."
neon-auth
by neondatabase
Sets up Neon Auth for your application. Configures authentication, creates auth routes, and generates UI components. Use when adding authentication to Next.js, React SPA, or Node.js projects.
neon-js
by neondatabase
Sets up the full Neon JS SDK with unified auth and PostgREST-style database queries. Configures auth client, data client, and type generation. Use when building apps that need both authentication and database access in one SDK.
brainstorm-synthesis
by TechNickAI
"Use when facing hard architectural decisions, multiple valid approaches exist, need diverse perspectives before committing, or want M-of-N synthesis on complex problems"
colormaps-styling
by uw-ssec
Master color management and visual styling with Colorcet. Use this skill when selecting appropriate colormaps, creating accessible and colorblind-friendly visualizations, applying consistent themes, or customizing plot aesthetics with perceptually uniform color palettes.
lumen-ai
by uw-ssec
Master AI-powered natural language data exploration with Lumen AI. Use this skill when building conversational data analysis interfaces, enabling natural language queries to databases, creating custom AI agents for domain-specific analytics, implementing RAG with document context, or deploying self-service analytics with LLM-generated SQL and visualizations.
panel-dashboards
by uw-ssec
Master interactive dashboard and application development with Panel and Param. Use this skill when building custom web applications with Python, creating reactive component-based UIs, handling file uploads and real-time data streaming, implementing multi-page applications, or developing enterprise dashboards with templates and theming.
frontend-design
by YYH211
Creates unique, production-grade frontend interfaces with exceptional design quality. Use when user asks to build web components, pages, materials, posters, or applications (e.g., websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI). Generates creative, polished code and UI designs that avoid mediocre AI aesthetics.
architecting-solutions
by zhaono1
Designs technical solutions and architecture. Use when user says "design solution", "architecture design", "technical design", or "方案设计" WITHOUT mentioning PRD. For PRD-specific work, use prd-planner skill instead.
podcast-interview
by guia-matthieu
"Master the art of podcast interviewing using NPR training methodology and Tim Ferriss's preparation techniques to extract compelling stories and insights from any guest. Use when: Preparing for a podcast interview with a guest; Designing questions that elicit stories, not soundbites; Struggling to get guests to open up authentically; Planning a new interview-format podcast; Improving your interviewing technique"
design-trends-2026
by guia-matthieu
"Apply 2026's top graphic design trends to any creative brief. Based on Kittl × Savee's 2026 Design Trends Report (10 trends + 2 honorable mentions), backed by Adobe, Figma, and Pinterest data. Use when: Designing a brand identity — pick the right aesthetic for your audience; Creating social media assets — use trending visual languages that perform; Briefing a designer or AI image tool — give precise style direction with vocabulary and references; Refreshing a visual identity — know what's rising vs saturating; Building mood boards — combine trends intentionally with data-backed rationale."
voice-design
by guia-matthieu
"Select and create the perfect AI voice for your content using ElevenLabs, Qwen3-TTS, and other platforms—matching voice characteristics to brand personality and audience. Use when: Choosing an AI voice for video narration; Creating a consistent brand voice across content; Cloning a voice for scalable production; Comparing voice synthesis platforms; Designing voice characteristics by description"
angular-migration
by Microck
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code.
quarto
by lanej
Render computational documents to markdown (DEFAULT), PDF, HTML, Word, and presentations using Quarto. PREFER markdown output for composability. Use for static reports, multi-format publishing, scientific documents with citations/cross-references, or exporting Jupyter notebooks. Triggers on "render markdown", "render PDF", "publish document", "create presentation", "quarto render", or multi-format publishing needs.