markdowntown-frontend
Frontend UX and design system guidance for markdowntown. Use when changing UI, layout, styling, typography, motion, or Tailwind classes, especially for Workbench, Atlas, and Library surfaces.
When & Why to Use This Skill
The markdowntown-frontend skill is a specialized AI assistant designed to streamline frontend development and ensure design system compliance within the markdowntown ecosystem. It provides expert guidance on UI implementation, Tailwind CSS styling, typography, and motion design. By integrating core workflows and strict guardrails—such as enforcing design tokens and preventing the use of raw hex colors—it helps developers maintain a consistent, high-quality user experience across key surfaces like Workbench, Atlas, and Library while minimizing technical debt.
Use Cases
- UI Component Development: Generating and styling new frontend components for the Workbench or Atlas surfaces while ensuring strict adherence to established design tokens and spacing systems.
- Design System Refactoring: Identifying and replacing hardcoded hex colors or non-standard Tailwind palettes with approved design system variables to pass project-specific linting rules.
- Responsive Layout Implementation: Building fluid, mobile-friendly layouts that align with the project's motion-responsive guidelines and primary flow specifications.
- UX Quality Assurance: Auditing UI changes against the sitewide-ui-audit.md and design system documentation to ensure visual consistency and subtle, aligned motion effects.
| name | markdowntown-frontend |
|---|---|
| description | Frontend UX and design system guidance for markdowntown. Use when changing UI, layout, styling, typography, motion, or Tailwind classes, especially for Workbench, Atlas, and Library surfaces. |
markdowntown-frontend
Core workflow
- Identify the surface (Home, Atlas, Workbench, Library, Detail, Translate).
- Check design constraints and lint rules before editing styles.
- Apply changes with existing component patterns and tokens.
- Validate responsive layout and run lint/test commands.
Guardrails
- Avoid raw hex colors (lint:
pnpm lint:hex). - Avoid Tailwind neutral palette (lint:
pnpm lint:neutrals). - Prefer existing spacing/typography tokens and component primitives.
- Keep motion subtle and aligned with UX guidance.
References
- docs/DESIGN_SYSTEM.md
- docs/design/motion-responsive.md
- docs/design/sitewide-ui-audit.md
- docs/ux/primary-flow-spec.md
- codex/skills/markdowntown-frontend/references/design-system.md
- codex/skills/markdowntown-frontend/references/ui-ux.md