skills.rest
Military-Veteran-Team-LPT-Realty
Military-Veteran-Team-LPT-RealtyOFFICIAL
Explore all skills by this author →
GitHub

accessibility-typography-upgrade

Upgrades font sizes and weights across React/Tailwind projects to meet accessibility standards for older users.

Updated Sep 16, 2026
Search Tags:#automation#typography#accessibility#react#dashboard#tailwind#font size
One-click install
npx skills add https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills --skill accessibility-typography-upgrade-military-veteran-team-lpt-realty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-typography-upgrade
Source: https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills/tree/main/skills/accessibility-typography-upgrade
Command: npx skills add https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills --skill accessibility-typography-upgrade-military-veteran-team-lpt-realty

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Web dashboards often use small, low-weight text that is difficult for users aged 60 and older to read. This Skill applies a systematic, accessibility-grade typography upgrade across an entire React/Tailwind project, replacing error-prone manual edits with automated scripts and a proven standard. ## Core Features & Use Cases - Automated Bulk Sweep: A Python script upgrades text-xs to text-sm, table cell text to text-base, inline font sizes, and Recharts tick sizes across all .tsx/.ts files, while skipping badge/chip/tag elements. - CSS Base Standard: Reference rules set html { font-size: 17px }, body weight 500, and standardized table, sidebar, and KPI label styles with #111111 text color. - Targeted Component Upgrades: Guided manual edits for coaching panels, scorecards, and shared table components, plus a dedicated script for DashboardLayout.tsx. - Use Case: A user reports that dashboard text is too small to read. Run the sweep scripts, apply the CSS changes, verify with TypeScript checks and tests, and checkpoint the result. ## Quick Start Ask the assistant to apply the accessibility typography upgrade to your React/Tailwind project so all body text, tables, and sidebar navigation meet the 60+ readability standard.

Frequently Asked Questions about accessibility-typography-upgrade

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

FAQPage Schema
How do I make Tailwind text larger for older users across a whole project?▼

Run the included Python sweep script against your client/src directory. It upgrades text-xs to text-sm, table cell text to text-base, and small inline fontSize values to readable sizes across all .tsx and .ts files automatically.

How to upgrade typography in a React dashboard for accessibility?▼

Apply the CSS base changes to index.css (17px html font size, body weight 500), run the bulk sweep script, then run the DashboardLayout script and targeted manual edits for coaching and scorecard components. Verify with tsc --noEmit and your test suite.

Does the typography upgrade affect badges, chips, and tags?▼

No. Badge, chip, and tag elements are intentionally exempt from the upgrade. The sweep script detects className strings containing badge, chip, tag, or mvt-badge and skips them so these compact UI elements stay at their designed size.

Can I use this typography standard with Recharts charts?▼

Yes. The script upgrades Recharts axis tick fontSize from 10 to 12 automatically. It only changes the fontSize inside tick props and never modifies chart width or height props.

What are the limitations of the automated typography sweep?▼

The script handles common className and inline style patterns but cannot upgrade component-specific layouts like coaching panels or scorecards. Those require the documented manual edits, and duplicate fontWeight keys in style objects must be merged by hand.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
dyad-shdyad-sh
21.4k

dyad:debug-with-playwright

Debugs Electron E2E tests by capturing Playwright screenshots at key execution points.

Official
Intermediate
bipinksbipinks
3

accessibility-patterns

Apply WCAG 2.1 AA/AAA patterns to improve UI accessibility.

Community
Advanced
HiokKuekHiokKuek

sgds-theming

Customizes SGDS application themes by overriding CSS tokens for brand colours, night mode, and fonts.

Community
Intermediate