playbooks

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

frontend--css skill

/.codex/skills/frontend--css

This skill helps enforce the Agent OS frontend CSS standard across projects, improving consistency, accessibility, and maintainability.

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

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

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

# Frontend Css

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

## Instructions

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

## References

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

Overview

This skill applies the Agent OS standard for frontend CSS to ensure consistent, maintainable styling across projects. It codifies naming, structure, and delivery practices so teams produce predictable CSS that scales. Use it to align styles with accessibility, performance, and maintainability goals.

How this skill works

The skill inspects CSS and related assets against the Agent OS frontend CSS standard and identifies deviations in structure, naming, specificity, and performance. It suggests changes such as refactoring selectors, enforcing a component-first approach, optimizing build output, and ensuring accessibility-friendly declarations. Recommendations are actionable and mapped to the standard’s rules.

When to use it

  • On new frontend features to ensure styles follow the team standard from the start
  • During code reviews to catch anti-patterns like over-specific selectors or global style leaks
  • When refactoring legacy CSS to migrate toward a component-based system
  • Before release to audit performance and accessibility impacts of CSS
  • When onboarding new developers to enforce consistent style practices

Best practices

  • Use a component-first, modular structure for styles and avoid global overrides
  • Prefer utility classes sparingly; favor semantic classes tied to components
  • Keep specificity low—use class selectors and avoid !important
  • Use consistent naming (BEM-style or the approved convention) and document exceptions
  • Optimize output: combine critical CSS, remove unused rules, and minify for production

Example use cases

  • Refactor a monolithic stylesheet into per-component styles with clear boundaries
  • Detect and replace deep descendant selectors that cause brittle layouts
  • Audit CSS bundle size and recommend code-splitting or critical CSS extraction
  • Convert inline styles to themeable CSS variables for dark mode support
  • Validate color contrast and focus styles to meet accessibility requirements

FAQ

Does this skill rewrite code automatically?

It proposes concrete changes and sample refactors; automated fixes may be offered for low-risk adjustments but major refactors are presented as guided steps.

Which naming convention should I use?

Follow the Agent OS frontend CSS naming convention (component-focused, predictable patterns). Use the approved variant your team selected and document any exceptions.

How does it handle framework-specific styles?

It adapts recommendations to common frameworks by mapping standards to component boundaries, scoped styles, and recommended build outputs while preserving framework idioms.