tinie-design-system

Name: tinie-design-system
Availability: InStock
Author: thomas

Create Twig components with BEM conventions and CSS layers for Symfony projects.

Updated Jun 7, 2025

Search Tags:#front-end #design system #css #symfony #twig

Ready to run

npx skills add https://github.com/ThomasLdev/tinie-bakerie --skill tinie-design-system

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tinie-design-system
Source: https://github.com/ThomasLdev/tinie-bakerie/tree/main/.claude/skills/tinie-design-system
Command: npx skills add https://github.com/ThomasLdev/tinie-bakerie --skill tinie-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

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

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'.

Frequently Asked Questions about tinie-design-system

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

FAQPage Schema

How do I create consistent front-end components in a Symfony project?▼

A modern design system provides conventions, design tokens, and CSS architecture to streamline front-end development and maintain UI consistency across Symfony components and pages.

What's the best way to structure CSS for Twig components?▼

The best way to structure CSS for Twig components is using BEM naming conventions combined with modern CSS layers, ensuring maintainable and organized styling across your design system.

How do I ensure my front-end design meets WCAG 2.2 AA accessibility standards?▼

To ensure front-end design meets WCAG 2.2 AA standards, implement predefined guidelines for keyboard navigation, contrast ratios, and text alternatives within your component development workflow.

Does this design system support mobile-first responsive development?▼

Yes, the design system supports mobile-first responsive development by implementing predefined breakpoints and media queries, ensuring components adapt correctly across different devices.

Can I use this design system without advanced CSS knowledge?▼

You can use this design system with basic CSS knowledge, as it provides predefined tokens, conventions, and architecture, though understanding BEM and CSS layers will improve component customization.

Why does my front-end UI lack consistency across different Symfony pages?▼

Your front-end UI lacks consistency across Symfony pages due to missing design tokens and standardized CSS architecture, which a comprehensive design system provides to enforce visual uniformity.