UI Components
Code-based UI component generation and styling
explain
by imgly
Explain how CE.SDK Web features work — concepts, architecture, and workflows. Covers React, Vue.js, Svelte, Angular, Electron, Vanilla JavaScript, Node.js, Nuxt.js, Next.js, SvelteKit. Use when the user says "explain", "how does X work", "walk me through", "what is", or "describe" and wants to understand a CE.SDK concept for Web development. Generates custom markdown explanations with diagrams and code examples. Not for looking up existing docs (use docs-{framework}) or writing code (use build). <example> Context: User wants to understand how text layers work user: "Explain how text layers work in CE.SDK" assistant: "I'll use /cesdk:explain to generate a detailed explanation." </example> <example> Context: User needs a concept explained user: "How does the block hierarchy work for video editing?" assistant: "Let me use /cesdk:explain to explain video block hierarchy." </example>
docs-js
by imgly
Look up CE.SDK Vanilla JavaScript reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for Vanilla JavaScript — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing Vanilla JavaScript doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about Vanilla JavaScript configuration user: "How do I configure the editor in Vanilla JavaScript?" assistant: "I'll use /cesdk:docs-js to look up configuration options." </example> <example> Context: User needs vanilla JS setup user: "How do I use CE.SDK without a framework?" assistant: "Let me use /cesdk:docs-js to find the relevant documentation." </example>
docs-vue
by imgly
Look up CE.SDK Vue.js reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for Vue.js — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing Vue.js doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about Vue.js configuration user: "How do I configure the editor in Vue.js?" assistant: "I'll use /cesdk:docs-vue to look up configuration options." </example> <example> Context: User asks about Vue plugin registration user: "How do I register CE.SDK as a Vue plugin?" assistant: "Let me use /cesdk:docs-vue to find the relevant documentation." </example>
docs-nextjs
by imgly
Look up CE.SDK Next.js reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for Next.js — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing Next.js doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about Next.js configuration user: "How do I configure the editor in Next.js?" assistant: "I'll use /cesdk:docs-nextjs to look up configuration options." </example> <example> Context: User asks about SSR compatibility user: "Does CE.SDK work with Next.js server-side rendering?" assistant: "Let me use /cesdk:docs-nextjs to find the relevant documentation." </example>
docs-sveltekit
by imgly
Look up CE.SDK SvelteKit reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for SvelteKit — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing SvelteKit doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about SvelteKit configuration user: "How do I configure the editor in SvelteKit?" assistant: "I'll use /cesdk:docs-sveltekit to look up configuration options." </example> <example> Context: User asks about SvelteKit SSR user: "Does CE.SDK work with SvelteKit server-side rendering?" assistant: "Let me use /cesdk:docs-sveltekit to find the relevant documentation." </example>
using-base-ui-with-material-ui
by siriwatknp
Always use this skill when integrating Base UI components @base-ui-components/react with Material UI @mui/material.
decision-analysis
by melodic-software
Decision modeling using decision tables, weighted scoring matrices, and decision trees. Structures complex decisions with clear criteria, alternatives evaluation, and outcome prediction.
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.
competitor-scan
by WellApp-ai
Research best-in-class products using Browser MCP and WebSearch
state-machine
by WellApp-ai
Document UI component states (current vs expected) with transitions
phasing
by WellApp-ai
Group slices into risk-optimized phases with timeline generation
design-context
by WellApp-ai
Refresh UI/UX context from design system, Storybook, and codebase
webapp-testing
by WellApp-ai
Test web app UI using Browser MCP and Storybook
dependency-mapping
by WellApp-ai
Map slice dependencies using DSM matrix and prioritize by risk
setup
by WellApp-ai
One-time environment setup for new team members
react-admin
by marmelab
This skill should be used when building, modifying, or debugging a react-admin application — including creating resources, lists, forms, data fetching, authentication, relationships between entities, custom pages, or any CRUD admin interface built with react-admin.
matlab-digital-filter-design
by matlab
Designs and validates digital filters in MATLAB. Use when cleaning up noisy signals, removing interference, filtering signals, designing FIR/IIR filters (lowpass/highpass/bandpass/bandstop/notch), or comparing filters in Filter Analyzer.
codebase
by meteor
Use when understanding the build system, modifying CLI commands, working with isobuild, or navigating the tools/ directory. Covers build pipeline flow and file locations.
find-skills
by rohitg00
"Discover and install skills from multiple marketplaces for AI coding agents"
code-summarizer
by ArabelaTso
Generate concise summaries of source code at multiple scales. Use when users ask to summarize, explain, or understand code - whether it's a single function, a class, a module, or an entire codebase. Handles function-level code by explaining intention and core logic, and large codebases by providing high-level overviews with drill-down capabilities for specific modules.
architecture-review
by proflead
Review a system architecture for scalability, reliability, and maintainability. Use when a senior developer needs to critique a design.
accessibility-basic-check
by proflead
Run a basic accessibility checklist for UI changes. Use when a junior developer needs quick a11y guidance.
log-summarizer
by proflead
Summarize noisy logs into likely causes and next steps. Use when a junior developer needs help interpreting logs.
multi-region-strategy
by proflead
Design a multi-region architecture strategy. Use when a senior developer needs geo-redundant planning.