Skills
.Work. You
Rest

frontend-style

Community

Enforce clean Tailwind styling and safe coding.

Software Engineering#frontend#react#css#code-quality#tailwind#cn#styling-guidelines
AuthorKwondongkyun
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Use when styling components or writing CSS. Enforces TailwindCSS with cn() utility, proper environment variables usage. Prohibits emojis, any types, inline styles, and console.log.

Core Features & Use Cases

  • Enforces TailwindCSS usage with cn() utility in component code.
  • Prohibits emojis, any types (TypeScript any), inline styles, and console.log to promote clean code and maintainability.
  • Encourages proper environment variable usage (distinguishing NEXT_PUBLIC_ variables from server-only vars) to avoid leaks and security risks.

Quick Start

Use the frontend-style rules to style a component by replacing className strings with cn() and removing inline styles and console.log calls.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: frontend-style
Download link: https://github.com/Kwondongkyun/claude-code-settings/archive/main.zip#frontend-style

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.