tg-frontend-specifications

Apply TG frontend specifications to HTML templates with gameline theming.

1|3|Updated Jul 30, 2024

Search Tags:#theming #templates #frontend #css #design-system #tg-components #gameline

Ready to run

npx skills add https://github.com/charlesmsiegel/tg --skill tg-frontend-specifications

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tg-frontend-specifications
Source: https://github.com/charlesmsiegel/tg/tree/main/.claude/skills/frontend-specifications
Command: npx skills add https://github.com/charlesmsiegel/tg --skill tg-frontend-specifications

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a complete frontend design system for the World of Darkness web application, ensuring consistent templates, components, and gameline theming.

Core Features & Use Cases

TG Components: Use the tg- prefixed components and avoid Bootstrap defaults to maintain a cohesive TG aesthetic.
Detail Views & Forms: Templates and forms should follow the TG card-based layout with gameline headings.
Gameline Theming: Apply dynamic gameline classes (e.g., mta_heading, vtm_heading) to headers for consistent branding.
Use Case: When creating a new template, reference these specs to ensure consistent card styling and responsive behavior.

Quick Start

Start by auditing a template to ensure it uses tg-card, tg-card-header, tg-card-body, and tg-card-title instead of Bootstrap equivalents.

Frequently Asked Questions about tg-frontend-specifications

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

FAQPage Schema

How do I standardize frontend design across HTML templates and components?▼

Frontend design standardization uses a consistent component library with predefined CSS classes and layouts. TG frontend specifications enforce card-based designs, gameline theming, and responsive behavior across detail views, forms, and list templates to eliminate inconsistency and maintain visual cohesion.

What are TG components and how do I use them instead of Bootstrap?▼

TG components are prefixed classes (tg-card, tg-card-header, tg-card-body, tg-card-title, tg-table, tg-badge, tg-btn) that replace Bootstrap defaults. Using TG components ensures your templates conform to the World of Darkness design system and maintain consistent styling across Mage, Vampire, Werewolf, and Changeling gamelines.

How do I apply gameline-specific theming to HTML templates?▼

Apply gameline theming by using data-gameline attributes and dynamic heading classes (mta_heading, vtm_heading, etc.) tied to specific gamelines. The specification provides heading logic via object.get_heading to automatically inject the correct gameline styling, ensuring templates adapt their visual branding per game system.

Can I use TG frontend specifications with responsive layouts and forms?▼

Yes, TG specifications cover responsive layouts, forms, and stat displays across all supported gamelines. Templates and forms follow card-based layouts with proper heading hierarchy and gameline styling, ensuring consistent behavior and appearance on all screen sizes.

What's the best way to audit an existing template for design consistency?▼

Audit templates by checking for TG class usage (tg-card, tg-card-header, tg-card-body, tg-card-title) instead of Bootstrap equivalents, verifying data-gameline attributes are present, and ensuring headers use object.get_heading for dynamic gameline classes. This confirms alignment with TG design principles.

Do I need to refactor Bootstrap templates to meet TG frontend specifications?▼

Yes, Bootstrap templates should be refactored to use TG component classes and card-based layouts. Replacing Bootstrap equivalents with TG classes, adding gameline attributes, and implementing dynamic headings ensures your templates meet the World of Darkness design system and provide consistent user experience.