Professional design skill for AI agents

Overview

Professional is a commerce-ready design system skill for AI-powered development. Built around the high-visibility yellow-and-black palette that defines the world's most recognized electronics and retail brands, it produces interfaces optimized for product browsing, comparison, and purchase. The mobile-first type system, compact spacing, and action-oriented color tokens are tuned for the moment a customer decides to buy.

When you add this skill file to your AI coding tool, every component it generates — from product cards and pricing blocks to checkout flows and category navigation — carries the same commercial energy: yellow highlights that draw the eye to what matters, black for authority and readability, and a mobile-first foundation that puts the shopping experience in the customer's hand.

Design tokens

Color palette

Professional uses the most commercially recognizable color pairing in retail — yellow and black. It's the palette of price tags, sale banners, and the buy button that closes the deal:

The yellow + black pairing is retail's universal attention language. Yellow doesn't just signal interactivity — it signals value, urgency, and importance. The AI agent uses yellow for primary CTAs, featured product badges, sale indicators, and anything that needs to compete for the customer's attention in a dense product grid. Black provides the structural backbone: navigation, headings, and the text that lives on yellow surfaces with maximum contrast.

Typography

Professional uses Poppins for all body and display text — a geometric sans-serif with rounded terminals that strikes the balance between friendly and authoritative. Poppins reads as approachable in product descriptions and trustworthy in pricing, checkout, and confirmation screens.

The type scale follows a mobile-first compact approach, optimized for small screens where most shopping happens:

• The scale is designed to be readable on phone-sized viewports first, then enhanced for larger screens
• Compact sizing keeps product grids information-dense without feeling cluttered
• Poppins' clear letterforms and generous x-height maintain readability even at the smallest scale steps

Font weights span 100 (thin) to 900 (black). The commercial context favors the 500-700 range for prices, CTAs, and product titles — elements that need to feel confident and decisive. Body text stays at 400 for comfortable reading through product descriptions and specifications.

IBM Plex Mono handles monospaced content — SKU numbers, technical specifications, comparison tables, and code contexts where Poppins' proportional spacing would misalign tabular data.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. The mobile-first approach means spacing is tuned for compact viewports: tight enough to fit product cards, prices, and CTAs on a phone screen, but consistent enough that the layout scales cleanly to desktop grids. The 4px granularity lets the AI agent pack information densely in product listings (4-8px gaps) while maintaining clear section separation (24-32px) between categories and page blocks.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases.

Design philosophy

Professional is built for interfaces where the primary goal is selling. Every design decision supports the commerce journey from browsing to checkout:

• Yellow as attention currency — in a dense product grid, the eye goes to yellow first. The AI agent uses the primary token strategically: on the "Add to Cart" button, the "Best Seller" badge, the sale price, the featured product highlight. Yellow is spent where conversion happens
• Black as authority — the secondary token isn't just for contrast on yellow surfaces. Black headings, black navigation, and black structural elements create a framework of trust and seriousness that makes the yellow highlights feel credible rather than gimmicky
• Mobile-first density — the compact type scale and tight spacing are designed for how people actually shop: scrolling through product grids on a phone with one thumb. Every component fits comfortably in a mobile viewport before scaling up to desktop
• Information density over whitespace — unlike premium or luxury systems that use generous space as a design element, Professional packs relevant information (price, rating, availability, specs) into every product card. Customers want data, not decoration
• Conversion-aware components — pricing blocks show the price hierarchy clearly (original, sale, savings). Buttons distinguish between "Buy Now" (primary yellow) and "Add to Wishlist" (secondary black outline). The skill teaches the AI that every component exists in the context of a purchase decision

This makes Professional a strong fit for:

• Electronics and consumer technology stores
• Marketplace and multi-vendor retail platforms
• Price comparison and deal aggregation sites
• Product catalog and inventory management interfaces
• Quick-service and delivery order platforms
• B2B procurement and wholesale portals
• Any commerce experience where information density and conversion rate matter

Accessibility

Professional enforces WCAG 2.2 AA compliance as a hard requirement. Commerce interfaces serve the widest possible audience, and every customer who can't use the interface is a lost sale. The skill file instructs the AI agent to:

• Use keyboard-first interaction patterns for all interactive elements
• Include visible focus states on every focusable component — the black secondary creates strong, unambiguous focus rings against white and yellow surfaces alike
• Maintain sufficient color contrast ratios, with special attention to yellow (#FECE14) as a background color. Yellow-on-white fails contrast requirements, so the AI always pairs yellow surfaces with black text (#000000) for maximum readability
• Prioritize accessibility over aesthetics when the two conflict

The yellow + black combination provides one of the highest contrast ratios possible when used correctly (black text on yellow background). The skill encodes this pairing explicitly so the AI agent never places light text on yellow or uses yellow text on white — two common mistakes that would fail accessibility requirements.

Every accessibility rule is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull professional

2. The file is saved to .cursor/skills/professional/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will generate commerce-optimized interfaces with Poppins typography, yellow-and-black action tokens, and mobile-first compact layouts.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Professional guidelines — using yellow for high-priority actions, black for structure and authority, Poppins for readable product content, and mobile-first spacing throughout.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Professional apart

Professional is the only typeui.sh design skill built specifically for commerce. While other skills optimize for aesthetics, brand identity, or thematic immersion, Professional optimizes for selling:

• Yellow + black retail language — the most commercially recognized color pairing in consumer electronics. The AI generates interfaces that customers already know how to navigate because the visual cues match every electronics store they've ever visited
• Mobile-first compact type — the only skill with a mobile-first type scale. Product browsing happens on phones, and the compact sizing ensures product grids, prices, and CTAs are optimized for thumb-scrolling before desktop
• Information density as a feature — where other skills use whitespace for elegance, Professional packs product data (price, specs, ratings, availability) into every card. Shoppers want information, not atmosphere
• Yellow-on-black contrast safeguards — the skill explicitly encodes which color combinations are allowed on yellow surfaces, preventing the most common accessibility failures in commercial UI
• Conversion-aware components — pricing blocks, CTAs, and product cards are designed around purchase psychology, not just visual hierarchy
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the commerce aesthetic consistent whether the AI generates a single product card or an entire storefront