frontend-css
Write and maintain CSS following a consistent methodology (Tailwind, BEM, utility classes, CSS modules), avoiding framework style overrides, maintaining design tokens for consistency, minimizing custom CSS, and optimizing for production with CSS purging and tree-shaking. Use this skill when writing CSS styles, working with CSS frameworks like Tailwind CSS, creating design systems with design tokens, implementing utility classes, managing CSS architecture, optimizing CSS performance, or working with CSS preprocessors. This skill applies when working on .css files, .scss files, .vue component styles, styled-components, or any styling code in your frontend application.
Best use case
frontend-css is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Write and maintain CSS following a consistent methodology (Tailwind, BEM, utility classes, CSS modules), avoiding framework style overrides, maintaining design tokens for consistency, minimizing custom CSS, and optimizing for production with CSS purging and tree-shaking. Use this skill when writing CSS styles, working with CSS frameworks like Tailwind CSS, creating design systems with design tokens, implementing utility classes, managing CSS architecture, optimizing CSS performance, or working with CSS preprocessors. This skill applies when working on .css files, .scss files, .vue component styles, styled-components, or any styling code in your frontend application.
Teams using frontend-css should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend-css/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-css Compares
| Feature / Agent | frontend-css | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Write and maintain CSS following a consistent methodology (Tailwind, BEM, utility classes, CSS modules), avoiding framework style overrides, maintaining design tokens for consistency, minimizing custom CSS, and optimizing for production with CSS purging and tree-shaking. Use this skill when writing CSS styles, working with CSS frameworks like Tailwind CSS, creating design systems with design tokens, implementing utility classes, managing CSS architecture, optimizing CSS performance, or working with CSS preprocessors. This skill applies when working on .css files, .scss files, .vue component styles, styled-components, or any styling code in your frontend application.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Frontend CSS ## When to use this skill - When writing CSS styles for UI components or pages - When working with CSS frameworks like Tailwind CSS, Bootstrap, or custom frameworks - When creating design systems with design tokens (colors, spacing, typography) - When implementing utility classes or component-specific styles - When managing CSS architecture and organization - When optimizing CSS performance and bundle size - When working with CSS preprocessors (Sass, Less, PostCSS) - When working on .css, .scss, or .vue component style sections - When implementing styled-components or CSS-in-JS solutions - When ensuring consistent styling across the application - When configuring CSS purging or tree-shaking for production builds - When avoiding style conflicts or specificity issues This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend CSS. ## Instructions For details, refer to the information provided in this file: [frontend CSS](../../../agent-os/standards/frontend/css.md)
Related Skills
frontend-responsive
Implement responsive designs that work across mobile, tablet, and desktop screen sizes. Use this skill when applying mobile-first development patterns, using responsive breakpoints, creating fluid layouts with percentage-based widths, choosing relative units (rem/em) over pixels, ensuring touch-friendly tap targets, or optimizing images for mobile. Applies when working on any frontend layout code, media queries, responsive utilities, and when testing UI across different screen sizes.
Frontend Responsive Design Standards
Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.
frontend-playbook
The complete build-to-production pipeline for Ethereum dApps. Fork mode setup, IPFS deployment, Vercel config, ENS subdomain setup, and the full production checklist. Built around Scaffold-ETH 2 but applicable to any Ethereum frontend project. Use when deploying any dApp to production.
frontend-patterns
Frontend development and API integration patterns for React, TypeScript, and state management
frontend-pages-components
Build responsive frontend pages, reusable components, layouts, and styling using modern best practices.
frontend-nuxt
Nuxt 4 & TailwindCSS expert for modern web applications (SSR, SPA, Hybrid).
frontend
Modern frontend development with React, Vue, and web technologies
frontend-mobile-security-xss-scan
You are a frontend security specialist focusing on Cross-Site Scripting (XSS) vulnerability detection and prevention. Analyze React, Vue, Angular, and vanilla JavaScript code to identify injection poi
frontend-mobile-development-component-scaffold
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
frontend-master
Frontend Master - 大师级前端页面开发。智能分析项目技术栈，生成独特设计美感的 UI，避免'AI审美'。自动持久化设计规范，保持项目一致性。整合 Frontend-Design 设计哲学 + UI-UX Pro Max 设计数据库。触发词: 前端、页面、组件、UI、登录页、落地页、dashboard、表单、卡片、导航栏。
frontend-guidelines
Core architectural rules, coding conventions, and tech stack guidelines for the Dog-Love Frontend. Reference this for all frontend code changes.
Frontend Functional Validator (Detective)
Clicks through the running UI to identify broken features and missing backend endpoints.