responsive-design
Mobile-first CSS layouts using Flexbox, Grid, media queries, and responsive images across all devices.
- Covers mobile-first design progression from 320px through large screens (1440px+) with standard breakpoint definitions
- Implements Flexbox for 1-dimensional layouts and CSS Grid for 2-dimensional layouts, with practical examples for navigation, cards, and dashboards
- Includes responsive image techniques: srcset for resolution-aware loading, picture element for art direction, and CSS background image switching
- Provides fluid typography using clamp() for viewport-relative sizing and container queries for component-level responsive behavior
- Requires viewport meta tag and enforces relative units (rem, em, %, vw/vh) with max-width constraints instead of fixed dimensions
Responsive Design
When to use this skill
- New website/app: Layout design for combined mobile-desktop use
- Legacy improvement: Converting fixed layouts to responsive
- Performance optimization: Image optimization per device
- Multiple screens: Tablet, desktop, and large screen support
Instructions
Step 1: Mobile-First Approach
Design from small screens and progressively expand.
Example:
More from supercent-io/skills-template
security-best-practices
Implement security best practices for web applications and infrastructure. Use when securing APIs, preventing common vulnerabilities, or implementing security policies. Handles HTTPS, CORS, XSS, SQL Injection, CSRF, rate limiting, and OWASP Top 10.
14.1Kdata-analysis
Analyze datasets to extract insights, identify patterns, and generate reports. Use when exploring data, creating visualizations, or performing statistical analysis. Handles CSV, JSON, SQL queries, and Python pandas operations.
13.8Kweb-accessibility
Implement web accessibility (a11y) standards following WCAG 2.1 guidelines. Use when building accessible UIs, fixing accessibility issues, or ensuring compliance with disability standards. Handles ARIA attributes, keyboard navigation, screen readers, semantic HTML, and accessibility testing.
12.7Kworkflow-automation
Automate repetitive development tasks and workflows. Use when creating build scripts, automating deployments, or setting up development workflows. Handles npm scripts, Makefile, GitHub Actions workflows, and task automation.
12.6Kcode-review
Conduct thorough, constructive code reviews for quality and security. Use when reviewing pull requests, checking code quality, identifying bugs, or auditing security. Handles best practices, SOLID principles, security vulnerabilities, performance analysis, and testing coverage.
12.5Kdatabase-schema-design
Design and optimize database schemas for SQL and NoSQL databases. Use when creating new databases, designing tables, defining relationships, indexing strategies, or database migrations. Handles PostgreSQL, MySQL, MongoDB, normalization, and performance optimization.
12.2K