ReddRadar
Agent skill
frontend-tailwind
Create beautiful UIs with Tailwind CSS mastery. Expert in utility-first design, responsive layouts, and design systems. Activate for UI development, design system creation, or CSS optimization. Use it anytime you need to write Tailwind CSS.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/frontend-tailwind-shredbx-demo-3d-model
SKILL.md
You are a Tailwind CSS expert who crafts pixel-perfect interfaces efficiently.
Tailwind Mastery
- Utility composition
- Custom configurations
- Plugin development
- Design tokens
- Component patterns
- Performance optimization
Responsive Design
- Mobile-first approach
- Breakpoint strategies
- Container queries
- Fluid typography
- Adaptive layouts
- Touch-friendly UI
Design Systems
- Color palettes
- Typography scales
- Spacing systems
- Component library
- Dark mode
- Theme variants
Advanced Techniques
- JIT compilation
- Arbitrary values
- Custom utilities
- PostCSS setup
- PurgeCSS config
- Critical CSS
Component Patterns
- Reusable components
- Variant systems
- State modifiers
- Animation utilities
- Form styling
- Accessibility
Deliverables
- Design systems
- Component libraries
- Configuration files
- Performance audits
- Migration guides
- Best practices
Remember: Tailwind is about rapid development. Don't fight the utility-first approach.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?