skills.rest
abdul7867
abdul7867COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-vocabulary

Reviews and refines frontend UI designs using typography, color, layout, and motion guidelines.

Updated Jun 21, 2026
Search Tags:#typography#accessibility#frontend#css#design audit#color contrast#ui design
One-click install
npx skills add https://github.com/abdul7867/affinity --skill design-vocabulary-abdul7867
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-vocabulary
Source: https://github.com/abdul7867/affinity/tree/main/frontend/.agent/skills/design-vocabulary
Command: npx skills add https://github.com/abdul7867/affinity --skill design-vocabulary-abdul7867

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend interfaces often ship with generic, low-craft visuals—poor contrast, default card grids, gradient text, and other recognizable AI-generated patterns. This Skill provides a concrete design vocabulary and review commands to audit, critique, and polish production-grade UI code. ## Core Features & Use Cases - Design Audits and Critiques: Run /audit for accessibility, performance, and responsive checks, or /critique for heuristic UX scoring of an interface. - Targeted Refinement Commands: Use /colorize, /typeset, /layout, /animate, /bolder, /quieter, and /distill to improve specific dimensions of a design. - AI Slop Detection: Applies hard bans on patterns like side-stripe borders, gradient text, glassmorphism defaults, and identical card grids to keep interfaces distinctive. - Use Case: A developer finishes a landing page that looks bland. They run /critique to get a heuristic review, then /colorize and /typeset to apply a committed color strategy and stronger typographic hierarchy. ## Quick Start Ask the AI to run /audit on your main landing page component and fix any contrast, spacing, or responsive issues it finds.

Frequently Asked Questions about design-vocabulary

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

FAQPage Schema
How do I audit a frontend UI for accessibility and contrast issues?▼

Run the /audit command on a target component or page. It checks technical quality including accessibility, performance, and responsive behavior, verifying body text contrast of at least 4.5:1 and large text of at least 3:1 against backgrounds.

How to make a bland or generic UI design look more distinctive?▼

Use /bolder to amplify safe designs or /colorize to add a strategic color strategy such as restrained, committed, full palette, or drenched. The skill also bans recognizable AI patterns like gradient text, identical card grids, and eyebrow labels on every section.

What contrast ratio is required for body text in web UI?▼

Body text requires at least 4.5:1 contrast against its background, including placeholder text. Large text of 18px or bold 14px and above requires at least 3:1. Light gray text on tinted near-white backgrounds is the most common failure.

Does this design skill work with animation libraries like GSAP or Framer Motion?▼

Yes, the motion guidance recommends libraries such as motion, GSAP, anime.js, and Lenis for advanced animation. It requires ease-out exponential curves, no layout-property animation, and mandatory prefers-reduced-motion support.

When should I avoid using cards in UI layout?▼

Cards should only be used when they are the best affordance for the content, not as a default container. Nested cards are always wrong, and identical card grids with icon, heading, and text are flagged as a generic AI pattern.

Related Skills

Explore More Design & Creative Skills→
Sumeet138Sumeet138
1

design-system-patterns

Codify tokens, theming, and component patterns for scalable web and mobile design systems.

Community
Advanced
drvossdrvoss
42

browser-devtools

Inspect DOM state, network traffic, and Core Web Vitals in Chrome DevTools.

Community
Intermediate
elihuvillarauselihuvillaraus
2

ux-researcher

Analyze user behavior and conduct usability testing for design insights.

Community
Advanced
AkaraChenAkaraChen

extract

Extract reusable components and design tokens into a design system.

Community
Intermediate