css-best-practices
Guidelines for building modern, performant, and accessible CSS using MDN best practices. Use this when styling components, fixing layout shifts, or optimizing CSS performance.
- License 许可
- MIT
- 最近更新
- 2026-08-24
- Stars
- ★ 2
- Forks
- 0
01 前言 Front Matter
- name
- css-best-practices
- license
- MIT
- metadata
- { "author": "jabranr", "version": "1.0.0" }
- description
- Guidelines for building modern, performant, and accessible CSS using MDN best practices. Use this when styling components, fixing layout shifts, or optimizing CSS performance.
02 资源文件 11
- 参考文档description_ar.txt264 B
- 参考文档description_cn.txt163 B
- 参考文档description_de.txt230 B
- 参考文档description_en.txt176 B
- 参考文档description_es.txt192 B
- 参考文档description_fr.txt233 B
- 参考文档description_it.txt223 B
- 参考文档description_ja.txt363 B
- 参考文档description_ko.txt282 B
- 参考文档description_ru.txt410 B
- 参考文档description_tw.txt163 B
03 SKILL.md 正文
CSS Best Practices
This skill provides a set of rules and best practices for writing modern, performant, and maintainable CSS. It focuses on stability, modern layout engines, and user-centric accessibility.
This document is designed for AI agents and LLMs (but not limited to) to follow when creating/generating, debugging and maintaining CSS in any format or using any CSS framework, tool and preprocessor in any kind of web project.
Core Rules
- Layout Stability
- Maintainability & Cascade
- Container Queries
- Logical Properties
- Performance & Animation
- Accessibility
Usage
Activate this skill when generating new CSS files, refactoring legacy styles, or debugging UI performance issues.
Read individual reference files for detailed explanations and code examples:
references/layout-stability.md
references/specificity-cascade.md
references/container-queries.md
Each reference file contains:
- Title and basic description/context
- Correct code example with explanation
- Optionally incorrect code example with explanation
- Brief explanation of why it matters
04 同仓库更多 Skills
three-best-practices
Three.js performance optimization and best practices guidelines. Use when writing, reviewing, or optimizing Three.js code. Triggers on tasks involving 3D scenes, WebGL/WebGPU rendering, geometries, materials, textures, lighting, shaders, or TSL.
javascript-best-practices
Modern JavaScript best practices and performance optimization guidelines. Use when writing, reviewing, or refactoring JavaScript code to ensure optimal performance, maintainability, and modern patterns.
frontend-dev
Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.
exa-rate-limits
Implement Exa rate limiting, backoff, and idempotency patterns. Use when handling rate limit errors, implementing retry logic, or optimizing API request throughput for Exa. Trigger with phrases like "exa rate limit", "exa throttling", "exa 429", "exa retry", "exa backoff".
exa-deploy-integration
Deploy Exa integrations to Vercel, Fly.io, and Cloud Run platforms. Use when deploying Exa-powered applications to production, configuring platform-specific secrets, or setting up deployment pipelines. Trigger with phrases like "deploy exa", "exa Vercel", "exa production deploy", "exa Cloud Run", "exa Fly.io".
exa-core-workflow-a
Execute Exa primary workflow: Core Workflow A. Use when implementing primary use case, building main features, or core integration tasks. Trigger with phrases like "exa main workflow", "primary task with exa".