Skills
.Work. You
Rest

sf-nail-spa-design-system

Community

Luxury, organic, accessible web design system for SF Nail Spa.

Design & Creative#accessibility#design system#web design#brand consistency#GSAP
AuthorDevJanidu
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive design system for the SF Nail Spa website, ensuring a consistent, on-brand visual experience across all pages and components.

Core Features & Use Cases

  • Color Tokens: Defines a palette for light and dark themes.
  • Typography: Defines Poppins and Inter fonts for headings and body text.
  • Layout & Spacing: Establishes a grid system and spacing rules.
  • Core Components: Defines button, card, navigation bar, accordion, and theme toggle styles.
  • GSAP Animations: Includes GSAP animations for brushstroke motif, scroll reveals, and theme toggle.
  • Use Case: When building any page or component for the SF Nail Spa website, use this Skill to maintain brand consistency and accessibility standards.

Quick Start

Apply the design system to your project to ensure visual consistency and accessibility. Example: Use the provided color tokens to style your page background and text.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: sf-nail-spa-design-system
Download link: https://github.com/DevJanidu/SF-Nail-Spa/archive/main.zip#sf-nail-spa-design-system

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 620,000+ vetted skills library on demand.