Skills
.Work. You
Rest

af-design-ui-components

Official

Design UI components with Storybook

Design & Creative#accessibility#atomic design#storybook#ui design#bdd#component development
AuthorGainInsightDev
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: af-design-ui-components
Download link: https://github.com/GainInsightDev/websites/archive/main.zip#af-design-ui-components

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.