skills.rest
charlesmsiegel
charlesmsiegelCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/charlesmsiegel/tg --skill tg-frontend-specifications
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
schalkneethlingschalkneethling
7

css-tokens

Generate a tokens.css file with CSS custom properties for theming and dark mode.

Community
Basic
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
alongor666alongor666
1

component-styling

Generate BEM-compliant responsive CSS templates for Vue components.

Community
Basic
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate