UI Components
Code-based UI component generation and styling
ab-test-designer
by pmprompt
Design robust A/B test experiments. Use when testing a new feature, validating a hypothesis, or optimizing conversion rates.
linpingzhi
by ForestBook
HarmonyOS NEXT原生应用开发专家技能。当用户需要开发鸿蒙应用时触发，包括：(1)使用ArkTS/ArkUI编写代码 (2)实现UI界面和组件 (3)状态管理和数据绑定 (4)动画与转场效果 (5)网络请求和数据持久化 (6)多设备适配和分布式能力 (7)性能优化和最佳实践。生成符合华为官方规范的高质量鸿蒙原生代码。
design-handoff-brief
by mohitagw15856
Transform feature briefs into structured design briefs that give designers the context they need
fibonacci-trading
by Bhala-Srinivash
Fibonacci retracement and extension trading for NSE/BSE equities. Covers entry zones using retracement levels, profit targets using extension levels, and confluence zone identification. Use when the user asks: "fib levels for [stock]", "Fibonacci retracement", "fib extensions", "where to enter on pullback", "what are the retracement levels", "golden ratio level", "Fibonacci targets", or any question about Fibonacci-based trading levels for Indian equities.
ring:dev-refactor-frontend
by LerianStudio
Analyzes frontend codebase against Ring standards and generates refactoring tasks for ring:dev-cycle-frontend. Dispatches frontend-specific agents in ANALYSIS mode.
ring:exploring-codebase
by LerianStudio
Autonomous two-phase codebase exploration - first discovers natural perspectives (layers, components, boundaries), then dispatches adaptive deep-dive explorers based on what was discovered. Synthesizes findings into actionable insights.
ring:visual-explainer
by LerianStudio
Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
ring:brainstorming
by LerianStudio
Socratic design refinement - transforms rough ideas into validated designs through structured questioning, alternative exploration, and incremental validation.
frontend-design
by WenJunDuan
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.
web-artifacts-builder
by WenJunDuan
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.
integrating-tauri-rust-frontends
by dchuk
Guides the user through integrating Rust-based WASM frontend frameworks with Tauri v2, covering Leptos and Trunk setup, WASM compilation configuration, Cargo.toml dependencies, Trunk.toml bundler settings, and withGlobalTauri API access.
regression-visual
by jmagly
@.claude/rules/executable-feedback.md
voice-analyze
by jmagly
Generator: ../voice-create/scripts/voice_generator.py
web-fetch
by NeverSight
Fetches web content with intelligent content extraction, converting HTML to clean markdown. Use for documentation, articles, and reference pages http/https URLs.
remotion
by NeverSight
Use when generating or modifying Remotion video code, creating demo videos, or working with the demo-video/ directory
tamagui-best-practices
by NeverSight
Provides Tamagui patterns for config v4, compiler optimization, styled context, and cross-platform styling. Must use when working with Tamagui projects (tamagui.config.ts, @tamagui imports).
electrobun-best-practices
by NeverSight
Use when building or maintaining Electrobun desktop apps in TypeScript, including electrobun.config.ts, electrobun/bun or electrobun/view imports, BrowserWindow/BrowserView usage, updater flows, and distribution artifacts.
edgeone-pages-deploy
by NeverSight
Deploys static HTML to a public URL instantly with no authentication required. Use when asked to "host this", "deploy this site", "get a public link", "share this HTML", "quick deploy", "publish this page", or any request to make an HTML file publicly accessible via URL. Supports self-contained HTML files with inline CSS/JS.
ux-audit-rethink
by mastepanoski
Comprehensive UX audit using IxDF's 7 factors, 5 usability characteristics, and 5 interaction dimensions. Holistic evaluation with redesign proposals based on user-centered design principles.
dignified-python
by dagster-io
Production Python coding standards with automatic version detection (3.10-3.13). Use when writing,
don-norman-principles-audit
by mastepanoski
Evaluate UX/UI using Don Norman's 7 fundamental design principles from The Design of Everyday Things. Audit discoverability, affordances, signifiers, feedback, mapping, constraints and conceptual models.
accessibility
by KreerC
Quality assurance for web accessibility and usability, particularly for users with disabilities. Use when involved in any web project.
nielsen-heuristics-audit
by mastepanoski
Evaluate UX/UI using Jakob Nielsen's 10 usability heuristics. Comprehensive audit of visibility, control, consistency, error prevention, recognition, flexibility, aesthetics, error recovery, and documentation.
ui-design-review
by mastepanoski
Comprehensive visual design and aesthetics evaluation. Analyzes typography, color, spacing, hierarchy, consistency, branding, and modern design trends for polished, professional interfaces.