skills.rest
cchrisv
cchrisvCOMMUNITY
Explore all skills by this author →
GitHub

building-ui-bundle-frontend

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

Updated Apr 19, 2026
Search Tags:#workflow#ui#frontend#react#tailwind#shadcn#ui-bundle
One-click install
npx skills add https://github.com/cchrisv/professorFlowVisualPicker --skill building-ui-bundle-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-ui-bundle-frontend
Source: https://github.com/cchrisv/professorFlowVisualPicker/tree/main/.agents/skills/building-ui-bundle-frontend
Command: npx skills add https://github.com/cchrisv/professorFlowVisualPicker --skill building-ui-bundle-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces project-specific conventions for editing existing UI bundle frontends to prevent incorrect imports, broken routing, and drift from established app structure.

Core Features & Use Cases

  • Ensures edits are performed within existing UI bundle projects only, when appLayout.tsx, routes.tsx, src/pages/, src/components/, or global.css are present.
  • Aligns changes with the app shell conventions (appLayout.tsx, shadcn/ui components, Tailwind CSS, Salesforce base-path routing) and warns against modifying structural rules for new apps.

Quick Start

Activate this skill when the project contains appLayout.tsx, routes.tsx, src/pages/, src/components/, or global.css, and use it before editing any files under uiBundles/*/src/.

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 maintain project conventions when editing a React UI bundle?▼

Maintaining project conventions involves standardizing imports, routing, and file structure according to the app shell (appLayout.tsx), shadcn/ui components, Tailwind CSS, and Salesforce base-path routing.

What's the best way to structure routing and imports in an existing UI bundle frontend?▼

The best way to structure routing and imports is to align changes with the UI bundle's shell conventions, specifically using appLayout.tsx, routes.tsx, and Salesforce base-path routing to prevent drift from the established app structure.

Can I use shadcn/ui and Tailwind CSS when modifying Salesforce base-path routing?▼

Yes, you can use shadcn/ui and Tailwind CSS when modifying Salesforce base-path routing, as the skill enforces alignment with these specific styling and component libraries to ensure structural consistency.

When do I need to enforce UI bundle conventions for frontend modifications?▼

You need to enforce UI bundle conventions when your repository contains appLayout.tsx, routes.tsx, src/pages/, src/components/, or global.css, and you are preparing to edit pages, components, layouts, styling, or navigation.

Why do my UI bundle frontend edits cause broken routing and incorrect imports?▼

Broken routing and incorrect imports occur when edits drift from the established app structure, which can be prevented by standardizing file structure and imports according to the appLayout.tsx shell and routes.tsx conventions.

Related Skills

Explore More Software Engineering Skills→
forcedotcomforcedotcom
803

building-ui-bundle-frontend

Enforce routing, styling, and module restrictions for Salesforce UI bundle frontend modifications.

Official
Intermediate
agentconfigagentconfig
7

create-component

Scaffold Preact components with standardized folder layouts and index exports.

Official
Intermediate
SSujitXSSujitX
11

UI Design System

Standardize UI development with Tailwind CSS, Shadcn UI, and custom theming.

Community
Intermediate
XiaoPuOuOXiaoPuOuO
1

coding-standards

Enforce universal coding standards across TypeScript and JavaScript projects.

Community
Advanced