web-styling
将Web样式模式应用于React组件
为React应用程序创建一致且响应式的样式需要了解多种CSS方法。本技能提供可直接使用的Tailwind CSS、CSS Modules和组件变体模式，可提高开发速度。
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "web-styling". 使用Tailwind CSS创建带有悬停效果的主要按钮
Resultado esperado:
- • 基础类：px-4 py-2 rounded-lg font-medium transition-colors
- • 主要变体：bg-blue-600 text-white hover:bg-blue-700
- • 使用模板字符串将基础类与变体组合
- • 添加transition-colors以实现平滑的悬停过渡
A utilizar "web-styling". 使用Tailwind构建带有移动端菜单的响应式导航
Resultado esperado:
- • 移动端：默认隐藏，点击按钮时显示
- • 桌面端：flex row布局在md断点可见
- • 使用justify-between在logo和导航项之间进行间距
- • 添加backdrop-blur以实现现代毛玻璃效果
A utilizar "web-styling". 使用Framer Motion创建模态框动画
Resultado esperado:
- • 使用AnimatePresence实现进入/退出动画
- • 将初始透明度设置为0并动画到1
- • 添加scale和y轴变换以实现平滑的弹出效果
- • 包含点击关闭的遮罩层
Auditoria de Segurança
SeguroThis is a pure documentation skill containing only markdown examples and patterns for web styling. All 75 static findings are false positives caused by the scanner misinterpreting: CSS hex color codes as cryptographic algorithms, JavaScript template literal backticks as shell command execution, and Tailwind class names as system reconnaissance. No executable code, network calls, file access, or external commands exist in this skill.
Fatores de risco
🌐 Acesso à rede (1)
⚙️ Comandos externos (42)
Pontuação de qualidade
O Que Você Pode Construir
构建可复用的按钮组件
创建具有变体、尺寸和条件样式的按钮组件，以实现一致的UI模式
实现深色模式主题
使用Tailwind配置和基于类的切换为React应用程序添加深色模式支持
创建响应式布局
设计响应式网格和弹性布局，可在移动端、平板端和桌面端断点之间自适应
Tente Estes Prompts
使用Tailwind CSS创建具有主要、次要和危险变体及悬停状态的按钮组件
创建响应式卡片网格，在移动端显示1列，平板端显示2列，桌面端显示3列，使用Tailwind CSS
为React应用实现深色模式切换，使用基于类的深色模式的Tailwind CSS和平滑过渡效果
使用class-variance-authority创建完整的按钮组件，支持变体、尺寸和禁用状态，与tailwind-merge配合使用
Melhores Práticas
- 使用clsx或tailwind-merge处理条件类组合并防止重复样式
- 使用class-variance-authority定义组件变体，以实现类型安全和可维护的组件API
- 从移动端优先的基准样式开始，然后在sm、md、lg、xl断点进行覆盖
Evitar
- 避免不使用tailwind-merge硬编码类字符串，这可能导致样式冲突
- 不要在没有将任意值提取到主题配置的情况下广泛使用它们，以保持一致性
- 避免将Tailwind类与内联样式混合，这会使代码库难以维护