Skills
.Work. You
Rest

accelint-design-foundation

Community

Apply Accelint Design Foundation styling instantly

Design & Creative#react#styling#tailwind#design-tokens#css-modules#variant-system
AuthorAhnd6474
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Designing UI with Accelint's opinionated Tailwind system is error‑prone and inconsistent, causing teams to waste time on manual token selection, spacing decisions, and variant handling.

Core Features & Use Cases

  • Semantic Token Guidance: Provides the correct bg-*, fg-*, outline-* classes for automatic theming.
  • Semantic Spacing Scale: Replaces numeric Tailwind spacing with a meaningful, seven‑step scale.
  • @variant System: Enables data‑attribute driven styling without arbitrary Tailwind variants.
  • CSS Module Best Practices: Enforces single @apply per rule, layer hierarchy, and required @reference directives.

Quick Start

Use the skill to style a Button component with semantic tokens and proper CSS module layers.

Dependency Matrix

Required Modules

None required

Components

referencesassets

💻 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: accelint-design-foundation
Download link: https://github.com/Ahnd6474/Jakal-flow/archive/main.zip#accelint-design-foundation

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.