skills.rest
ThomasLdev
ThomasLdevCOMMUNITY
Explore all skills by this author →
GitHub

tinie-design-system

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
One-click install
npx skills add https://github.com/ThomasLdev/tinie-bakerie --skill tinie-design-system
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
woweyawoweya
1

symfony-ux-icons

Render scalable SVG icons in Symfony Twig templates via Iconify and local assets.

Community
Intermediate
AnastasiyaWAnastasiyaW
140

frontend-design

Develop frontend design workflows for accessible web interfaces with responsive layouts and design tokens.

Community
Advanced
SwokingSwoking

symfony-sk:twig-template

Create standardized Twig templates for Symfony front-end rendering.

Community
Intermediate
akobryan1akobryan1
1

ui-styling

Generate React components styled with Tailwind CSS for web apps.

Community
Intermediate