UI Components
Code-based UI component generation and styling
frontend-design
by guanyang
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.
artifacts-builder
by ComposioHQ
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.
agentation
by benjitaylor
Add Agentation visual feedback toolbar to a Next.js project
voice-update
by pchalasani
This skill should be used when the agent needs to give a spoken voice update to the user, or when reminded by a Stop hook to provide audio feedback. Use this skill to speak a short summary of what was accomplished.
add-pattern
by pchalasani
Use this skill when you learn one or more design pattern(s) in the
ai-development-guide
by shinpr
Technical decision criteria, anti-pattern detection, debugging techniques, and quality check workflow. Use when making technical decisions, detecting code smells, or performing quality assurance.
infographic-creator
by antvis
基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
openspec-onboard
by PBH-BTN
Guided onboarding for OpenSpec - walk through a complete workflow cycle with narration and real codebase work.
openspec-onboard
by PBH-BTN
Guided onboarding for OpenSpec - walk through a complete workflow cycle with narration and real codebase work.
openspec-explore
by PBH-BTN
Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
consciousness-council
by K-Dense-AI
Run a multi-perspective Mind Council deliberation on any question, decision, or creative challenge. Use this skill whenever the user wants diverse viewpoints, needs help making a tough decision, asks for a council/panel/board discussion, wants to explore a problem from multiple angles, requests devil's advocate analysis, or says things like "what would different experts think about this", "help me think through this from all sides", "council mode", "mind council", or "deliberate on this". Also trigger when the user faces a dilemma, trade-off, or complex choice with no obvious answer.
vercel-react-best-practices
by polarsource
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
discovery-interview-prep
by deanpeters
Guide product managers through preparing for customer discovery interviews by asking adaptive questions about research goals, customer segments, constraints, and methodologies. Use this to design effe
onchainkit
by BankrBot
Build onchain applications with React components and TypeScript utilities from Coinbase's OnchainKit. Use when users want to create crypto wallets, swap tokens, mint NFTs, build payments, display blockchain identities, or develop any onchain app functionality. Supports wallet connection, transaction building, token operations, identity management, and complete onchain app development workflows.
godot-characterbody-2d
by thedivergentai
"Expert patterns for CharacterBody2D including platformer movement (coyote time, jump buffering, variable jump height), top-down movement (8-way, tank controls), collision handling, one-way platforms, and state machines. Use for player characters, NPCs, or enemies. Trigger keywords: CharacterBody2D, move_and_slide, is_on_floor, coyote_time, jump_buffer, velocity, get_slide_collision, one_way_platforms, state_machine."
decision-toolkit
by glebis
Generate structured decision-making tools — step-by-step guides, bias checkers, scenario explorers, and interactive dashboards. Use when facing significant choices requiring systematic analysis. Supports multiple cognitive styles and output formats.
distribution-channels
by kostja94
When the user wants to plan product distribution via marketplaces, app stores, or third-party platforms. Also use when the user mentions "distribution channels," "marketplace listing," "app store listing," "Figma plugin," "Chrome extension marketplace," "AWS Marketplace," "Shopify app," "GPTs store," "app distribution," or "third-party marketplace."
context-fundamentals
by guanyang
This skill should be used when the user asks to "understand context", "explain context windows", "design agent architecture", "debug context issues", "optimize context usage", or discusses context components, attention mechanics, progressive disclosure, or context budgeting. Provides foundational understanding of context engineering for AI agent systems.
api-patterns
by vudovn
API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.
webapp-testing
by vudovn
Web application testing principles. E2E, Playwright, deep audit strategies.
ask-user-question
by MemTensor
Ask users questions via the UI. Use when you need clarification, user preferences, or confirmation before proceeding. The user CANNOT see CLI output - this tool is the ONLY way to communicate with them.
a11y-debugging
by ChromeDevTools
Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.
frontend-design
by EpicenterHQ
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.
styling
by EpicenterHQ
CSS and Tailwind styling guidelines. Use when writing styles, creating UI components, reviewing CSS/Tailwind code, or deciding on wrapper element structure.