Michel

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.

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

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

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

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

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

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

Creates structured tasks for engineers based on templates and requirements.

Automatically performs semantic code reviews after file modifications.

Evaluate execution transcripts and outputs for skill quality assessment.

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

Automate semantic code reviews with project-specific rules enforcement.

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.

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

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

Integrate Figma design tokens into your development workflow seamlessly.

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

Verify task completion before finishing work with structured reporting.

Expert internet researcher for debugging and solution-finding.

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

Prisma ORM patterns for efficient database operations and schema management.

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

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).

Optimize React performance with comprehensive guidelines from Vercel Engineering.

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

Blindly compare two outputs to evaluate skill performance without bias.

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

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

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.

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

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

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

Analyze code structure and create refactoring plans with risk assessment.

Automatically resolve TypeScript compilation and build errors systematically.

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

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.

Generate interactive HTML dependency graphs for React components.

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

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

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.

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.

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.

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

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