skills.rest
pontscho
pontschoCOMMUNITY
Explore all skills by this author →
GitHub

p:css-guidelines

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
One-click install
npx skills add https://github.com/pontscho/prompt-heaven --skill p-css-guidelines
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
arpa73arpa73
2

frontend-component-refactoring

Refactor Vue components into Base/Public/Admin with CSS variables.

Community
Basic
archibatearchibate
6

frontend-design

Convert design briefs into runnable HTML/CSS/JS frontend interfaces.

Community
Advanced
Joseph-N1Joseph-N1

theme-system

Manage CSS custom properties themes with data-theme attribute switching.

Community
Intermediate
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic