- Home
- /
- Categories
- /
- UI Components
UI Components
Code-based UI component generation and styling
frontend-design
by steipete
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.
frontend-design
by CoWork-OS
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.
ant-design-vue
by partme-ai
Provides comprehensive guidance for Ant Design Vue (AntDV) component library for Vue 3. Covers installation, usage, API reference, templates, and all component categories. Use when building enterprise-class UI with Vue 3 and Ant Design.
vercel-react-native-skills
by CoWork-OS
React Native and Expo best practices for building performant mobile apps. Use
prd
by CoWork-OS
"Generate a Product Requirements Document (PRD) for a new feature. Use when planning a feature, starting a new project, or when asked to create a PRD. Triggers on: create a prd, write prd for, plan this feature, requirements for, spec out."
codereview-roasted
by OpenHands
Brutally honest code review in the style of Linus Torvalds, focusing on data structures, simplicity, and pragmatism. Use when you want critical, no-nonsense feedback that prioritizes engineering fundamentals over style preferences.
code-reviewer
by openakita
Use this skill to review code. It supports both local changes (staged or working tree)
development
by telagod
开发语言能力索引。Python、Go、Rust、TypeScript、Java、C++、Shell。当用户提到编程、开发、代码、语言时路由到此。
移动开发域 · Mobile Development
by telagod
☠️ 一键为 Claude Code / Codex CLI 注入邪修人格与 40+ 安全工程秘典 npx code-abyss
🎨 前端设计美学秘典
by telagod
☠️ 一键为 Claude Code / Codex CLI 注入邪修人格与 40+ 安全工程秘典 npx code-abyss
gen-docs
by telagod
文档生成器。自动分析模块结构,生成 README.md 和 DESIGN.md 骨架。当魔尊提到生成文档、创建README、创建DESIGN、文档骨架、文档模板时使用。在新建模块开始时自动触发。
verify-change
by telagod
变更校验关卡。分析代码变更,检测文档同步状态,评估变更影响范围。当魔尊提到变更检查、文档同步、代码审查、提交前检查、diff分析时使用。在设计级变更、重构完成时自动触发。
website-preview
by missing-semester
Take screenshots and interact with the rendered Jekyll website
aura-asset-images
by MengTo
"Use when you need high-quality stock-style images from Aura Assets (aura.build/assets) similar to Unsplash for design mockups and marketing: backgrounds, abstract wallpapers, architecture, portraits, and headshots. Includes a workflow for searching by tag on aura.build/assets and returns 5 real image URLs per category plus practical guidance for using different resolutions and aspect ratios."
writing-playwright-tests
by open-metadata
Use when writing new Playwright E2E tests or adding test cases. Provides testing philosophy, patterns, and best practices from the Playwright Developer Handbook.
kiro-skill
by feiskyer
'Interactive feature development workflow from idea to implementation. Creates requirements (EARS format), design documents, and task lists. Triggers: "kiro", ".kiro/specs/", "feature spec", "需求文档", "设计文档", "实现计划".'
nuxt-ui
by nuxt
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
narrative-text-visualization
by antvis
Generate structured narrative text visualizations from data using T8 Syntax. Use when users want to create data interpretation reports, summaries, or structured articles with semantic entity annotations. T8 is designed for unstructured data visualization where T stands for Text and 8 represents a byte of 8 bits, symbolizing deep insights beneath the text.
Design Rationale
by product-on-purpose
A curated collection of 24 best-practice, plug-and-play product management “agent skills” plus templates and workflow bundles for consistent, professional PM outputs.
mcp-builder
by mcp-use
DEPRECATED: This skill has been replaced by mcp-app-builder. Check if mcp-app-builder is available in the skills folder. If not, install it: npx skills install mcp-use/mcp-use --skill mcp-app-builder Use mcp-app-builder instead of this skill. Build Model Context Protocol (MCP) servers with mcp-use framework. Use when creating MCP servers, defining tools/resources/prompts, working with mcp-use, bootstrapping MCP projects, or when user mentions MCP development, tools, resources, or prompts.
testing-hashql
by hashintel
HashQL testing strategies including compiletest (UI tests), unit tests, and snapshot tests. Use when writing tests for HashQL code, using //~ annotations, running --bless, debugging test failures, or choosing the right testing approach.
slack
by elizaOS
Use when you need to control Slack from Otto via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
canvas
by elizaOS
"Display HTML content on connected Otto nodes (Mac app, iOS, Android). Use for games, visualizations, dashboards, and interactive demos."
baoyu-markdown-to-html
by JimLiu
Converts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, PlantUML, footnotes, alerts, infographics, and optional bottom citations for external links. Use when user asks for "markdown to html", "convert md to html", "md 转 html", "微信外链转底部引用", or needs styled HTML output from markdown.