skills.rest
lightdash
lightdashOFFICIAL
Explore all skills by this author →
Website𝕏@lightdash_devsGitHub

frontend-style-guide

Enforce Mantine v8 imports and theme tokens in Lightdash TSX components.

6.0k|759|Updated Mar 19, 2021
Search Tags:#frontend#react#style-guide#css-modules#tsx#mantine
One-click install
npx skills add https://github.com/lightdash/lightdash --skill frontend-style-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-style-guide
Source: https://github.com/lightdash/lightdash/tree/main/.claude/skills/frontend-style-guide
Command: npx skills add https://github.com/lightdash/lightdash --skill frontend-style-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill codifies a consistent frontend style baseline for Lightdash React components, helping teams migrate Mantine from v6 to v8 and standardize styling practices.

Core Features & Use Cases

  • Enforces Mantine v8 imports and component usage, reducing migration errors.
  • Guides when to use CSS modules versus inline style props, and promotes theme-based tokens.
  • Use Case: When editing TSX files or addressing Mantine, styling, or CSS module topics, apply this guide to achieve consistent, maintainable frontend code.

Quick Start

Apply the frontend style guide to a TSX component by auditing Mantine imports, removing unsupported style props, and migrating styling to CSS modules or theme-based props where appropriate.

Frequently Asked Questions about frontend-style-guide

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

FAQPage Schema
How do I migrate Mantine from v6 to v8 in React TSX files?▼

This frontend style guide helps migrate Mantine from v6 to v8 in React TSX files by enforcing correct v8 imports and replacing unsupported inline style props with theme tokens or CSS modules.

When should I use CSS modules versus inline style props in React components?▼

You should use CSS modules or theme-based tokens instead of inline style props to achieve consistent, maintainable frontend code. This style guide promotes relying on these structured styling methods over inline props for Lightdash React components.

How to enforce a consistent frontend style guide for React TSX components?▼

To enforce a consistent React frontend style guide, audit TSX files to remove inline style props, ensure correct Mantine v8 imports, and apply theme tokens or CSS modules. This standardizes styling practices across components.

Does this style guide support replacing inline styles with theme tokens?▼

Yes, this style guide supports replacing inline styles with theme tokens. It ensures styling in Lightdash React components relies specifically on theme-based tokens or CSS modules to maintain consistency.

What are the limitations of using inline style props with Mantine v8?▼

The limitation of using inline style props with Mantine v8 is that they cause styling inconsistencies. This guide helps you avoid them, enforcing a baseline where styling must rely on CSS modules or theme tokens instead.

Related Skills

Explore More Software Engineering Skills→
AhChaoAhChao
1

frontend-style-guide

Enforce Mantine v8 styling and CSS modules in React TSX components.

Community
Basic
podversepodverse
6

styles-import-last

Reorder CSS/SCSS module imports to the end of React component import blocks.

Official
Intermediate
buchananwillbuchananwill
2

mandate-ui-design

Evaluate UI designs for semantic tokens, composability, and theming.

Community
Intermediate
FranciscoMorettiFranciscoMoretti
1.2k

react

Enforce React rules for TSX files during linting and pre-commit checks.

Community
Basic