af-design-ui-components

Design UI components with Storybook using Atomic Design and accessibility standards.

Updated Feb 8, 2026

Search Tags:#accessibility #atomic design #storybook #ui design #bdd #component development

Ready to run

npx skills add https://github.com/GainInsightDev/websites --skill af-design-ui-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: af-design-ui-components
Source: https://github.com/GainInsightDev/websites/tree/main/.claude/skills/af-design-ui-components
Command: npx skills add https://github.com/GainInsightDev/websites --skill af-design-ui-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and specification of UI components, ensuring consistency, accessibility, and adherence to design principles within a project.

Core Features & Use Cases

Component Classification: Organizes UI elements using an extended Atomic Design hierarchy.
Storybook Integration: Transforms BDD scenarios into interactive Storybook stories for development and testing.
Accessibility & RTL: Enforces accessibility standards and supports Right-to-Left (RTL) testing.
Use Case: When developing a new feature, use this skill to ensure all new UI components are correctly classified, documented in Storybook with appropriate tests, and meet accessibility guidelines before they are merged.

Quick Start

Use the af-design-ui-components skill to create Storybook stories for the new Button component based on the provided BDD scenarios.

Frequently Asked Questions about af-design-ui-components

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

FAQPage Schema

How do I convert BDD scenarios into Storybook stories for UI components?▼

To convert BDD scenarios into Storybook stories, you define interactive stories and selector contracts that map behavioral specifications directly to component rendering and automated play functions. This ensures code-driven design validation through RTL tests.

What is the best way to organize UI components using atomic design in Storybook?▼

Organizing UI components using atomic design involves classifying elements into an extended hierarchy of primitives, atoms, molecules, organisms, and templates. This structure enforces design grammar rules and maintains strict component consistency within Storybook.

How do I ensure accessibility compliance when developing UI components in Storybook?▼

Ensuring accessibility compliance requires enforcing accessibility standards and supporting Right-to-Left (RTL) testing during component development. This integrates automated testing checks directly within your Storybook play functions.

Can I use BDD scenarios to generate automated tests for Storybook components?▼

Yes, you can use BDD scenarios to generate automated tests by transforming them into interactive Storybook stories. These stories utilize play functions and RTL tests to execute testing and validate selector contracts.

Does Storybook support an extended atomic design hierarchy for view components?▼

Storybook supports an extended atomic design hierarchy by allowing the creation and classification of view components, primitives, atoms, molecules, organisms, and templates. This classification enforces design grammar rules for consistent UI development.