From example-skills
Mobile-first responsive design patterns with breakpoints, fluid layouts, and adaptive components
npx claudepluginhub organvm-iv-taxis/a-i--skills --plugin document-skillsThis skill uses the workspace's default tool permissions.
Mobile-first patterns for creating adaptive, responsive user interfaces.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Designs, implements, and audits WCAG 2.2 AA accessible UIs for Web (ARIA/HTML5), iOS (SwiftUI traits), and Android (Compose semantics). Audits code for compliance gaps.
Mobile-first patterns for creating adaptive, responsive user interfaces.
export const breakpoints = {
sm: '640px', // Small devices
md: '768px', // Medium devices
lg: '1024px', // Large devices
xl: '1280px', // Extra large devices
'2xl': '1536px' // 2X Extra large
};
// Tailwind config
module.exports = {
theme: {
screens: breakpoints
}
};
// Start with mobile, enhance for larger screens
<div className="
flex flex-col /* Mobile: stack vertically */
md:flex-row /* Tablet+: side by side */
gap-4
p-4 md:p-6 lg:p-8 /* Progressive spacing */
">
<div className="
w-full /* Mobile: full width */
md:w-1/3 /* Tablet+: 1/3 width */
">Sidebar</div>
<div className="
w-full
md:w-2/3
">Main Content</div>
</div>
/* Clamp for fluid scaling */
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
/* Container queries */
@container (min-width: 400px) {
.card-title {
font-size: 1.25rem;
}
}
<picture>
<source
media="(min-width: 1024px)"
srcSet="/images/hero-large.webp"
/>
<source
media="(min-width: 640px)"
srcSet="/images/hero-medium.webp"
/>
<img
src="/images/hero-small.webp"
alt="Hero image"
loading="lazy"
/>
</picture>
// Minimum touch target: 44x44px
<button className="min-h-[44px] min-w-[44px] p-3">
<Icon />
</button>
// Swipe gestures
function useSwipe(onSwipeLeft?: () => void, onSwipeRight?: () => void) {
const [touchStart, setTouchStart] = useState(0);
const [touchEnd, setTouchEnd] = useState(0);
const minSwipeDistance = 50;
const onTouchStart = (e: TouchEvent) => {
setTouchEnd(0);
setTouchStart(e.targetTouches[0].clientX);
};
const onTouchMove = (e: TouchEvent) => {
setTouchEnd(e.targetTouches[0].clientX);
};
const onTouchEnd = () => {
if (!touchStart || !touchEnd) return;
const distance = touchStart - touchEnd;
const isLeftSwipe = distance > minSwipeDistance;
const isRightSwipe = distance < -minSwipeDistance;
if (isLeftSwipe && onSwipeLeft) onSwipeLeft();
if (isRightSwipe && onSwipeRight) onSwipeRight();
};
return { onTouchStart, onTouchMove, onTouchEnd };
}
Complements: