- Home
- /
- Categories
- /
- UI Components
UI Components
Code-based UI component generation and styling
frontend-design
by bear2u
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.
design-thinking
by melodic-software
Design Thinking methodology for human-centered innovation. Covers the 5-phase IDEO/Stanford d.school approach (Empathize, Define, Ideate, Prototype, Test) with workshop facilitation and exercise templates.
wechat-article-writer
by staruhub
专业的微信公众号文章创作助手。当用户提供网站链接、文本素材或图像,需要创作微信公众号文章时使用。支持通过搜索工具丰富内容、优化标题、调整语气为官方文案风格,帮助创作高质量的公众号推文。适用于企业宣传、品牌推广、资讯报道等官方内容创作场景。
wix-cli-site-plugin
by wix
Use when building interactive components for predefined slots in Wix business solutions. Triggers include site plugin, slot, Wix app integration, plugin explorer, business solution extension.
wix-cli-site-component
by wix
"Use when building React site components with editor manifests for Wix CLI applications."
brainstorming-skill
by Jamie-BitFlight
"You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or when users request help with ideation, marketing, and strategic planning. Explores user intent, requirements, and design before implementation using 30+ research-validated prompt patterns."
erpnext-syntax-clientscripts
by OpenAEC-Foundation
"Exact JavaScript syntax for ERPNext/Frappe Client Scripts. Use when writing client-side code for form events, field manipulation, server calls, or child table handling in ERPNext v14/v15/v16. Triggers: client script, form event, frm methods, frappe.call, frappe.ui.form.on, JavaScript in ERPNext, browser-side code, UI interaction, client-side field validation."
workos
by workos
"Identify which WorkOS skill to load based on the user's task. Covers AuthKit, SSO, RBAC, migrations, and all API references."
workos-authkit-base
by workos
Architectural reference for WorkOS AuthKit integrations. Fetch README first for implementation details.
workos-authkit-base
by workos
Architectural reference for WorkOS AuthKit integrations. Fetch README first for implementation details.
database-driver-design
by Joannis
'Expert guidance on building Swift database client libraries. Use when developers mention: (1) building a database driver, (2) wire protocol implementation, (3) connection pooling design, (4) state machines for protocol handling, (5) NIO channel handlers for databases, (6) backpressure in result streaming, (7) actor executor alignment with NIO.'
figma-design
by manutej
Figma workflows, components, auto layout, constraints, prototyping, design systems, and plugin development based on Figma Plugin API documentation
frontend-architecture
by manutej
Component architecture, design patterns, state management strategies, module systems, build tools, and scalable application structure
wireframing
by manutej
Low/high fidelity wireframes, user flows, information architecture, prototyping techniques, and design iteration processes
ux-principles
by manutej
User research, usability heuristics, user psychology, accessibility, inclusive design, user testing, and UX metrics
swift-library-design
by Joannis
'Expert guidance on Swift library and framework design. Use when developers mention: (1) designing a Swift library or framework, (2) public API design patterns, (3) protocol-oriented architecture or associated types, (4) result builders or DSL design, (5) performance optimization for libraries, (6) @inlinable or @usableFromInline, (7) noncopyable types for APIs, (8) progressive disclosure in API design, (9) ResponseGenerator or builder patterns.'
shadcn-hooks
by Debbl
Apply shadcn-hooks React hooks where appropriate to build concise, maintainable React features.
jest-react-testing
by manutej
Comprehensive React component testing with Jest and React Testing Library covering configuration, mocking strategies, async testing patterns, hooks testing, and integration testing best practices
angular-development
by manutej
Comprehensive Angular framework development covering components, directives, services, dependency injection, routing, and reactive programming based on official Angular documentation
lightweight-design-analysis
by NTCoding
"This skill analyzes code for design quality improvements across 8 dimensions: Naming, Object Calisthenics, Coupling & Cohesion, Immutability, Domain Integrity, Type System, Simplicity, and Performance. Ensures rigorous, evidence-based analysis by: (1) Understanding code flow first via implementation-analysis protocol, (2) Systematically evaluating each dimension with specific criteria, (3) Providing actionable findings with file:line references. Triggers when users request: code analysis, design review, refactoring opportunities, code quality assessment, architecture evaluation."
mapbox-style-patterns
by mapbox
Common style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, and more. Use when implementing specific map use cases or looking for proven style patterns.
framer-code-components-overrides
by fredm00n
Create Framer Code Components and Code Overrides. Use when building custom React components for Framer, writing Code Overrides (HOCs) to modify canvas elements, implementing property controls, working with Framer Motion animations, handling WebGL/shaders in Framer, or debugging Framer-specific issues like hydration errors and font handling.
odoo-frontend
by ahmed-lakosha
"Advanced Odoo frontend development with comprehensive theme development, /create-theme command, theme.utils activation system, complete dynamic page reference (headers, footers, shop, blog), design workflow methodology, PWA support, modern JavaScript/TypeScript, testing frameworks, performance optimization, accessibility compliance, and real-time features. Features complete $o-website-values-palettes reference, theme mirror model architecture, publicWidget patterns with editableMode handling, and MCP integration. Supports Odoo 14-19 with auto-detection."
ecosystem-guide
by spences10
Guide to spences10's Claude Code ecosystem. Use when user asks which tool to use, how tools relate, or needs help choosing between MCP servers, skills, or CLIs.