skills.rest
Adrienenjalbert
AdrienenjalbertCOMMUNITY
Explore all skills by this author →
GitHub

component-placement

Allocate new components to architectural layers using defined placement rules.

Updated Aug 27, 2026
Search Tags:#architecture#refactor#best-practices#code-generation#layers#ui-components#component-placement
One-click install
npx skills add https://github.com/Adrienenjalbert/flex-carrer-hub --skill component-placement
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-placement
Source: https://github.com/Adrienenjalbert/flex-carrer-hub/tree/main/.agents/skills/component-placement
Command: npx skills add https://github.com/Adrienenjalbert/flex-carrer-hub --skill component-placement

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps engineering teams decide where to place new components across a multi-layer codebase to maintain architectural consistency and reusability.

Core Features & Use Cases

  • Decide whether a new component belongs in src/features/<feature>/..., src/features/career-hub/shared/..., src/components/common/..., src/components/ui/..., or src/shared/...
  • Enforce the defined placement order and layer rules to maintain architecture consistency and reuse.
  • Provide standard naming patterns and guardrails to avoid forbidden patterns when placing or refactoring components.

Quick Start

Select the correct architectural layer for a new or moved component following the defined placement order.

Frequently Asked Questions about component-placement

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

FAQPage Schema
How do I decide where to place a new UI component in a multi-layer architecture?▼

When refactoring components, apply defined layer rules and naming patterns to move UI elements to the correct architectural layer, avoiding forbidden patterns and ensuring structural organization remains consistent across the codebase.

What is the correct placement order for shared vs feature-specific UI components?▼

The correct placement order distinguishes shared components from feature-specific ones by applying layer rules that route reusable UI elements to common directories and feature-bound elements to their respective feature paths.

How do I enforce naming patterns and guardrails when introducing new UI components?▼

Enforce naming patterns and guardrails by applying predefined rules during code generation and component placement, checking against forbidden patterns to ensure new UI elements meet architectural standards before integration.

Does this component placement approach work for both code generation and architectural refactoring?▼

Yes, component placement applies to both code generation and architectural refactoring, providing layer rules and reuse guidelines that dictate where new or moved UI elements should reside across the codebase structure.

What are the limitations of using architectural layer rules for component organization?▼

Layer rules for component organization rely on a strict multi-layer directory structure; if the codebase lacks defined feature, shared, and primitive UI layers, the placement order and reuse rules cannot be consistently applied.

Related Skills

Explore More Software Engineering Skills→
liminal-ailiminal-ai

plugin-structure

Guide Claude Code plugin design with directory, manifest, and auto-discovery conventions.

Official
Intermediate
dirnbauerdirnbauer
33

vercel-react-best-practices

Apply 57 performance rules across 8 categories to React and Next.js code.

Community
Basic
takusaotometakusaotome
5

safe-by-default-architect

Convert recurring unsafe implementation patterns into safe architectural defaults and static analysis rules.

Community
Advanced
eugenelimeugenelim
15

new-package

Scaffold a new shared package directory in a monorepo.

Community
Intermediate