skills.rest
younwony
younwonyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

style-guide

Enforce consistent HTML/CSS styling with CSS variables and no inline styles.

Updated Aug 23, 2026
Search Tags:#theming#html#css#design-system#style-guide#dark-mode#no-inline-styles
One-click install
npx skills add https://github.com/younwony/younwony.github.io --skill style-guide-younwony
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: style-guide
Source: https://github.com/younwony/younwony.github.io/tree/main/.claude/skills/util/style
Command: npx skills add https://github.com/younwony/younwony.github.io --skill style-guide-younwony

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a clear, enforceable guide for styling HTML/CSS to maintain consistency across templates and projects.

Core Features & Use Cases

  • No-inline-styles policy: ensures maintainable CSS by keeping styling in CSS files.
  • CSS variable system: defines light/dark mode vars for theming.
  • Template consistency: applies to all resume/career templates to ensure a uniform look.

Quick Start

Refactor all inline styles to CSS classes and variables in assets/css/style.css, and verify light/dark rendering across templates.

Frequently Asked Questions about style-guide

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

FAQPage Schema
How do I remove inline styles from HTML and use CSS variables instead?▼

To remove inline styles, refactor HTML elements to use CSS classes and apply CSS variables defined in a shared stylesheet. This enforces a no-inline-styles policy, ensuring maintainable CSS architecture and consistent template styling across projects.

What is the best way to support dark mode in HTML templates?▼

Supporting dark mode in HTML templates requires defining light and dark mode CSS variables. By codifying these variables in your CSS architecture, you can ensure consistent theming and uniform rendering across all component templates.

How do I maintain CSS styling consistency across multiple landing page templates?▼

Maintaining CSS styling consistency across landing page templates involves using a shared CSS architecture with functional requirements. This includes enforcing a no-inline-styles policy and utilizing CSS variables for all theming needs.

Can I use this CSS styling guide for customizing resume and career templates?▼

Yes, this CSS styling guide applies directly to frontend UI work and template customization, including resume and career templates. It enforces a uniform look by codifying functional requirements like CSS variables and dark mode support.

Why should I avoid inline styles in my frontend UI work?▼

You should avoid inline styles to ensure maintainable CSS by keeping all styling definitions in dedicated CSS files. This policy allows for a shared CSS architecture, making it easier to manage CSS variables and support dark mode across templates.

Related Skills

Explore More Software Engineering Skills→
wpgauravwpgaurav
111

html-to-generateblocks

Convert HTML/CSS layouts into GenerateBlocks V2 blocks with inline styles.

Community
Intermediate
ancolemanancoleman
503

theming-components

Manage design tokens and switch themes with CSS custom properties.

Community
Advanced
ataschzataschz
18

tailwind-v4-shadcn

Guide React teams migrating to Tailwind v4 with shadcn/ui using CSS-variable theming.

Community
Advanced
Minecraft-UtilitiesMinecraft-Utilities
1

tailwind-design-system

Build scalable Tailwind v4 design systems with CSS-first design tokens.

Official
Advanced