UI Components
Code-based UI component generation and styling
astro-developer
by mokbhai
Comprehensive Astro web framework development guidance for 2026. Use when building, configuring, or troubleshooting Astro projects; creating components; setting up routing; implementing islands architecture; working with React, Tailwind CSS, and Node.js integrations; testing; performance optimization; or deployment strategies. Includes TypeScript patterns, state management, API routes, and common pitfalls solutions.
documentation-lookup
by SebastiaanWouters
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc. Trigger on "use context7"
kor-ui
by KorSoftwareSolutions
Complete guide for using the Kor UI library (@korsolutions/ui) in React Native and Expo applications. Use this skill when building user interfaces with Universal UI, customizing themes, setting up the library, working with any of the 27+ components (Button, IconButton, Input, Select, Checkbox, RadioGroup, Alert, Card, Separator, Tabs, Menu, Popover, Calendar, Toast, etc.), styling and theming, implementing compound components, debugging component issues, or when the user mentions "@korsolutions/ui", "Universal UI", "UIProvider", or asks about unstyled primitives, theme customization, or React Native UI components. This skill covers installation, provider setup, component usage patterns, theme customization, variant system, hooks, responsive design, and troubleshooting.
next-loading-skeleton
by akashp1712
"⚡ Instant Loading UI for Next.js - Auto-generate beautiful loading.tsx with shadcn/ui Skeleton placeholders. Perfect for dashboards, data tables, and profile pages. Zero wait time, maximum user satisfaction."
beautiful-diagrams
by apetcu
"Generate beautiful article diagrams (pipeline, sequence, grid) using HTML + Playwright. Canvas background, gradient service cards, clean professional style. Use when creating architecture diagrams, sequence diagrams, token/secret maps, or any visual diagram for articles. Triggers: 'create diagram', 'generate diagram', 'make architecture diagram', 'build sequence diagram', 'create a visual', 'diagram for article'."
web-app-designer
by CAPHTECH
"Webアプリの個別画面・コンポーネントのデザインを体系的に行うスキル。デザインプロセス・レイアウト・コンポーネント設計・インタラクション・アクセシビリティなどWebデザインの確立された手法を適用する。デザインシステム全体の構築・運用はdesign-system-builderスキルを使用すること。Use when: 「Webアプリをデザインして」「UIを設計して」「画面をデザインして」「レスポンシブ対応して」「アクセシビリティを改善して」「コンポーネントを設計して」「カラーパレットを決めて」と言われた時。"
emrah-skills
by emrahyurttutan
Expo React Native mobile app development with expo-iap in-app purchases, AdMob ads, i18n localization, ATT tracking transparency, optional OIDC authentication, onboarding flow, paywall, and NativeTabs navigation
ti-howtos
by macCesar
"Titanium SDK native feature integration guide. Use when implementing, reviewing, analyzing, or examining Titanium location services, maps (Google Maps v2, Map Kit), push notifications (APNs, FCM), camera/gallery, media APIs, SQLite databases, HTTPClient networking, WKWebView, Android Intents, background services, iOS Keychain/iCloud, WatchKit/Siri integration, or CI/CD with Fastlane and Appium."
ui-skills
by simonlee2
This skill should be used when the user asks to "build UI", "create interface", "design components", "implement frontend", or needs guidance on building accessible, performant interfaces with proper animation, typography, and component patterns. Provides opinionated constraints for building better interfaces with agents.
aico-frontend-style-extraction
by yellinzero
Extract design tokens (colors, typography, spacing, effects) from reference website or screenshot to create project design system. UNIQUE VALUE: Creates standardized design-system.md file with all design tokens extracted systematically. Use this skill when: - User shares reference website URL and wants to extract its style - User provides screenshot or image and asks to "extract design", "extract style" - Running /frontend.init and need to create design system from reference - User asks to "create design system", "extract colors", "extract typography" - Need to establish consistent design tokens before starting frontend work Methods: URL (via Playwright MCP screenshot) or direct screenshot analysis Output: ALWAYS write to docs/reference/frontend/design-system.md
tech-lead
by k1lgor
Use this for complex project planning, full-stack feature implementation, or coordinating multiple skills (Design, Backend, Frontend, Ops) into a cohesive workflow.
react
by SebastiaanWouters
React v19 best practices for Vite SPA. Triggers on component design, re-renders, performance, memoization, state management, bundle optimization. Use for client-side React patterns.
apple-foundation-models
by jakerains
Build Apple Intelligence features with Foundation Models and Image Playground on iOS, iPadOS, macOS, and visionOS. Use when implementing or debugging SystemLanguageModel, LanguageModelSession, guided generation with @Generable, tool calling, custom adapters, model availability checks, context-window limits, local on-device inference, routing to larger-model paths (App Intents Use Model or custom backend fallback), and ImagePlayground or ImageCreator APIs.
shadcn-ui
by SebastiaanWouters
Build UIs with shadcn/ui components. Covers CLI commands, component installation, theming with CSS variables, OKLCH colors, and customization patterns. Triggers on shadcn, shadcn-ui, add component, or theming questions.
superdoc-react
by superdoc-dev
React integration guidelines for SuperDoc document editor. Use when adding document editing capabilities to React or Next.js applications, working with DOCX files, or implementing collaboration features. Triggers on tasks involving document editors, DOCX handling, or SuperDoc integration.
playwriter
by SebastiaanWouters
Controls Chrome browser via Playwright MCP for web automation, testing, screenshots, and scraping. Use when explicitly asked to "use playwriter".
impeccable-harden
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /harden. Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use for frontend and UI design tasks."
gluestack-ui-v4:setup
by gluestack
Guide for installing gluestack-ui v4 per the official Installation doc - CLI and Manual paths only. Follow https://v4.gluestack.io/ui/docs/home/getting-started/installation strictly.
chrome-extension-architect
by Alcyone-Labs
Privacy-first Chrome Manifest Version 3 extension architect - sidePanel design, MV3 service worker lifecycle, least-privilege permission audits, storage strategy, and cross-browser sidebar patterns.
kuroco-server-processing
by diverta
KurocoのSmartyプラグイン・構文リファレンスおよびWebhook・バッチ処理・自動化のベストプラクティス。使用キーワード：「Smartyプラグイン」「Smarty関数」「Smarty修飾子」「Smarty構文」「テンプレート関数」「assign」「foreach」「if」「escape」「date_format」「truncate」「api_internal」「sendmail」「slack_post_message」「fileupload」「rcms_vue_component」「translate」「pager」「rcms_auth」「login」「logout」「ai_completion」「write_file」「put_file」「json_encode」「変数代入」「ループ処理」「条件分岐」「文字列操作」「日付フォーマット」「ファイル操作」「API呼び出し」「メール送信」「Slack通知」「Vue連携」「認証」「ページネーション」「$smarty変数」「セキュリティ設定」「IF_FUNCS」「MODIFIER_FUNCS」「capture」「literal」「section」「Webhook」「バッチ処理」「定期実行」「スケジュール実行」「cron」「15分毎」「1時間毎」「外部連携」「GitHub Actions」「repository_dispatch」「workflow_dispatch」「Slack通知」「slack_send」「Chatwork」「chatwork_send」「メール通知」「send_mail」「SendGrid」「sendgrid_send」「自動処理」「api_request」「外部API」「トリガー」「前処理」「後処理」「Function」「カスタム処理」「CSV出力」「topics変数」「inquiry変数」。Smartyテンプレートの構文・プラグイン、定期実行、外部通知、トリガー処理に関する質問で使用。
elite-ux-strategy
by RSHVR
Conversion optimization and UX strategy for premium websites. Use when asked about: conversion rate optimization (CRO), signup flows, checkout optimization, pricing pages, CTAs, headlines, copywriting, A/B testing, lead generation, cart abandonment, onboarding, retention, social proof, testimonials, trust signals, urgency, scarcity, growth, viral loops, or when you need to make design decisions that impact business outcomes. This skill provides the "why" behind design choices.
picasso
by SebastiaanWouters
Generate visual assets (favicons, icons, logos, game sprites, UI elements) using fal.ai image generation. Triggers on "generate icon", "create favicon", "make logo", "create sprite", "generate asset", "picasso".
impeccable-bolder
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /bolder. Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use for frontend and UI design tasks."
design-system-builder
by CAPHTECH
"デザインシステムの構築・運用を体系的に行うスキル。ドキュメント（要件定義・ブランドガイドライン）からDesign Tokens・コンポーネント体系・ガバナンスまでを一貫して設計する。思考フレームワーク（Double Diamond・Atomic Design・Design Tokens 3層）の適用、暗黙的デザイン判断の形式知化（DDR/QOC/RFC）、UIインベントリ収集（手動+MCP自動化）を統合する。Use when: 「デザインシステムを構築して」「デザインシステムを設計して」「デザイントークンを定義して」「デザイン原則を策定して」「UIインベントリを作って」「デザインガバナンスを設計して」「デザイン判断を記録して」と言われた時。"