Explorar skills

Conjunto de ferramentas para criar artefatos HTML elaborados e multicomponentes para claude.ai, utilizando tecnologias web frontend modernas (React, Tailwind CSS, shadcn/ui). Use para artefatos complexos que exigem gerenciamento de estado, roteamento ou componentes shadcn/ui - não para artefatos HTML/JSX simples de arquivo único.

When the user wants to design, optimize, or audit grid layouts for content display. Also use when the user mentions "grid layout," "grid design," "multi-column grid," "CSS grid," "responsive grid," "card grid," "product grid," or "feature grid." For cards layout, use card.

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

Complete visual QA - screenshots with full-page scroll to trigger animations, then analyze with Claude. Run after CSS/template changes.

Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.

Zero-build frontend development with CDN-loaded React, Tailwind CSS, and vanilla JavaScript. Use when building static web apps without bundlers, creating Leaflet maps, integrating Google Sheets as database, or developing browser extensions. Covers patterns from rosen-frontend, NJCIC map, and PocketLink projects.

Figma MCPで取得したデザイン変数をTailwind CSS標準クラスに変換する。Figma MCPのコード生成後やデザイン実装時に自動起動。

Fix PageSpeed Insights/Lighthouse accessibility "!" errors caused by contrast audit failures (CSS filters, OKLCH/OKLAB, low opacity, gradient text, image backgrounds). Use for accessibility-driven SEO/performance debugging and remediation.

Implement mobile-first responsive designs with fluid layouts, breakpoints, relative units, and touch-friendly interfaces that work across all device sizes. Use this skill when writing or modifying React components (.tsx, .jsx files), when implementing CSS or Tailwind responsive utilities (sm:, md:, lg:, xl: breakpoints), when working on layout components, navigation menus, grid systems, when optim

Este documento registra os aprendizados da correção de problemas de navegação por teclado quando componentes flutuantes (Select, DropdownMenu, Popover) possuem animações CSS de abrir/fechar.

Crie designs web responsivos que funcionam em todos os dispositivos e tamanhos de tela. Use ao construir layouts mobile-first, implementar breakpoints ou otimizar para diferentes viewports.

Esta skill é usada para criar novos componentes estilizados ou adicionar classes CSS. Ela é acionada por frases como "criar componente" ou "adicionar estilos", e orienta sobre nomeação semântica, composição Tailwind, suporte a modo escuro e cobertura de testes.