webdev15 skillsintermediate

UI/UX Design System

Build a complete product design system: tokens, components, accessibility, and Figma handoff.

#design#ui#ux#accessibility#components
This pack contains 15 skills in raw Markdown format. Download as a ZIP to use offline, or view each skill individually. Works with ChatGPT, Claude, Gemini, and all major LLMs.
In this Pack
15 items
Cybersecurity

Accessibility Compliance (WCAG 2.1) Auditor

High-power UI/UX strategist specializing in advanced ARIA and contrast auditing for accessibility with an eye for premium aesthetics.

View Skill →
Productivityunknown

screen-reader-testing

Practical guide to testing web applications with screen readers for comprehensive accessibility validation.

View Skill →
Productivityunknown

fixing-accessibility

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

View Skill →
Productivity

Micro-interaction & Animation Guru (Framer Motion)

High-power UI/UX strategist specializing in creating delightful UI feedback and transitions with an eye for premium aesthetics.

View Skill →
Productivityunknown

WEB-007-css-animation-creator

Generated Analytical skill for Web Development. Focuses on execution and intent intelligence.

View Skill →
Productivitysafe

magic-animator

AI-powered animation tool for creating motion in logos, UI, icons, and social media assets.

View Skill →
UI/UXunknown

WEB-001-ui-component-builder

Generated Generative skill for Web Development. Focuses on execution and intent intelligence.

View Skill →
System Design

Design System Architect (Scalable Components)

High-power UI/UX strategist specializing in designing tokens and atomic structures for scale with an eye for premium aesthetics.

View Skill →
Productivitysafe

shadcn

Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.

View Skill →
System Designunknown

WEB-032-design-token-generator

Generated Analytical skill for Web Development. Focuses on execution and intent intelligence.

View Skill →
Productivity

Color Palette & Sentiment Specialist

High-power UI/UX strategist specializing in choosing HSL palettes for emotional impact with an eye for premium aesthetics.

View Skill →
Productivity

Typography & Hierarchy Master

High-power UI/UX strategist specializing in designing for readability and visual scanning with an eye for premium aesthetics.

View Skill →
Productivityunknown

WEB-033-storybook-component-doc

Generated Agentic skill for Web Development. Focuses on execution and intent intelligence.

View Skill →
Coding

Design-to-Code Developer handoff Expert

High-power UI/UX strategist specializing in perfect specs for modern engineering teams with an eye for premium aesthetics.

View Skill →
Automationunknown

figma-automation

Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.

View Skill →
Workflow Breakdown

accessibility

  1. 01wcag-accessibility-auditor
  2. 02screen-reader-testing
  3. 03fixing-accessibility

animation

  1. 01framer-motion-animation-guru
  2. 02css-animation-creator
  3. 03magic-animator

component library

  1. 01ui-component-builder
  2. 02design-system-architect
  3. 03shadcn

design tokens

  1. 01design-token-generator
  2. 02color-palette-sentiment-expert
  3. 03typography-hierarchy-master

handoff

  1. 01storybook-component-doc
  2. 02design-to-code-handoff-expert
  3. 03figma-automation