building-ui-bundle-frontend

Manage UI layout and navigation in appLayout.tsx and routes.tsx with Tailwind CSS and TypeScript.

Updated Jun 1, 2026

Search Tags:#typescript #react #ui development #ui bundle #application layout

Ready to run

npx skills add https://github.com/Collabalist/SFDC --skill building-ui-bundle-frontend-collabalist

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: building-ui-bundle-frontend
Source: https://github.com/Collabalist/SFDC/tree/main/.agents/skills/building-ui-bundle-frontend
Command: npx skills add https://github.com/Collabalist/SFDC --skill building-ui-bundle-frontend-collabalist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures consistency and efficiency in UI development for existing applications by providing project-specific conventions, layout management, and component guidelines.

Core Features & Use Cases

Consistent UI Development: Applies conventions for layout, styling, and navigation that are critical for maintaining app integrity.
Layout and Navigation Management: Facilitates updates to appLayout.tsx and routes.tsx to reflect changes in the UI.
Component Guidelines: Standardizes component structure, state management, and styling to align with best practices.

Quick Start

Activate the building-ui-bundle-frontend skill before making any visual or UI changes to an existing app. This ensures correct imports, routing, and project structure are maintained.

Frequently Asked Questions about building-ui-bundle-frontend

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

FAQPage Schema

How do I manage application layout and navigation in an existing React app?▼

To manage application layout and navigation in an existing React app, you should update the appLayout.tsx file for structural changes and routes.tsx for navigation. These conventions ensure UI consistency and maintain routing integrity using React Router.

What are the best practices for standardizing component structure and state management in TypeScript?▼

The best practices for standardizing component structure and state management involve following TypeScript standards for type safety and code maintainability. This approach standardizes component architecture and styling to align with Salesforce UI Bundle guidelines.

How do I apply Tailwind CSS styling conventions to an existing UI bundle?▼

To apply Tailwind CSS styling conventions to an existing UI bundle, utilize the framework for styling while adhering to project-specific guidelines. This ensures consistent UI development and maintains app integrity across visual updates.

Do I need to understand React Router to update navigation in an existing application layout?▼

Yes, you need to understand React Router to update navigation in an existing application layout. This Skill requires knowledge of React Router to properly manage routes.tsx changes and ensure navigation updates function correctly.

Why does updating UI components in existing apps require specific layout and routing conventions?▼

Updating UI components in existing apps requires specific layout and routing conventions to maintain app integrity and consistency. Applying project-specific conventions for appLayout.tsx and routes.tsx ensures efficient UI development without breaking existing structures.