How does the skill prevent component duplication?

It includes a 'Detect & Analyze' step that runs local scripts to compare your request against existing components, recommending composition or extension before scaffolding something new.

Can I use this for non-React projects?

This specific skill is optimized for React components using the fpkit architecture, TypeScript, and SCSS modules.

It is a utility-first Atomic CSS library that focuses on design tokens and primitives for building flexible React UI components.

What kind of CSS validation does it perform?

It validates that CSS variables follow the --component-property pattern and ensures all measurements use rem units instead of pixels.

Does it handle accessibility automatically?

While it requires developer implementation, the skill provides specific patterns, ARIA guidance, and keyboard navigation requirements based on WCAG 2.1 AA standards.

FPKit Component Builder

Name: FPKit Component Builder
Author: shawn-sandy

byshawn-sandy

0•

Design Tools

Builds and scaffolds production-ready React components using fpkit/acss library patterns and strict accessibility standards.

The fpkit-component-builder skill streamlines the creation and maintenance of UI components within the fpkit/acss ecosystem. It intelligently analyzes component requests to prioritize composition over duplication, then scaffolds complete file structures including TypeScript definitions, SCSS modules, Storybook stories, and Vitest tests. By enforcing strict CSS variable naming conventions and WCAG 2.1 AA accessibility standards, this skill ensures that every UI element is robust, documented, and follows established design system patterns automatically.

Key Features

01Built-in accessibility enforcement following WCAG 2.1 AA standards

020 GitHub stars

03Strict CSS variable validation enforcing naming conventions and rem units

04Intelligent component analysis to suggest composition, extension, or scaffolding

05Automated export management for project index files

06Automated scaffolding of TSX, types, SCSS, Storybook, and test files

Use Cases

01Scaffolding new React UI components with full boilerplate and documentation

02Validating CSS and accessibility standards across a frontend library

03Refactoring legacy components to follow fpkit/acss design system primitives

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shawn-sandy/acss fpkit-component-builder

For use in Claude.ai and ChatGPT

Key Features

01Built-in accessibility enforcement following WCAG 2.1 AA standards

020 GitHub stars

03Strict CSS variable validation enforcing naming conventions and rem units

04Intelligent component analysis to suggest composition, extension, or scaffolding

05Automated export management for project index files

06Automated scaffolding of TSX, types, SCSS, Storybook, and test files

Use Cases

01Scaffolding new React UI components with full boilerplate and documentation

02Validating CSS and accessibility standards across a frontend library

03Refactoring legacy components to follow fpkit/acss design system primitives

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shawn-sandy/acss fpkit-component-builder

For use in Claude.ai and ChatGPT