skills.rest
DevJanidu
DevJaniduCOMMUNITY
Explore all skills by this author →
GitHub

sf-nail-spa-design-system

Define light and dark themes, typography, layout, and GSAP animations for the SF Nail Spa website.

Updated Jun 30, 2026
Search Tags:#accessibility#design system#web design#brand consistency#GSAP
One-click install
npx skills add https://github.com/DevJanidu/SF-Nail-Spa --skill sf-nail-spa-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-nail-spa-design-system
Source: https://github.com/DevJanidu/SF-Nail-Spa/tree/main
Command: npx skills add https://github.com/DevJanidu/SF-Nail-Spa --skill sf-nail-spa-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about sf-nail-spa-design-system

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

FAQPage Schema
How do I maintain brand consistency across a web design system?▼

To maintain brand consistency across a web design system, use predefined color tokens, typography rules, and layout grids to ensure visual alignment across all pages and components.

What is the best way to add GSAP animations to a website?▼

The best way to add GSAP animations to a website is by integrating them into core components for scroll reveals, theme toggles, and brushstroke motifs to enhance user experience.

Can I use this design system for light and dark theme toggles?▼

Yes, you can use this design system for light and dark theme toggles. It defines a specific color palette for both themes and includes GSAP animations for the theme toggle component.

Does this web design system include accessibility standards?▼

Yes, this web design system includes accessibility standards. It ensures visual consistency and accessible user experiences across all defined pages, typography, and core components.

What typography and spacing rules are defined in this design system?▼

The design system defines Poppins and Inter fonts for headings and body text, and establishes a structured grid system with specific spacing rules for consistent layout.

Related Skills

Explore More Design & Creative Skills→
CinderZhangCinderZhang
3

represent-datamodel

Define core system entities and their plain-language relationships.

Community
Basic
Akhil-Naik-9Akhil-Naik-9
1

design-work

Codify Wix Vibe UI guidelines for layouts, typography, color, and components.

Community
Advanced
gooseworks-aigooseworks-ai
6

remix-photo-grid-ad-from-sample

Swap content in a Photo-Grid promo card while preserving layout and style.

Official
Advanced
bryllimbryllim
99

bryl-minimal-design

Establish semantic design tokens and typography specifications for minimalist web UIs.

Community
Basic