UI Components
Code-based UI component generation and styling
mcp-patterns
by yonatangross
MCP server building, advanced patterns, and security hardening. Use when building MCP servers, implementing tool handlers, adding authentication, creating interactive UIs, hardening MCP security, or debugging MCP integrations.
presentation-builder
by yonatangross
"Creates zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web slides, or create a slide deck for a talk, pitch, or tutorial. Generates single self-contained HTML files with inline CSS/JS."
accessibility
by yonatangross
Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, and React Aria component patterns. Use when implementing screen reader support, keyboard navigation, ARIA patterns, focus traps, or accessible component libraries.
Fact Check
by takeokunn
This skill should be used when the user asks to "verify claims", "fact check", "validate documentation", "check sources", or needs verification of external source references. Provides patterns for systematic fact verification using Context7 and WebSearch.
Requirements Definition
by takeokunn
This skill should be used when the user asks to "define requirements", "create specification", "clarify requirements", "write requirements document", or mentions requirement analysis. Provides comprehensive requirements definition methodology.
Technical Documentation
by takeokunn
This skill should be used when the user asks to "write documentation", "create README", "API docs", "design document", "specification", "user guide", or needs documentation guidance. Provides comprehensive documentation patterns for developers, teams, and end-users in both English and Japanese.
brainstorming
by yonatangross
"Design exploration with parallel agents. Use when brainstorming ideas, exploring solutions, or comparing alternatives."
react-server-components-framework
by yonatangross
Use when building Next.js 16+ apps with React Server Components. Covers App Router, Cache Components (replacing experimental_ppr), streaming SSR, Server Actions, and React 19 patterns for server-first architecture.
domain-driven-design
by yonatangross
Domain-Driven Design tactical patterns for complex business domains. Use when modeling entities, value objects, domain services, repositories, or establishing bounded contexts.
Animation Principles - Expert
by dylantarre
Use when someone has mastery of animation principles and wants to explore intentional rule-breaking, stylistic innovation, and pushing creative boundaries
developing-preact
by oaustegard
Specialized Preact development skill for standards-based web applications with native-first architecture and minimal dependency footprint. Use when building Preact projects, particularly those involving data visualization, interactive applications, single-page apps with HTM syntax, Web Components integration, CSV/JSON data parsing, WebGL shader visualizations, or zero-build solutions with CDN imports.
json-render-ui
by oaustegard
Generate guardrailed UI from natural language. Claude emits constrained JSON, skill runtime renders via Preact. Use when user provides json and requests: Dashboards with metrics, charts, tables; Admin panels; Data visualization interfaces; Form-based applications
creating-styled-wrappers
by tambo-ai
Creates styled wrapper components that compose headless/base compound components. Use when refactoring styled components to use base primitives, implementing opinionated design systems on top of headless components, or when the user mentions "use base components", "compose primitives", "styled wrapper", or "refactor to use base".
vibe-coding
by realjaymes
Guides beginner-to-intermediate developers through web development, Claude Code skills creation, and AI-assisted coding workflows. Use when the user asks about "vibe coding," "learning to code," "web development basics," "Claude skills," "building websites," "frontend," "backend," or wants help with HTML, CSS, JavaScript, or deployment.
semi-design-guide
by DouyinFE
使用 Semi Design 组件的完整指南，包括 MCP 工具使用流程、常见模式、最佳实践。当你需要查询 Semi Design 组件、生成组件代码或解决使用问题时，请使用此技能。
claude
by G1Joshi
Anthropic Claude AI models for analysis and coding. Use for AI assistants.
stable-diffusion
by G1Joshi
Stable Diffusion image generation models. Use for image AI.
web-motion-design
by dylantarre
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
universal-mindset
by dylantarre
Use when approaching any animation task—establishing foundational thinking patterns, teaching animation principles, or when none of the specialized thinking styles quite fit the situation.
brand-marketing
by dylantarre
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
continuous-loops
by dylantarre
Use when creating ongoing animations - loading spinners, pulsing indicators, ambient motion, background effects, or any animation that repeats indefinitely.
micro-interactions
by dylantarre
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
Animation Principles - Universal Reference
by dylantarre
Use when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level
universal-practitioner
by dylantarre
Use when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed.