frontend-components

Name: frontend-components
Availability: InStock
Author: Aexol

Organize frontend components into atoms, molecules, organisms, and global folders with barrel exports.

27|2|Updated Oct 10, 2023

Search Tags:#ui #architecture #frontend #components #design-system #atomic-design

Ready to run

npx skills add https://github.com/aexol-studio/axolotl --skill frontend-components-aexol-studio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-components
Source: https://github.com/aexol-studio/axolotl/tree/main/examples/new/.opencode/skills/frontend-components
Command: npx skills add https://github.com/aexol-studio/axolotl --skill frontend-components-aexol-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to keep UI code scalable and consistent as projects grow. This skill prescribes an atomic design-inspired structure (atoms, molecules, organisms, global) and clear splitting, naming, and export conventions to maintain a cohesive design system across routes.

Core Features & Use Cases

Atomic design structure with atoms, molecules, organisms, and global components in a well-defined folder layout and barrel exports
Clear guidelines for file splitting, sizing targets (~300 lines per file, hard max 400)
Route-scoped vs global components with co-location and promotion rules

Quick Start

Organize your frontend by placing components in atoms, molecules, organisms, and global folders with barrel exports and keep main files near 300 lines, splitting only when necessary.

Frequently Asked Questions about frontend-components

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

FAQPage Schema

How do I organize frontend components for better scalability?▼

Organize frontend components using atomic design by classifying them into atoms, molecules, organisms, and global folders, using barrel exports to maintain a cohesive UI architecture.

What is the best way to structure a large React UI codebase?▼

Structure large React-like UI codebases by applying atomic design principles, enforcing a defined folder layout with barrel exports, and keeping route-scoped components separate from global ones.

How many lines of code should a UI component file have before splitting?▼

UI component files should target around 300 lines, with a hard maximum of 400 lines, splitting them into smaller files only when necessary to maintain codebase maintainability.

Can I use atomic design for route-scoped and global components?▼

Yes, atomic design supports both route-scoped and global components by providing clear co-location and promotion rules to move local UI elements into the global design system when needed.

When should I not use atomic design for frontend architecture?▼

Atomic design may be unnecessary for small frontend applications with minimal UI components, as the overhead of organizing atoms, molecules, and organisms outweighs the maintainability benefits.

Does the frontend-components atomic design structure work with React-like frameworks?▼

Yes, the atomic design structure applies to UI-heavy applications across React-like frameworks, guiding component classification and file-splitting conventions to ensure consistent UI architecture.