openspec-explore
Think through ideas, investigate problems, and clarify requirements before committing to a change using `/opsx:explore`. Use when the user says "explore an idea", "think through this", "investigate options", or wants to brainstorm before creating a formal change.
openspec-ff
Fast-forward through artifact creation with `/opsx:ff`, generating all planning artifacts (proposal, specs, design, tasks) at once. Use when the user says "fast forward", "create all artifacts", "/opsx:ff", or has a clear picture of what to build.
openspec-initial
Run `openspec init` to initialize OpenSpec in a project directory, creating the openspec/ folder structure and configuring AI tool integrations. Use when the user says "initialize OpenSpec", "openspec init", or "set up OpenSpec in this project".
openspec-install
Install the OpenSpec CLI globally via npm, pnpm, yarn, bun, or nix. Use when the user says "install OpenSpec", "set up OpenSpec", or "openspec command not found".
openspec-new
Start a new OpenSpec change with `/opsx:new`, creating a change folder with metadata and scaffolding. Use when the user says "start a new change", "new feature", "/opsx:new", or "create an OpenSpec change".
openspec-onboard
Guided onboarding through the complete OpenSpec workflow using `/opsx:onboard`, walking the user through a real change in their codebase. Use when the user says "onboard me", "tutorial", "/opsx:onboard", "how does OpenSpec work", or is new to OpenSpec.
openspec-schema
Create and manage custom workflow schemas using `openspec schema init/fork/validate/which`. Use when the user says "create a custom workflow", "custom schema", "fork a schema", or wants to define their own artifact types and dependencies.
openspec-sync
Sync delta specs from a change into main specs using `/opsx:sync`, without archiving the change. Use when the user says "sync specs", "merge specs to main", "/opsx:sync", or needs to update main specs mid-change.
openspec-update
Run `openspec update` to regenerate AI tool instruction files after upgrading the OpenSpec CLI. Use when the user says "update OpenSpec", "openspec update", or "refresh OpenSpec skills/commands".
openspec-verify
Validate that implementation matches change artifacts using `/opsx:verify`, checking completeness, correctness, and coherence. Use when the user says "verify implementation", "check my work", "/opsx:verify", or wants quality validation before archiving.
pencil-design-from-stitch-html
When you need to turn Stitch page HTML (or a Stitch URL) into a Pencil .pen design. Parses DOM and Tailwind, applies HTML→Pencil mapping and execution order, outputs sequential batch_design for layout and style fidelity (background, color, size, margin, padding, shadow). Supports multi-framework tokens.
pencil-mcp-batch-design
Batch execute insert, update, replace, move, and delete operations on Pencil .pen design nodes via the batch_design MCP tool. Use when the user explicitly mentions Pencil and needs to draw, insert, change, remove, or move elements on the canvas.
pencil-mcp-batch-get
Batch search and read node information. The Agent's 'Eyes'. Use to find specific components e.g. all nodes named 'Button' or get child structure within a container.
pencil-mcp-find-empty-space-on-canvas
Smartly find empty canvas space. Use to automatically plan artboard placement to avoid overlap and keep the canvas organized.
pencil-mcp-get-editor-state
Get current design environment context. Use when you need to understand what is currently selected, canvas position, and environment state before any task.
pencil-mcp-get-guidelines
Get design system guidelines. Use to read and understand specifications e.g. Material Design iOS HIG or custom specs before designing.
pencil-mcp-get-screenshot
Capture a visual screenshot of a specific node in a Pencil .pen file via the get_screenshot MCP tool. Use when the user explicitly mentions Pencil and needs to visually verify a design operation, check for alignment or spacing issues, or review a component after batch_design changes.
pencil-mcp-get-style-guide-tags
Explore design style tags. Use to get design inspiration, such as 'Modern', 'Dark Mode', 'SaaS' directions.
pencil-mcp-get-style-guide
Retrieve detailed style guide metadata (color palettes, typography rules, visual specs) by tags or ID from Pencil via the get_style_guide MCP tool. Use when the user explicitly mentions Pencil and needs to apply a specific visual style, retrieve theme colors and fonts, or look up a style guide by keyword tags.
pencil-mcp-get-variables
Read design token variables (colors, fonts, spacing) from a Pencil .pen file via the get_variables MCP tool. Use when the user explicitly mentions Pencil and needs to list design tokens, check the current theme, or retrieve variable IDs for use in batch_design operations.
pencil-mcp-open-document
Open or create a design document. Use when you need to initialize design tasks, create new files, or switch to specific designs.
pencil-mcp-replace-all-matching-properties
Batch replace matching style properties (colors, fonts, sizes) across nodes in a Pencil .pen file via the replace_all_matching_properties MCP tool. Use when the user explicitly mentions Pencil and needs to globally swap colors, update font families, migrate to a new brand style, or batch-adjust spacing across frames.
pencil-mcp-search-all-unique-properties
Search and list all unique values for specific properties (fills, fonts, spacing) across nodes in a Pencil .pen file via the search_all_unique_properties MCP tool. Use when the user explicitly mentions Pencil and needs to audit design consistency, find all colors or font sizes used, or identify inconsistent styles.
pencil-mcp-set-variables
Set or update design variables. Use to establish or maintain a Design Token system.
pencil-mcp-snapshot-layout
Capture a structural snapshot of the node tree in a Pencil .pen file via the snapshot_layout MCP tool, optionally filtering to only show layout problems. Use when the user explicitly mentions Pencil and needs to analyze page hierarchy, check for clipped or overlapping elements, or prepare for layout adjustments.
stitch-ued-guide
UED guidelines, visual vocabulary, and prompt structure for Stitch. Use when the user asks about layout/style terms, device constraints, or when structuring/improving Stitch prompts; combine with stitch-ui-prompt-architect for vague→concrete prompts.
stitch-ui-design-spec-bootstrap
Bootstrap-Vue (Bootstrap 5/Vue) design spec for Stitch screen generation. Use when the user mentions Bootstrap, bootstrap-vue, bs-vue, or bs5 in a Stitch design request. Outputs a hard-constraints prefix with Bootstrap tokens (Primary #0d6efd, b-container/b-row/b-col/b-button components, mobile-first grid) or a CONTRACT_SELECTION_JSON_V1 selector.
stitch-ui-design-spec-element-plus
Element Plus design spec for Stitch screen generation. Use when the user mentions Element Plus, element-ui, or el-plus in a Stitch design request. Outputs a hard-constraints prefix with Element Plus tokens (colors, typography, radius, el-* components) or a CONTRACT_SELECTION_JSON_V1 selector with assembled prompt.
stitch-ui-design-spec-generator
Translate user requirements into a structured Stitch Design Spec JSON covering theme, primaryColor, font, roundness, density, designMode, styleKeywords, and deviceType. Use when starting a new Stitch design task to determine visual direction before prompt assembly. Supports one-shot user requests and PRD documents as input.
stitch-ui-design-spec-layui
Layui-Vue design spec for Stitch screen generation. Use when the user mentions Layui, layui-vue, or layui admin in a Stitch design request. Outputs a hard-constraints prefix with Layui tokens (Primary #16baaa, Nav-bg #393D49, layui-btn/input/card components) or a CONTRACT_SELECTION_JSON_V1 selector with assembled prompt.
stitch-ui-design-spec-uview
uView 2.0 (uni-app/Vue 2) design spec for Stitch screen generation. Use when the user mentions uview, uview2, or u-view in a Stitch design request. Do NOT use for uView Pro requests. Outputs a hard-constraints prefix with uView 2 tokens (Primary #3c9cff, u-row/u-col/u-button components) or a CONTRACT_SELECTION_JSON_V1 selector.
stitch-ui-design-spec-uviewpro
uView Pro (uni-app/Vue 3) design spec for Stitch screen generation. Use when the user mentions uview-pro, uviewpro, or uview 3.0 in a Stitch design request. Outputs a hard-constraints prefix with uView Pro tokens (Primary #3c9cff, rpx units, u-button/u-form/u-navbar components, script setup) or a CONTRACT_SELECTION_JSON_V1 selector.
stitch-ui-design-spec-vant
Vant 4 (Vue 3/Mobile) design spec for Stitch screen generation. Use when the user mentions Vant, vant4, or vant-ui in a Stitch design request. Outputs a hard-constraints prefix with Vant tokens (Primary #1989fa, van-button/van-field/van-nav-bar components, mobile-first 375px) or a CONTRACT_SELECTION_JSON_V1 selector.
stitch-ui-design-variants
Generate alternative Stitch design variant prompts for A/B testing and creative exploration. Use when the user wants multiple style, layout, or content options for a Stitch screen. Takes a base Design Spec or prompt and produces 3 distinct variants (layout, style, or content variations).
stitch-ui-designer
Master orchestrator for end-to-end Stitch UI design and generation. Use when the user asks to design, create, or make a UI screen using Stitch. Coordinates design spec generation, framework contract injection, prompt assembly, and MCP execution (create_project, generate_screen_from_text, get_screen) in a single workflow.
stitch-ui-prompt-architect
Build Stitch-ready prompts from vague UI ideas (Path A) or from a Design Spec plus user request (Path B). Use when polishing a UI prompt before Stitch generation, improving a prompt that produced poor results, or merging a Design Spec with framework contracts (uView, Element Plus, Layui, Bootstrap, Vant) into a sectioned Context/Layout/Components prompt.
stitch-uview-components
Convert Stitch designs into uni-app + Vue 2 + uView 2.0 pages and components. Use when the user mentions uView, uView 2, or uni-app Vue 2 conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to rpx/theme, enforces uni-app page structure with uView 2 u-* components (u-navbar, u-form, u-button, u-cell-group).
stitch-uviewpro-components
Convert Stitch designs into uni-app + Vue 3 + uView Pro pages and components. Use when the user mentions uView Pro, uviewpro, or uni-app Vue 3 conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to rpx/theme, enforces u-* component contracts (u-tabs, u-form, u-picker, u-card) with script setup.
stitch-vue-bootstrap-components
Convert Stitch designs into modular Vite + Vue 3 + BootstrapVue/BootstrapVueNext components. Use when the user mentions Bootstrap or BootstrapVue conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Bootstrap utilities, enforces Vue SFC structure with Bootstrap components (b-container, b-row, b-col, b-button, b-card).
stitch-vue-element-components
Convert Stitch designs into modular Vite + Vue 3 + Element Plus components. Use when the user mentions Element Plus, element-ui, or Vue Desktop conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Element Plus tokens, enforces Vue SFC structure with el-* components (el-button, el-form, el-table, el-card, el-menu).
stitch-vue-layui-components
Convert Stitch designs into modular Vite + Vue 3 + Layui-Vue components. Use when the user mentions Layui conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Layui tokens (2px/4px radius), enforces Vue SFC structure with Layui-Vue components (layui-btn, layui-input, lay-card, lay-page-header).
stitch-vue-vant-components
Convert Stitch designs into modular Vite + Vue 3 + Vant 4 mobile components. Use when the user mentions Vant or Vue Mobile conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Vant tokens (mobile-first 375px, safe area), enforces Vue SFC structure with Vant 4 components (van-button, van-field, van-nav-bar, van-tabbar).
svelte
Guides Svelte and SvelteKit development including reactive components, stores, transitions, lifecycle hooks, SSR, file-based routing, and deployment. Use when the user needs to build Svelte components, create SvelteKit applications, implement reactivity patterns, or configure Svelte with Vite.
tui-04x
Generate and render a pixel-precise ASCII TUI 04x Layout component with complete output blocks (TUI_RENDER, COMPONENT_SPEC, PENCIL_SPEC, PENCIL_BATCH_DESIGN) for Pencil MCP drawing workflows. Use when the user asks to create a grid layout in a terminal UI, text-based interface, or Pencil MCP project.
vue-router
Provides comprehensive guidance for Vue Router including route configuration, navigation, dynamic routes, nested routes, route guards, programmatic navigation, and route meta. Use when the user asks about Vue Router, needs to set up routing, implement navigation guards, handle route parameters, or manage route transitions.
vue-router-v4
Provides comprehensive guidance for Vue Router v4 including route configuration, navigation, nested routes, route guards, and Vue 3 integration. Use when the user asks about Vue Router v4, needs to set up routing for Vue 3 applications, implement navigation guards, or work with Vue Router v4 features.
vue-router-v3
Guidance for Vue Router v3 using the official Installation, Guide, and API docs. Use when users need routing setup, navigation patterns, or API details for Vue 2 projects.
pinia
Provides comprehensive guidance for Pinia state management including stores, state, getters, actions, plugins, and TypeScript support. Use when the user asks about Pinia, needs to manage application state, create stores, implement state persistence, or migrate from Vuex.
vscode-project-init
Scaffold a new VS Code extension project using TypeScript via Yeoman generator (yo code), creating src/extension.ts entry point and package.json manifest. Use when the user wants to start a new VS Code extension project from scratch.
vscode-feature-webview
Add a Webview panel to a VS Code extension for displaying custom HTML content (forms, charts, complex layouts) using vscode.window.createWebviewPanel. Use when the user needs custom UI that cannot be achieved with standard VS Code UI elements, such as dashboards, settings forms, or rich previews.
Page 444 of 1742 · 87066 results
