skills.rest
vh2224
vh2224COMMUNITY
Explore all skills by this author →
GitHub

forge-responsive

Audit responsive CSS strategies and generate WCAG 2.2 and CWV compliance fixes.

3|Updated Apr 8, 2026
Search Tags:#css#wcag#responsive-design#container-queries#web-vitals#clamp#lcp
One-click install
npx skills add https://github.com/vh2224/forge-agent --skill forge-responsive
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: forge-responsive
Source: https://github.com/vh2224/forge-agent/tree/main/skills/forge-responsive
Command: npx skills add https://github.com/vh2224/forge-agent --skill forge-responsive

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits and guides responsive design using modern CSS capabilities and measurable web standards, focusing on improving Core Web Vitals and WCAG 2.2 compliance with concrete fixes.

Core Features & Use Cases

  • Detects the CSS strategy (Tailwind, CSS Modules, styled-components, vanilla) and extracts theme and breakpoint data.
  • Recommends intrinsic layout patterns (container queries, clamp() typography, fluid spacing) to improve CLS and LCP.
  • Produces actionable fixes tied to WCAG 2.2 criteria and CWV thresholds, with citations to the standard.

Quick Start

Run the forge-responsive audit against your project to generate a CWV and WCAG 2.2 compliant responsive design report.

Frequently Asked Questions about forge-responsive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit responsive design for Core Web Vitals and WCAG 2.2 compliance?▼

To audit responsive design for Core Web Vitals and WCAG 2.2 compliance, run a project audit to detect CSS strategies, evaluate container queries, and output concrete fixes with citations to standards.

What is the best way to improve LCP and CLS using modern CSS?▼

The best way to improve LCP and CLS using modern CSS is to apply intrinsic layout patterns like container queries, clamp() fluid typography, and fluid spacing to optimize responsive rendering and web vitals.

Can I audit responsive design in projects using Tailwind or styled-components?▼

Yes, you can audit responsive design in projects using Tailwind, CSS Modules, styled-components, or vanilla CSS by automatically detecting the CSS strategy and extracting theme and breakpoint data.

How does fluid typography with clamp() affect responsive design compliance?▼

Fluid typography with clamp() affects responsive design compliance by enabling scalable text sizing without breakpoints, which improves Core Web Vitals like CLS while maintaining WCAG 2.2 accessibility standards.

Why does my responsive layout fail container queries on certain viewports?▼

Responsive layouts may fail container queries due to missing containment contexts or unsupported CSS strategies; an audit detects your CSS framework configuration and recommends compliant intrinsic layout patterns.

Do I need specific CSS files to audit WCAG 2.2 responsiveness?▼

Yes, you need access to project CSS or configuration files to audit WCAG 2.2 responsiveness, allowing the extraction of theme and breakpoint data to produce actionable compliance fixes.

Related Skills

Explore More Design & Creative Skills→
xurenluxurenlu
1

web-component-design

Guide reusable UI component design across React, Vue, and Svelte.

Community
Advanced
LiinkiingLiinkiing
6

responsive-design

Apply container queries, fluid typography, and grid/flex layouts to adapt interfaces across devices.

Community
Basic
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
DaytimeBluesDaytimeBlues

performance-profiling

Measure Core Web Vitals and analyze bundles with Lighthouse CLI.

Community
Intermediate