playbooks

home / skills / tlabs-xyz / tbtc-v2-performance / frontend--responsive

frontend--responsive skill

/.codex/skills/frontend--responsive

This skill applies the Agent OS frontend responsive standard to ensure consistent, accessible layouts across breakpoints and devices.

npx playbooks add skill tlabs-xyz/tbtc-v2-performance --skill frontend--responsive

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
377 B
---
name: frontend--responsive
description: Apply the Agent OS standard for frontend responsive.
tags: [agent-os, standard, frontend]
---

# Frontend Responsive

Use this skill when working on frontend responsive in this repo.

## Instructions

- Follow the standard in `agent-os/standards/frontend/responsive.md`.

## References

- `agent-os/standards/frontend/responsive.md`

Overview

This skill applies the Agent OS frontend responsive standard to TypeScript-based projects. It enforces responsive design rules, layout breakpoints, and accessibility considerations for UI components. Use it to ensure consistent, testable responsive behavior across the codebase.

How this skill works

The skill analyzes frontend components, style rules, and layout utilities against the Agent OS responsive standard. It highlights mismatches in breakpoints, viewport handling, and fluid scaling, and suggests fixes for CSS/TSX patterns. Reports focus on actionable items: code changes, recommended patterns, and areas needing manual review.

When to use it

  • When adding or updating UI components that must be responsive
  • During code review to validate responsive behavior
  • When standardizing breakpoints and layout utilities across the project
  • Before releases that include layout or design changes
  • When auditing accessibility and mobile/desktop parity

Best practices

  • Adopt the standard’s defined breakpoints and avoid ad-hoc values
  • Prefer fluid, percentage-based layouts with min/max constraints
  • Use component-level tests and visual regression checks for breakpoints
  • Centralize responsive utilities (tokens/mixins) rather than scattering styles
  • Document exceptions and justify any deviation from the standard

Example use cases

  • Convert a legacy component to use standardized breakpoints and update its tests
  • Review a pull request that introduces new layout CSS to ensure it meets responsive rules
  • Audit a page for inconsistent spacing and scaling between mobile and desktop
  • Create a new component library entry that must behave consistently across viewport sizes
  • Validate that theme tokens and spacing utilities follow the responsive guidelines

FAQ

Does this skill modify code automatically?

It reports violations and suggests concrete changes; automatic fixes depend on integration with your tooling and CI.

Which files does it inspect?

It focuses on frontend component files, style definitions, and layout utilities typically used in TypeScript React projects.