skills.rest
salverius-tech
salverius-techCOMMUNITY
Explore all skills by this author →
GitHub

css-workflow

Guide CSS styling workflows with Tailwind CSS, Stylelint, and Prettier.

Updated Apr 11, 2023
Search Tags:#performance#accessibility#css#styling#prettier#tailwind#stylelint
One-click install
npx skills add https://github.com/salverius-tech/dotfiles --skill css-workflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-workflow
Source: https://github.com/salverius-tech/dotfiles/tree/main/home/dot_claude/skills/css-workflow
Command: npx skills add https://github.com/salverius-tech/dotfiles --skill css-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide to modern CSS development, ensuring consistency, maintainability, and performance in your styling workflows.

Core Features & Use Cases

  • Tooling: Integrates linters (Stylelint) and formatters (Prettier) for code quality.
  • Frameworks: Recommends Tailwind CSS for utility-first styling and efficient design systems.
  • Modern CSS: Encourages native features like CSS Variables, Nesting, and Container Queries.
  • Accessibility: Emphasizes focus states, reduced motion, and color contrast compliance.
  • Use Case: When starting a new project or refactoring existing CSS, consult this Skill for guidance on structuring your stylesheets, choosing the right tools, and implementing accessible, performant styles.

Quick Start

Activate the css-workflow skill to get guidance on using Stylelint for CSS linting.

Frequently Asked Questions about css-workflow

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

FAQPage Schema
What are the best practices for organizing and maintaining a modern CSS workflow?▼

A modern CSS workflow enforces consistency and performance by integrating linters like Stylelint, formatters like Prettier, and using utility-first frameworks such as Tailwind CSS.

How do I use Tailwind CSS with native CSS features like variables and container queries?▼

You can use Tailwind CSS alongside native CSS features by leveraging CSS variables, native nesting, and container queries to build efficient, maintainable design systems.

Does this CSS workflow guide include accessibility and performance standards?▼

Yes, the CSS workflow includes accessibility standards by enforcing focus states, reduced motion, and color contrast compliance, while optimizing performance through modern CSS properties.

How do I configure Stylelint and Prettier for CSS code quality?▼

To configure CSS code quality, use Stylelint for linting and Prettier for formatting, ensuring consistent styling rules and preventing syntax errors across your stylesheets.

When should I use native CSS nesting and modern properties over Tailwind?▼

Use native CSS nesting and modern properties when you need built-in browser features without framework abstractions, while using Tailwind for rapid utility-first styling and design system consistency.

Can I enforce dark mode support and specific naming conventions in my CSS?▼

Yes, you can enforce dark mode support and specific naming conventions by following the provided CSS guidelines, which mandate these practices using RFC 2119 keywords for compliance.

Related Skills

Explore More Software Engineering Skills→
baasith6baasith6

converting-css-to-tailwind

Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.

Community
Intermediate
DuranndDurannd

nextjs-react-expert

Optimize React and Next.js applications by eliminating data fetching waterfalls and reducing bundle size.

Community
Intermediate
JBonfimJBonfim

tailwindcss

Standardizes Tailwind CSS v4 styling using semantic tokens and tailwind-variants components.

Community
Intermediate
MadAppGangMadAppGang
7

css-modules

Manage component-scoped CSS styling with CSS Modules, Vite, and Lightning CSS.

Official
Intermediate