Does it support custom CSS variable validation?

Yes, it includes a workflow for validating component-specific CSS variables against standard naming conventions using Python-based scripts.

How does it ensure WCAG accessibility compliance?

It provides comprehensive checklists and patterns for ARIA attributes, keyboard navigation, color contrast, and semantic HTML usage.

Does it help with UI documentation?

Yes, it provides templates and best practices for creating Storybook stories for your custom components.

What is the primary purpose of the fpkit-developer skill?

It guides developers in building React applications using the @fpkit/acss library, focusing on component composition, CSS variable management, and accessibility.

Can I use this skill to contribute to the @fpkit/acss library itself?

No, this skill is specifically for application developers using the library. For library development, the fpkit-component-builder skill is recommended.

FPKit Frontend Developer

Name: FPKit Frontend Developer
Author: shawn-sandy

byshawn-sandy

0•

设计工具

Accelerates the development of accessible, themeable React applications using the @fpkit/acss design system and component primitives.

The fpkit-developer skill empowers developers to build robust user interfaces using the @fpkit/acss library. It provides a structured workflow for composing custom components from atomic primitives, extending existing library behaviors, and validating CSS variables against naming conventions. A core focus of this skill is ensuring WCAG 2.1 Level AA accessibility compliance through guided checklists and established ARIA patterns, making it an essential tool for building production-grade frontend systems that are both flexible and inclusive.

主要功能

010 GitHub stars

02WCAG 2.1 Level AA accessibility compliance guidance

03Storybook documentation and testing integration

04Polymorphic UI architectural pattern implementation

05Automated CSS variable validation and naming enforcement

06Component composition from @fpkit/acss primitives

使用场景

01Rapidly prototyping accessible React applications with consistent styling

02Refactoring existing UI components for better accessibility and themeability

03Building custom design systems on top of atomic CSS primitives

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shawn-sandy/acss fpkit-developer

For use in Claude.ai and ChatGPT