Responsive Design System Builder

Build scalable design systems with Tailwind, CSS Grid, Flexbox, and container queries.

Cursor

Claude Code

Windsurf

Quick Info

File Type:.cursorrules

Platform:Cursor

Author:MCP Directory

Category:Design

What This Skill Does

Create responsive, mobile-first design systems. Master CSS Grid, Flexbox, container queries, fluid typography, spacing scales, and responsive component patterns that work across all devices.

Tags

#responsive

#design-system

#css

#mobile-first

#container-queries

Skill Code Preview

Copy this code to your .cursorrules file

# Responsive Design System Builder
## Principles
- Mobile-first: design for smallest screen, enhance up
- Fluid typography: clamp() for responsive font sizes
- Consistent spacing scale (4px, 8px, 16px, 24px, 32px...)
- Container queries for component-level responsiveness
- CSS Grid for page layouts, Flexbox for components
- Breakpoints: sm:640px, md:768px, lg:1024px, xl:1280px, 2xl:1536px

Installation Instructions

For Cursor:

Create a file named .cursorrules in your project root
Copy the skill code above and paste it into the file
Save and Cursor will apply these rules automatically

For Windsurf:

Open Windsurf IDE settings
Navigate to AI Rules / Custom Instructions
Copy and paste the skill code above
Save and apply the rules

Recommended MCP Servers

These MCP servers work great with this skill

filesystem

Browse MCP Directory

Need More AI Skills?

Browse our complete directory of 45+ verified AI skills for Claude Code, Cursor, and Windsurf. Find the perfect skills to supercharge your AI coding assistant.

Browse All Skills Explore MCP Servers