Michel

Refactor code for better organization, cleaner architecture, and improved maintainability.

Generate interactive HTML dependency graphs for React components.

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

Verify task completion before finishing work with structured reporting.

Keep local JSON schemas in sync with the official marketplace for Claude plugins.

CLI reference and build system for the @dsai-io/tools package.

Translate Figma designs into production-ready code with pixel-perfect accuracy.

Optimize React performance with comprehensive guidelines from Vercel Engineering.

Evaluate execution transcripts and outputs for skill quality assessment.

Create and manage Architecture Decision Records (ADRs) in MADR 4.0.0 format.

Expert internet researcher for debugging and solution-finding.

Core Node.js backend patterns for TypeScript applications, focusing on architecture and error handling.

A comprehensive styling system for DSAI applications using Bootstrap 5 utilities and design tokens.

Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.

Quickly create a new blank Figma file for design or FigJam.

Create, update, or enhance documentation for any part of the codebase. Use when creating documentation, writing docs, updating README files, documenting APIs, or when something needs documentation.

Creates structured tasks for engineers based on templates and requirements.

Blindly compare two outputs to evaluate skill performance without bias.

Essential skill for executing JavaScript in Figma files via the Plugin API.

Analyze blind comparison results to understand WHY the winner won and generate improvement suggestions for skill evaluation.

Build or update professional-grade design systems in Figma from a codebase.

Comprehensive reference for the DSAI component library, guiding installation and usage.

This skill teaches how to use Miro MCP tools effectively for creating diagrams, documents, tables, and extracting context from Miro boards. Use when the user asks about Miro capabilities, wants to create content on Miro boards, or needs to work with Miro board data.

Review development plans before implementation to identify potential issues and missing considerations. Use when reviewing plans, validating strategies, before starting implementation, or when you want to make sure nothing is missed.

Analyze code structure and create refactoring plans with risk assessment.

Hugin-v0 streamlines the design-to-production process for React apps by translating Figma mockups into production-ready components.

Integrate Figma design tokens into your development workflow seamlessly.

Connect Figma design components to code components using Code Connect mapping tools.

Create and manage Claude Code skills following Anthropic best practices. Use when creating new skills, modifying skill-rules.json, understanding trigger patterns, working with hooks, debugging skill activation, or implementing progressive disclosure. Covers skill structure, YAML frontmatter, trigger types (keywords, intent patterns, file paths, content patterns), enforcement levels (block, suggest, warn), hook mechanisms (UserPromptSubmit, PreToolUse), session tracking, and the 500-line rule.

Review code for best practices and architectural consistency to ensure high-quality implementations.

Enhance your testing skills by learning how to write, review, and improve tests effectively.

Core React 19 patterns for building modern applications with hooks, Suspense, and TypeScript.

Automate semantic code reviews with project-specific rules enforcement.

Automatically performs semantic code reviews after file modifications.

Apply rigorous first-principles engineering analysis to any technical task.

Create and update Figma screens using design system components and styles.

Verify task completion before finalizing work to catch bugs and quality issues.

Use this skill for any accessibility concern: WCAG compliance (any success criterion including SC 1.3.5 autocomplete, SC 2.4.11 focus obscured), ARIA roles/attributes, screen reader behavior, axe-core or WAVE audit failures, color/non-text contrast, keyboard navigation, focus trapping/management, skip links, touch targets, VPAT reports, or accessible form patterns. Also trigger when a user asks whether a UI library (DSAI) handles keyboard interactions — but only if the question is specifically about accessibility behavior, not general usage. Do NOT trigger for general component usage questions where keyboard behavior is incidental (e.g., "does DSAI Tooltip show on hover and focus?" without an accessibility problem to solve).

Ensure your UI code complies with Web Interface Guidelines for better accessibility and design.

Generate custom design system rules for your Figma projects to ensure consistent coding practices.

Automatically resolve TypeScript compilation and build errors systematically.

Framework-agnostic HTTP API route testing patterns and best practices for authentication and integration testing.

Verify environment variables, MCP servers, and LSP are configured correctly. Use when user says 'setup', 'check my setup', 'verify config', 'is everything configured', or wants to confirm their development environment is ready.

Prisma ORM patterns for efficient database operations and schema management.