skills.rest
markacianfrani
markacianfraniCOMMUNITY
Explore all skills by this author →
Website𝕏@markacianfraniGitHub

component-authoring

Provides architectural guidelines for authoring reusable UI components in web applications.

6|Updated Jan 14, 2026
Search Tags:#ui#architecture#refactoring#frontend#components#web-development
One-click install
npx skills add https://github.com/markacianfrani/armor --skill component-authoring-markacianfrani
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-authoring
Source: https://github.com/markacianfrani/armor/tree/main/skills/component-authoring
Command: npx skills add https://github.com/markacianfrani/armor --skill component-authoring-markacianfrani

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the common pitfalls of UI development, such as over-engineering, poor component boundaries, and inconsistent state management, ensuring frontend code remains maintainable and platform-aligned.

Core Features & Use Cases

  • Boundary Definition: Provides clear heuristics for when to extract logic into a component versus keeping it inline.
  • Platform-First Design: Encourages modeling components after native HTML elements to ensure better interoperability and reduced complexity.
  • Use Case: Use this skill when refactoring a complex, bloated UI module to determine if it should be broken down into smaller, stateless, and more flexible components.

Quick Start

Apply the component-authoring guidelines to review the current implementation of the navigation sidebar and suggest necessary refactors.

Frequently Asked Questions about component-authoring

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

FAQPage Schema
What are the best practices for authoring reusable UI components?▼

Authoring reusable UI components relies on stateless design, clear boundary heuristics, and effective use of slots versus props to enforce platform-aligned principles and improve frontend code maintainability.

How do I define boundaries when refactoring a complex frontend module?▼

Defining component boundaries requires applying clear heuristics to determine when to extract logic versus keeping it inline, ensuring the refactored frontend module remains stateless and flexible.

When should I use slots versus props for web development components?▼

Using slots versus props in web development components provides architectural guidelines for effective stateless design, ensuring flexible component boundaries and reducing frontend complexity.

How do I know if my UI architecture is over-engineered?▼

UI architecture is over-engineered when component boundaries are poor and state management is inconsistent, requiring refactoring into smaller, stateless, and more flexible components to restore maintainability.

Does platform-first design improve frontend code maintainability?▼

Platform-first design improves frontend code maintainability by modeling reusable UI components after native HTML elements, ensuring better interoperability and reduced complexity across web applications.

What are the limitations of stateless component design in frontend architecture?▼

Stateless component design limitations require careful boundary definition to prevent logic duplication, ensuring that refactoring complex web application modules maintains architectural guidelines without cognitive overload.

Related Skills

Explore More Software Engineering Skills→
rai-wtnbrai-wtnb
1

cohesion-coupling

Identify module boundaries to maximize cohesion and minimize coupling.

Community
Advanced
mihaicrisan04mihaicrisan04

shadcn-baseui

Enforce Base UI `render` prop usage for shadcn/ui components.

Community
Intermediate
williamzujkowskiwilliamzujkowski
6

Frontend Framework Advisor

Designs frontend architecture plans covering state management, performance patterns, and testing strategy for React, Vue, iOS, Android, and React Native projects.

Community
Advanced
franzosterkampfranzosterkamp

shadcn-ui

Create accessible React UI components for Next.js with Tailwind CSS.

Community
Intermediate