skills.rest
GainInsightDev
GainInsightDevOFFICIAL
Explore all skills by this author →
WebsiteGitHub

af-ux-design-expertise

Enforce UX design principles with Atomic Design and Storybook components.

Updated Feb 8, 2026
Search Tags:#design#accessibility#atomic design#storybook#ux#component development#rtl testing
One-click install
npx skills add https://github.com/GainInsightDev/websites --skill af-ux-design-expertise
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: af-ux-design-expertise
Source: https://github.com/GainInsightDev/websites/tree/main/.claude/skills/af-ux-design-expertise
Command: npx skills add https://github.com/GainInsightDev/websites --skill af-ux-design-expertise

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and review of user interfaces by integrating design principles directly into the development workflow, ensuring consistency, accessibility, and adherence to brand guidelines.

Core Features & Use Cases

  • Component Classification: Organizes UI elements using Atomic Design principles (Atoms, Molecules, Organisms, Templates).
  • Storybook Integration: Generates and manages Storybook stories, including RTL tests and play functions for interactive testing.
  • UX Review & Auditing: Facilitates design sign-offs and UX reviews against established criteria and brand guidelines.
  • Use Case: When developing a new user authentication form, this Skill helps classify its constituent parts (input fields, buttons as atoms/molecules), ensures they are built into a cohesive organism, generates Storybook stories for all states, and performs a UX review for accessibility and brand alignment before code merge.

Quick Start

Use the af-ux-design-expertise skill to create Storybook stories for the new user profile component based on the provided BDD scenarios.

Frequently Asked Questions about af-ux-design-expertise

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

FAQPage Schema
How do I integrate UX design principles into my component development workflow?▼

To integrate UX design principles into component development, enforce Atomic Design classification, Storybook story creation, and accessibility standards directly within your coding workflow to ensure UI consistency and usability.

How do I generate Storybook stories with RTL testing for UI components?▼

Generate Storybook stories with RTL testing by managing story creation, incorporating RTL tests, and adding play functions for interactive testing to validate component behavior across different language directions.

What is the best way to classify UI elements using Atomic Design principles?▼

Classify UI elements using Atomic Design principles by organizing components into Atoms, Molecules, Organisms, and Templates, ensuring a structured hierarchy that streamlines component development and maintainability.

How do I perform a UX review for accessibility and brand alignment before a code merge?▼

Perform a UX review for accessibility and brand alignment by auditing the component against established UX criteria and brand guidelines, facilitating design sign-offs to ensure design fidelity before merging code.

Can I use this to manage selector contracts for my Storybook components?▼

Yes, you can manage selector contracts for Storybook components. The workflow enforces selector contracts alongside component classification and story creation to maintain reliable element selection during interactive testing.

Related Skills

Explore More Design & Creative Skills→
typemdtypemd
9

consistency-check

Cross-reference BDD feature files, OpenSpec specifications, and documentation for contradictions.

Official
Intermediate
juburrjuburr
1

react-storybook

Build and validate React-TypeScript components with Storybook CSF3 stories.

Community
Advanced
dkyazzentwatwadkyazzentwatwa
32

visual-regression

Automate visual regression testing setup for React, Vue, and Svelte projects.

Community
Advanced
LAF-USLAF-US

figma-generate-library

Analyze codebases to generate Figma design-system tokens, components, and documentation.

Official
Advanced