Explorar skills

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

This skill should be used when refactoring existing CSS from inline styles or utility classes to semantic patterns. Triggers on "refactor CSS", "extract styles", "consolidate CSS", "convert inline", "clean up styles", "migrate to semantic". Transforms to semantic classes with dark mode and tests.

Use ao escrever, revisar ou refatorar código React 19, Next.js 14+ / 16 App Router ou Tailwind CSS. Ativa-se em tarefas que envolvem Server/Client Components, busca de dados, diretivas de cache, route handlers, otimização de imagem/fonte, design de API de componentes ou composição de classes Tailwind.

Craft CMS 5 front-end Twig development — atomic design, template architecture, component patterns, Vite buildchain. Covers the full site template surface: atoms, molecules, organisms, props/extends/block pattern, layout chains, view routing, content builders, image presets, Tailwind named-key collections, multi-brand CSS tokens, JavaScript boundaries (Alpine/DataStar/Vue, tabs, accordions, interac

Converte páginas HTML remotas em arquivos PDF locais, com suporte para autenticação, cabeçalhos personalizados, renderização JavaScript e CSS. Oferece conversão de página única e de documentos completos, rastreando automaticamente todas as subpáginas.

This skill should be used when creating new styled components or adding new CSS classes. Triggers on "create component", "new button", "new card", "add styles", "style component", "build UI element". Guides semantic naming, Tailwind composition, dark mode support, and test coverage.

Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks t

Esta skill gera mockups de wireframe estruturais em preto e branco, utilizando um sistema de design específico com bordas tracejadas, fonte monoespaçada e tons de cinza. Ela é usada quando o usuário solicita um wireframe, mockup ou protótipo de baixa fidelidade similar, produzindo páginas de wireframe React + Tailwind CSS autocontidas.

Gerador de sistema de tipografia do Google Fonts que sugere fontes únicas (modo estrito) e pares de fontes (modo contraste) com escalas tipográficas completas baseadas nos conceitos de ritmo do Tailwind Typography, gerando propriedades CSS personalizadas, configuração do Tailwind e links de incorporação.

Extracts a complete design system from any live website. Crawls pages using Firecrawl MCP, pulls colors, typography, spacing, shadows, radii, and gradients, then maps everything to a 3-layer token hierarchy (primitive, semantic, component). Outputs CSS custom properties, Style Dictionary JSON, a human-readable report, and a self-contained preview HTML that uses its own extracted tokens for styling

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.

This skill should be used when reviewing or auditing existing CSS code for consistency with established patterns. Triggers on "review CSS", "audit styles", "check CSS", "validate stylesheet", "CSS review". Checks semantic naming, dark mode coverage, Tailwind usage, and test coverage.