Menu
CSS and styling workflow guidelines. Activate when working with CSS files (.css), Tailwind CSS, Stylelint, or styling-related tasks.
Activate when user needs multi-URL scraping, browser automation pipelines, or efficient tool orchestration to reduce API round-trips and context usage.
Language-agnostic API design patterns covering REST and GraphQL, including resource naming, HTTP methods, status codes, versioning, pagination, filtering, authentication, error handling, and schema design. Activate when working with APIs, REST endpoints, GraphQL schemas, API documentation, OpenAPI/Swagger, JWT, OAuth2, endpoint design, API versioning, rate limiting, or GraphQL resolvers.
Git workflow and commit guidelines. Trigger keywords: git, commit, push, .git, version control. MUST be activated before ANY git commit, push, or version control operation. Includes security scanning for secrets (API keys, tokens, .env files), commit message formatting with HEREDOC, logical commit grouping (docs, test, feat, fix, refactor, chore, build, deps), push behavior rules, safety rules for hooks and force pushes, and CRITICAL safeguards for destructive operations (filter-branch, gc --prune, reset --hard). Activate when user requests committing changes, pushing code, creating commits, rewriting history, or performing any git operations including analyzing uncommitted changes.
Testing workflow patterns and quality standards. Activate when working with tests, test files, test directories, code quality tools, coverage reports, or testing tasks. Includes zero-warnings policy, targeted testing during development, mocking patterns, and best practices across languages.
Ansible automation workflow guidelines. Activate when working with Ansible playbooks, ansible-playbook, inventory files (.yml, .ini), or Ansible-specific patterns.
Claude Code AI-assisted development workflow. Activate when discussing Claude Code usage, AI-assisted coding, prompting strategies, or Claude Code-specific patterns.
| name | css-workflow |
| description | CSS and styling workflow guidelines. Activate when working with CSS files (.css), Tailwind CSS, Stylelint, or styling-related tasks. |
| location | user |
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119.
| Task | Tool | Command |
|---|---|---|
| Lint | Stylelint | npx stylelint "**/*.css" |
| Format | Prettier | npx prettier --write "**/*.css" |
| Dead code | PurgeCSS | npx purgecss --css *.css --content *.html |
RECOMMENDED over custom CSS for consistency and maintainability.
tailwind.config.js for project design tokens@apply sparingly - prefer utilities in markup[123px]) when design token existsClass order: Layout > Sizing > Spacing > Typography > Colors > Effects > Interactivity
SHOULD prefer native CSS over Sass/preprocessors.
/* CSS Variables */
:root { --color-primary: #3b82f6; }
.component { color: var(--color-primary, #3b82f6); }
/* Native Nesting */
.card {
& .title { font-weight: bold; }
&:hover { box-shadow: 0 4px 6px rgb(0 0 0 / 0.1); }
}
/* Container Queries */
.card-container { container-type: inline-size; }
@container (min-width: 400px) { .card { display: grid; } }
SHOULD use BEM for custom CSS:
.card { } /* Block */
.card__title { } /* Element */
.card--featured { } /* Modifier */
kebab-casebtn-primary not btn-blue)u-, JS hooks with js-Property order: Positioning > Display/Box Model > Typography > Visual > Misc
Mobile-first: MUST use min-width media queries.
.component {
padding: 1rem;
@media (min-width: 768px) { padding: 2rem; }
}
/* Grid - 2D layouts */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
/* Flexbox - 1D layouts */
.flex { display: flex; align-items: center; gap: 1rem; }
/* Logical properties - i18n support */
.component { margin-inline: auto; padding-block: 1rem; }
MUST support via prefers-color-scheme:
:root { --color-bg: #fff; --color-text: #1a1a1a; }
@media (prefers-color-scheme: dark) {
:root { --color-bg: #1a1a1a; --color-text: #fff; }
}
Optional class toggle: [data-theme="dark"] { --color-bg: #1a1a1a; }
@import in production (blocks parallel downloads)!important except for utilities:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}