skills.rest
masakinihirota
masakinihirotaCOMMUNITY
Explore all skills by this author →
𝕏@masakinihirotaGitHub

vns-design-system

Enforce VNS masakinihirota design standards with Tailwind CSS themes.

Updated Aug 27, 2026
Search Tags:#typography#design system#tailwind css#glassmorphism#dark mode#ui guidelines
One-click install
npx skills add https://github.com/masakinihirota/vns-masakinihirota --skill vns-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vns-design-system
Source: https://github.com/masakinihirota/vns-masakinihirota/tree/main/.agent/skills/vns-design-system
Command: npx skills add https://github.com/masakinihirota/vns-masakinihirota --skill vns-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized set of design rules and component styles to ensure visual consistency and maintainability across the VNS masakinihirota application.

Core Features & Use Cases

  • Theme Duality: Defines distinct Light (Glassmorphism) and Dark (Elegant) themes.
  • Typography & Color: Enforces minimum font sizes and high contrast ratios for readability.
  • Component Styling: Provides specific Tailwind CSS classes for backgrounds, cards, and buttons.
  • Use Case: A new developer joins the team and needs to implement a new feature. By referencing this Skill, they can quickly understand and apply the correct styling for buttons, text, and containers, ensuring the new UI seamlessly integrates with the existing application.

Quick Start

Apply the 'Clean Glassmorphism' light mode styles to a card component using the provided Tailwind CSS classes.

Frequently Asked Questions about vns-design-system

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

FAQPage Schema
How do I enforce design system consistency with Tailwind CSS?▼

A design system provides standardized rules for typography, color palettes, and component styles, ensuring visual consistency and maintainability across an application using Tailwind CSS.

How do I implement glassmorphism and dark mode themes?▼

Implement glassmorphism and dark mode themes by applying specific Tailwind CSS classes defined for each theme, ensuring distinct visual styles while maintaining high contrast ratios for accessibility.

Does this design system support high contrast ratios and accessibility guidelines?▼

Yes, the design system adheres to accessibility guidelines by enforcing minimum font sizes and high contrast ratios to ensure readability across both light and dark themes.

How do I style UI components like cards and buttons using Tailwind CSS?▼

Style UI components like cards and buttons by applying the specific Tailwind CSS classes provided for backgrounds, cards, and buttons to ensure seamless integration with the existing application.

Can I use this design system for both light and dark themes?▼

Yes, the design system supports theme duality, defining distinct Light (Glassmorphism) and Dark (Elegant) themes with specific Tailwind CSS classes for implementation.

Related Skills

Explore More Design & Creative Skills→
FortiumPartnersFortiumPartners

styling-with-tailwind

Apply Tailwind CSS 3.x utility classes for responsive UI styling and theme configuration.

Official
Intermediate
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
transporte-terrestretransporte-terrestre

angular-style

Manage global CSS styles and typography for Angular applications using CSS variables.

Official
Intermediate