ast-grep
Guide for writing ast-grep rules to perform structural code search and analysis. Use when users need to search codebases using Abstract Syntax Tree (AST) patterns, find specific code structures, or perform complex code queries that go beyond simple text search. This skill should be used when users ask to search for code patterns, find specific language constructs, or locate code with particular structural characteristics.
code-smell-checker
Review code for maintainability issues and classic code smells. Use when checking code quality, architectural problems, type safety, Vue best practices, or general OOP design issues. Identifies technical debt in components, types, reactive data, and common anti-patterns.
develop-fastapi-app
Build production-ready FastAPI applications with best practices for project structure, async patterns, Pydantic models, dependency injection, database operations, and testing. Use when developing FastAPI backends, REST APIs, or Python async web services.
dev-vue-component
Create, modify, and maintain Vue 3 components with TypeScript and SCSS. Use when building Vue components, modifying .vue files, defining component props/emits, styling with SCSS, or documenting component APIs. Handles component architecture, type safety, styling patterns, and documentation.
code-connect-components
Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants to establish mappings between Figma designs and code implementations. Requires Figma MCP server connection.
create-design-system-rules
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.
implement-design
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.
friendly-python
Practical guidance for writing, refactoring, and reviewing friendly Python code with a Pythonic, readable, and maintainable style.
pinia
Create and maintain Pinia stores using Setup Stores pattern with TypeScript. Use when creating state management stores, defining store state/getters/actions, composing stores, or integrating with Vue components. Handles store architecture, type safety, and reactive state patterns.
typescript-best-practice
TypeScript best practices and patterns for writing clean, type-safe, and maintainable code. Use when implementing TypeScript code, refactoring for better type safety, or teaching TypeScript patterns.
vercel-ai-sdk-integration
Integrate Vercel AI SDK v6 with Vue.js applications (client-side). Use when building chat interfaces, text completions, or streaming structured data with AI models. Covers Chat class, useCompletion, useObject composables.
vue-story
Create and maintain Histoire stories for Vue 3 components. Use when working with .story.vue files, creating visual contracts, or when user mentions Histoire stories or visual testing.