markdowntown-frontend

Name: markdowntown-frontend
Availability: InStock
Author: klabo

Guide Markdowntown frontend UX with design tokens and lint rules.

Updated Dec 31, 2025

Search Tags:#ui #linting #frontend #responsive #tailwind #ux #design-system

Ready to run

npx skills add https://github.com/joelklabo/markdowntown-cli --skill markdowntown-frontend

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: markdowntown-frontend
Source: https://github.com/joelklabo/markdowntown-cli/tree/main/codex/skills/markdowntown-frontend
Command: npx skills add https://github.com/joelklabo/markdowntown-cli --skill markdowntown-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provide focused frontend UX and design system guidance to prevent inconsistent styling, improper token usage, and layout regressions across Markdowntown surfaces.

Core Features & Use Cases

Design system guidance: Recommend tokens for color, spacing, and typography and avoid raw hex values and neutral Tailwind palettes.
Surface-specific UX patterns: Advise on Workbench, Atlas, Library, Home, Detail, and Translate surfaces with CTA hierarchy and mobile considerations.
Guardrails & validation: Specify lint rules, responsive checks, and motion guidance to validate changes before merge.
Use Case: When updating a Workbench panel, follow component primitives and tokens, run the linters, and verify responsive behavior to avoid regressions.

Quick Start

Use the markdowntown-frontend skill to review a UI change, replace raw styles with tokens, run the recommended linters, and validate responsive behavior.

Frequently Asked Questions about markdowntown-frontend

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

FAQPage Schema

How do I ensure consistent Tailwind styling across frontend UI surfaces?▼

To ensure consistent Tailwind styling across frontend UI surfaces, use design system tokens for color, spacing, and typography instead of raw hex values or neutral palettes. Apply component primitives and validate changes with lint rules.

What is the best way to replace raw hex values with design tokens in a UI?▼

The best way to replace raw hex values in a UI is to map them to designated design system tokens for color and spacing. This enforces visual consistency and passes lint rules that discourage raw hex and neutral Tailwind palette usage.

How do I validate responsive layouts and motion updates before merging frontend changes?▼

You validate responsive layouts and motion updates by running specified lint rules and performing responsive checks across target surfaces like Workbench, Atlas, and Library. This process prevents layout regressions before merging frontend changes.

Can I use standard Tailwind palettes for UI components, or do I need design system tokens?▼

You should not use standard neutral Tailwind palettes for UI components. Instead, you need design system tokens to maintain consistent styling, ensure proper visual hierarchy, and comply with enforced lint rules across all application surfaces.

Why does my frontend UI layout regress after updating Tailwind classes?▼

Your frontend UI layout might regress after updating Tailwind classes if you use raw styles instead of component primitives and tokens. Validate responsive behavior and run recommended linters to catch spacing, typography, and motion regressions.