Claude Code Plugins

Community-maintained marketplace

Feedback

styling-guidelines

@pixu1980/karaoke-tracker
0
0

Best practices for component CSS, design system consistency, and layout patterns. Use when authoring component styles.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name styling-guidelines
description Best practices for component CSS, design system consistency, and layout patterns. Use when authoring component styles.
license MIT
metadata [object Object]

Summary

Guidelines for writing component CSS consistent with design system principles.

Key principles

  • Component styles are scoped locally (no global class names)
  • Use design tokens for spacing, colors, and sizes (rather than hardcoding)
  • Use semantic HTML selectors (element and attribute selectors)
  • Implement CSS layers for organization and specificity control
  • Support responsive design with mobile-first approach

When to use this skill

Use this skill when authoring component CSS to ensure design consistency, maintainability, and proper layout behavior.

See also

For project-specific design tokens and styling conventions, refer to .context/CLAUDE.md or .context/COPILOT.md.

For full guidelines and examples see references/REFERENCE.md.