skills.rest
joelklabo
joelklaboCOMMUNITY
Explore all skills by this author →
Website𝕏@joelklaboGitHub

markdowntown-frontend

Guide Markdowntown frontend UX with design tokens and lint rules.

Updated Dec 31, 2025
Search Tags:#ui#linting#frontend#responsive#tailwind#ux#design-system
One-click install
npx skills add https://github.com/joelklabo/markdowntown-cli --skill markdowntown-frontend
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
thec3ukthec3uk

Frontend Responsive

Enforce responsive design standards across React, Vue, Angular, and HTML/CSS projects.

Official
Basic
avvaleavvale

aurora-layout

Standardize Aurora UI form layouts with a 12-column grid and semantic sections.

Official
Basic
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate