← Volver al catálogo Use when styling Astro components with scoped CSS, CSS Modules, Tailwind CSS, UnoCSS, or Sass. Covers class:list directive, global styles, CSS custom properties, and Vite-powered preprocessors.
Ver en GitHub ↗ Copiar URL del repo Copiar enlace del SKILL.md Licencia: MIT Cómo agregar Copiar comando /plugin marketplace add fusengine/agents El comando exacto puede variar según el repositorio. Consulta el README en GitHub.
Para el autor de la skill
Muestra que tu skill está catalogada en Skillteca, genera backlink y tráfico rastreable.
Markdown HTML
[](https://www.skillteca.com.br/skills/astro-styling?utm_source=badge&utm_medium=readme&utm_campaign=badge) Copiar snippet Kit de herramientas para interactuar y probar aplicaciones web locales usando Playwright. Permite verificar la funcionalidad del frontend, depurar el comportamiento de la UI, capturar capturas de pantalla del navegador y ver los registros del navegador.
Design e Frontend #test por anthropics
Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que se beneficie de su identidad visual. Úselo cuando se apliquen pautas de estilo, formato visual o estándares de diseño de la empresa.
Design e Frontend por anthropics
Crea interfaces frontend distintivas y de grado de producción con alta calidad de diseño, generando código creativo y pulido y diseño de UI que evita la estética genérica de IA. Úsela para construir componentes web, páginas y aplicaciones, o para estilizar/embellecer UIs web.
Design e Frontend #css #ai por anthropics
Suite de herramientas para crear artefactos HTML elaborados y multicomponente para claude.ai, utilizando tecnologías web frontend modernas (React, Tailwind CSS, shadcn/ui). Úselo para artefactos complejos que requieran gestión de estado, enrutamiento o componentes shadcn/ui, no para artefactos HTML/JSX simples de un solo archivo.
Design e Frontend #css #ai por anthropics
Alerta por categoría
Un email corto con solo las skills nuevas de Design e Frontend. 4 minutos de lectura, sin spam, te das de baja con un clic.
Confirmas tu email en el primer envío. Sin spam. Te das de baja con un clic.
Astro Styling
Agent Workflow (MANDATORY)
Before ANY implementation, use TeamCreate to spawn 3 agents:
fuse-ai-pilot:explore-codebase - Analyze existing styles, integrations, and patternsfuse-ai-pilot:research-expert - Verify latest Astro/Tailwind/UnoCSS docs via Context7/Examcp__context7__query-docs - Check integration compatibility with Astro 6
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
When to Use
Styling .astro components with component-scoped CSS
Setting up Tailwind CSS or UnoCSS in an Astro project
Using CSS Modules for framework-agnostic scoping
Applying global base styles (reset, fonts, variables)
Using class:list for conditional class application
Adding Sass/SCSS via Vite preprocessors
Styling Options
Method Scope When to Use <style> in .astroComponent Default — scoped to component <style is:global>Global Base styles, resets CSS Modules .module.css Component Framework components (React, Vue) Tailwind CSS Utility Rapid UI development UnoCSS Utility Lightweight, configurable atomic CSS Sass/SCSS Component/Global Advanced features, variables, mixins
Reference Guide
Concepts
Templates
Best Practices
Prefer scoped styles — Use <style> in .astro files by defaultGlobal styles in layouts — Apply resets and base styles in root layoutCSS variables for themes — Define design tokens as custom propertiesAvoid is:global in components — Reserve for layouts and global filesclass:list over ternaries — More readable conditional class logic
Forbidden
Writing inline styles for layout/theme — use CSS classes instead
Using is:global inside non-layout components
Importing CSS in multiple components without CSS Modules
Mixing Tailwind and custom class naming without a clear convention
Leer descripción completa↓
Comentarios · Sin comentarios Aún no hay comentarios. Sé el primero. 