Responsive Web Layout System Designer
Generate production-ready responsive grid systems and component libraries with built-in accessibi...
What You Can Do
You can systematically design reusable responsive grid systems, establish spacing scales and breakpoint strategies, and document component layout behaviors for seamless developer handoff. This skill generates technical layout specifications that reduce design-to-development friction and ensure accessibility compliance from the design phase, enabling teams to build consistent, scalable web interfaces across all devices.
Features
Create 12-column, CSS Grid, or custom grid specifications with mobile-first breakpoints (320px, 768px, 1024px, 1440px+)
Define and document min-width, max-width, and fluid scaling rules for components across devices
Generate modular spacing scales (4px, 8px, 16px, 24px base) with consistent padding/margin rules for component libraries
Embed color contrast ratios, touch target minimums (48px), and semantic HTML guidance into layout specs
Specify how components stack, wrap, hide, or resize at each breakpoint with technical details for developers
Produce reusable frameworks for buttons, cards, forms, navigation, and data tables with responsive rules
Export markdown or HTML specs with code examples, CSS class naming conventions, and implementation guidance
Example Output
Example 1: Grid System Specification
- 12-column mobile grid (320px): Full width, 16px gutters
- Tablet grid (768px): 8-column, 24px gutters, max-width 100vw
- Desktop grid (1024px): 12-column, 32px gutters, max-width 1200px
- CSS Grid template areas documented with fallback float layouts
Example 2: Component Spacing Scale
- xs: 4px (micro spacing for inline elements)
- sm: 8px (button padding, small gaps)
- md: 16px (card padding, section spacing)
- lg: 24px (component margins, container padding)
- xl: 32px (section breaks, major spacing)
Example 3: Form Component Responsive Spec
- Mobile (320px): Single-column layout, full-width inputs, 44px min touch height
- Tablet (768px): Two-column layout, inputs 48px tall, labels above fields
- Desktop (1024px): Three-column layout, inputs 40px tall, side-by-side labels, ARIA-labels documented for screen readers
What's Included
- SKILL.md: Core instruction file for generating layout systems
- Grid System Template: Pre-configured CSS Grid and flexbox specifications with breakpoint variables
- Component Library Checklist: Standard components (buttons, cards, forms, nav, tables) with responsive behavior requirements
- Accessibility Compliance Framework: WCAG 2.1 AA mapping for color contrast, touch targets, and semantic HTML
- Developer Handoff Template: Markdown format for specs with code examples, class naming conventions, and implementation notes
Who It's For
- UX/UI designers — Building design systems and responsive layout specifications for multi-page products
- Product designers — Documenting layout behavior and component grids for developer handoff on complex web applications
- Design system leads — Creating scalable grid systems and component libraries for enterprise or multi-team design systems
- Front-end developers — Translating design specs into responsive CSS Grid or flexbox implementations with accessibility standards
- Design-to-development teams — Reducing friction between design intent and technical implementation through detailed specifications
Best For
- Creating responsive grid systems for new web products or redesigns
- Establishing component spacing scales and breakpoint strategies
- Documenting layout behavior specifications for developer handoff
- Designing complex dashboards, data tables, and information-heavy interfaces requiring hierarchy systems
- Auditing existing layouts for accessibility and responsive design compliance
- Building comprehensive design system documentation with technical layout rules
You might also like
You'll conduct structured culture audits that go beyond surface-level observations to identify root causes of dysfunction in design teams. Using organizational psychology research, you can analyze team feedback patterns, map collaboration barriers across disciplines, and design targeted interventions that address psychological safety gaps, siloed workflows, and retention risks. Claude helps you transform culture diagnostics into measurable improvement plans tied to specific team performance outcomes.
by calesthio
Analyze raw usability testing data—transcripts, session notes, task completion rates, and participant feedback—to surface recurring patterns and user behaviors. Claude identifies the highest-impact issues, extracts testable insights about user mental models, and generates prioritized recommendations ranked by severity, frequency, and business impact. This cuts manual synthesis time from hours to minutes while maintaining analytical rigor.
by calesthio
You can systematically evaluate UX/UI design candidates across multiple disciplines—UX researchers, UI designers, product designers, design systems engineers, and coordinators—using role-specific competency frameworks. The skill converts vague impressions into defensible scoring systems that account for cross-functional collaboration capability, process maturity, and systems-thinking critical to design ops success. You'll compare candidates across seniority levels, document evaluation decisions for compliance, and build consistent hiring rubrics your entire design team can deploy.
by calesthio
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
by calesthio
This skill guides you through creating strategic content frameworks that go beyond tone and voice guidelines. You'll synthesize user research with business goals, define content principles, structure information architecture, and document messaging frameworks that teams can reference repeatedly. The result is a comprehensive strategy that ensures every piece of UX content—from microcopy to help documentation—serves both users and business outcomes.
by calesthio
You can generate, test, and iterate on onboarding microcopy that handles the unique constraints of first-run experiences: zero product knowledge assumptions, anxiety management around data entry and permissions, and sequential task dependencies. Claude helps you stress-test copy variants against user objections, anticipate drop-off points, and create messaging that balances education, reassurance, and motivation in minimal word count.
by calesthio
You can systematically evaluate your design system's health using structured frameworks that assess component consistency, design token usage, documentation completeness, and developer adoption. The skill generates prioritized gap analysis reports that quantify issues—like duplicate components, token sprawl, or implementation friction—and translates findings into executive-ready roadmaps with business cases for remediation. You'll move beyond subjective design assessments to data-backed improvement strategies.
by calesthio
You can generate detailed interaction specifications for complex user flows and component behaviors that eliminate ambiguity in handoff. The skill produces structured documentation including state diagrams, transition tables, animation timing, keyboard navigation patterns, error handling workflows, and accessibility requirements—all formatted for both designers and developers to reference.
by calesthio