responsive-design

Create responsive web designs that work across all devices and screen sizes. Use when building mobile-first layouts, implementing breakpoints, or optimizing for different viewports. Handles CSS Grid, Flexbox, media queries, viewport units, and responsive images.

Install with Tessl CLI

npx tessl i github:supercent-io/skills-template --skill responsive-design

What are skills?

1.08x

Quality

78%

Does it follow best practices?

Impact

99%

1.08x

Average score across 3 eval scenarios

Optimize this skill with Tessl

npx tessl skill review --optimize ./.agent-skills/responsive-design/SKILL.md

SKILL.md

Review

Evals

Evaluation results

99%

22%

SaaS Landing Page Layout

Mobile-first breakpoints and layout

Criteria

Without context

With context

Viewport meta tag

100%

Mobile-first default styles

10%

100%

min-width queries only

100%

Standard breakpoints used

100%

Relative units for font-size

100%

Relative units for spacing

85%

No fixed container width

100%

No duplicate base styles

100%

Flexbox for navigation

100%

Grid for features section

100%

Grid column count changes across breakpoints

62%

100%

Relative width for grid/flex items

100%

Without context: $0.3530 · 1m 53s · 13 turns · 20 in / 7,991 out tokens

With context: $0.4402 · 2m 1s · 15 turns · 17 in / 7,777 out tokens

100%

News Article Template with Reusable Content Cards

Fluid typography and container queries

Criteria

Without context

With context

clamp() for body font

100%

clamp() for headings

100%

CSS custom properties for font sizes

100%

container-type declaration

100%

@container query used

100%

Container name used

100%

Card layout changes by container

100%

Relative units for spacing

100%

No fixed width on container

100%

Viewport meta tag

100%

min-width queries (if any media queries present)

100%

line-height set on headings

100%

Without context: $0.4237 · 2m 19s · 12 turns · 15 in / 9,618 out tokens

With context: $0.6590 · 2m 47s · 21 turns · 26 in / 10,814 out tokens

100%

Photography Portfolio Gallery Page

Responsive images and grid gallery

Criteria

Without context

With context

srcset attribute on images

100%

sizes attribute on images

100%

Hero uses picture or image-set

100%

Background media query breakpoints

100%

Lazy loading

100%

CSS Grid for gallery

100%

Grid column count changes at breakpoints

100%

Mobile-first grid default

100%

No fixed image width

100%

aspect-ratio or height: auto

100%

Viewport meta tag

100%

min-width queries only

66%

100%

Without context: $0.3353 · 1m 36s · 16 turns · 69 in / 6,454 out tokens

With context: $0.6686 · 2m 38s · 22 turns · 212 in / 10,170 out tokens

Evaluated: 3 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

SaaS Landing Page Layout News Article Template with Reusable Content Cards Photography Portfolio Gallery Page

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.