verify-responsive
CommunityEnsure UI consistency across devices.
Software Engineering#responsive design#tailwind css#frontend development#layout validation#ui consistency#cross-device testing
AuthorBIGSHOL
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill ensures that your application's user interface maintains a consistent and functional appearance across various screen sizes (mobile, tablet, desktop) by verifying the correct implementation of responsive design patterns using TailwindCSS.
Core Features & Use Cases
- Breakpoint Consistency: Verifies that TailwindCSS breakpoints (sm, md, lg, xl) are used uniformly.
- Mobile-First Pattern: Checks for adherence to mobile-first responsive design principles.
- Touch Target Size: Ensures interactive elements meet minimum touch target size requirements for mobile usability.
- Visibility Patterns: Validates the correct use of
hiddenandblockclasses for responsive visibility. - Use Case: After updating the layout of your dashboard cards, run this Skill to confirm that they stack correctly on mobile devices and display in a multi-column grid on larger screens, without any overlapping or usability issues.
Quick Start
Run the verify-responsive skill to check the responsiveness of the main navigation sidebar.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: verify-responsive Download link: https://github.com/BIGSHOL/ijw-Calander/archive/main.zip#verify-responsive Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.