p:css-guidelines

Name: p:css-guidelines
Availability: InStock
Author: pontscho

Centralizes CSS conventions with tokens, naming rules, and modular patterns for frontend projects.

1|Updated Jan 7, 2026

Search Tags:#theming #accessibility #css #responsive-design #css-variables #design-tokens #bem

Ready to run

npx skills add https://github.com/pontscho/prompt-heaven --skill p-css-guidelines

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: p:css-guidelines
Source: https://github.com/pontscho/prompt-heaven/tree/main/ClaudeCode/skills/p%3Acss-guidelines
Command: npx skills add https://github.com/pontscho/prompt-heaven --skill p-css-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralize CSS conventions to reduce divergence, ensure token-driven design, and promote consistent theming and component architecture across a codebase.

Core Features & Use Cases

CSS custom properties and tokens for design systems
Kebab-case naming and BEM-inspired component structure
Theming system with data-attribute based themes
Component architecture guidelines for modular styles
Responsive layout patterns and accessibility considerations

Quick Start

Import the guidelines into your project and start applying the tokens, naming conventions, and component patterns to implement a consistent CSS system.

Frequently Asked Questions about p:css-guidelines

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

FAQPage Schema

How do I standardize CSS across a large design system?▼

Standardize CSS by implementing tokenized design tokens, BEM-inspired naming conventions, and modular patterns. This reduces codebase fragmentation and ensures consistent theming across frontend projects.

What is the best way to implement theming with CSS variables?▼

Implement theming with CSS variables by using a data-attribute based theming system. This centralizes design tokens as custom properties, allowing dynamic theme switching while maintaining accessible color contrast.

How do I structure modular CSS components using BEM naming?▼

Structure modular CSS components using kebab-case naming and a BEM-inspired component structure. This provides clear boundaries for component architecture, guiding layout and accessibility patterns while keeping styles maintainable.

Can I use these CSS guidelines for small frontend components?▼

Yes, you can use these CSS guidelines for small frontend components. The tokenized design system and modular patterns apply to frontend projects ranging from small individual components to large-scale team design systems.

Does this CSS architecture approach handle responsive layout and accessibility?▼

Yes, this CSS architecture approach handles responsive layout and accessibility. The guidelines include responsive layout patterns and accessibility considerations, specifically meeting requirements for accessible color contrast across teams.