tinie-design-system
CommunityStreamline front-end design and development with a modern design system.
AuthorThomasLdev
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill streamlines the process of creating, modifying, and composing front-end components and pages, providing conventions, tokens, and CSS architecture to speed up development and ensure consistency.
Core Features & Use Cases
- Modern Design System: Offers conventions, tokens, and CSS architecture to maintain consistency across components and pages.
- Component Development: Provides guidelines for creating Twig components with BEM naming conventions and CSS layers.
- Responsive Design: Implements a mobile-first approach with predefined breakpoints and media queries for different devices.
- Accessibility: Ensures compliance with WCAG 2.2 AA standards, including keyboard navigation, contrast ratios, and text alternatives.
Quick Start
Use the tinie-design-system skill to create a new button component with the desired variant, such as 'primary', by running the command 'create-button primary'.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferencesassets
💻 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: tinie-design-system Download link: https://github.com/ThomasLdev/tinie-bakerie/archive/main.zip#tinie-design-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.