UI Components
Code-based UI component generation and styling
brainstorming
by tomwangowa
Use before any creative or implementation work — new features, architecture changes, refactoring, or workflow design. Explores intent through Socratic dialogue, proposes approaches with trade-offs, and produces an approved design before any code is written.
components-guide
by get-convex
Guide to using Convex components for feature encapsulation. Learn about sibling components, creating your own, and when to use components vs monolithic code.
design-principles
by dashed
"Guide AI-assisted UI generation toward enterprise-grade, intentional design. Use when building user interfaces, creating dashboards, designing enterprise software or SaaS applications, generating frontend code with styling, or when the user asks for design help. Enforces principles inspired by Linear, Notion, Stripe, and Vercel."
fetch-url
by DCjanus
渲染网页 URL，去噪提取正文并输出为 Markdown（默认）或其他格式/原始 HTML，以减少 Token。
android-biometric-login
by peterbamuhigire
"Optional biometric (fingerprint/face) gate on Android app launch using AndroidX Biometric API. Covers BiometricHelper utility, splash screen integration, settings toggle with verification, EncryptedSharedPreferences storage, and graceful fallback. Use when adding biometric authentication to any Android app."
ux
by williamzujkowski
Ux standards for ux in Design environments. Covers best practices, implementation
maplibre-mapbox-migration
by maplibre
Migrating from Mapbox GL JS to MapLibre GL JS — package and import changes, removing the access token, choosing tile sources, plugin equivalents, and what you gain or give up. Use when moving an existing Mapbox map to MapLibre.
aws-advanced-patterns
by williamzujkowski
'Orchestration & Events:'
technical-integrations
by vincentkoc
Hunt existing integration patterns and design vendor/framework-agnostic API, RFC, SDK, and integration plans for new external vendor integrations.
design-tokens
by dadbodgeoff
Comprehensive design token system for typography, colors, and theming with WCAG AA compliance, TypeScript types, and framework integration (CSS-in-JS, Tailwind, CSS Variables).
mobile-components
by dadbodgeoff
Mobile-first UI components including bottom navigation, bottom sheets, pull-to-refresh, and swipe actions. Touch-optimized with proper gesture handling.
canvas-design
by skillcreatorai
Create beautiful visual art in .png and .pdf documents using design philosophy. Use when the user asks to create a poster, piece of art, design, or other static visual piece. Creates original visual designs.
expo-deployment
by skillcreatorai
Deploy Expo apps to iOS App Store, Android Play Store, and web.
web-design-guidelines
by skillcreatorai
Modern web design principles for responsive layouts, accessibility, and visual hierarchy.
drawio-diagrams-enhanced
by jim60105
This skill should be used when the user asks to "create a diagram", "draw a flowchart", "make a swimlane diagram", "create WBS", "generate RACI matrix", "build network diagram", "create org chart", or mentions draw.io, diagrams.net, BPMN, UML, Gantt, PERT, or project management diagrams. Integrates with next-ai-draw-io MCP server for real-time diagram creation and editing.
upgrading-expo
by skillcreatorai
Guidelines for upgrading Expo SDK versions and fixing dependency issues.
email-campaign
by treasure-data
This skill should be used when the user asks to "create an email", "build an email campaign", "design an email template", "generate an email for a segment", "preview an email", or "push an email to Engage". Generates enterprise-grade HTML email templates with live preview in Treasure Studio and natural language editing, then pushes the final version to Treasure Engage.
brand-guidelines
by skillcreatorai
Apply brand colors and typography to artifacts. Use when brand colors, style guidelines, visual formatting, or company design standards apply. Ensures consistency across branded content.
expo-app-design
by skillcreatorai
Build beautiful cross-platform mobile apps with Expo Router, NativeWind, and React Native.
react-best-practices
by skillcreatorai
React development guidelines with hooks, component patterns, state management, and performance optimization.
developer-growth-analysis
by skillcreatorai
Analyzes your recent Claude Code chat history to identify coding patterns, development gaps, and areas for improvement, curates relevant learning resources from HackerNews, and automatically sends a personalized growth report to your Slack DMs.
figma
by hoodini
Integrate with Figma API for design automation and code generation. Use when extracting design tokens, generating React/CSS code from Figma components, syncing design systems, building Figma plugins, or automating design-to-code workflows. Triggers on Figma API, design tokens, Figma plugin, design-to-code, Figma export, Figma component, Dev Mode.
domain-name-brainstormer
by skillcreatorai
Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.
artifacts-builder
by skillcreatorai
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.