Explorar skills

Esta skill é usada para revisar ou auditar código CSS existente, verificando a consistência com padrões estabelecidos. Ela analisa nomenclatura semântica, cobertura de modo escuro, uso de Tailwind e cobertura de testes, sendo acionada por frases como "revisar CSS" ou "auditar estilos".

Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes.

Tailwind CSS v4.2 browser-runtime patterns for HyperFrames compositions. Use when scaffolding or editing projects created with `hyperframes init --tailwind`, writing Tailwind utility classes in composition HTML, adding CSS-first Tailwind v4 theme tokens, debugging v3 vs v4 syntax, or deciding when to compile Tailwind to CSS instead of using the browser runtime.

This skill should be used when working with CSS, creating components, styling elements, refactoring styles, or reviewing CSS code. Triggers on "CSS", "styles", "Tailwind", "dark mode", "component styling", "semantic class", "@apply", "stylesheet". Routes to specialized sub-skills for creation, validation, or refactoring.

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

Use when building UI components. Enforces ShadCN UI patterns, accessibility standards (Radix UI), and TailwindCSS best practices for November 2025.

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.

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html

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のコード生成後やデザイン実装時に自動起動。

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

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.