skills.rest
Collabalist
CollabalistCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Collabalist/SFDC --skill building-ui-bundle-frontend-collabalist
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
cchrisvcchrisv

building-ui-bundle-frontend

Enforce project-specific conventions when editing existing UI bundle frontends.

Community
Advanced
raugadhraugadh
63

tailwindcss-development

Style components with Tailwind CSS v4 utilities for responsive design and dark mode.

Community
Intermediate
linnefromicelinnefromice

frontend-patterns

Standardize React/Next.js frontend architecture with reusable TypeScript patterns.

Community
Intermediate
CollabalistCollabalist

building-ui-bundle-app

Automate creation, building, and deployment of Salesforce React UI bundle applications.

Community
Advanced