frontend-style-guide
CommunityEnforce Mantine-ready frontend styling.
AuthorAhChao
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill helps frontend teams maintain consistent, Mantine-ready styling across React components, streamline migration from Mantine v6 to v8, and enforce CSS module usage and theme tokens to reduce styling drift.
Core Features & Use Cases
- Enforce Mantine v8-compliant styling across TSX components during edits and migrations.
- Promote best-practice styling with CSS modules when inline props exceed a small threshold.
- Provide guidance when users mention Mantine, styling, or CSS modules to ensure consistent UI themes and token usage.
- Useful during code reviews, PRs, or initial project setup to align with the Lightdash frontend style guide.
Quick Start
Command: upgrade a Mantine v6 TSX component to Mantine v8, applying CSS modules when needed and ensuring theme tokens are used.
Dependency Matrix
Required Modules
None requiredComponents
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-guide Download link: https://github.com/AhChao/gab-guide/archive/main.zip#frontend-style-guide Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.