skills.rest
shawn-sandy
shawn-sandyCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnsandyGitHub

fpkit-developer

Guide React component development with @fpkit/acss primitives and WCAG compliance.

Updated Dec 25, 2024
Search Tags:#accessibility#react#ui development#css variables#component development#fpkit
One-click install
npx skills add https://github.com/shawn-sandy/acss --skill fpkit-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fpkit-developer
Source: https://github.com/shawn-sandy/acss/tree/main/.claude/plugins/fpkit-developer/skills/fpkit-developer
Command: npx skills add https://github.com/shawn-sandy/acss --skill fpkit-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the development of accessible, custom React components using the @fpkit/acss library, ensuring adherence to best practices and maximizing component reusability.

Core Features & Use Cases

  • Component Composition: Guides users on effectively combining fpkit primitives into complex components.
  • Accessibility Validation: Provides a checklist and guidance for ensuring WCAG compliance.
  • CSS Variable Customization: Demonstrates how to theme and customize components using CSS variables.
  • Use Case: A developer needs to create a new UserProfileCard component. This Skill will guide them through composing it from fpkit's Card, Avatar, and Text components, ensuring it's accessible and styled correctly.

Quick Start

Use the fpkit-developer skill to create a new UserProfileCard component by composing fpkit primitives.

Frequently Asked Questions about fpkit-developer

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

FAQPage Schema
How do I compose custom React UI components from primitive elements?▼

To compose custom React UI components, you combine fpkit primitives like Card, Avatar, and Text into complex structures. This Skill guides the composition process to ensure your custom components remain reusable and follow best practices.

How do I theme React components using CSS variables?▼

You theme React components using CSS variables by customizing the variable tokens provided by fpkit. This Skill demonstrates how to override and define these variables to style and theme your application components effectively.

How do I ensure WCAG accessibility compliance in a React UI library?▼

To ensure WCAG accessibility compliance in a React UI, you apply the validation checklists and guidance provided by this Skill. It focuses specifically on verifying that your composed fpkit components meet accessibility standards during development.

Can I use this to develop a standalone React component library?▼

No, you cannot use this to develop a standalone React component library. This Skill focuses strictly on application-level development using existing fpkit primitives, rather than guiding the development of the underlying library itself.

How do I extend existing React components with new behavior?▼

You extend existing React components with new behavior by building upon the base fpkit primitives. This Skill assists in adding custom functionality while maintaining the accessibility and styling integrity of the original components.

Related Skills

Explore More Software Engineering Skills→
wredziowredzio

tailwind-v4-shadcn

Configure Tailwind v4 theming with shadcn/ui in React + Vite projects.

Community
Advanced
JewelsHovanJewelsHovan

shadcn-ui-best-practices

Enforce shadcn-ui best practices for React and TypeScript projects.

Community
Basic
zaid-khan-codezaid-khan-code
3

moai-library-shadcn

Guide shadcn/ui component setup, theming, and registry authoring for React applications.

Community
Advanced
tranhieutttranhieutt
70

radix-ui-design-system

Build accessible Radix UI design systems with headless primitives.

Community
Advanced