UI Components
Code-based UI component generation and styling
drone-steam-curriculum
by kirinmok
國中無人機 STEAM 實驗教育全方位課程生成器。整合三大核心模組：(1) 無人機推算互動計算機（HTML/JS 單頁應用，含推重比 TWR、安全係數、電池壓降等工程決策矩陣），(2) 8 週教案與分工時程產生器（含兩人一機分工機制、防呆流程、學習單），(3) 預算與採購清單生成器（含匯率換算、單台成本分析）。適用於嘉義市大業實驗中學或任何國中 STEAM 實作課程場域。當使用者提到無人機課程、無人機教案、無人機計算機、推重比計算、STEAM 無人機、創客無人機、國中無人機專題、飛控教學、Arduino 無人機、兩人一機課程設計、無人機預算表、無人機採購清單，都應觸發此 Skill。即使使用者只問其中一個模組（如只要計算機或只要預算表），也應觸發此 Skill 並提供對應模組。
react-testing-best-practices
by rutpshah
React testing best practices using React Testing Library, Vitest, and Jest. Use when writing, reviewing, or generating tests for React components, hooks, context providers, async interactions, or form submissions. Triggers on tasks like "write a test for this component", "add unit tests", "test this hook", "mock this API call", "improve test coverage", or "set up Vitest".
tech-slide
by hsiangjenli
Create educational and technical presentation slides with structured layouts including covers, table of contents, section dividers, and key takeaways. Use when building technical tutorials, workshops, or educational content with Slidev.
design-pattern
by cylixlee
Applies object-oriented design principles and design patterns to generate maintainable, extensible code. Use when generating code that requires proper architectural layering, SOLID principles, and appropriate design patterns to solve recurring software design problems.
moses-product
by christopheraaronhogg
Provides expert product management analysis, requirements review, and scope assessment. Use this skill when the user needs requirements evaluation, feature prioritization guidance, or scope assessment. Triggers include requests for product review, requirements audit, or when asked to evaluate feature completeness and prioritization. Produces detailed consultant-style reports with findings and prioritized recommendations — does NOT write implementation code.
frontend-design
by trungckc5122
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.
bezaleel-architect
by christopheraaronhogg
Provides expert architectural analysis and strategic recommendations for software projects. Use for architecture reviews, system design evaluation, tech stack assessment, scalability/modernization strategy, or when asked to analyze a codebase architecturally. Produces consultant-style reports with prioritized recommendations — does NOT write implementation code.
arch-mmd
by aravhawk
Creates/updates an ARCHITECTURE.mmd file mapping out the codebase/product. Use whenever the user asks to see the architecture of the codebase/product or when the architecture changes and the current ARCHITECTURE.mmd file is out of date.
migrate-to-nextjs
by alan-ws
Autonomous site migration from any legacy stack to modern Next.js. Visual diffing, best practices enforcement, live progress on localhost.
design-systems
by moderndegree
Design tokens, spacing scales, color systems, and typography for building consistent UIs. Use when creating design systems, theming, or establishing UI foundations.
commit-description
by dakotahp
Generates a commit title and body for the current changes by analyzing the diff and the repo's existing commit style. Pass optional context to guide the output (e.g. ticket number, intent).
exile-galacticfracture
by dantunes-github
An entertainment micro-skill. Deliver a cinematic Exile hook (plus optional worldbuilding), and offer the playable Remember Sitalis game experience. Keep waitlist handoff consent-first. No email capture in chat.
progressive-disclosure
by bfmcneill
Use when designing interfaces with complex functionality, settings panels, or expert features. Covers layering information so beginners aren't overwhelmed and experts aren't held back.
ai-talking-head
by Growth4U-systems
"Specialized skill for AI talking head and lip-sync video generation. Use when you need presenter videos, UGC-style content, or lip-synced avatars. Triggers on: talking head, presenter video, lip sync, UGC video. Outputs professional talking head videos."
accessibility-compliance
by slurpyb
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
bullmq-specialist
by automindtechnologie-jpg
"BullMQ expert for Redis-backed job queues, background processing, and reliable async execution in Node.js/TypeScript applications. Use when: bullmq, bull queue, redis queue, background job, job queue."
vercel-react-best-practices
by AidanGio
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.
beautiful-mermaid
by SomtoUgeh
Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.
plone-expert-developer
by codesyntax
Expert Plone 6 and Volto development guidance. Covers backend (Python, Dexterity, plone.restapi) and frontend (React, Volto, Blocks).
tech-visualizer
by yfe404
Create interactive, animated visualizations of technical and algorithmic concepts. Use this skill whenever the user asks to visualize, illustrate, explain visually, or create a diagram/animation for any technical concept — including but not limited to: cryptographic algorithms (HMAC-SHA, AES-CBC, RSA, TLS handshake), computer vision pipelines (ORB keypoints, SIFT, optical flow, convolutions), networking protocols (TCP handshake, DNS resolution, HTTP/2 streams), data structures (B-trees, hash maps, bloom filters), ML concepts (backpropagation, attention mechanism, gradient descent), or any algorithmic/engineering process. Also trigger when the user says "show me how X works", "animate X", "interactive explainer for X", or wants to turn a technical concept into a presentation-ready visual. This skill produces polished, interactive artifacts — not static diagrams.
frontend-design
by creativernso
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
widget-studio
by Art-of-Technology
Integrates Widget Studio SDK into web projects. Supports HTML, React, Next.js, Shopify, and WordPress. Use this skill when the user wants to add Widget Studio, WidgetX, or widget-studio.weez.boo to their project.
replay-mcp
by replayio
Use Replay MCP to inspect the contents of https://replay.io recordings.
unity-2d-game-developer
by tippyentertainment
Help design, implement, debug, and optimize 2D games and tools in Unity using C#, the built-in 2D renderer, and common 2D workflows.