Web & UI Design
Skills listed under Web & UI Design.
Theme Factory
Apply one of 10 ready-made color and font themes to slides, docs, reports or landing pages, or generate a new theme on the fly.
Editor's pickFrontend Design
Guidance for building distinctive, intentional UI instead of templated defaults: plan the design first, then build.
UI States Checklist
List every state a screen or component needs: loading, empty, error, partial, disabled, offline, permission denied and extreme content, and decide what the user sees and can do in each.
UI Styling (shadcn/ui + Tailwind)
Guidance for building accessible, responsive interfaces with shadcn/ui and Tailwind CSS, including dark mode, theming and a canvas-based visual design approach.
Penpot UI/UX Design (via Penpot MCP)
Design web, mobile and desktop interfaces inside Penpot through its MCP server, with design-system checks, component and accessibility rules and platform sizes.
Web Accessibility Audit (WCAG 2.2 AA)
Audit a page or component against WCAG 2.2 level AA: keyboard, focus, contrast, names and labels, structure, forms, dialogs, dynamic updates, zoom and target size, with each finding tied to a success criterion.
UI Internationalization (i18n)
Make an interface carry any language without redesign: message catalogs, locale-aware formatting, layouts that survive different text lengths, CJK and right-to-left support, and language switching with proper URLs.
Web Artifacts Builder
Build complex, self-contained React web artifacts with TypeScript, Tailwind CSS, and shadcn/ui.
UI/UX Pro Max
A searchable design knowledge base for interfaces: styles, color palettes, font pairings, UX guidelines, charts and stack-specific tips, used to pick a visual direction before you build.
Web Design Reviewer
Inspect a running website for layout, responsive, accessibility and consistency problems, then fix them in the source code with minimal changes and re-check.
Light and Dark Theme
Build light and dark mode that is correct in both: semantic color tokens, the system setting plus a manual toggle, no flash of the wrong theme on load, and contrast checked in both themes.
Algorithmic Art
Turns a theme into a short generative-art manifesto, then builds an interactive p5.js piece with seed navigation, parameter sliders and PNG export.
Responsive Layout Debugging
Find the real cause of layout bugs at specific screen widths: sideways scrolling, overflow, flex items that will not shrink, sticky that does not stick, 100vh on phones, and fixed bars under the browser UI.
Design System (tokens and slides)
Build a three-layer design token system (primitive, semantic, component), write component specs, and generate token-compliant HTML slide decks with Chart.js.