When should I use this skill?

Use this skill when creating new UI elements, refactoring complex code into reusable pieces, designing component APIs (props/events), or building comprehensive design systems and component libraries.

Which frameworks are supported by this skill?

The skill is versatile and supports cross-framework development, including React (.jsx/.tsx), Vue (.vue), and standard Web Components or custom elements.

What does the Frontend Components skill do?

This skill empowers Claude Code to architect and build high-quality, modular UI components that follow industry best practices like the single responsibility principle and clear prop interfaces.

How does this skill improve my frontend workflow?

It ensures AI-generated code is scalable and maintainable by enforcing consistent naming conventions, sensible prop defaults, and optimal state management patterns from the start.

Does it help with component state management?

Yes, it provides logic for managing local versus lifted state, ensuring optimal data flow and preventing unnecessary re-renders in your frontend application.

Frontend Components

Name: Frontend Components
Author: FlorianRiquelme

byFlorianRiquelme

0•

デザインツール

Architects and builds reusable, modular UI components using industry best practices like the single responsibility principle and clear prop interfaces.

Empowers developers to create highly maintainable and composable frontend architectures across various frameworks like React and Vue. It provides expert guidance on designing component APIs, managing local versus lifted state, and implementing robust design systems that scale. By focusing on encapsulation and minimal prop requirements, it ensures that UI code remains clean, well-documented, and adaptable to diverse application contexts.

主な機能

01Implements component composition and parent-child relationship patterns

02Designs clear component APIs with sensible defaults and minimal prop requirements

030 GitHub stars

04Supports cross-framework development including React, Vue, and Web Components

05Enforces single responsibility principle and encapsulation of implementation details

06Manages local state versus lifted state for optimal data flow

ユースケース

01Building a scalable design system or component library from scratch

02Documenting component usage with clear examples and API definitions

03Refactoring monolithic UI code into smaller, reusable components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add florianriquelme/statamic-assets frontend-components

For use in Claude.ai and ChatGPT

主な機能

01Implements component composition and parent-child relationship patterns

02Designs clear component APIs with sensible defaults and minimal prop requirements

030 GitHub stars

04Supports cross-framework development including React, Vue, and Web Components

05Enforces single responsibility principle and encapsulation of implementation details

06Manages local state versus lifted state for optimal data flow

ユースケース

01Building a scalable design system or component library from scratch

02Documenting component usage with clear examples and API definitions

03Refactoring monolithic UI code into smaller, reusable components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add florianriquelme/statamic-assets frontend-components

For use in Claude.ai and ChatGPT